/* Figma-inspired Enterprise Network Management Dashboard layer */
:root{
  --figma-bg:#FFFFFF;
  --figma-panel:#FFFFFF;
  --figma-panel-soft:#F7F1FA;
  --figma-sidebar:#A7D9FF;
  --figma-sidebar-2:#3AA18F;
  --figma-line:#D9F2FF;
  --figma-text:#111827;
  --figma-muted:#4B5563;
  --figma-cyan:#00008E;
  --figma-blue:#0EA5E9;
  --figma-teal:#3AA18F;
  --figma-green:#3AA18F;
  --figma-orange:#ED8D3F;
  --figma-red:#EF4444;
  --figma-shadow:0 18px 46px -34px rgba(14,165,233,.30);
}

body{
  background:
    radial-gradient(900px 420px at 6% -16%, rgba(125,211,252,.36), transparent 64%),
    radial-gradient(780px 360px at 104% 0%, rgba(58,161,143,.16), transparent 66%),
    linear-gradient(135deg,#FFFFFF 0%,var(--figma-bg) 100%);
  color:var(--figma-text);
}

.sidebar{
  background:
    radial-gradient(420px 320px at 16% -6%, rgba(125,211,252,.36), transparent 64%),
    radial-gradient(360px 300px at 100% 34%, rgba(0,0,142,.24), transparent 68%),
    linear-gradient(180deg,#A7D9FF 0%,#0EA5E9 46%,#3AA18F 100%);
  border-right:1px solid rgba(255,255,255,.25);
  box-shadow:18px 0 50px -34px rgba(14,165,233,.74);
}

.sidebar-logo,
.profile-icon,
.sidebar-icon,
.theme-toggle-icon{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 12px 26px -20px rgba(56,189,248,.72);
}

.sidebar-item{
  border:1px solid transparent;
}

.sidebar-item:hover,
.sidebar-item.active{
  background:rgba(0,0,142,.14);
  border-color:rgba(0,0,142,.22);
}

.admin-header{
  padding:4px 2px 16px;
}

.admin-header h2{
  color:var(--figma-text);
  font-size:22px;
  letter-spacing:-.035em;
}

.admin-subtitle{
  color:var(--figma-muted);
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.payment-card,
.center-card,
.modal,
.package-add-card,
.master-entry-card,
.settings-logo-row{
  border:1px solid rgba(216,232,239,.92);
  background:
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(247,252,255,.94)),
    radial-gradient(420px 220px at 100% 0%, rgba(56,189,248,.12), transparent 70%);
  box-shadow:var(--figma-shadow);
  backdrop-filter:blur(12px);
}

.payment-summary.ringkasan-card{
  position:relative;
  overflow:hidden;
}

.payment-summary.ringkasan-card::after{
  content:"";
  position:absolute;
  inset:auto -80px -120px auto;
  width:320px;
  height:260px;
  border-radius:60px;
  background:linear-gradient(145deg,rgba(56,189,248,.16),rgba(45,212,191,.10));
  transform:rotate(18deg);
  pointer-events:none;
}

.panel-section-title,
.summary-metric-grid,
.summary-chart-wrap,
.dashboard-lower-grid{
  position:relative;
  z-index:1;
}

.title-wrap{
  color:var(--figma-text);
  font-size:19px;
  font-weight:900;
}

.network-summary-icon,
.summary-metric-icon,
.quick-action-icon{
  background:linear-gradient(135deg,#E0F7FF 0%,#D8FBF5 100%);
  color:#075985;
}

.summary-metric-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.summary-metric-card{
  min-height:126px;
  border-left:0;
  border-top:1px solid rgba(216,232,239,.92);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,252,255,.92)),
    radial-gradient(210px 140px at 100% 0%, rgba(56,189,248,.14), transparent 68%);
}

.summary-metric-card.blue{box-shadow:inset 0 4px 0 var(--figma-blue),var(--figma-shadow);}
.summary-metric-card.amber{box-shadow:inset 0 4px 0 var(--figma-cyan),var(--figma-shadow);}
.summary-metric-card.green{box-shadow:inset 0 4px 0 var(--figma-teal),var(--figma-shadow);}

.summary-metric-title{
  color:var(--figma-text);
  font-size:14px;
}

.summary-metric-value{
  color:#0F2740;
  font-size:clamp(2.1rem,3vw,2.75rem);
}

.summary-overall-card{
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.95),rgba(244,251,255,.94)),
    radial-gradient(380px 220px at 96% 8%, rgba(45,212,191,.12), transparent 70%);
}

.summary-chart-head strong{
  color:#2C4157;
  font-size:13px;
  letter-spacing:.01em;
}

.summary-chart-head span{
  color:#8AA0AF;
}

.summary-mini-stat{
  padding:12px 10px;
  border:1px solid rgba(216,232,239,.8);
  border-radius:16px;
  background:rgba(255,255,255,.62);
}

.summary-mini-ring{
  box-shadow:0 16px 30px -24px currentColor;
}

.summary-mini-stat.blue .summary-mini-ring{color:var(--figma-blue);}
.summary-mini-stat.amber .summary-mini-ring{color:var(--figma-cyan);}
.summary-mini-stat.green .summary-mini-ring{color:var(--figma-green);}

.quick-action{
  border-radius:16px;
  background:rgba(255,255,255,.68);
}

.quick-action:hover{
  transform:translateY(-2px);
  border-color:rgba(56,189,248,.42);
  box-shadow:0 16px 32px -26px rgba(37,99,235,.5);
}

.inventory-toolbar .file-btn,
.inventory-toolbar .export-btn,
.inventory-toolbar .inventory-print-btn,
.submit-btn,
.btn-print{
  background:linear-gradient(135deg,var(--figma-blue),var(--figma-cyan) 52%,var(--figma-teal));
  color:#fff;
}

.field input,
.field select,
.field textarea,
.account-form input,
.account-form select,
.inventory-toolbar input,
.inventory-toolbar select,
.recent-report-tools input,
.dashboard-period-box input,
.edit-field input,
.edit-field select,
.edit-field textarea{
  background:rgba(255,255,255,.82);
  border-color:var(--figma-line);
  color:var(--figma-text);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.account-form input:focus,
.account-form select:focus,
.inventory-toolbar input:focus,
.inventory-toolbar select:focus,
.recent-report-tools input:focus,
.dashboard-period-box input:focus,
.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus{
  border-color:var(--figma-cyan);
  box-shadow:0 0 0 4px rgba(56,189,248,.15);
}

body.dark-mode{
  --figma-bg:#061724;
  --figma-panel:#0F2637;
  --figma-panel-soft:#0B2030;
  --figma-line:#284F63;
  --figma-text:#F3FBFF;
  --figma-muted:#A9C7D6;
  background:
    radial-gradient(900px 420px at 6% -16%, rgba(56,189,248,.16), transparent 64%),
    radial-gradient(780px 360px at 104% 0%, rgba(45,212,191,.12), transparent 66%),
    linear-gradient(135deg,#061724 0%,#0B2638 52%,#061B28 100%);
}

body.dark-mode .admin-header h2,
body.dark-mode .title-wrap,
body.dark-mode .summary-metric-title,
body.dark-mode .summary-metric-value,
body.dark-mode .dashboard-section-heading h3,
body.dark-mode .quick-action strong,
body.dark-mode .summary-chart-head strong{
  color:var(--figma-text);
}

body.dark-mode .ticket-card,
body.dark-mode .account-form,
body.dark-mode .dashboard-surface,
body.dark-mode .payment-summary.ringkasan-card,
body.dark-mode .summary-metric-card,
body.dark-mode .summary-overall-card,
body.dark-mode .payment-card,
body.dark-mode .center-card,
body.dark-mode .modal,
body.dark-mode .package-add-card,
body.dark-mode .master-entry-card,
body.dark-mode .settings-logo-row{
  border-color:var(--figma-line);
  background:
    linear-gradient(135deg,rgba(15,38,55,.94),rgba(11,32,48,.96)),
    radial-gradient(380px 220px at 100% 0%, rgba(56,189,248,.10), transparent 70%);
  box-shadow:0 22px 52px -34px rgba(0,0,0,.82);
}

body.dark-mode .summary-mini-stat,
body.dark-mode .quick-action{
  background:rgba(20,50,71,.68);
  border-color:rgba(49,95,116,.9);
}

body.dark-mode .field input,
body.dark-mode .field select,
body.dark-mode .field textarea,
body.dark-mode .account-form input,
body.dark-mode .account-form select,
body.dark-mode .inventory-toolbar input,
body.dark-mode .inventory-toolbar select,
body.dark-mode .recent-report-tools input,
body.dark-mode .dashboard-period-box input,
body.dark-mode .edit-field input,
body.dark-mode .edit-field select,
body.dark-mode .edit-field textarea{
  background:#143247;
  border-color:#3A6C82;
  color:var(--figma-text);
}

body.dark-mode .network-summary-icon,
body.dark-mode .summary-metric-icon,
body.dark-mode .quick-action-icon{
  background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(45,212,191,.16));
  color:#BAE6FD;
}

@media(max-width:760px){
  .admin-header{
    padding-top:2px;
  }

  .summary-metric-grid{
    grid-template-columns:1fr;
  }

  .payment-summary.ringkasan-card .title-wrap{
    justify-content:flex-start;
    text-align:left;
  }

  .summary-mini-stat{
    padding:10px;
  }

  .dashboard-surface,
  .payment-summary.ringkasan-card,
  .summary-metric-card,
  .summary-overall-card,
  .account-form{
    border-radius:16px;
  }
}