/* ═══════════════════════════════════════════════════════
   KOMPAS SOLAR MANAGER — Premium Design System v2.0
   Typography: Plus Jakarta Sans
   Style: Enterprise SaaS, Dark-light hybrid
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand */
  --teal:        #00A0B0;
  --teal-dark:   #007F8C;
  --teal-deeper: #005F6B;
  --teal-light:  #E8F8FA;
  --teal-mid:    #CCF0F4;
  --orange:      #E87722;
  --orange-dark: #C45E10;
  --orange-light:#FEF0E6;
  --yellow:      #F7C324;

  /* Neutrals */
  --black:    #070B12;
  --navy:     #0D1520;
  --dark:     #111827;
  --gray-900: #1F2937;
  --gray-800: #2D3748;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50:  #F9FAFB;
  --white:    #FFFFFF;

  /* Semantic */
  --success:      #10B981;
  --success-light:#D1FAE5;
  --danger:       #EF4444;
  --danger-light: #FEE2E2;
  --warning:      #F59E0B;
  --warning-light:#FEF3C7;
  --info:         #3B82F6;
  --info-light:   #DBEAFE;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.16);
  --shadow-teal:0 8px 24px rgba(0,160,176,0.25);
  --shadow-orange:0 8px 24px rgba(232,119,34,0.25);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl:24px;
  --r-full:9999px;

  /* Transitions */
  --t-fast:  0.12s ease;
  --t-base:  0.2s ease;
  --t-slow:  0.35s ease;

  /* Sidebar */
  --sidebar-w: 256px;
  --topbar-h:  64px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Plus Jakarta Sans', 'Inter', sans-serif;
  background:var(--gray-50);
  color:var(--gray-900);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
input, button, select, textarea { font-family:inherit; }
a { text-decoration:none; color:inherit; }

/* ── SIDEBAR ── */
.sidebar {
  position:fixed; left:0; top:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--navy);
  display:flex; flex-direction:column;
  z-index:100;
  border-right:1px solid rgba(255,255,255,0.04);
}
.sidebar-brand {
  padding:20px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; gap:12px;
}
.sidebar-brand img {
  width:40px; height:40px; object-fit:contain; border-radius:10px;
  background:rgba(255,255,255,0.05); padding:4px;
}
.sidebar-brand-text h3 {
  color:var(--white); font-size:15px; font-weight:700; line-height:1.2;
}
.sidebar-brand-text p {
  color:rgba(255,255,255,0.35); font-size:11px; margin-top:1px;
}

/* Nav sections */
.nav-section { padding:16px 12px 8px; }
.nav-section-label {
  font-size:10px; font-weight:700; color:rgba(255,255,255,0.25);
  text-transform:uppercase; letter-spacing:1.2px;
  padding:0 8px; margin-bottom:6px;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-md);
  color:rgba(255,255,255,0.5); font-size:13.5px; font-weight:500;
  cursor:pointer; transition:all var(--t-base);
  border:none; background:transparent; width:100%; text-align:left;
  margin-bottom:2px; position:relative;
}
.nav-item:hover { color:var(--white); background:rgba(255,255,255,0.06); }
.nav-item.active {
  color:var(--white); background:rgba(0,160,176,0.15);
}
.nav-item.active::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:3px; background:var(--teal); border-radius:0 2px 2px 0;
}
.nav-icon { font-size:17px; width:22px; text-align:center; flex-shrink:0; }
.nav-badge {
  margin-left:auto; background:var(--orange); color:white;
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:var(--r-full);
  line-height:1.4;
}

/* Sidebar user */
.sidebar-user {
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; gap:10px; margin-top:auto;
}
.user-avatar {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--teal), var(--orange));
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.user-info h4 { color:var(--white); font-size:13px; font-weight:600; }
.user-info p { color:rgba(255,255,255,0.35); font-size:11px; }
.logout-icon {
  margin-left:auto; color:rgba(255,255,255,0.25);
  cursor:pointer; font-size:18px; transition:color var(--t-fast);
  background:none; border:none; padding:4px;
}
.logout-icon:hover { color:var(--danger); }

/* ── MAIN CONTENT ── */
.main { margin-left:var(--sidebar-w); min-height:100vh; }

/* ── TOPBAR ── */
.topbar {
  height:var(--topbar-h);
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow-xs);
}
.topbar-left { display:flex; align-items:center; gap:16px; }
.topbar-title { font-size:18px; font-weight:700; color:var(--gray-900); }
.topbar-subtitle { font-size:12px; color:var(--gray-500); margin-top:1px; }
.topbar-right { display:flex; align-items:center; gap:10px; }

/* ── PAGE CONTENT ── */
.page { padding:28px; }

/* ── STAT CARDS ── */
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;
}
.stat-card {
  background:var(--white); border-radius:var(--r-xl);
  padding:20px; border:1px solid var(--gray-200);
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--t-base), transform var(--t-base);
  position:relative; overflow:hidden;
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--card-color, var(--teal));
}
.stat-card-icon {
  width:44px; height:44px; border-radius:var(--r-md);
  background:var(--card-icon-bg, var(--teal-light));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:14px;
}
.stat-card-value { font-size:28px; font-weight:800; color:var(--gray-900); line-height:1; }
.stat-card-label { font-size:13px; color:var(--gray-500); margin-top:4px; font-weight:500; }
.stat-card-change { font-size:12px; font-weight:600; margin-top:8px; display:flex; align-items:center; gap:4px; }

/* ── CARDS ── */
.card {
  background:var(--white); border-radius:var(--r-xl);
  border:1px solid var(--gray-200); box-shadow:var(--shadow-xs);
  overflow:hidden; margin-bottom:20px;
}
.card-header {
  padding:18px 22px; border-bottom:1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:space-between;
}
.card-header-left { display:flex; align-items:center; gap:10px; }
.card-header-icon {
  width:36px; height:36px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.card-title { font-size:15px; font-weight:700; color:var(--gray-900); }
.card-subtitle { font-size:12px; color:var(--gray-500); margin-top:1px; }
.card-body { padding:22px; }

/* ── TABLES ── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead tr { background:var(--gray-50); }
th {
  padding:11px 16px; text-align:left;
  font-size:11px; font-weight:700; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:0.6px;
  white-space:nowrap;
}
td {
  padding:13px 16px; font-size:13.5px;
  border-top:1px solid var(--gray-100); vertical-align:middle;
  color:var(--gray-700);
}
tbody tr { transition:background var(--t-fast); }
tbody tr:hover td { background:var(--gray-50); }

/* ── BADGES ── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:600; line-height:1;
}
.badge-success { background:var(--success-light); color:#065F46; }
.badge-danger  { background:var(--danger-light);  color:#991B1B; }
.badge-warning { background:var(--warning-light); color:#92400E; }
.badge-info    { background:var(--info-light);    color:#1E40AF; }
.badge-teal    { background:var(--teal-light);    color:var(--teal-deeper); }
.badge-orange  { background:var(--orange-light);  color:var(--orange-dark); }
.badge-gray    { background:var(--gray-100);      color:var(--gray-600); }
.badge-dot::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; display:inline-block;
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--r-md);
  font-size:13.5px; font-weight:600; cursor:pointer;
  border:none; font-family:inherit; transition:all var(--t-fast);
  white-space:nowrap; line-height:1;
}
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--teal); color:white; box-shadow:0 2px 8px rgba(0,160,176,0.3); }
.btn-primary:hover { background:var(--teal-dark); box-shadow:var(--shadow-teal); }
.btn-orange { background:var(--orange); color:white; box-shadow:0 2px 8px rgba(232,119,34,0.3); }
.btn-orange:hover { background:var(--orange-dark); }
.btn-success { background:var(--success); color:white; }
.btn-danger  { background:var(--danger);  color:white; }
.btn-outline {
  background:transparent; border:1.5px solid var(--gray-300); color:var(--gray-700);
}
.btn-outline:hover { border-color:var(--teal); color:var(--teal); background:var(--teal-light); }
.btn-ghost { background:transparent; color:var(--gray-600); }
.btn-ghost:hover { background:var(--gray-100); color:var(--gray-900); }
.btn-sm { padding:7px 13px; font-size:12.5px; border-radius:var(--r-sm); }
.btn-xs { padding:5px 10px; font-size:11.5px; border-radius:var(--r-xs); }
.btn-icon { padding:9px; border-radius:var(--r-md); }
.btn-icon.btn-sm { padding:7px; }
.btn-block { width:100%; justify-content:center; }
.btn:disabled { opacity:0.55; cursor:not-allowed; transform:none !important; }

/* ── FORMS ── */
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form-full { grid-column:1/-1; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label {
  font-size:12px; font-weight:700; color:var(--gray-700);
  text-transform:uppercase; letter-spacing:0.4px;
}
.form-input, .form-select, .form-textarea {
  padding:10px 14px;
  border:1.5px solid var(--gray-200);
  border-radius:var(--r-md); font-size:14px;
  color:var(--gray-900); background:var(--white);
  outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast);
  font-family:inherit;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,160,176,0.1);
}
.form-input::placeholder { color:var(--gray-400); }
.form-textarea { min-height:80px; resize:vertical; }
.form-hint { font-size:11.5px; color:var(--gray-500); }

/* ── SEARCH ── */
.search-wrap { position:relative; }
.search-wrap .search-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--gray-400); font-size:15px; pointer-events:none;
}
.search-input {
  padding:9px 14px 9px 36px;
  border:1.5px solid var(--gray-200); border-radius:var(--r-md);
  font-size:13.5px; outline:none; background:var(--gray-50);
  color:var(--gray-900); font-family:inherit;
  transition:border-color var(--t-fast);
  width:220px;
}
.search-input:focus { border-color:var(--teal); background:var(--white); width:260px; }

/* ── MODALS ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.45);
  z-index:200; display:none; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex; animation:fadeIn var(--t-base) both; }
.modal {
  background:var(--white); border-radius:var(--r-2xl);
  width:100%; max-width:580px; max-height:92vh; overflow-y:auto;
  box-shadow:var(--shadow-xl);
  animation:slideUp var(--t-slow) both;
}
.modal-header {
  padding:20px 24px; border-bottom:1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--white); z-index:10;
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
}
.modal-title { font-size:17px; font-weight:700; }
.modal-close {
  width:32px; height:32px; border-radius:var(--r-sm);
  background:var(--gray-100); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--gray-500); transition:all var(--t-fast);
}
.modal-close:hover { background:var(--danger-light); color:var(--danger); }
.modal-body { padding:24px; }
.modal-footer {
  padding:16px 24px; border-top:1px solid var(--gray-100);
  display:flex; gap:10px; justify-content:flex-end;
  position:sticky; bottom:0; background:var(--white);
  border-radius:0 0 var(--r-2xl) var(--r-2xl);
}

/* ── SECTION DIVIDER ── */
.section-divider {
  font-size:11px; font-weight:700; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:0.6px;
  padding:16px 0 10px; border-bottom:1px solid var(--gray-100); margin-bottom:16px;
}

/* ── TABS ── */
.tab-group {
  display:flex; gap:2px; background:var(--gray-100);
  padding:4px; border-radius:var(--r-lg);
}
.tab-btn {
  padding:8px 18px; border-radius:var(--r-md);
  font-size:13px; font-weight:600; cursor:pointer;
  border:none; background:transparent; color:var(--gray-500);
  font-family:inherit; transition:all var(--t-fast); white-space:nowrap;
}
.tab-btn.active {
  background:var(--white); color:var(--teal);
  box-shadow:var(--shadow-sm);
}
.tab-btn:hover:not(.active) { color:var(--gray-700); }

/* ── ACTION ROW ── */
.action-row { display:flex; gap:6px; flex-wrap:wrap; }

/* ── PROGRESS ── */
.progress-bar-wrap { height:6px; background:var(--gray-200); border-radius:3px; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:56px 24px; }
.empty-state-icon { font-size:52px; margin-bottom:14px; }
.empty-state-title { font-size:17px; font-weight:700; color:var(--gray-700); margin-bottom:6px; }
.empty-state-desc { font-size:13.5px; color:var(--gray-500); max-width:280px; margin:0 auto; line-height:1.6; }

/* ── LOADING ── */
.loading { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--gray-400); gap:10px; font-size:14px; }
.spinner {
  width:20px; height:20px; border-radius:50%;
  border:2.5px solid var(--gray-200); border-top-color:var(--teal);
  animation:spin 0.75s linear infinite; flex-shrink:0;
}
.spinner-sm { width:14px; height:14px; border-width:2px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── MOBILE TOPBAR BACK BUTTON ── */
.mobile-back { display:none; }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  :root { --sidebar-w:220px; }
}
@media(max-width:768px) {
  :root { --topbar-h:56px; }
  .sidebar { display:none; }
  .main { margin-left:0 !important; }
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .form-grid-2, .form-grid-3 { grid-template-columns:1fr !important; }
  .page { padding:16px; }
  .topbar { padding:0 16px; }
  .topbar-title { font-size:16px; }
  .card-header { padding:14px 16px; flex-wrap:wrap; gap:10px; }
  .card-body { padding:16px; }
  .modal { border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:95vh; }
  .modal-overlay { align-items:flex-end; padding:0; }
  .tab-group { overflow-x:auto; }
  .mobile-back { display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--gray-900); color:rgba(255,255,255,0.7); font-size:13px; cursor:pointer; border:none; font-family:inherit; width:100%; }
  .mobile-back:hover { color:white; }
  td, th { padding:10px 12px !important; font-size:12.5px !important; }
  .search-input { width:100% !important; }
  .btn-sm { padding:6px 11px; font-size:12px; }
}
@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr 1fr !important; }
  .action-row { flex-direction:column; }
  .tab-btn { padding:7px 12px; font-size:12px; }
}


/* ── LOGO TRANSPARENCY SYSTEM ── */
/* On dark backgrounds (sidebar, splash, mobile drawer) */
.sidebar-brand img,
.mobile-drawer-header img,
.topnav-logo img {
  mix-blend-mode: screen !important;
  filter: brightness(1.1) contrast(1.05) !important;
}
/* On light backgrounds (login, signup header) */
.signup-header img,
.brand img {
  mix-blend-mode: multiply !important;
}
/* In print templates */
.print-logo img {
  mix-blend-mode: multiply !important;
}

/* ── HORIZONTAL SCROLL FOR TABLES ON MOBILE ── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  display: block;
}
.table-scroll table {
  min-width: 560px;
  width: 100%;
  border-collapse: collapse;
}
/* Scrollbar styling */
.table-scroll::-webkit-scrollbar { height: 4px; }
.table-scroll::-webkit-scrollbar-track { background: #F3F4F6; border-radius: 2px; }
.table-scroll::-webkit-scrollbar-thumb { background: #00A0B0; border-radius: 2px; }
@media(max-width: 768px) {
  .table-scroll table { min-width: 500px; font-size: 12px; }
  .table-scroll table th,
  .table-scroll table td { padding: 8px 10px; white-space: nowrap; }
}