@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root,[data-theme="dark"]{
  --bg:#0b1020;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.12);--bw:1px;
  --text:#e8ecf5;--muted:#8e98b3;--accent:#2ee6c5;--accent2:#5b8cff;
  --input:#0e1530;--ro:#0b1226;--btn-text:#04121a;--btn-from:#2ee6c5;--btn-to:#5b8cff;
  --accent-soft:rgba(46,230,197,.14);--link:#2ee6c5;
  --ok-bg:#10b98126;--ok-text:#6ee7b7;--err-bg:#ef444426;--err-text:#fca5a5;
  --glow1:#16307a55;--glow2:#10b9a033;
  --head-bg:transparent;--head-text:#e8ecf5;--head-line:rgba(255,255,255,.12);
}
[data-theme="light"]{
  --bg:#f3f6fb;--card:#ffffff;--line:#2b3a5c;--bw:2px;
  --text:#0b1530;--muted:#46526b;--accent:#006b60;--accent2:#1d4ed8;
  --input:#ffffff;--ro:#e9eef6;--btn-text:#ffffff;--btn-from:#006b60;--btn-to:#1d4ed8;
  --accent-soft:rgba(0,107,96,.12);--link:#7ff0dc;
  --ok-bg:#dcfce7;--ok-text:#14532d;--err-bg:#fee2e2;--err-text:#7f1d1d;
  --glow1:transparent;--glow2:transparent;
  --head-bg:#0b1d3a;--head-text:#ffffff;--head-line:#0b1d3a;
}

*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;font-family:'Space Grotesk',system-ui,sans-serif;color:var(--text);min-height:100vh;
  background:radial-gradient(900px 500px at 10% -10%,var(--glow1),transparent),
             radial-gradient(700px 500px at 100% 0,var(--glow2),transparent),var(--bg)}
body.center{display:grid;place-items:center;padding:20px}
.wrap{max-width:860px;margin:0 auto;padding:20px;display:grid;gap:18px}

.card{background:var(--card);border:var(--bw) solid var(--line);border-radius:18px;padding:24px;width:100%;max-width:440px}
.wrap .card{max-width:none}
.hero{text-align:center;padding:40px 28px}
.hero h1{font-size:2rem;margin:.2em 0 .4em}.hero h1 span{color:var(--accent)}
.eyebrow{letter-spacing:.25em;text-transform:uppercase;color:var(--accent2);font-size:.8rem;margin:14px 0 0;font-weight:700}
.logo{width:96px;height:96px;object-fit:contain;border-radius:12px}.logo.small{width:60px;height:60px}
.muted{color:var(--muted)}

label{display:block;font-size:.9rem;color:var(--muted);margin:14px 0 6px;font-weight:500}
input,textarea,select{width:100%;padding:12px 14px;border-radius:12px;border:var(--bw) solid var(--line);
  background:var(--input);color:var(--text);font:inherit;font-size:16px}
input[readonly]{background:var(--ro)}
::placeholder{color:var(--muted);opacity:.8}
input:focus,textarea:focus,select:focus{outline:3px solid var(--accent);outline-offset:1px}

.btn{display:inline-block;margin-top:20px;padding:14px 22px;border:0;border-radius:12px;font:inherit;font-weight:700;
  color:var(--btn-text);background:linear-gradient(135deg,var(--btn-from),var(--btn-to));
  cursor:pointer;text-decoration:none;width:100%;text-align:center;min-height:48px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.grid{grid-template-columns:1fr}}

/* priority options */
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pills label{margin:0;position:relative}
.pills input{position:absolute;opacity:0;width:1px;height:1px}
.pills span{display:block;padding:10px 16px;border-radius:999px;border:var(--bw) solid var(--line);cursor:pointer;
  color:var(--text);background:transparent;font-size:1rem;font-weight:500}
.pills input:checked+span.p-high{background:#ff5d6c;color:#04121a;font-weight:700}
.pills input:checked+span.p-normal{background:#ffc857;color:#04121a;font-weight:700}
.pills input:checked+span.p-low{background:#2ee6c5;color:#04121a;font-weight:700}
.pills input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;font-size:.95rem;
  background:var(--head-bg);color:var(--head-text);border-bottom:1px solid var(--head-line)}
.top a{color:var(--link)}
.theme-btn{background:transparent;color:inherit;border:2px solid currentColor;border-radius:999px;
  padding:6px 14px;font:inherit;font-size:.85rem;cursor:pointer;margin-right:12px}
.floating-theme{position:fixed;top:14px;right:14px;z-index:10;color:var(--text);background:var(--card);margin:0}

/* ticket rows */
.row{display:flex;justify-content:space-between;gap:14px;padding:16px 0;border-top:var(--bw) solid var(--line)}
.row p{margin:6px 0}.who{color:var(--accent2);font-size:.9rem;font-weight:500}

/* badges (symbol + word, never colour alone) */
span.p-high,span.p-normal,span.p-low,span.s-open,span.s-pending,span.s-closed{
  font-size:.78rem;padding:3px 10px;border-radius:999px;font-weight:700;color:#04121a;height:fit-content;white-space:nowrap}
span.p-high{background:#ff5d6c}span.p-normal{background:#ffc857}span.p-low{background:#2ee6c5}
.s-open{background:#5b8cff}.s-pending{background:#ffc857}.s-closed{background:#2ee6c5}
span.p-high::before{content:"▲ "}span.p-normal::before{content:"● "}span.p-low::before{content:"▼ "}
span.s-open::before{content:"● "}span.s-pending::before{content:"⏳ "}span.s-closed::before{content:"✔ "}
select.s-open,select.s-pending,select.s-closed{width:auto;color:#04121a;font-weight:700}
.inline{margin:0}

/* admin tiles */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stats a{background:var(--card);border:var(--bw) solid var(--line);border-radius:14px;padding:14px;text-align:center;
  color:var(--muted);text-decoration:none;font-size:.85rem;transition:border-color .15s,background .15s}
.stats a:hover{border-color:var(--accent)}
.stats b{display:block;font-size:1.6rem;color:var(--text)}
.stats a.active{border:2px solid var(--accent);background:var(--accent-soft);color:var(--text);
  font-weight:700;box-shadow:inset 0 -4px 0 var(--accent)}
.stats a.active b{color:var(--accent)}

/* messages */
.alert{padding:12px 14px;border-radius:12px;margin-bottom:6px;font-size:.95rem;font-weight:500}
.alert.ok{background:var(--ok-bg);color:var(--ok-text)}
.alert.err{background:var(--err-bg);color:var(--err-text)}

/* Priority picker: unselected = outline only, selected = filled + tick */
.pills span.p-high,
.pills span.p-normal,
.pills span.p-low{
  background:transparent;
  color:var(--text);
  font-size:1rem;
  font-weight:500;
  padding:10px 16px;
  border:var(--bw) solid var(--line);
  height:auto;
  transition:background .15s, box-shadow .15s;
}
.pills label:hover span{border-color:var(--accent)}

.pills input:checked+span.p-high{background:#ff5d6c;color:#04121a;font-weight:700;border-color:#04121a}
.pills input:checked+span.p-normal{background:#ffc857;color:#04121a;font-weight:700;border-color:#04121a}
.pills input:checked+span.p-low{background:#2ee6c5;color:#04121a;font-weight:700;border-color:#04121a}

.pills input:checked+span{box-shadow:0 0 0 3px var(--accent)}
.pills input:checked+span::after{content:" ✔"}
.grid .full{grid-column:1 / -1}

/* Priority picker: fixed layout, no jumping when selected */
.pills{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media(max-width:560px){
  .pills{grid-template-columns:1fr}
}
.pills label{margin:0;display:block}

.pills span.p-high,
.pills span.p-normal,
.pills span.p-low{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  min-height:52px;
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;      /* same weight selected or not, so width never changes */
  text-align:center;
}

/* tick always takes up space, only becomes visible when selected */
.pills span::after{content:" ✔";visibility:hidden}
.pills input:checked+span::after{visibility:visible}

/* search + filter bar */
.filters{display:grid;grid-template-columns:1fr 220px auto;gap:12px;align-items:end}
.filters label{margin:0 0 6px}
.filters .btn{margin-top:0;width:auto;padding:12px 26px}
.filters .clear{grid-column:1 / -1;color:var(--accent);font-weight:700}
@media(max-width:700px){
  .filters{grid-template-columns:1fr}
  .filters .btn{width:100%}
}

/* list header + export */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.toolbar h2{margin:0}
.export-btn{display:inline-block;padding:10px 16px;border:var(--bw) solid var(--accent);border-radius:12px;
  color:var(--accent);font-weight:700;text-decoration:none;min-height:44px;line-height:1.6}
.export-btn:hover{background:var(--accent-soft)}

/* overdue: edge + label, not colour alone */
.row.overdue{border-left:6px solid #ff5d6c;padding-left:14px;background:rgba(255,93,108,.08)}
.badge-overdue{display:inline-block;background:#7f1d1d;color:#fff;font-size:.78rem;font-weight:700;
  padding:3px 10px;border-radius:999px;margin-left:4px}
.alert.warn{background:#ffedd5;color:#7c2d12;border:2px solid #c2410c;font-weight:700}

/* sidebar layout */
.brand{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;background:transparent;color:inherit;border:2px solid currentColor;border-radius:10px;
  padding:6px 12px;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}

.layout{display:grid;grid-template-columns:250px minmax(0,1fr);max-width:1200px;margin:0 auto}
.layout .wrap{max-width:900px;margin:0;width:100%}

.sidebar{border-right:var(--bw) solid var(--line);padding:20px 14px}
.sidebar-inner{position:sticky;top:16px}
.sidebar h3{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 10px 8px}
.sidebar h3:first-child{margin-top:0}
.sidebar a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;
  margin-bottom:4px;border:2px solid transparent;border-radius:12px;color:var(--text);
  text-decoration:none;font-weight:500;min-height:48px}
.sidebar a:hover{border-color:var(--line)}
.sidebar a.active{border-color:var(--accent);background:var(--accent-soft);font-weight:700;
  box-shadow:inset 5px 0 0 var(--accent)}
.sidebar .count{min-width:30px;text-align:center;padding:2px 9px;border-radius:999px;font-size:.8rem;
  font-weight:700;background:var(--ro);border:1px solid var(--line)}

/* phones: sidebar becomes a slide-in menu */
.backdrop{display:none}
@media(max-width:820px){
  .menu-btn{display:inline-block}
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:270px;z-index:30;background:var(--bg);
    border-right:2px solid var(--line);transform:translateX(-100%);transition:transform .2s;
    overflow-y:auto;padding-top:24px}
  .sidebar-inner{position:static}
  body.nav-open .sidebar{transform:none}
  body.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20}
}

/* per-ticket action buttons */
.actions{display:grid;gap:8px;justify-items:end;align-content:start}
.mini{font:inherit;font-size:.9rem;font-weight:700;padding:8px 14px;min-height:42px;border-radius:10px;
  cursor:pointer;background:transparent;color:var(--text);border:var(--bw) solid var(--line);white-space:nowrap}
.mini:hover{border-color:var(--accent);background:var(--accent-soft)}
.mini.danger{color:var(--err-text);border-color:var(--err-text)}
.mini.danger:hover{background:var(--err-bg)}

/* "Not IT related" badge, matching the other status badges */
span.s-notit{display:inline-block;font-size:.85rem;font-weight:700;padding:6px 14px;border-radius:999px;
  background:#cbd5e1;color:#04121a;border:2px solid #475569;white-space:nowrap}
span.s-notit::before{content:"🚫 "}

@media(max-width:560px){
  .row{flex-direction:column}
  .actions{justify-items:stretch}
  .actions .mini{width:100%}
  .actions select{width:100%!important}
}

span.s-notit{align-self:flex-start;height:fit-content;line-height:1.2}

/* staff: tabs shown on phones, sidebar on PC */
.mtabs{display:none;gap:10px}
.mtabs a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:14px 10px;min-height:52px;border:var(--bw) solid var(--line);border-radius:12px;
  color:var(--muted);text-decoration:none;font-weight:700;background:var(--card)}
.mtabs a.active{border:2px solid var(--accent);background:var(--accent-soft);color:var(--text);
  box-shadow:inset 0 -4px 0 var(--accent)}
@media(max-width:820px){.mtabs{display:flex}}

/* header: same structure on every page */
.top{flex-wrap:wrap;gap:10px 16px}
.top .brand,.top > b{white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:10px 14px;flex-wrap:nowrap;margin-left:auto}
.top-actions .theme-btn{margin-right:0;white-space:nowrap}
.user-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.logout{white-space:nowrap;font-weight:700}

/* status badges never stretch to full width */
.row > span.s-open,
.row > span.s-pending,
.row > span.s-closed,
.row > span.s-notit{align-self:flex-start}

/* admin tiles: equal widths */
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(max-width:560px){
  /* header becomes two tidy rows: title, then controls */
  .top{padding:10px 14px}
  .top-actions{width:100%;margin-left:0}
  .user-name{flex:1;min-width:0;max-width:none}

  /* 2 x 2 tiles are easier to read and tap */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* admin archive badge stays a pill, buttons stay full width */
  .actions > span{justify-self:start}
}

/* show the full name, wrap when needed */
.user-name{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:none;
  overflow-wrap:anywhere;
  line-height:1.3;
  text-align:right;
}
.top-actions{flex-wrap:wrap;justify-content:flex-end}

@media(max-width:560px){
  /* phone: name gets its own line, buttons below it */
  .top-actions{justify-content:space-between}
  .user-name{flex:1 1 100%;order:-1;text-align:left}
}
/* ticket_form.php-> changes at line 6 */
.ro-box{padding:12px 14px;border-radius:12px;border:var(--bw) solid var(--line);background:var(--ro);
  color:var(--text);font-size:16px;min-height:48px;overflow-wrap:anywhere}

/* hide Edge's own reveal icon so there aren't two */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{display:none}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:54px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.pw-toggle:hover{color:var(--text)}
.pw-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:0}
.pw-toggle .icon-eye-off{display:none}
.pw-toggle.on .icon-eye{display:none}
.pw-toggle.on .icon-eye-off{display:block}

/* animated welcome background */
.bg-anim{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bg-anim span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;will-change:transform}
.bg-anim span:nth-child(1){width:420px;height:420px;background:var(--accent);top:-120px;left:-100px;
  animation:driftA 12s ease-in-out infinite alternate}
.bg-anim span:nth-child(2){width:480px;height:480px;background:var(--accent2);bottom:-160px;right:-120px;
  animation:driftB 14s ease-in-out infinite alternate}
.bg-anim span:nth-child(3){width:300px;height:300px;background:var(--accent);bottom:18%;left:55%;opacity:.22;
  animation:driftC 16s ease-in-out infinite alternate}
[data-theme="light"] .bg-anim span{opacity:.23}
[data-theme="light"] .bg-anim span:nth-child(3){opacity:.16}

@keyframes driftA{to{transform:translate(260px,180px) scale(1.25)}}
@keyframes driftB{to{transform:translate(-240px,-170px) scale(1.2)}}
@keyframes driftC{to{transform:translate(-280px,120px) scale(1.3)}}

body.welcome .card{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){.bg-anim span{animation:none}}
@media (max-width:560px){.bg-anim span{filter:blur(50px)}}

.handled{margin:8px 0 0;font-size:.92rem;color:var(--muted)}
.handled b{color:var(--text)}