/*
 * Bineri ZTE Asset Manager — Sky Blue Soft UI
 * v1.10.0
 * Selected UI direction: Option A
 * Scope: presentation only. No workflow, database, SSH, or command behavior changes.
 */

:root{
  --sky-950:#07356f;
  --sky-900:#0a4f9f;
  --sky-800:#1264c7;
  --sky-700:#1c73e8;
  --sky-600:#2f80ed;
  --sky-500:#4b96f8;
  --sky-400:#7bb5fb;
  --sky-300:#a9d1ff;
  --sky-200:#d4e8ff;
  --sky-100:#eaf4ff;
  --sky-50:#f6faff;
  --sky-border:#d9e8f8;
  --sky-text:#132238;
  --sky-muted:#6a7d96;
  --soft-green:#e9f9f1;
  --soft-green-text:#16885a;
  --soft-orange:#fff4e4;
  --soft-orange-text:#b96a16;
  --soft-red:#ffeded;
  --soft-red-text:#cb4141;
  --soft-violet:#f0edff;
  --soft-violet-text:#6658d3;
  --soft-shadow:0 10px 34px rgba(39,105,181,.08);
  --soft-shadow-hover:0 14px 40px rgba(39,105,181,.13);
}

html{background:#f4f9ff;}
body{
  color:var(--sky-text);
  background:
    radial-gradient(circle at 92% 2%,rgba(120,186,255,.16),transparent 30rem),
    linear-gradient(180deg,#fbfdff 0%,#f4f9ff 48%,#eef6ff 100%);
}
a{color:#176ee4;}

/* Application shell */
body .app-shell{background:transparent;}
body .app-main{background:transparent;min-width:0;}
body .sidebar{
  background:linear-gradient(180deg,#0754ba 0%,#0a65d7 48%,#0b72e4 100%);
  border-right:1px solid rgba(255,255,255,.14);
  box-shadow:16px 0 42px rgba(17,91,177,.10);
}
body .sidebar-brand{border-bottom-color:rgba(255,255,255,.13);}
body .sidebar-brand a{color:#fff;}
body .sidebar-brand strong{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.05);}
body .sidebar-brand span{color:#dfeeff;letter-spacing:.12em;}
body .sidebar-brand img{filter:drop-shadow(0 4px 12px rgba(0,0,0,.10));}
body .side-nav-label{color:#bcdcff;letter-spacing:.15em;}
body .side-nav-link{
  color:#eaf5ff;
  border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
body .side-nav-link:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.10);
  color:#fff;
  transform:translateX(2px);
}
body .side-nav-link.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,.15));
  border-color:rgba(255,255,255,.20);
  box-shadow:0 8px 24px rgba(0,57,139,.18),inset 3px 0 0 #dff2ff;
}
body .side-nav-link .ui-icon{color:#d9ecff;}
body .side-nav-link.active .ui-icon{color:#fff;}
body .sidebar-user{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,56,132,.16);
}
body .sidebar-user strong{color:#fff;}
body .sidebar-user span{color:#d8ebff;}
body .sidebar .avatar{background:linear-gradient(135deg,#6aa9ff,#86d5ff);color:#083b7a;}

/* Top workspace */
body .workspacebar{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #deebf8;
  box-shadow:0 5px 22px rgba(39,98,165,.05);
  backdrop-filter:blur(14px);
}
body .workspace-search{
  background:#f8fbff;
  border:1px solid #d8e6f5;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9);
}
body .workspace-search:focus-within{border-color:#83b9f7;box-shadow:0 0 0 4px rgba(70,145,240,.10);}
body .workspace-search input{background:transparent;color:var(--sky-text);}
body .search-shortcut{background:#fff;border-color:#dce8f5;color:#69809c;}
body .icon-button,body .workspace-user{
  background:#fff;
  border-color:#dbe8f5;
  color:#526c8c;
  box-shadow:0 4px 16px rgba(42,100,165,.04);
}
body .icon-button:hover,body .workspace-user:hover{border-color:#acd0f7;background:#f5faff;}
body .workspace-user strong{color:#17283e;}
body .workspace-user small{color:#71839b;}
body .workspace-actions .avatar{background:linear-gradient(135deg,#4387f7,#74b8ff);box-shadow:0 8px 20px rgba(48,119,227,.20);}
body .notification-count{background:#ff6b6b;box-shadow:0 0 0 3px #fff;}

body .contextbar{
  background:linear-gradient(90deg,#ffffff 0%,#f8fbff 100%);
  border-bottom:1px solid #e1edf9;
}
body .context-kicker,body .eyebrow{color:#6780a2;}
body .contextbar strong{color:#152942;}
body .contextbar select{background:#fff;border-color:#cfe0f2;}

body .container{max-width:1680px;}
body .page-head h1{color:#132238;letter-spacing:-.025em;}

/* Cards, panels, forms */
body .card,body .stat,body .modern-card,body .create-choice-card{
  background:rgba(255,255,255,.96);
  border-color:var(--sky-border);
  border-radius:18px;
  box-shadow:var(--soft-shadow);
}
body .card:hover,body .create-choice-card:hover{border-color:#c8def6;}
body .create-choice-card:hover{box-shadow:var(--soft-shadow-hover);transform:translateY(-2px);}
body .welcome-strip{
  background:linear-gradient(105deg,#ffffff 0%,#f0f8ff 52%,#e6f3ff 100%);
  border:1px solid #d5e8fa;
  border-radius:20px;
  box-shadow:var(--soft-shadow);
}
body .welcome-device{background:rgba(255,255,255,.75);border-color:#d6e7f8;}
body .metric-card{
  border-color:#deebf8;
  border-radius:18px;
  box-shadow:0 8px 26px rgba(42,102,170,.065);
}
body .metric-card:hover{box-shadow:var(--soft-shadow-hover);transform:translateY(-1px);}
body .metric-card.tone-blue .metric-icon{background:#e8f3ff;color:#2e78e8;}
body .metric-card.tone-green .metric-icon{background:var(--soft-green);color:#20a06e;}
body .metric-card.tone-orange .metric-icon{background:var(--soft-orange);color:#e18a26;}
body .metric-card.tone-red .metric-icon{background:var(--soft-red);color:#e25757;}
body .metric-card.tone-violet .metric-icon{background:var(--soft-violet);color:#7465e8;}

body input,body select,body textarea{
  color:#1f334d;
  background:#fff;
  border-color:#cddff2;
  border-radius:11px;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
body input:focus,body select:focus,body textarea:focus{
  border-color:#79b0f4;
  box-shadow:0 0 0 4px rgba(59,135,234,.10);
  background:#fff;
}
body input::placeholder,body textarea::placeholder{color:#8a9caf;}

/* Buttons */
body .btn{
  background:linear-gradient(135deg,#2f73ef,#438df6);
  border-radius:11px;
  box-shadow:0 7px 18px rgba(47,115,239,.16);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
body .btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(47,115,239,.22);filter:saturate(1.04);}
body .btn.outline{
  color:#276edc;
  background:#fff;
  border-color:#bad4f4;
  box-shadow:none;
}
body .btn.outline:hover{background:#f1f7ff;border-color:#86b7f2;}
body .btn.green{background:linear-gradient(135deg,#20ad78,#42c995);box-shadow:0 7px 18px rgba(32,173,120,.16);}
body .btn.red{background:linear-gradient(135deg,#ef5964,#fb7680);box-shadow:0 7px 18px rgba(239,89,100,.14);}
body .btn.gray{background:linear-gradient(135deg,#71849b,#8798ac);}
body .btn:disabled{opacity:.48;filter:saturate(.55);box-shadow:none;cursor:not-allowed;transform:none;}

/* Alerts */
body .alert{border:1px solid transparent;border-radius:14px;box-shadow:0 5px 18px rgba(34,91,154,.035);}
body .alert.info{background:#eaf4ff;color:#285c9c;border-color:#cee5ff;}
body .alert.success{background:#eaf9f2;color:#16764f;border-color:#c8efdd;}
body .alert.warning{background:#fff6e7;color:#9a6419;border-color:#f7dfb6;}
body .alert.error{background:#ffeded;color:#a93d48;border-color:#f8cdd2;}

/* Tables */
body .table-wrap{
  background:#fff;
  border-color:#dbe8f6;
  border-radius:15px;
  box-shadow:0 5px 18px rgba(36,93,158,.04);
}
body table{background:#fff;}
body th{
  background:#f4f8fd;
  color:#59718f;
  border-bottom-color:#dce9f6;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.055em;
}
body td{border-bottom-color:#e5eef8;color:#253b55;}
body .table-wrap tbody tr:hover td,body .table-wrap tr:not(:first-child):hover td{background:#f8fbff;}
body code{background:#edf5fd;color:#264c76;border:1px solid #e2edf8;}

/* Badges */
body .badge{background:#edf2f7;color:#566a82;border:1px solid rgba(94,118,145,.08);}
body .badge.active,body .badge.yes{background:var(--soft-green);color:var(--soft-green-text);}
body .badge.inactive,body .badge.no{background:#eef2f6;color:#667589;}
body .badge.maintenance,body .badge.warning{background:var(--soft-orange);color:var(--soft-orange-text);}
body .badge.error{background:var(--soft-red);color:var(--soft-red-text);}

/* Compare Center: more specific than its page-local stylesheet */
body .app-main .dc-head{
  border-color:#d7e7f7;
  border-radius:19px;
  background:linear-gradient(110deg,#ffffff 0%,#f7fbff 100%);
  box-shadow:var(--soft-shadow);
}
body .app-main .dc-head>div{border-color:#e0ecf8;}
body .app-main .dc-head small{color:#6a80a0;letter-spacing:.06em;}
body .app-main .dc-head strong{color:#17304e;}
body .app-main .dc-tabs{border-bottom-color:#dce9f7;gap:8px;}
body .app-main .dc-tab{color:#5b7090;border-radius:12px 12px 0 0;}
body .app-main .dc-tab:hover{background:#f2f8ff;color:#236edc;}
body .app-main .dc-tab.active{color:#176ee4;border-color:#4389ef;background:#eef6ff;}
body .app-main .dc-pill{border:1px solid transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}
body .app-main .dc-pill.new{background:var(--soft-green);color:var(--soft-green-text);border-color:#d6f2e4;}
body .app-main .dc-pill.match{background:#eaf3ff;color:#2b68d0;border-color:#d6e8ff;}
body .app-main .dc-pill.different{background:var(--soft-orange);color:var(--soft-orange-text);border-color:#f8e5c7;}
body .app-main .dc-pill.missing{background:var(--soft-red);color:var(--soft-red-text);border-color:#f8d6d6;}
body .app-main .dc-pill.dbonly{background:#f0f3f7;color:#657184;border-color:#e3e8ef;}
body .app-main .dc-detail{border-color:#dbe9f7;box-shadow:0 12px 34px rgba(39,105,181,.08);}
body .app-main .dc-side-block{border-radius:14px;}
body .app-main .dc-side-block.device{background:#f0fbf6;border-color:#d6f1e3;}
body .app-main .dc-side-block.database{background:#fff8ed;border-color:#f4e2bf;}
body .app-main .dc-dot{background:#f4a340;box-shadow:0 0 0 4px #fff2df;}
body .app-main .dc-toolbar{background:#f9fcff;border:1px solid #e1edf8;border-radius:14px;padding:10px;}

/* Misc feature panels */
body .tabs a{background:#edf5ff;color:#43678f;border:1px solid #deebf8;}
body .tabs a:hover{background:#e4f1ff;color:#176ee4;}
body .pipeline-row>div,body .customer-row>div{background:#edf4fb;}
body .activity-item{border-color:#e5eef8;}
body .device-modern-row{border-color:#e5eef8;}
body .device-symbol{background:#eaf4ff;color:#3178df;}
body .create-choice-tag{background:#eaf4ff;color:#2d72d9;}

/* Scrollbars */
body *{scrollbar-color:#a8c9ed #eff6fd;}
body *::-webkit-scrollbar{width:10px;height:10px;}
body *::-webkit-scrollbar-track{background:#eff6fd;border-radius:999px;}
body *::-webkit-scrollbar-thumb{background:#a8c9ed;border:2px solid #eff6fd;border-radius:999px;}
body *::-webkit-scrollbar-thumb:hover{background:#80b1e6;}

/* Footer version */
body .app-version-footer{
  margin:8px 24px 18px;
  min-height:48px;
  padding:11px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color:#f8fcff;
  background:linear-gradient(100deg,#1267cf 0%,#2f80ed 55%,#5aa8f7 100%);
  border:1px solid rgba(255,255,255,.28);
  border-radius:13px;
  box-shadow:0 10px 28px rgba(36,111,210,.15);
  font-size:12px;
}
body .app-version-footer>div:first-child{display:flex;align-items:center;gap:8px;}
body .app-version-footer strong{font-size:12px;color:#fff;}
body .app-version-footer span{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:800;}
body .app-version-footer-copy{color:#edf7ff;}
body .auth-version{opacity:.86;}

/* Authentication follows the same soft sky direction without changing structure. */
body.auth.auth-ambient{
  background:
    radial-gradient(circle at 72% 18%,rgba(114,183,255,.38),transparent 25rem),
    linear-gradient(135deg,#e8f4ff 0%,#f8fbff 48%,#dceeff 100%);
}
body .auth-panel{border-color:#d5e7fa;box-shadow:0 30px 80px rgba(33,95,165,.15);}
body .auth-brand-modern strong,body .auth-heading h1{color:#123d72;}
body .auth-kicker{color:#3c7fd1;}
body .auth-submit{background:linear-gradient(135deg,#2875e9,#55a0f7);box-shadow:0 12px 28px rgba(40,117,233,.22);}

/* Responsive */
@media(max-width:1000px){
  body .app-version-footer{margin:8px 14px 14px;}
}
@media(max-width:720px){
  body .app-version-footer{align-items:flex-start;flex-direction:column;}
  body .app-version-footer-copy{line-height:1.5;}
}