.brand-link { background: linear-gradient(135deg, #1e3c72, #2a5298); }
    .nav-sidebar .nav-item .nav-link.active { background: linear-gradient(135deg, #1e3c72, #2a5298); }
    .content-wrapper { background: #f4f6f9; }
    
    .status-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: inline-block;
    }
    .status-dot.online { background: #28a745; box-shadow: 0 0 8px rgba(40,167,69,0.6); }
    .status-dot.offline { background: #dc3545; }
    .status-dot.warning { background: #ffc107; }
    
    #ontTable tbody tr { cursor: pointer; }
    #ontTable tbody tr:hover { background-color: #f8f9fa; }
    
    .detail-header-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      margin-bottom: 15px;
    }
    .detail-header-card .value {
      font-size: 1.5rem;
      font-weight: 700;
      margin: 8px 0;
    }
    .detail-header-card .label {
      color: #6c757d;
      font-size: 0.85rem;
      text-transform: uppercase;
    }
    .detail-header-card .icon {
      font-size: 1.8rem;
      margin-bottom: 5px;
    }
    
    .wan-card {
      border-radius: 10px;
      margin-bottom: 15px;
      overflow: hidden;
    }
    .wan-card .wan-header {
      padding: 12px 15px;
      color: white;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .wan-card .wan-body {
      background: #f8f9fa;
      padding: 15px;
    }
    .wan-card .wan-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px solid #e9ecef;
      font-size: 0.9rem;
    }
    .wan-card .wan-row:last-child { border-bottom: none; }
    .wan-card .wan-label { color: #6c757d; }
    .wan-card .wan-value { font-weight: 500; color: #212529; }
    
    .bind-box {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.8rem;
      font-weight: 500;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    .bind-box.checked { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
    .bind-box.unchecked { background: #f8f7f7; color: #adb5bd; border: 1px solid #e2e3e5; text-decoration: line-through; }
    
    .badge-service-internet { background: #17a2b8; color: white; }
    .badge-service-tr069 { background: #6f42c1; color: white; }
    .badge-service-other { background: #6c757d; color: white; }

    /* Compact layout */
    .content-header { padding: 10px 0; }
    .content { padding-top: 5px; }
    .card { margin-bottom: 10px; }
    
    /* Custom stat cards */
    .stats-row { margin-bottom: 10px; }
    .stat-card {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      border-radius: 10px;
      color: white;
      margin-bottom: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      overflow: hidden;
      position: relative;
    }
    .stat-card::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 40%;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 100%);
      pointer-events: none;
    }
    .stat-total { background: linear-gradient(135deg, #17a2b8, #138496); }
    .stat-online { background: linear-gradient(135deg, #28a745, #1e7e34); }
    .stat-offline { background: linear-gradient(135deg, #ffc107, #e0a800); color: #212529; }
    .stat-olt { background: linear-gradient(135deg, #007bff, #0056b3); }
    .stat-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      margin-right: 12px;
      flex-shrink: 0;
    }
    .stat-body { flex: 1; min-width: 0; }
    .stat-value {
      font-size: 1.7rem;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 2px;
    }
    .stat-label {
      font-size: 0.8rem;
      opacity: 0.9;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .card-header { padding: 10px 15px; }
    .card-body { padding: 10px; }
    .table-sm th, .table-sm td { padding: 6px 8px; }
    #ontTable_wrapper .row:first-child { margin-bottom: 8px; }
    #ontTable_wrapper .dataTables_length,
    #ontTable_wrapper .dataTables_filter { margin-bottom: 5px; }
    #ontTable { font-size: 0.9rem; }