.dashboard-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: #1f2937; }
.dashboard-card { border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: none; }
.dashboard-card .card-header { background: #fff; border-bottom: 1px solid #f3f4f6; font-weight: 700; color: #374151; }
.info-row { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid #f3f4f6; }
.info-row:last-child { border-bottom: none; }
.info-row .key { color: #6b7280; font-size: .9rem; }
.info-row .val { font-weight: 600; color: #111827; text-align: right; max-width: 60%; }
#locationMap { height: 320px; border-radius: 12px; width: 100%; }
.status-pill { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-weight: 700; font-size: .75rem; }

/* Summary / list */
.summary-card { border-radius: 12px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.summary-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; margin-right: 1rem; }
.summary-icon.bg-lightblue { background: #3b82f6; }
.summary-icon.bg-success { background: #10b981; }
.summary-icon.bg-info { background: #06b6d4; }
.summary-icon.bg-danger { background: #ef4444; }
.summary-number { font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: #111827; }
.summary-label { font-size: .8rem; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; }

.ont-table { font-size: .88rem; }
.ont-table thead th { border-top: none; border-bottom: 2px solid #e5e7eb; background: #f9fafb; color: #374151; font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .4px; white-space: nowrap; }
.ont-table tbody tr { transition: background .15s; }
.ont-table tbody tr:hover { background: #f3f4f6; }
.ont-table td { vertical-align: middle; border-bottom: 1px solid #f3f4f6; padding: .85rem .75rem; }
.ont-name { font-weight: 700; color: #111827; }
.ont-phone { font-size: .78rem; color: #6b7280; }
.ont-sn { font-size: .78rem; color: #6b7280; }
.ont-user { font-size: .8rem; color: #2563eb; }
.ont-packet { font-weight: 600; color: #374151; }
.search-ont { width: 220px; }

.dot-status { display: inline-flex; align-items: center; gap: 6px; padding: .3rem .6rem; border-radius: 999px; font-weight: 700; font-size: .72rem; }
.dot-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.mr-active { background: #d1fae5; color: #065f46; }
.mr-active::before { background: #10b981; }
.mr-warning { background: #fef3c7; color: #92400e; }
.mr-warning::before { background: #f59e0b; }
.mr-danger { background: #fee2e2; color: #991b1b; }
.mr-danger::before { background: #ef4444; }
.mr-empty { background: #f3f4f6; color: #9ca3af; }
.mr-empty::before { background: #d1d5db; }
.acs-online { background: #dbeafe; color: #1e40af; }
.acs-online::before { background: #3b82f6; }
.acs-offline { background: #f3f4f6; color: #4b5563; }
.acs-offline::before { background: #d1d5db; }
.conn-pppoe { background: #d1fae5; color: #065f46; }
.conn-pppoe::before { background: #10b981; }
.conn-hotspot { background: #dbeafe; color: #1e40af; }
.conn-hotspot::before { background: #3b82f6; }
.conn-acs { background: #e0e7ff; color: #3730a3; }
.conn-acs::before { background: #6366f1; }
.conn-offline { background: #fee2e2; color: #991b1b; }
.conn-offline::before { background: #ef4444; }
.row-billing { background: #fff7ed; }
.row-offline { background: #fef2f2; }

/* Detail page */
.customer-header-card { border-radius: 16px; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-top: 10px; }
.customer-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; margin-right: 1.25rem; flex-shrink: 0; }
.customer-name { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; color: #111827; }
.customer-sub { color: #6b7280; font-size: .9rem; }
.customer-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-soft { display: inline-flex; align-items: center; gap: 5px; padding: .35rem .7rem; border-radius: 999px; font-weight: 700; font-size: .72rem; }
.badge-soft.ppp { background: #e0e7ff; color: #4338ca; }
.badge-soft.hotspot { background: #dbeafe; color: #1e40af; }
.badge-soft.active { background: #d1fae5; color: #065f46; }
.badge-soft.paid { background: #dbeafe; color: #1e40af; }
.badge-soft.online { background: #d1fae5; color: #065f46; }
.badge-soft.offline { background: #fee2e2; color: #991b1b; }
.badge-soft.warning { background: #fef3c7; color: #92400e; }
.badge-soft.danger { background: #fee2e2; color: #991b1b; }
.customer-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.stat-card { border-radius: 14px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; margin-right: .9rem; }
.stat-icon.bg-success { background: #10b981; }
.stat-icon.bg-info { background: #06b6d4; }
.stat-icon.bg-warning { background: #f59e0b; }
.stat-icon.bg-purple { background: #8b5cf6; }
.stat-label { font-size: .75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .4px; }
.stat-value { font-size: 1.15rem; font-weight: 800; color: #111827; }
.stat-sub { font-size: .78rem; color: #6b7280; }

.tabbed-card { border-radius: 16px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.ont-tabs { border-bottom: 1px solid #f3f4f6; }
.ont-tabs .nav-link { color: #6b7280; font-weight: 600; font-size: .88rem; padding: .9rem 1.1rem; border: none; border-bottom: 2px solid transparent; }
.ont-tabs .nav-link.active { color: #3b82f6; border-bottom-color: #3b82f6; background: transparent; }
.ont-tabs .nav-link:hover { color: #3b82f6; }

.form-section { background: #f9fafb; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.form-section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: #9ca3af; font-weight: 700; margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-bottom: 1rem; }
.form-group { flex: 1 1 300px; padding: 0 .5rem; margin-bottom: 1rem; }
.form-group label { display: block; font-size: .8rem; color: #6b7280; margin-bottom: .35rem; }
.form-control-plaintext { display: block; width: 100%; padding: .5rem .75rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; font-weight: 600; color: #111827; min-height: 38px; }