/* ============================================================
   shell.css — styling for the shared application shell.

   Companion to partials/shell-nav.html, partials/shell-panels.html
   and js/shell.js: sidebar, navigation, footer controls, user
   badge and menu, and the side panels that squeeze the content
   instead of covering it.

   Every page loads this. It styles ONLY shell elements — a page's
   own content styles stay with the page, and the design tokens
   (--paper-*, --ink-*, --blue-*, --line, --ease …) are expected
   from the page, which is where light/dark is defined.
   ============================================================ */

/* ===== SIDEBAR ===== */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;
  background:var(--paper-0);border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:20;position:relative;
}
/* Drag handle — thin strip on the sidebar's right edge, widens the hit
   area beyond the visible border so it's easy to grab with a mouse. */
.sidebar-resize-handle{
  position:absolute;top:0;right:-3px;width:6px;height:100%;
  cursor:col-resize;z-index:30;background:transparent;
}
.sidebar-resize-handle:hover,.sidebar-resize-handle.is-dragging{background:rgba(22,86,224,.25)}
/* Left padding is 24px + the 2.5px transparent border every .nav-item carries
   as its active marker — that is what puts the wordmark on exactly the same
   vertical line as the menu labels below it. */
.sidebar-header{padding:26px 24px 14px 26px}
/* The wordmark is an inline SVG, so `color` here is what its currentColor
   letters resolve to; the A and the first D take --brand-blue.
   flex-end rather than baseline: an SVG has no baseline to align to.
   Brand blue is #0000FF on paper, but at ~2:1 against the dark shell the A and
   the D sink below the grey letters beside them — dark mode lifts it to the same
   lit blue the brand's own reference artwork shows, keeping the hue. */
/* Left-aligned on the same 24px edge as the nav items below, so the mark and
   the menu share one vertical line. */
.sidebar-brand{display:flex;align-items:flex-end;min-width:0;color:var(--ink-0);--brand-blue:#0000FF}
[data-theme="dark"] .sidebar-brand{--brand-blue:#3A5BFF}
.sidebar-brand-mark{display:block;width:88px;max-width:100%;height:auto}
/* Maker's line — last thing in the sidebar, under the legal links. Quiet by
   design: it credits, it does not announce. */
.sidebar-brand-sub{margin-top:12px;text-align:center;font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);line-height:1.4}
/* Only the maker's NAME carries weight — "Powered by" stays muted. Pure white
   in dark mode as asked; in light mode that would be invisible on paper, so the
   darkest ink stands in for it there. */
.sidebar-brand-sub a{color:inherit;text-decoration:none}
.sidebar-brand-sub a:hover strong{color:var(--blue-0)}
.sidebar-brand-sub strong{font-weight:600;color:var(--ink-0);transition:color .2s var(--ease)}
[data-theme="dark"] .sidebar-brand-sub strong{color:#fff}
.sidebar-nav{flex:1;overflow-y:auto;padding:14px 0;scrollbar-width:thin}
.nav-item{
  display:flex;align-items:center;gap:13px;padding:9px 24px;cursor:pointer;
  color:var(--ink-2);font-size:12.5px;font-weight:500;transition:all .2s var(--ease);
  border-left:2.5px solid transparent;text-decoration:none;
}
.nav-item:hover{background:rgba(13,15,18,.035);color:var(--ink-0)}
.nav-item.active{background:rgba(22,86,224,.07);color:var(--blue-0);border-left-color:var(--blue-0);font-weight:600}
.nav-num{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;min-width:20px;color:var(--ink-3);opacity:.7}
.nav-item.active .nav-num{color:var(--blue-0);opacity:1}
.nav-item-ticket{flex:0 0 auto;padding-top:14px;padding-bottom:14px;border-top:1px solid var(--line)}
.nav-item-ticket .nav-num{display:flex;align-items:center}
.nav-item-ticket .nav-num svg{width:14px;height:14px;stroke:currentColor}
.nav-item-ticket:hover .nav-num{color:var(--blue-0);opacity:1}
.sidebar-footer{padding:16px 24px;font-size:10.5px;color:var(--ink-3);line-height:1.7}
.sidebar-footer strong{color:var(--ink-1);font-weight:600}
/* Legal links — deliberately quiet: small, muted, centered. Present on every
   page, never competing with the section nav. */
.footer-legal{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;font-size:9.5px;letter-spacing:.06em}
.footer-legal a{color:var(--ink-3);transition:color .2s var(--ease)}
.footer-legal a:hover{color:var(--blue-0)}
.footer-legal span{color:var(--ink-4)}

/* Page and ticket-panel scrollbars stay visually absent at rest. Their thumb
   appears briefly while the area is actually scrolling; with no overflow the
   browser creates no thumb at all. */
html,.main,.new-ticket-panel-body,.tickets-panel-body{
  scrollbar-width:thin;scrollbar-color:transparent transparent;
}
html.is-page-scrolling,
.main.is-scrolling,
.new-ticket-panel-body.is-scrolling,
.tickets-panel-body.is-scrolling{
  scrollbar-color:var(--ink-4) transparent;
}
html::-webkit-scrollbar,.main::-webkit-scrollbar,.new-ticket-panel-body::-webkit-scrollbar,.tickets-panel-body::-webkit-scrollbar{width:6px;height:6px}
html::-webkit-scrollbar-track,.main::-webkit-scrollbar-track,.new-ticket-panel-body::-webkit-scrollbar-track,.tickets-panel-body::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb,.main::-webkit-scrollbar-thumb,.new-ticket-panel-body::-webkit-scrollbar-thumb,.tickets-panel-body::-webkit-scrollbar-thumb{
  background:transparent;border-radius:var(--pill);
}
html.is-page-scrolling::-webkit-scrollbar-thumb,
.main.is-scrolling::-webkit-scrollbar-thumb,
.new-ticket-panel-body.is-scrolling::-webkit-scrollbar-thumb,
.tickets-panel-body.is-scrolling::-webkit-scrollbar-thumb{background:var(--ink-4)}

.progress{position:fixed;top:0;left:var(--sidebar-w);right:0;height:2px;background:transparent;z-index:30}
.progress span{display:block;height:100%;width:0;background:var(--blue-0);transition:width .12s linear}
.menu-toggle{display:none}

/* Footer control row — user badge, theme toggle, language toggle and the
   create button, all pinned to one shared height so they line up exactly
   regardless of each control's own content (icon vs. text pill). */
.footer-controls{
  display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;
  --footer-ctrl-h:22px;
}
/* Footer theme switch — small ghost button below the footer text.
   Shows the mode you'd switch TO: "☾ Dark Mode" in light, "☀︎ Light Mode" in dark. */
.theme-toggle{
  display:inline-flex;align-items:center;gap:6px;height:var(--footer-ctrl-h);
  padding:0 10px;border-radius:var(--pill);border:1px solid var(--line);
  background:transparent;color:var(--ink-3);cursor:pointer;
  font-family:inherit;font-size:9.5px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.theme-toggle:hover{color:var(--ink-1);border-color:var(--ink-4)}
/* User badge — small circle next to the theme/lang toggles. Shows a generic
   glyph while signed out and the Google profile photo once logged in. */
.user-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--footer-ctrl-h);height:var(--footer-ctrl-h);
  border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--ink-3);cursor:pointer;padding:0;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.user-badge:hover{color:var(--ink-1);border-color:var(--ink-4)}
.user-badge-icon{width:13px;height:13px}
.user-badge-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover}
.user-badge.is-logged-in{border-color:var(--blue-0)}
.user-badge.has-avatar .user-badge-icon{display:none}
.user-badge[aria-expanded="true"]{border-color:var(--blue-0)}

/* Saint-Suite-style global ticket action: a compact circular plus directly
   beside the language control, with a clear accent hover and pressed state. */
.ticket-footer-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--footer-ctrl-h);height:var(--footer-ctrl-h);padding:0;
  border-radius:50%;border:1px solid var(--line);background:rgba(22,86,224,.03);
  color:var(--ink-3);cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.ticket-footer-btn[hidden]{display:none}
.ticket-footer-btn:hover{
  background:rgba(22,86,224,.12);border-color:var(--blue-0);color:var(--blue-0);
  transform:translateY(-1px) scale(1.08);
}
.ticket-footer-btn:active{transform:scale(.95)}
.ticket-footer-btn.is-open{background:rgba(22,86,224,.12);border-color:var(--blue-0);color:var(--blue-0)}
.ticket-footer-icon{width:13px;height:13px;display:block;pointer-events:none}
.ticket-footer-icon path{transition:opacity .25s ease,transform .25s ease;transform-origin:center}
.ticket-footer-btn.is-open .nt-vert{opacity:0;transform:rotate(90deg)}

/* User flyout — opens upward, same visual language as .lang-dropdown.
   position:fixed with left/width/bottom set from JS (matched to the
   sidebar's actual rendered box) so it stays pixel-exact to the sidebar
   width even while the sidebar is being dragged to resize. */
.user-menu{
  position:fixed;
  display:flex;flex-direction:column;
  background:var(--paper-0);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-2);
  padding:6px;z-index:60;
}
.user-menu[hidden]{display:none}
.user-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border:none;border-radius:8px;
  background:transparent;color:var(--ink-1);cursor:pointer;text-align:left;
  font-family:inherit;font-size:12.5px;font-weight:500;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.user-menu-item:hover{background:var(--paper-1);color:var(--ink-0)}
.user-menu-item[hidden]{display:none}
.user-menu-icon{width:15px;height:15px;flex:none;color:var(--ink-3);transition:color .2s var(--ease)}
.user-menu-item:hover .user-menu-icon{color:var(--blue-0)}

/* Panel chrome — header, close button and scroll body, shared by the
   create-ticket and add-user drawers. The list panel these were written for is
   gone (the ticket board is its own page now); what remains is what the
   drawers still use. */
.tickets-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(24px,3vw,40px);border-bottom:1px solid var(--line-soft);flex:none;
}
.tickets-panel-header h2{font-size:1.15rem}
.tickets-panel-close{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--ink-2);cursor:pointer;font-size:14px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.tickets-panel-close:hover{color:var(--ink-0);border-color:var(--ink-4)}
.tickets-panel-body{flex:1;overflow-y:auto;padding:clamp(20px,2.6vw,36px) clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px}

/* New-ticket drawer — a real flex sibling of .main (not an overlay), so it
   pushes the content box left as it slides in, like a standalone pill next
   to it (Saint-Suite ticket-creation structure, adapted to this layout). */
.new-ticket-panel{
  --ticket-flyout-effective:min(var(--ticket-flyout-w),calc(90vw - var(--slide-gap)));
  flex:none;width:0;height:100vh;overflow:hidden;box-sizing:border-box;
  padding:var(--slide-gap) 0;position:relative;
  transition:width .35s var(--ease-out);
}
.new-ticket-panel.is-open{width:calc(var(--ticket-flyout-effective) + var(--slide-gap))}
.new-ticket-panel.is-resizing{transition:none}
.new-ticket-panel-inner{
  width:var(--ticket-flyout-effective);height:100%;
  background:var(--paper-0);border-radius:var(--radius);box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;overflow:hidden;
}
.new-ticket-resize-handle{
  position:absolute;left:0;top:var(--slide-gap);bottom:var(--slide-gap);width:8px;
  z-index:4;cursor:col-resize;background:transparent;pointer-events:none;
}
.new-ticket-panel.is-open .new-ticket-resize-handle{pointer-events:auto}
.new-ticket-resize-handle:hover,.new-ticket-resize-handle.is-dragging{background:rgba(22,86,224,.25)}
.new-ticket-panel .tickets-panel-header{flex:none}
.new-ticket-panel-body{flex:1;overflow-y:auto;padding:0 clamp(20px,2.6vw,28px) clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:14px}
.new-ticket-panel-footer{flex:none;padding:14px clamp(20px,2.6vw,28px);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
/* Add-user (invite) flyout — same shell and form language as the new-ticket
   drawer; only the select needs a rule of its own (the ticket form has none). */
#addUserPanel select{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper-1);color:var(--ink-0);font-family:inherit;font-size:.92rem;outline:none;
  transition:border-color .2s var(--ease);
}
#addUserPanel select:focus{border-color:var(--blue-0)}
.add-user-desc{color:var(--ink-2);font-size:.88rem;line-height:1.55}
.add-user-status.is-ok{color:var(--obs-green,#48bb78)}
.new-ticket-shot{
  border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);
  background:var(--paper-1);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
}
.new-ticket-shot img{width:100%;height:100%;object-fit:cover;display:block}
.new-ticket-shot .placeholder{color:var(--ink-3);font-size:.8rem}
.new-ticket-context{
  display:flex;align-items:center;gap:8px;color:var(--ink-3);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;
}
.new-ticket-context .dot{width:6px;height:6px;border-radius:50%;background:var(--blue-0);flex:none}
.new-ticket-panel-body label{display:block;font-size:11px;color:var(--ink-2);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.new-ticket-panel-body input,.new-ticket-panel-body textarea{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper-1);color:var(--ink-0);font-family:inherit;font-size:13px;
  transition:border-color .2s var(--ease);
}
.new-ticket-panel-body textarea{resize:vertical;min-height:80px}
.new-ticket-panel-body input:focus,.new-ticket-panel-body textarea:focus{outline:none;border-color:var(--blue-0)}
.new-ticket-status{font-size:12px;color:var(--ink-2);min-height:16px}
.new-ticket-status.is-error{color:var(--danger)}
/* Half-and-half circle: light left, dark right (flips in dark mode) */
.theme-toggle .tt-orb{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:linear-gradient(90deg,#FFFFFF 50%,#0D0F12 50%);
  border:1px solid var(--line);
}
[data-theme="dark"] .theme-toggle .tt-orb{background:linear-gradient(90deg,#0D0F12 50%,#FFFFFF 50%)}
.theme-toggle .tt-to-light{display:none}
[data-theme="dark"] .theme-toggle .tt-to-light{display:inline}
[data-theme="dark"] .theme-toggle .tt-to-dark{display:none}

/* Smooth cross-fade while switching (class added for ~450ms by the toggle JS) */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{
  transition:background-color .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease),box-shadow .4s var(--ease),
             fill .4s var(--ease),stroke .4s var(--ease) !important;
}
/* ── Mobile: the sidebar goes off-canvas, the toggle appears ────────────────
   Same breakpoint the pages use for their own content rules. Kept here so a
   page never has to restate how the shell behaves on a phone. */
@media(max-width:820px){
  .sidebar{position:fixed;top:0;left:0;transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:var(--shadow-2)}
  .sidebar.open{transform:translateX(0)}
  .menu-toggle{
    display:flex;position:fixed;top:14px;left:14px;z-index:40;width:44px;height:44px;
    border-radius:12px;background:var(--paper-0);border:1px solid var(--line);
    align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-1);cursor:pointer;
  }
  /* The menu button is a fixed overlay at 14/14, 44px square — it sat right on
     top of the wordmark, so the open sidebar read "…DMIC SOLUTIONS". Drop the
     header below the button rather than indenting it: the mark keeps its full
     width and stays flush left with the nav items underneath. */
  .sidebar-header{padding-top:72px}
  .sidebar-resize-handle,.new-ticket-resize-handle{display:none}
  .progress{left:0}
}