/* Extra CSS the PHP rebuild needs on top of the reused Tailwind bundle
   (style.css). Everything here replaces behavior that used to be driven by
   Framer Motion / React state — scroll header, dropdowns, mobile menu,
   scroll-reveal animations and the animated stat counters. */

/* ---- Sticky header background transition ---- */
.site-header {
  background: hsla(0, 0%, 11%, 0);
  backdrop-filter: blur(0px);
  border-bottom-color: transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
  background: hsla(0, 0%, 11%, 0.8);
  backdrop-filter: blur(12px);
  border-bottom-color: hsl(0, 0%, 18%);
}

/* ---- Desktop dropdown (Services / Solutions) ---- */
.dropdown-chevron {
  transition: transform 0.2s ease;
}
.nav-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}
.dropdown-panel {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.nav-dropdown.open .dropdown-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ---- Mobile menu ---- */
.mobile-menu {
  max-height: calc(100vh - 4rem);
}
.mobile-dropdown-panel {
  display: none;
  overflow: hidden;
}
.mobile-dropdown.open .mobile-dropdown-panel {
  display: flex;
}
.mobile-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}

/* ---- Footer social links hover-scale (was whileHover on motion.a) ---- */
.footer-social {
  display: inline-block;
  transition: transform 0.15s ease;
}
.footer-social:hover {
  transform: scale(1.15);
}

/* ---- Scroll-reveal (replaces Framer Motion's FadeIn / SectionHeading) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-reveal="left"] { transform: translateX(28px); }
[data-reveal="left"].revealed { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(-28px); }
[data-reveal="right"].revealed { transform: translateX(0); }

/* Stagger children (replaces StaggerGrid/StaggerItem) */
[data-stagger] [data-stagger-item] {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-stagger].revealed [data-stagger-item] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Word-by-word hero reveal */
/* No margin-right here: main.js already inserts a literal space text node
   between each .word span (that's also what gives the browser a line-wrap
   opportunity between inline-block words — removing the space entirely
   would stop these headings wrapping onto multiple lines). Adding a
   margin on top of that space doubled the visual gap, making word-reveal
   headings render with distractingly wide gaps between every word. */
[data-word-reveal] .word {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-word-reveal].revealed .word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Gradient headline text (.brand-gradient-text) relies on background-clip:
   text painted on the ancestor span. But filter/transform on the .word
   spans above (even at their resting blur(0)/translateY(0) values) force
   each word onto its own compositing layer, which breaks that clip in
   Chrome/Safari — the words render with -webkit-text-fill-color:
   transparent and nothing behind them, i.e. completely invisible once
   revealed. Re-declaring the same gradient + clip directly on the .word
   spans (the elements that actually own the transform/filter) keeps the
   gradient on the same composited layer as the text, so it stays visible. */
.brand-gradient-text [data-word-reveal] .word {
  background: linear-gradient(90deg, #3fcf8e, #62d5a1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Respect reduced-motion preference, same as the original site */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] [data-stagger-item], [data-word-reveal] .word, .site-header, .dropdown-panel {
    transition-duration: 0.01ms !important;
  }
}

/* Bounce chevron under the hero, matches Tailwind's animate-bounce timing */
@keyframes sf-bounce {
  0%, 100% { transform: translateY(-8%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
.sf-bounce { animation: sf-bounce 1s infinite; }

/* ---- FAQ accordion (native <details>, styled to match the original) ---- */
.sf-faq-item summary::-webkit-details-marker { display: none; }
.sf-faq-item summary::marker { content: ""; }
.sf-faq-item summary:hover { text-decoration: underline; }
.sf-faq-item[open] .sf-faq-chevron { transform: rotate(180deg); }

/* ---- Service pill toggle buttons (Get a Quote form) ---- */
.service-pill.selected {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
}

/* ---- Blog / portfolio filter buttons: active state swap ---- */
.filter-btn.active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
}

/* ---- Portfolio/case-study card thumbnails ----
   There are no real project screenshots to show (see portfolio-grid.php),
   so instead of a flat, identical gray box on every single card, each
   thumbnail gets the project's division icon (same icon set as the
   Services division cards — see division_icon() in helpers.php) on a
   subtle brand-colored glow whose position shifts per division below, so
   the twelve case studies on /portfolio read as distinct categories at a
   glance rather than one reused placeholder repeated twelve times. */
.sf-portfolio-thumb {
  --thumb-glow-x: 85%;
  --thumb-glow-y: 10%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--thumb-glow-x) var(--thumb-glow-y), hsl(var(--primary) / .2), transparent 55%),
    hsl(var(--secondary));
}
/* Faint diagonal texture so the thumbnail isn't just a flat gradient —
   matches the dark, understated feel of the rest of the site rather than
   introducing a busy pattern. */
.sf-portfolio-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, hsl(var(--primary) / .05) 0, hsl(var(--primary) / .05) 1px, transparent 1px, transparent 16px);
  pointer-events: none;
}
.sf-portfolio-thumb-icon {
  position: relative;
  display: inline-flex;
  color: hsl(var(--primary) / .55);
  transition: color 0.2s ease;
}
.card-hover:hover .sf-portfolio-thumb-icon {
  color: hsl(var(--primary) / .85);
}
/* One glow position per division, so cards from different divisions don't
   all look like the same background with a different icon dropped in. */
.sf-portfolio-thumb-ecommerce { --thumb-glow-x: 15%; --thumb-glow-y: 85%; }
.sf-portfolio-thumb-graphic-brand-design { --thumb-glow-x: 50%; --thumb-glow-y: 0%; }
.sf-portfolio-thumb-print-production { --thumb-glow-x: 90%; --thumb-glow-y: 90%; }
.sf-portfolio-thumb-photo-image-editing { --thumb-glow-x: 10%; --thumb-glow-y: 15%; }
.sf-portfolio-thumb-ecommerce-creative { --thumb-glow-x: 50%; --thumb-glow-y: 100%; }

/* ---- Admin area ---- */
.sf-admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sf-admin-table th {
  text-align: left;
  padding: 0.6rem 0.9rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid hsl(var(--border));
}
.sf-admin-table td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: top;
}
.sf-admin-table tr:hover td { background: hsla(153, 60%, 53%, 0.03); }
.sf-badge-unread {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: hsl(var(--primary));
}
/* "Replied" indicator — set once a reply is actually sent (handleReply()
   only fires the model's markReplied() on success), so this is never
   shown for a reply attempt that failed. */
.sf-badge-replied {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .1);
  white-space: nowrap;
}

/* ---- Admin list-page filter bar (search + status/replied selects) ---- */
.sf-filter-bar select,
.sf-filter-bar input[type="text"] {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}
.sf-filter-bar select:focus,
.sf-filter-bar input[type="text"]:focus {
  outline: none;
  border-color: hsl(var(--primary));
}

/* ---- Utility classes used only by the (new) admin panel and 404 page —
   not in the reused Tailwind bundle since it was compiled from the
   original marketing-site templates only. Standard Tailwind values. ---- */
.max-w-sm { max-width: 24rem; }
.overflow-x-auto { overflow-x: auto; }
.whitespace-pre-line { white-space: pre-line; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.pr-12 { padding-right: 3rem; }

/* ---- Show/hide password toggle (login + Settings > Email/SMTP) ---- */
.password-toggle {
  background: none;
  border: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

/* ---- Plain-text buttons inside admin tables (e.g. the Delete action on
   Quote Requests) — a real <button> so it posts a form, styled to match
   the plain-text "Reply" mailto link next to it rather than looking like
   a default browser button. ---- */
.sf-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ---- Hero heading: restore intended line-height ----
   The reused Tailwind bundle (style.css) pairs its own line-height with
   each responsive font-size utility (sm:text-5xl, md:text-6xl each ship
   line-height:1), and because those are emitted inside a later @media
   block than the unprefixed leading-[1.1] utility, they win the cascade
   at sm/md+ breakpoints — squeezing the line-height down to 1 regardless
   of leading-[1.1]. That crushes the two-line hero heading tight enough
   to visually clip descenders (the "g" in "Growing"/"Businesses"). Since
   this file loads after style.css, repeating the same selector here wins
   on source order without needing !important. */
.leading-\[1\.1\] {
  line-height: 1.1;
}

/* ---- Custom cursor (dot + lagging ring), matches the original TS site ----
   JS (main.js) only turns this on for pointer:fine, non-touch devices that
   don't prefer reduced motion, by adding .sf-cursor-active to <html> — so
   with JS disabled, or on touch/trackpad-only or reduced-motion setups, the
   native cursor is left completely alone and these elements just stay
   hidden (opacity/visibility default below). */
.sf-cursor-dot,
.sf-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-9999px, -9999px, 0);
}
.sf-cursor-dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: hsl(153, 60%, 53%);
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.sf-cursor-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid hsla(153, 60%, 53%, 0.6);
  transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
html.sf-cursor-active .sf-cursor-dot,
html.sf-cursor-active .sf-cursor-ring {
  opacity: 1;
  visibility: visible;
}
/* Hover state over links/buttons/anything clickable: ring grows and fills,
   dot hides — a common cue that the thing under the pointer is actionable. */
html.sf-cursor-active .sf-cursor-ring.sf-cursor-hover {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: hsla(153, 60%, 53%, 0.12);
  border-color: hsl(153, 60%, 53%);
}
html.sf-cursor-active .sf-cursor-dot.sf-cursor-hover {
  opacity: 0;
}
/* Text fields need the real caret, not our dot/ring, to stay usable. */
html.sf-cursor-active .sf-cursor-dot.sf-cursor-text,
html.sf-cursor-active .sf-cursor-ring.sf-cursor-text {
  opacity: 0;
}
/* Hide the native cursor everywhere except form fields (which need their
   own text caret / pointer) so it doesn't compete with the custom one. */
html.sf-cursor-active {
  cursor: none !important;
}
/* ...but links/buttons keep the normal hand/pointer icon alongside the
   ring's hover state, rather than showing nothing at all. */
html.sf-cursor-active a,
html.sf-cursor-active button,
html.sf-cursor-active [role="button"] {
  cursor: pointer !important;
}

/* ---- Delete-confirmation modal (replaces window.confirm() for every
   data-confirm form — single/bulk Delete, Remove admin) ---- */
.sf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: hsla(0, 0%, 0%, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 100;
}
.sf-modal-backdrop[hidden] { display: none; }
.sf-modal {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 1.5rem;
  max-width: 24rem;
  width: 100%;
  box-shadow: 0 20px 50px hsla(0, 0%, 0%, 0.45);
}
.sf-modal-message {
  font-size: 0.9rem;
  color: hsl(var(--foreground));
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.sf-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ---- Honeypot field (anti-spam) on every public form ---- */
/* Off-screen rather than display:none/visibility:hidden — some bots skip
   fields hidden that way, and off-screen positioning still lets a
   screen-reader-only user tab past it harmlessly (aria-hidden covers most
   assistive tech; belt-and-suspenders here). Real visitors never see it. */
.sf-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ====================================================================
   Admin panel theme: WinUI 3 / Fluent Design 2 (Windows 11), Light
   ====================================================================
   Scoped entirely under body.winui (set in admin/_header.php) so none of
   this reaches the public marketing site, which keeps its own dark look.
   Built to match Winhance (a real WinUI 3 app) closely: flat light-gray
   canvas, white cards with hairline borders, an icon-over-label nav rail
   with a floating white "chip" on the selected item, colorful flat icons
   for content sections and plain gray ones for utility items, segmented
   pill tab groups, and status/badge pills. Keeps the client's mint as the
   one accent color (used the way Windows lets you pick a custom accent)
   rather than switching to Windows' own default blue.

   This redefines the SAME design-token custom properties every Tailwind
   utility class already reads (--background, --foreground, --secondary,
   --border, --primary, --muted-foreground, --destructive, --ring) but
   only at the body.winui scope — so every bg-, text- and border- color
   utility already used across every admin view picks up the new light values
   through ordinary CSS custom-property inheritance, and the public site
   (whose <body> never gets the .winui class) is completely unaffected. */

.winui {
  font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --winui-rail-w: 6.5rem;

  /* ---- Re-themed design tokens: Windows 11 light values ---- */
  --background: 0 0% 95.3%;        /* #f3f3f3 app canvas */
  --foreground: 0 0% 10.6%;        /* #1b1b1b primary text */
  --secondary: 0 0% 98.4%;         /* #fbfbfb card/control surfaces, pixel-matched to Winhance */
  --secondary-foreground: 0 0% 10.6%;
  --border: 0 0% 89.8%;            /* #e5e5e5 hairline */
  --muted-foreground: 0 0% 38%;    /* #616161 secondary text */
  --primary: 153 55% 34%;          /* darkened mint — 4.5:1+ on white */
  --primary-foreground: 0 0% 100%;
  --accent: 153 48% 42%;
  --destructive: 0 68% 42%;
  --ring: 153 55% 34%;
}
.winui .font-heading {
  font-family: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.winui-shell {
  position: relative;
  display: flex;
  min-height: 100vh;
}

/* ---- Left NavigationView rail: icon-over-label tiles, matching
   Winhance/Windows Settings' compact rail rather than the wider
   icon-beside-label layout other Fluent apps use. ---- */
.winui-nav {
  position: sticky;
  top: 0;
  flex: 0 0 var(--winui-rail-w);
  width: var(--winui-rail-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
  padding: 1rem .5rem;
  background: #fafafa;
  border-right: 1px solid hsl(var(--border));
  overflow-y: auto;
}
.winui-nav-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  padding: .25rem .25rem 1rem;
  text-decoration: none;
  color: hsl(var(--foreground));
}
.winui-nav-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(153 45% 52%));
  color: #fff;
  font-family: "Segoe UI Variable Display", "Segoe UI", Inter, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 1px 3px hsl(0 0% 0% / .18);
}
.winui-nav-brand-text {
  font-family: "Segoe UI Variable Display", "Segoe UI", Inter, sans-serif;
  font-weight: 600;
  font-size: .7rem;
  line-height: 1.2;
  text-align: center;
}
.winui-nav-brand-text span {
  display: block;
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}
.winui-nav-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.winui-nav-footer {
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.winui-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .6rem .25rem .5rem;
  border-radius: 8px;
  font-size: .6875rem;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
  transition: background-color .12s ease, color .12s ease;
}
.winui-nav-item svg { flex-shrink: 0; }
.winui-nav-item:hover {
  background: hsl(0 0% 0% / .045);
}
/* The selected item gets a white "chip" that floats slightly off the
   rail's off-white background, plus the Fluent accent bar on the rail's
   own left edge — matching Winhance's selected Software & Apps tile. */
.winui-nav-item.is-active {
  background: #fff;
  color: hsl(var(--foreground));
  font-weight: 600;
  box-shadow: 0 1px 4px hsl(0 0% 0% / .1);
}
.winui-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.5rem;
  border-radius: 0 999px 999px 0;
  background: hsl(var(--primary));
}
.winui-nav-item-logout:hover {
  background: hsl(var(--destructive) / .1);
  color: hsl(var(--destructive));
}

.winui-nav-toggle {
  display: none;
  position: fixed;
  top: .875rem;
  left: .875rem;
  z-index: 60;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid hsl(var(--border));
  background: #fff;
  color: hsl(var(--foreground));
  cursor: pointer;
  box-shadow: 0 1px 4px hsl(0 0% 0% / .12);
}
.winui-nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / .32);
  z-index: 45;
}

/* ---- Content column ---- */
.winui-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.winui-main {
  flex: 1 1 auto;
  padding: 2rem 2.5rem 3rem;
  animation: winui-fade-in .22s cubic-bezier(.1, .9, .2, 1);
}
.winui-auth-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: hsl(var(--background));
}
@keyframes winui-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .winui-main { animation: none; }
}

/* ---- Responsive: rail collapses to an off-canvas drawer below
   ~1024px, opened by the hamburger button (see the
   data-winui-nav-toggle handler in admin.js) ---- */
@media (max-width: 1023px) {
  .winui-nav-toggle { display: inline-flex; }
  .winui-nav {
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    width: 15rem;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.1, .9, .2, 1);
    box-shadow: 20px 0 50px hsl(0 0% 0% / .18);
  }
  .winui-nav .winui-nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: .875rem;
    padding: .625rem .75rem;
    font-size: .8125rem;
    text-align: left;
  }
  .winui-nav .winui-nav-brand { flex-direction: row; justify-content: flex-start; }
  .winui-nav .winui-nav-brand-text { text-align: left; font-size: .95rem; }
  .winui-nav.is-open { transform: translateX(0); }
  .winui-nav.is-open ~ .winui-nav-scrim,
  .winui-nav-scrim.is-visible { display: block; }
  .winui-main { padding: 4.5rem 1.25rem 2.5rem; }
}

/* ---- Fluent control-corner-radius system: 4px for small controls
   (buttons, text boxes, comboboxes), 8px for cards/dialogs/flyouts. ---- */
.winui .rounded-md,
.winui .rounded-lg { border-radius: 4px; }
.winui .rounded-xl,
.winui .rounded-2xl { border-radius: 8px; }

/* ---- Cards: flat opaque white, hairline border, barely-there shadow —
   matching Winhance's Optimizations/Customizations list rows exactly,
   rather than the translucent "film over Mica" look a dark theme needs. ---- */
.winui .card-hover {
  background: hsl(var(--secondary));
  border-color: hsl(var(--border));
  box-shadow: 0 1px 2px hsl(0 0% 0% / .04);
}
.winui .card-hover:hover {
  border-color: hsl(var(--primary) / .5);
  background: hsl(var(--secondary));
  box-shadow: 0 1px 2px hsl(0 0% 0% / .04), 0 4px 14px hsl(0 0% 0% / .06);
  transform: translateY(-2px);
}
.winui .sf-modal {
  background: hsl(var(--secondary));
  border-color: hsl(var(--border));
  box-shadow: 0 1px 2px hsl(0 0% 0% / .06), 0 20px 50px hsl(0 0% 0% / .18);
}
.winui .sf-modal-backdrop {
  background: hsl(0 0% 0% / .32);
}

/* ---- Tables: pixel-checked against Winhance's own Software & Apps list —
   a lightly-off-white header BAND (not just bottom-border text), normal-case
   medium-weight labels, and body rows with no divider lines at all (row
   separation comes from padding, not borders — verified there is no hairline
   between rows in the reference). ---- */
.winui .sf-admin-table thead th {
  font-size: .8125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--secondary));
  border-bottom: none;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.winui .sf-admin-table td {
  border-bottom: none;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.winui .sf-admin-table tr:hover td {
  background: hsl(var(--primary) / .04);
}

/* ---- Status/badge pills, matching Winhance's Recommended/Default/
   Custom pills — reusable, though this admin panel only needs the
   green "unread"-style variant today. ---- */
.winui .sf-badge-unread {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: hsl(var(--primary));
}
.winui-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .625rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}
.winui-pill-success { background: #dff6dd; color: #0f7b0f; }
.winui-pill-neutral { background: #f0f0f0; color: #5c5c5c; }
.winui-pill-amber   { background: #fdf0dc; color: #8a5a00; }

/* ---- Segmented tab group — Settings' Email/Account/Admins/Backup tabs.
   Pixel-checked against Winhance's own section-toggle control (its
   "Windows Apps & Features / External Software" switcher): a bordered
   near-white bar split by hairlines, the active section marked with a
   left accent bar and bold dark text rather than a filled pill —
   Winhance uses its blue accent for that bar, we use our mint one. ---- */
.winui .winui-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: stretch;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.winui .winui-segmented a {
  position: relative;
  padding: .75rem 1.25rem;
  font-size: .8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  border-right: 1px solid hsl(var(--border));
  transition: color .12s ease, background-color .12s ease;
}
.winui .winui-segmented a:last-child { border-right: none; }
/* Narrow viewports: the four Settings tabs (Email / SMTP, Account, Admins,
   Backup) don't fit in one row at phone widths — tighten padding first,
   and let the group wrap onto a second row rather than force the whole
   page into horizontal scroll. */
@media (max-width: 480px) {
  .winui .winui-segmented a {
    padding: .625rem .75rem;
    font-size: .75rem;
    flex: 1 1 auto;
    text-align: center;
    border-bottom: 1px solid hsl(var(--border));
  }
  .winui .winui-segmented a:nth-child(2n) { border-right: none; }
}
.winui .winui-segmented a:hover { color: hsl(var(--foreground)); }
.winui .winui-segmented a.is-active {
  color: hsl(var(--foreground));
  font-weight: 600;
  background: hsl(var(--primary) / .06);
}
.winui .winui-segmented a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: hsl(var(--primary));
}

/* ---- Buttons: a subtle top-edge highlight and pressed-state scale. ---- */
.winui button[class*="bg-primary"],
.winui a[class*="bg-primary"] {
  position: relative;
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .25), 0 1px 2px hsl(0 0% 0% / .12);
}
.winui button[class*="bg-primary"]:active,
.winui a[class*="bg-primary"]:active {
  transform: scale(.98);
}
.winui .border.border-border,
.winui [class*="border-border"] {
  border-color: hsl(var(--border));
}
/* Outline buttons: Fluent's standard control look — white fill, visible
   border, not the dark theme's transparent-until-hover treatment. */
.winui button[class*="border-border"][class*="bg-transparent"],
.winui a[class*="border-border"][class*="bg-transparent"] {
  background: hsl(var(--secondary));
}

/* ---- Text boxes and dropdowns: Winhance's own control look — a clean
   white box with a visible all-around hairline border (its Language,
   Theme and search fields), not the tinted underline-only fill this
   used before, which read as a muddy gray box on a light canvas. ---- */
.winui input[type="text"],
.winui input[type="email"],
.winui input[type="password"],
.winui input[type="number"],
.winui input[type="url"],
.winui select,
.winui textarea {
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  color: hsl(var(--foreground));
  transition: border-color .15s ease, box-shadow .15s ease;
}
.winui input[type="text"]:focus,
.winui input[type="email"]:focus,
.winui input[type="password"]:focus,
.winui input[type="number"]:focus,
.winui input[type="url"]:focus,
.winui select:focus,
.winui textarea:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / .15);
}

/* ---- Fluent's keyboard focus rectangle. ---- */
.winui :focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* ---- Windows 11 light-theme thin overlay scrollbar. ---- */
.winui ::-webkit-scrollbar { width: 10px; height: 10px; }
.winui ::-webkit-scrollbar-track { background: transparent; }
.winui ::-webkit-scrollbar-thumb {
  background: hsl(0 0% 0% / .18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.winui ::-webkit-scrollbar-thumb:hover { background: hsl(0 0% 0% / .3); background-clip: padding-box; }
.winui { scrollbar-width: thin; }