/* ===========================================================================
   AranesTech · Shared UI Layer
   ---------------------------------------------------------------------------
   Ini-link ito PAGKATAPOS ng inline <style> ng bawat pahina, kaya ito ang
   panghuling nagsasalita sa mga button, icon, tab, at card. Iisang file lang
   para sa index / admin / home / new-connection — sabay-sabay silang
   na-uupgrade, walang manu-manong pag-sync ng apat na magkakahiwalay na CSS.
   Kapareho ng inaasahang --primary/--accent/--line/--warn na CSS variables
   ang ginagamit dito, kaya awtomatiko itong sumusunod sa light at dark theme.
   =========================================================================== */

/* --- Design tokens: sheen, ring, at layered shadows (light + dark) -------- */
:root{
  --sheen:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.07) 46%,rgba(0,0,0,.08) 100%);
  --ring:rgba(24,95,165,.38);
  --sh1:0 1px 2px rgba(4,44,83,.10);
  --sh2:0 2px 5px rgba(4,44,83,.12),0 1px 2px rgba(4,44,83,.07);
  --sh3:0 8px 20px rgba(4,44,83,.18),0 3px 7px rgba(4,44,83,.10);
  --sh-in:inset 0 1px 0 rgba(255,255,255,.22);
  --press:inset 0 2px 6px rgba(0,0,0,.20);
  --ghost-bg:#eef2f7;
  --ghost-bg-h:#e2e9f2;
}
:root[data-theme="dark"]{
  --sheen:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 46%,rgba(0,0,0,.16) 100%);
  --ring:rgba(111,177,239,.45);
  --sh1:0 1px 2px rgba(0,0,0,.45);
  --sh2:0 2px 6px rgba(0,0,0,.50),0 1px 2px rgba(0,0,0,.35);
  --sh3:0 10px 26px rgba(0,0,0,.60),0 3px 8px rgba(0,0,0,.45);
  --sh-in:inset 0 1px 0 rgba(255,255,255,.10);
  --press:inset 0 2px 6px rgba(0,0,0,.45);
  --ghost-bg:#1b263a;
  --ghost-bg-h:#233049;
}

/* --- Icon system ---------------------------------------------------------
   Naka-sukat sa em kaya sumusunod ang icon sa laki ng text ng button.       */
.ic{width:1.05em;height:1.05em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.16em;pointer-events:none}
.ic-sm{width:.92em;height:.92em}
.ic-lg{width:1.3em;height:1.3em}
.ic-xl{width:1.75em;height:1.75em}
.ic-spin{animation:atSpin .9s linear infinite}
@keyframes atSpin{to{transform:rotate(360deg)}}

/* --- Buttons: base -------------------------------------------------------- */
button,.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:10px;letter-spacing:.005em;
  transition:transform .14s cubic-bezier(.2,.75,.3,1),box-shadow .18s ease,background-color .18s ease,color .15s ease,border-color .18s ease,filter .15s ease,opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring),var(--sh2)}
button:disabled,.btn:disabled{transform:none;box-shadow:var(--sh1);filter:saturate(.6)}

/* --- Buttons: solid variants --------------------------------------------- */
.btn-primary{background-color:var(--primary);background-image:var(--sheen);color:#fff;box-shadow:var(--sh2),var(--sh-in)}
.btn-primary:hover:not(:disabled){background-color:var(--accent);transform:translateY(-1.5px);box-shadow:var(--sh3),var(--sh-in)}
.btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--sh1),var(--press)}

.btn-warn{background-color:var(--warn);background-image:var(--sheen);color:#fff;box-shadow:var(--sh2),var(--sh-in)}
.btn-warn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1.5px);box-shadow:var(--sh3),var(--sh-in);opacity:1}
.btn-warn:active:not(:disabled){transform:translateY(0);filter:none;box-shadow:var(--sh1),var(--press)}

.btn-ok{background-color:var(--ok);background-image:var(--sheen);color:#fff;box-shadow:var(--sh2),var(--sh-in)}
.btn-ok:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1.5px);box-shadow:var(--sh3),var(--sh-in)}
.btn-ok:active:not(:disabled){transform:translateY(0);filter:none;box-shadow:var(--sh1),var(--press)}

/* --- Buttons: ghost / secondary ------------------------------------------ */
.btn-ghost{background-color:var(--ghost-bg);background-image:none;color:var(--navy);border:1px solid var(--line);box-shadow:var(--sh1)}
.btn-ghost:hover:not(:disabled){background-color:var(--ghost-bg-h);border-color:var(--accent);color:var(--primary);transform:translateY(-1.5px);box-shadow:var(--sh2)}
.btn-ghost:active:not(:disabled){transform:translateY(0);box-shadow:var(--press)}
:root[data-theme="dark"] .btn-ghost{background-color:var(--ghost-bg);color:#cbd5e1;border-color:var(--line)}
:root[data-theme="dark"] .btn-ghost:hover:not(:disabled){background-color:var(--ghost-bg-h);color:var(--accent)}

/* Square icon-only button (hal. theme toggle, close) */
.btn-icon{padding:0;width:38px;height:38px;border-radius:10px;gap:0}
.btn-icon.btn-sm{width:30px;height:30px;border-radius:8px}

/* --- Buttons: sizes ------------------------------------------------------- */
.btn-sm{gap:5px;border-radius:8px}
.btn-lg{font-size:15.5px;padding:13px 24px;border-radius:12px;gap:9px}

/* --- Header controls (nasa navy header, kailangan ng maliwanag na kontrast) */
header .btn-ghost{background-color:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#dce9f7;box-shadow:none}
header .btn-ghost:hover:not(:disabled){background-color:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}
header .btn-warn{box-shadow:var(--sh1),var(--sh-in)}

/* --- Saved-router mini buttons (Connect / Disconnect / Alisin) ------------ */
.saved-box{transition:box-shadow .18s,border-color .18s,transform .14s}
.saved-box .actions button{gap:4px;box-shadow:var(--sh1)}
.saved-box .actions .ic{width:11px;height:11px;stroke-width:2.2}
#dashSavedList .saved-box .actions button{gap:3px}
#dashSavedList .saved-box .actions .ic{width:9px;height:9px}
.saved-box .btn-connect{background-image:var(--sheen)}
.saved-box .btn-connect:hover{transform:translateY(-1px);box-shadow:var(--sh2)}
.saved-box .btn-disconnect.active{background-image:var(--sheen)}
.saved-box .btn-disconnect:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--sh2)}
.saved-box-head .del-btn{border-radius:6px;transition:color .15s,background .15s}
.saved-box-head .del-btn:hover{background:rgba(220,38,38,.12)}

/* --- Tabs: admin panel (segmented pill control) --------------------------- */
#adminTabs{gap:6px;border-bottom:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:var(--sh1)}
#adminTabs .tab-btn{border-radius:10px;border-bottom:none;margin-bottom:0;padding:9px 14px;gap:7px;color:var(--muted)}
#adminTabs .tab-btn:hover:not(.active){background:rgba(24,95,165,.09);color:var(--primary)}
#adminTabs .tab-btn.active{background-color:var(--primary);background-image:var(--sheen);color:#fff;box-shadow:var(--sh2),var(--sh-in)}
#adminTabs .tab-btn .ic{opacity:.9}

/* --- Tabs: dashboard filter + main tabs ----------------------------------- */
.tab,.main-tab{gap:6px;border:1px solid transparent;box-shadow:var(--sh1)}
.tab:hover:not(.active),.main-tab:hover:not(.active){background:var(--ghost-bg-h);transform:translateY(-1px);box-shadow:var(--sh2)}
.tab.active,.main-tab.active{background-color:var(--primary);background-image:var(--sheen);color:#fff;box-shadow:var(--sh2),var(--sh-in)}

/* --- Cards, stat boxes, portal cards -------------------------------------- */
.card{box-shadow:var(--sh1)}
.card h2 .ic{color:var(--primary)}
.stat-box{box-shadow:var(--sh1);transition:transform .15s,box-shadow .2s,border-color .18s,background .15s}
.stat-box.clickable:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.portal-card{box-shadow:var(--sh1);transition:transform .16s,box-shadow .2s,border-color .18s}
.portal-card:hover{transform:translateY(-3px);box-shadow:var(--sh3);border-color:var(--accent)}

/* --- Status indicators: glow para agad makita ang online/offline ---------- */
.status-dot,.saved-box-head .indicator,header .dot{box-shadow:0 0 0 2.5px rgba(148,163,184,.18)}
.status-dot.on,.status-dot.reachable,.saved-box-head .indicator.reachable{box-shadow:0 0 0 2.5px rgba(22,163,74,.20),0 0 9px rgba(22,163,74,.55)}
.status-dot.unreachable,.saved-box-head .indicator.unreachable{box-shadow:0 0 0 2.5px rgba(220,38,38,.18),0 0 8px rgba(220,38,38,.45)}
header .dot.on{animation:atPulse 2.4s ease-in-out infinite}
@keyframes atPulse{
  0%,100%{box-shadow:0 0 0 2.5px rgba(22,163,74,.22),0 0 8px rgba(22,163,74,.5)}
  50%{box-shadow:0 0 0 6px rgba(22,163,74,.05),0 0 15px rgba(22,163,74,.8)}
}

/* --- Inputs --------------------------------------------------------------- */
input,select,textarea{transition:border-color .15s,box-shadow .18s,background-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px var(--ring)}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:#c3d1e2}
:root[data-theme="dark"] input:hover:not(:focus),:root[data-theme="dark"] select:hover:not(:focus),:root[data-theme="dark"] textarea:hover:not(:focus){border-color:#3b4a66}

/* --- Badges --------------------------------------------------------------- */
.badge{box-shadow:var(--sh1);display:inline-flex;align-items:center;gap:4px}
.badge .ic{width:.95em;height:.95em;stroke-width:2.4}

/* --- Modals: fade + pop --------------------------------------------------- */
.modal-overlay,.overlay{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-overlay:not(.hidden),.overlay:not(.hidden){animation:atFade .18s ease}
.modal-box,.login{animation:atPop .24s cubic-bezier(.2,.8,.3,1)}
@keyframes atFade{from{opacity:0}to{opacity:1}}
@keyframes atPop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal-close{border:1px solid var(--line)}
:root[data-theme="dark"] .modal-close{background:var(--ghost-bg);color:#cbd5e1}

/* --- Toast: slide-up ------------------------------------------------------ */
.toast{box-shadow:var(--sh3);border-radius:10px;transform:translateX(-50%) translateY(10px);transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.3,1)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* --- Chatbot: FAB, panel, at mga bubble ----------------------------------- */
.chatbot-fab{background-image:var(--sheen);box-shadow:var(--sh3),var(--sh-in);transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
.chatbot-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 30px rgba(4,44,83,.35),var(--sh-in)}
.chatbot-fab:active{transform:scale(.95)}
.chatbot-fab .ic{width:26px;height:26px;stroke-width:1.8}
.chatbot-panel{box-shadow:var(--sh3)}
.chatbot-msg.user{box-shadow:var(--sh1)}

/* --- Nav: mobile bottom bar + dropdown sheets ----------------------------- */
.mobile-nav{box-shadow:0 -2px 14px rgba(4,44,83,.10)}
.mobile-nav-item{transition:color .15s,transform .14s}
.mobile-nav-item:active{transform:scale(.94)}
.mobile-nav-item .ic{width:21px;height:21px;stroke-width:1.85}
.mobile-nav-item.active .ic{stroke-width:2.15}
.nav-sheet,.desktop-menu-list{box-shadow:var(--sh3)}
.nav-sheet button,.desktop-menu-list button{display:flex;align-items:center;gap:10px;justify-content:flex-start;transition:background .14s,color .14s,padding-left .14s}
.nav-sheet button:hover,.desktop-menu-list button:hover{padding-left:20px;color:var(--primary)}
.nav-sheet button .ic,.desktop-menu-list button .ic{width:17px;height:17px;color:var(--muted)}
.nav-sheet button:hover .ic,.desktop-menu-list button:hover .ic{color:var(--primary)}

/* --- Tables --------------------------------------------------------------- */
tbody tr{transition:background .12s}

/* --- Homepage: hero CTAs, feature icons, at final banner ------------------ */
.hero-ctas .btn{padding:14px 26px;font-size:15.5px;border-radius:12px}
.hero-ctas .btn-ghost{background-color:transparent}
.hero-ctas .btn-ghost:hover{background-color:var(--ghost-bg)}
.final-cta .btn-ghost,.final-cta .btn-ghost:hover{background-color:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.final-cta .btn-ghost:hover{background-color:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-1.5px)}
.final-cta .btn-primary{background-image:none}
.feat-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;background:rgba(24,95,165,.10);color:var(--primary);margin-bottom:14px}
.feat-ic .ic{width:23px;height:23px;stroke-width:1.85}
.ai-section .feat-ic{background:rgba(255,255,255,.10);color:#8fc4ff}

/* --- Accessibility: igalang ang reduced-motion preference ----------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  button:hover,.btn:hover,.stat-box.clickable:hover,.portal-card:hover{transform:none!important}
}