/* CallSec theme for the web panels (Flask: base.html + modern-dark-theme.css) — the look of callsec.si.
   Source: F:\Software\CATH\produkti\callsec-tema (C-AT-H web; v1 preview 13. 10. 2026, v2 14. 10. 2026).
   Load AFTER modern-dark-theme.css:  <link href="/static/css/cs-theme.css?v=…" rel="stylesheet">,
   <body class="page-transition cs-theme"> and, for the motion, <script src="/static/js/cs-dyn.js?v=…" defer></script>.
   Opt-in by the body class: without it nothing changes. Re-defines the tokens of modern-dark-theme.css (its components
   use var(--…)); modern-dark-theme.css sets most element properties with !important, so the element rules here must
   use !important too. Never: hide elements, transform/filter on ancestors of modals. Semantic colours are kept. */

/* Outfit is a variable font (wght 100–900): the whole range, so bold text is real bold */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/outfit-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body.cs-theme{
  --bg-primary:#03030a;
  --bg-secondary:#07071a;
  --bg-tertiary:rgba(16,13,42,.86);
  --bg-elevated:rgba(26,20,62,.94);
  --surface:rgba(184,169,255,.05);
  --surface-hover:rgba(184,169,255,.09);
  --surface-active:rgba(184,169,255,.14);
  --border-primary:rgba(190,185,255,.16);
  --border-secondary:rgba(190,185,255,.1);
  --border-accent:rgba(160,140,255,.32);
  --text-primary:#f2f2fb;
  --text-secondary:rgba(214,216,238,.8);
  --text-muted:rgba(168,170,205,.72);
  --text-accent:#b8a9ff;
  --accent-primary:#8b6cff;
  --accent-info:#b8a9ff;
  --gradient-primary:linear-gradient(90deg,rgba(139,108,255,.55),rgba(111,77,240,.32));
  --gradient-card:linear-gradient(160deg,rgba(24,18,62,.72),rgba(6,6,18,.82));
  --glass-bg:rgba(5,5,16,.82);
  --glass-border:rgba(190,185,255,.18);
  --cs-hair:linear-gradient(90deg,transparent,rgba(184,169,255,.5) 30%,rgba(92,242,244,.3) 70%,transparent);
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:12px;
}
body.cs-theme,body.cs-theme .btn,body.cs-theme .form-control,body.cs-theme .form-select,body.cs-theme .table{font-family:'Outfit','Inter',system-ui,sans-serif !important}
body.cs-theme{font-weight:300 !important;background:#03030a !important}
body.cs-theme b,body.cs-theme strong,body.cs-theme .fw-bold{font-weight:600 !important}
body.cs-theme h1,body.cs-theme h2,body.cs-theme h3,body.cs-theme h4,body.cs-theme h5,body.cs-theme .card-title{font-weight:300 !important;letter-spacing:.005em}
body.cs-theme h6{font-weight:400 !important}

/* background: the violet glows of the website, shifting slowly between two positions (opacity only).
   The layers never reach outside their containing block and have no transform: while body.page-transition runs fadeIn
   (a transform) body is that block, and the old layer (inset:-25% + a drifting transform) made the page 1757 px wide
   at 1440 for 0.6 s (14. 10. 2026). The glows are the old ones at 0 % and 50 % of that drift, in window coordinates. */
body.cs-theme::before,body.cs-theme::after{content:'';position:fixed;top:0;left:0;right:0;height:100vh;z-index:-1;pointer-events:none}
body.cs-theme::before{
  background:radial-gradient(ellipse 57% 51% at 89% -19%,rgba(110,80,255,.16),transparent 62%),
             radial-gradient(ellipse 51% 48% at -13% 77%,rgba(80,60,220,.10),transparent 62%),
             radial-gradient(ellipse 39% 39% at 110% 104%,rgba(54,228,234,.05),transparent 60%);
  animation:cs-glow-a 25s ease-in-out infinite alternate}
body.cs-theme::after{opacity:0;
  background:radial-gradient(ellipse 60.4% 54.1% at 97.5% -15.5%,rgba(110,80,255,.16),transparent 62%),
             radial-gradient(ellipse 54.1% 50.9% at -10.6% 86.3%,rgba(80,60,220,.10),transparent 62%),
             radial-gradient(ellipse 41.3% 41.3% at 119.8% 114.9%,rgba(54,228,234,.05),transparent 60%);
  animation:cs-glow-b 25s ease-in-out infinite alternate}
@keyframes cs-glow-a{to{opacity:0}}
@keyframes cs-glow-b{to{opacity:1}}

/* header: the ghost + the wordmark of the website, glyph field behind (cs-dyn.js) */
body.cs-theme .navbar{background:linear-gradient(rgba(3,3,10,.92),rgba(3,3,10,.7)) !important;border:0 !important;border-bottom:1px solid transparent !important;border-image:var(--cs-hair) 1;overflow:visible}
body.cs-theme .navbar>.cs-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
body.cs-theme .navbar>.container-fluid{position:relative;z-index:1}
body.cs-theme .navbar-brand{display:inline-flex !important;align-items:center;gap:.55rem}
body.cs-theme .navbar-brand::before{content:'';width:34px;height:34px;flex:none;background:url(/static/images/cs-logo.webp) center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(150,120,255,.55));animation:cs-float 6s ease-in-out infinite}
@keyframes cs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
body.cs-theme .gradient-text{background:linear-gradient(90deg,#fff 40%,#c5b8ff 60%,#7f5cff) !important;-webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;font-weight:300 !important;letter-spacing:.03em}
body.cs-theme .navbar .nav-link{font-weight:400 !important;letter-spacing:.02em}

/* buttons: outlined, uppercase, letter-spaced — like the website */
body.cs-theme .btn{border-radius:4px !important;font-weight:400 !important;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem !important}
body.cs-theme .btn-primary,body.cs-theme .btn-premium{background:linear-gradient(90deg,rgba(139,108,255,.42),rgba(111,77,240,.22)) !important;border:1px solid rgba(184,169,255,.7) !important;box-shadow:none !important}
body.cs-theme .btn-primary:hover,body.cs-theme .btn-premium:hover{box-shadow:0 0 26px rgba(139,108,255,.32) !important}

/* cards: dark glass with a lit hairline on top, as the cards of the website */
body.cs-theme .card{background:var(--cs-hair) top/100% 1px no-repeat,var(--gradient-card) !important;border:1px solid var(--border-primary) !important;
  border-radius:12px !important;box-shadow:0 20px 60px rgba(0,0,0,.45) !important;transition:border-color .5s}
body.cs-theme .card:hover{border-color:rgba(184,169,255,.3) !important}
body.cs-theme .card-premium{background:var(--cs-hair) top/100% 1px no-repeat,linear-gradient(150deg,rgba(32,22,84,.66),rgba(8,7,24,.86)) !important}
body.cs-theme .card-premium::before{height:1px;background:linear-gradient(90deg,transparent,rgba(197,184,255,.9),transparent)}
body.cs-theme .card-premium h2{font-weight:200 !important;font-size:2.6rem;letter-spacing:.01em}
body.cs-theme .table th,body.cs-theme thead th{letter-spacing:.14em;text-transform:uppercase;font-size:.7rem !important;font-weight:400 !important;color:var(--text-muted) !important}
body.cs-theme .form-control,body.cs-theme .form-select{background:rgba(10,10,28,.5) !important;border:1px solid var(--border-primary) !important;border-radius:6px !important}
body.cs-theme .form-control:focus,body.cs-theme .form-select:focus{border-color:#b8a9ff !important;box-shadow:0 0 0 3px rgba(139,108,255,.14) !important}
body.cs-theme .badge{border-radius:3px !important;font-weight:400 !important;letter-spacing:.08em}
body.cs-theme .bg-primary{background-color:#6f4df0 !important}
body.cs-theme .text-primary,body.cs-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand){color:#c5b8ff !important}

/* login (auth/login.html is standalone, without base.html): the card, the wordmark with the ghost, the form */
body.cs-theme>.cs-field.cs-full{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 20%,transparent 85%);mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 20%,transparent 85%)}
body.cs-theme .bg-gradient{background:radial-gradient(ellipse 50% 40% at 72% 8%,rgba(110,80,255,.16),transparent 62%),radial-gradient(ellipse 40% 40% at 10% 85%,rgba(80,60,220,.1),transparent 62%)}
body.cs-theme .login-container{background:var(--cs-hair) top/100% 1px no-repeat,linear-gradient(160deg,rgba(24,18,62,.62),rgba(6,6,18,.86));
  border:1px solid rgba(190,185,255,.16);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(139,108,255,.08)}
body.cs-theme .logo h1{font-weight:300;letter-spacing:.02em;background:linear-gradient(90deg,#fff 40%,#c5b8ff 62%,#7f5cff);-webkit-background-clip:text;background-clip:text}
body.cs-theme .logo h1::before{content:'';display:block;width:64px;height:64px;margin:0 auto 14px;background:url(/static/images/cs-logo.webp) center/contain no-repeat;
  filter:drop-shadow(0 0 16px rgba(150,120,255,.6));animation:cs-float 6s ease-in-out infinite}
body.cs-theme .logo p{letter-spacing:.3em;text-transform:uppercase;font-size:.68rem;color:rgba(168,170,205,.75)}
body.cs-theme .form-group label{letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;font-weight:400;color:rgba(168,170,205,.8)}
body.cs-theme .form-group input{border-radius:6px;background:rgba(10,10,28,.5);border-color:rgba(190,185,255,.16);font-family:inherit;font-weight:300}
body.cs-theme .form-group input:focus{border-color:#b8a9ff;background:rgba(139,108,255,.06);box-shadow:0 0 0 3px rgba(139,108,255,.14)}
body.cs-theme .login-btn{background:linear-gradient(90deg,rgba(139,108,255,.42),rgba(111,77,240,.22));border:1px solid rgba(184,169,255,.7);border-radius:4px;
  font-family:inherit;font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
body.cs-theme .login-btn:hover{box-shadow:0 0 26px rgba(139,108,255,.32)}
body.cs-theme .back-btn{border-radius:4px;font-weight:400;letter-spacing:.06em;border-color:rgba(190,185,255,.18)}
html.cs-dyn body.cs-theme .login-container{animation:cs-in .9s ease-out both}

/* entrance: the cards fade in one after another (opacity only — a transform would capture fixed modals) */
html.cs-dyn body.cs-theme main .card{animation:cs-in .8s ease-out both}
html.cs-dyn body.cs-theme main .row:nth-child(2) .card{animation-delay:.08s}
html.cs-dyn body.cs-theme main .row:nth-child(n+3) .card{animation-delay:.16s}
@keyframes cs-in{from{opacity:0}to{opacity:1}}

body.cs-theme :focus-visible{outline:2px solid #b8a9ff;outline-offset:3px}
body.cs-theme{scrollbar-color:rgba(139,108,255,.4) transparent}
@media (prefers-reduced-motion:reduce){
  body.cs-theme::before,body.cs-theme::after,body.cs-theme .navbar-brand::before,html.cs-dyn body.cs-theme main .card,
  body.cs-theme .logo h1::before,html.cs-dyn body.cs-theme .login-container{animation:none}
}