/* TELNET global application experience layer.
   Keeps the existing brand/design intact while adding responsive behavior,
   activity feedback, cookie consent and mobile dashboard navigation. */
:root{
  --telnet-navy:#061a3a;
  --telnet-navy-2:#0b2d5a;
  --telnet-blue:#08baf5;
  --telnet-line:#dce6f2;
  --telnet-shadow:0 20px 60px rgba(3,24,54,.22);
}
html{min-width:0;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{min-width:0;max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
button,input,select,textarea{font:inherit}

/* Full navigation/form loader */
#telnet-page-loader{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:rgba(4,18,42,.56);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
#telnet-page-loader.telnet-show{opacity:1;visibility:visible;pointer-events:auto}
.telnet-loader-card{min-width:156px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 24px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:linear-gradient(145deg,rgba(5,25,57,.96),rgba(10,50,94,.96));color:#fff;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.telnet-loader-spinner{width:38px;height:38px;border:4px solid rgba(255,255,255,.22);border-top-color:#38d4ff;border-right-color:#0aaef0;border-radius:50%;animation:telnetSpin .72s linear infinite}
.telnet-loader-copy{font-size:12px;font-weight:700;letter-spacing:.04em;text-align:center}

/* Non-blocking API activity indicator */
#telnet-network-loader{position:fixed;z-index:2147482998;left:50%;top:14px;transform:translate(-50%,-18px);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 28px);padding:8px 12px;border-radius:999px;background:#061a3a;color:#fff;box-shadow:0 10px 35px rgba(4,24,52,.22);font:600 11px/1.1 Inter,Arial,sans-serif;opacity:0;visibility:hidden;transition:.18s ease;pointer-events:none}
#telnet-network-loader.telnet-show{transform:translate(-50%,0);opacity:1;visibility:visible}
.telnet-network-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.25);border-top-color:#38d4ff;border-radius:50%;animation:telnetSpin .62s linear infinite}
@keyframes telnetSpin{to{transform:rotate(360deg)}}

/* Cookie consent */
#telnet-cookie-banner{position:fixed;z-index:2147482996;left:50%;bottom:18px;transform:translate(-50%,22px);width:min(980px,calc(100vw - 28px));display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px;padding:18px 20px;border:1px solid rgba(8,42,84,.12);border-radius:18px;background:rgba(255,255,255,.98);color:#102744;box-shadow:0 24px 70px rgba(4,24,52,.23);opacity:0;visibility:hidden;transition:.22s ease;font-family:Inter,Arial,sans-serif}
#telnet-cookie-banner.telnet-show{transform:translate(-50%,0);opacity:1;visibility:visible}
.telnet-cookie-copy{min-width:0}.telnet-cookie-copy strong{display:block;color:#071f43;font-size:14px;margin-bottom:5px}.telnet-cookie-copy p{margin:0;color:#53677f;font-size:12px;line-height:1.5}
.telnet-cookie-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.telnet-cookie-actions button{border-radius:999px;padding:10px 16px;border:1px solid #bfd0df;background:#fff;color:#0a2c55;font-weight:800;font-size:12px;cursor:pointer}.telnet-cookie-actions .accept{border-color:#0aaef0;background:linear-gradient(90deg,#078fe8,#11c2ff);color:#fff}.telnet-cookie-actions button:hover{transform:translateY(-1px)}

/* Optional CMS announcement */
#telnet-site-announcement{position:fixed;z-index:2147482950;left:50%;bottom:18px;transform:translateX(-50%);max-width:min(760px,calc(100vw - 28px));display:none;align-items:center;gap:12px;padding:10px 14px 10px 16px;border-radius:999px;background:#061a3a;color:#fff;box-shadow:var(--telnet-shadow);font:600 12px/1.35 Inter,Arial,sans-serif}
#telnet-site-announcement.telnet-show{display:flex}#telnet-site-announcement button{border:0;width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}

/* Dashboard drawer: only active on tablet/mobile. Existing desktop appearance is retained. */
.telnet-dash-menu,.telnet-dash-backdrop{display:none}
@media(max-width:900px){
  body:has(.app>aside){overflow-x:hidden}
  .app{display:block!important;min-width:0!important}
  .app>aside{position:fixed!important;z-index:2147482500!important;left:0!important;top:0!important;bottom:0!important;width:min(300px,86vw)!important;height:100dvh!important;overflow-y:auto!important;transform:translateX(-103%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:18px 0 50px rgba(3,21,48,.22)}
  .app.telnet-menu-open>aside{transform:translateX(0)}
  .app>main{width:100%!important;min-width:0!important;padding:70px 16px 34px!important}
  .app>main>header,.app>main>.top{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  .telnet-dash-menu{display:grid;place-items:center;position:fixed;z-index:2147482600;left:14px;top:14px;width:43px;height:43px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:#081a38;color:#fff;box-shadow:0 9px 25px rgba(3,21,48,.22);cursor:pointer;font-size:22px}
  .telnet-dash-backdrop{display:block;position:fixed;z-index:2147482400;inset:0;background:rgba(2,14,33,.42);opacity:0;visibility:hidden;transition:.2s ease}
  .app.telnet-menu-open~.telnet-dash-backdrop,.telnet-dash-backdrop.telnet-show{opacity:1;visibility:visible}
  .grid-form,.filters,.kpis,.grid,.two,.grid2,.actions{min-width:0!important}
  .table-wrap{width:100%!important;max-width:100%!important;overflow:auto!important;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:680px}
  input,select,textarea{font-size:16px!important}
}
@media(max-width:640px){
  #telnet-cookie-banner{grid-template-columns:1fr;gap:13px;bottom:10px;padding:16px;width:calc(100vw - 20px);border-radius:16px}
  .telnet-cookie-actions{justify-content:stretch}.telnet-cookie-actions button{flex:1;min-width:120px}
  #telnet-network-loader{top:8px}
  .telnet-loader-card{min-width:140px;padding:18px 20px}
  .app>main{padding-left:12px!important;padding-right:12px!important}
  .panel,.card,.kpi,.stat{border-radius:12px!important;padding:15px!important}
  .grid-form{grid-template-columns:1fr!important}
  .full{grid-column:auto!important}
  .filters{grid-template-columns:1fr!important}
  .kpis,.grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .two,.grid2{grid-template-columns:1fr!important}
}
@media(max-width:430px){
  .kpis,.grid{grid-template-columns:1fr!important}
  #telnet-site-announcement{bottom:10px;border-radius:15px;width:calc(100vw - 20px)}
}
@media(min-width:1600px){
  .app>main{padding-left:clamp(32px,3vw,58px)!important;padding-right:clamp(32px,3vw,58px)!important}
}
@media(prefers-reduced-motion:reduce){
  .telnet-loader-spinner,.telnet-network-spinner{animation-duration:1.8s}
  #telnet-page-loader,#telnet-network-loader,#telnet-cookie-banner,.app>aside{transition:none!important}
}

/* Extra defensive responsive rules for legacy dashboard tables/cards. */
@media(max-width:900px){
  .app>main table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .app>main th,.app>main td{white-space:nowrap}
  .app>main h1{font-size:clamp(25px,7vw,36px)}
  .app>main h2{font-size:clamp(18px,5vw,24px)}
}