/* Material-ish base: typography, colors, app bar, cards, inputs, buttons, ripple */

:root{
  --md-bg: #fafafa;
  --md-surface: #ffffff;
  --md-primary: #DE582C;
  --md-primary-variant: #BC4A25;
  --md-secondary: #03dac6;
  --md-text: #1a1a1a;
  --md-text-muted: #60636a;
  --md-border: #e6e6e6;
  --md-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
  --radius: 16px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--md-text);
  background: var(--md-bg);
}

/* App bar (transparent over banner) */
/* Navbar (now NON-sticky) */
.navbar{
  /* was: position: fixed; top:0; left:0; right:0; */
  position: absolute;
  top: 0; left: 0; right: 0;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  background: transparent;
  color:#fff;
  z-index:1000;
  transition: background 180ms ease;
}

/* If you had JS toggling .scrolled, it still works visually */
.navbar.scrolled{
  background: transparent;
  backdrop-filter: none;
}

/* Brand -> logo image */
.navbar .brand{
  display:inline-flex;
  align-items:center;
  height:41px;                           /* match logo height */
}
.navbar .brand .logo{
  width:140px;
  height:41px;
  object-fit:contain;
  display:block;
}

/* Admin button */
.navbar nav{ display:flex; align-items:center; gap:12px; }
.navbar a{ color:#fff; text-decoration:none; opacity:.92; }
.navbar a:hover{ opacity:1; }


/* compact pill-style button */
.admin-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  font-size:14px;
  line-height:1;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:rgba(0,0,0,.40);
  backdrop-filter:saturate(140%) blur(2px);
  transition:transform 120ms ease, background 160ms ease, border-color 160ms ease;
}
.admin-btn:hover{
  background:rgba(0,0,0,.24);
  border-color:rgba(255,255,255,.6);
}
.admin-btn:active{ transform:translateY(1px); }
.admin-btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* icon inside the button */
.admin-btn .icon{
  width:16px;
  height:16px;
  fill:currentColor;
  display:block;
}




/* Banner */
/* Root tokens so you can tune one place */
:root{
  --overlay: 0.35;            /* overlay strength desktop */
  --overlay-mobile: 0.5;      /* overlay strength small screens */
  --safe-pad: clamp(16px, 6vmin, 48px);
  --banner-height: 280px;
}

/* Banner scales by width; keeps ~1900x400 (19:4.0) aspect */
.banner{
  position: relative;
  height: var(--banner-height);    /* ← this is the one to tweak */
  background: #111 url('../img/banner.jpg') center/cover no-repeat;
  overflow: hidden;
}

/* Fallback for older browsers that lack aspect-ratio */
@supports not (aspect-ratio: 1) {
  .banner { padding-top: 21.0526%; }              /* 4 / 19 = 0.210526… */
}

/* Dark wash to keep text readable on busy images */
.banner::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(transparent, rgba(0,0,0,.35));
  z-index: 0;
}

/* Centered text overlay */
.banner__copy{
  position:absolute; inset:0;
  display:grid; place-content:center;
  padding: var(--safe-pad);
  text-align:center;
  color:#fff;
  z-index:1;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  /* nicer line breaks on multi-line titles */
  text-wrap: balance;
}

/* Title */
.banner__title{
  margin:0 0 .4em 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.12;
  /* scales with viewport, bounded for sanity */
  font-size: clamp(24px, 5.2vw, 44px);
}

/* Subtitle */
.banner__subtitle{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.35;
  opacity:.95;
  font-size: clamp(14px, 2.5vw, 18px);
}

/* Tighten up on very small screens; increase overlay for contrast */
@media (max-width: 520px){
  :root{ --overlay: var(--overlay-mobile); }
  .banner__title{ font-weight: 800; letter-spacing: 0; }
  .banner__subtitle{ opacity: .98; }
}

/* Respect users who prefer higher contrast */
@media (prefers-contrast: more){
  .banner::after { background: rgba(0,0,0,.6); }
  .banner__copy { text-shadow: none; }
}

/* Accessibility: if the image is decorative only, keep aria-label on .banner__copy.
   If the text describes the image, remove the aria-label to avoid duplication by screen readers. */


/* Overlapping card */
.hero-card{
  position: relative;
  max-width: 980px;
  margin: -64px auto 32px;
  background: var(--md-surface);
  border-radius: var(--radius);
  box-shadow: var(--md-shadow);
  padding: 28px 24px;
}
@media (min-width: 900px){
  .hero-card{ padding: 36px 40px; }
}

/* Headings */
.h1{ font-size: clamp(28px, 3vw, 40px); margin: 0 0 8px; }
.h2{ font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 8px; }
.subtle{ color: var(--md-text-muted); }

/* Cards */
.card{
  background: var(--md-surface);
  border-radius: var(--radius);
  box-shadow: var(--md-shadow);
  padding: 20px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding: 12px 18px;
  border: none; border-radius: 999px;
  font-weight:600; cursor:pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  position: relative; overflow: hidden;
}
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity: .55; cursor: not-allowed; }
.btn-primary{ background: var(--md-primary); color:#fff; }
.btn-primary:hover{ background: var(--md-primary-variant); }
.btn-outline{ background: transparent; color: var(--md-primary); border: 2px solid var(--md-primary); }
.btn-outline:hover{ background: rgba(47,111,237,0.08); }

/* Ripple (JS adds .ripple span) */
.ripple { position:absolute; border-radius:50%; transform:scale(0); animation:ripple 600ms linear; background:rgba(255,255,255,0.5); }
@keyframes ripple { to { transform:scale(4); opacity:0; } }

/* Inputs: floating labels */
.form-row{ margin-bottom: 16px; position: relative; }
.input{
  width: 100%; padding: 16px 14px 12px;
  border-radius: 12px; border:1px solid var(--md-border);
  background: #fff; outline:none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  font-size:16px;
}
.input:focus{
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(47,111,237,0.15);
}
.label{
  position: absolute; left: 12px; top: 12px;
  padding: 0 6px; background: #fff; color: var(--md-text-muted);
  transform-origin: left top; pointer-events:none; transition: all 140ms ease;
}
.input:focus + .label,
.input:not(:placeholder-shown) + .label{
  transform: translateY(-18px) scale(0.85);
  color: var(--md-primary);
}


/* Make the form row a flex container and align items to the bottom */
/* Make the form a wrapping flex row and center rows */
#home-status-form{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;              /* row x column gap */
  justify-content: center;     /* center the first row (the inputs) */
  align-items: flex-end;       /* bottom-align inputs within their row */
}

/* Input columns: choose a comfy width and allow wrapping */
#home-status-form .col{
  flex: 0 1 320px;             /* ~320px each; adjust to taste */
  min-width: 240px;            /* don’t get too tiny */
}

/* Remove the bottom margin that was pushing things down */
#home-status-form .form-row{ margin-bottom: 0; }

/* Actions row: force it to the next line and center the button */
#home-status-form .actions{
  flex: 0 0 100%;              /* full-width row → line break */
  display: flex;
  justify-content: center;     /* center the button horizontally */
  margin-top: 4px;             /* tiny breathing room below inputs */
}

/* Optional: ensure button height matches inputs if you set a fixed control height */
#home-status-form { --control-h: 52px; }
#home-status-form .input{ box-sizing:border-box; block-size: var(--control-h); }
#home-status-form .btn{
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  block-size: var(--control-h); padding: 0 16px; line-height:1;
}


/* Brand button for the home check CTA */
/* Outline by default */
#btnHomeCheck.btn.btn-primary{
  background: transparent;
  color: #C74F27;
  border: 2px solid #C74F27;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 60ms ease;
  text-decoration: none; /* for <a> variants */
}

/* Fill on hover/focus */
#btnHomeCheck.btn.btn-primary:hover,
#btnHomeCheck.btn.btn-primary:focus{
  background-color: #C74F27;
  color: #fff;
}

/* Focus-visible ring for accessibility */
#btnHomeCheck.btn.btn-primary:focus-visible{
  outline: 3px solid rgba(199,79,39,0.35);
  outline-offset: 2px;
}

/* Active press feedback */
#btnHomeCheck.btn.btn-primary:active{
  transform: translateY(1px);
}

/* Optional: disabled look (if you use disabled state) */
#btnHomeCheck.btn.btn-primary:disabled{
  opacity: .5;
  pointer-events: none;
}




/* Helper */
.row{ display:flex; gap:16px; flex-wrap: wrap; }
.col{ flex:1 1 240px; }

/* Status badge */
.badge{
  display:inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight:700;
}
.badge.pending{ background:#fff3cd; color:#856404; }
.badge.awaiting{ background:#e0f7fa; color:#006064; }
.badge.progress{ background:#e8eaf6; color:#1a237e; }
.badge.resolved{ background:#e6f4ea; color:#0b6b38; }
.badge.closed{ background:#eee; color:#555; }

/* Utility spacing */
.mt-8{ margin-top:8px; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }
.mt-32{ margin-top:32px; }
.center{ text-align:center; }
.max-600{ max-width:600px; margin:0 auto; }
.max-600-tp{ max-width:600px; }



/* Divider text */
.divider{
  display:flex; align-items:center; gap:12px; color:var(--md-text-muted); font-weight:600; margin:16px 0;
}
.divider::before, .divider::after{
  content:''; height:1px; background: var(--md-border); flex:1;
}

/* Slide container for new-ticket */
.slide-wrap{
  position: relative; overflow: hidden; border-radius: var(--radius);
}
.slide-inner{
  display: flex; width: 200%;
  transition: transform 280ms ease;
}
.slide-inner.to-details{ transform: translateX(-50%); }
.panel{
  width: 50%; padding: 20px;
  background: var(--md-surface);
}
.no-shadow {
  box-shadow: none !important;
}

.preview-grid{
  display:grid; grid-template-columns: 80px 1fr; gap:12px; align-items:center;
  border:1px solid var(--md-border); border-radius:12px; padding:10px;
}
.preview-thumb{
  width:64px; height:64px; object-fit:cover; border-radius:8px; background:#f2f2f2;
}

/* FAQ accordion */
/* FAQ look: flat rows with only a bottom line */
.faq details{
  margin:0;
  border:0;
  background:transparent;
}
.faq details + details{ border-top:1px solid var(--md-border); }

/* Question row */
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:18px 32px 18px 0; /* space for + on the right */
  font-weight:700;
  color: var(--md-text-muted);
  position:relative;
  display:flex;
  align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }

/* + icon on the right */
.faq summary::after{
  content:"+";
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1em; text-align:center;             /* reserve space to prevent shift */
  font-size:22px; line-height:1;
  color: var(--md-text-muted);
  transition: transform 160ms ease, color 160ms ease;
}

/* Active/open state turns black and shows a minus */
.faq details[open] > summary{
  color: var(--md-text);
}
.faq details[open] > summary::after{
  content:"\2212"; /* true minus sign */
  color: var(--md-text);
}

/* Smooth slide animation (height-based) */
.faq .answer{
  overflow:hidden;
  height:0;                       /* collapsed by default */
  transition: height 220ms ease;  /* the magic */
}
.faq .answer > div{
  padding: 0 0 16px;   /* bottom spacing for content */
  color: var(--md-text-muted);
}

/* Accessibility: visible focus for keyboard users */
.faq summary:focus-visible{
  outline: 2px solid var(--md-text);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce){
  .faq .answer{ transition: none; }
  .faq summary::after{ transition: none; }
}

/* Optional nicety: first row also gets a top border for symmetry */
/* .faq details:first-of-type{ border-top:1px solid var(--md-border); } */

/* RTL support (optional)
[dir="rtl"] .faq summary{ padding:18px 0 18px 32px; }
[dir="rtl"] .faq summary::after{ right:auto; left:0; }
*/
/* remove underline for button-ish links */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus{
  text-decoration: none; /* add !important if something keeps fighting you */
}

/* Visually hide but keep for a11y */
/* ===== File picker (pure CSS) ===== */

/* 1) Width container: ~1/3 on desktop, full-width on mobile */
.filepicker-wrap { width: 42%; }
@media (max-width: 640px) {
  .filepicker-wrap { width: 100%; }
}

/* 2) Color system (override via inline style on .filepicker if you like) */
.filepicker {
  --btn-bg: #e5e7eb;         /* left slab (light gray) */
  --btn-bg-hover: #d1d5db;   /* hover state for left slab */
  --btn-fg: #374151;         /* left slab text */
  --field-bg: #ffffff;       /* right pane background (white) */
  --field-fg: #1f2937;       /* text color */
  --border: #cbd5e1;         /* darker border */
  --focus: #9ca3af;          /* focus ring */
  --radius: 10px;            /* big rounded corners */
}

/* 3) Accessible, visually-hidden real file input */
.filepicker-input {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 4) Field label */
.filepicker-label {
  display: block;
  margin-bottom: .5rem;
  font: 300 0.95rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--md-primary);
  opacity: .9;
}

/* 5) Faux control that forwards clicks to the hidden input via `for` */
.filepicker-ui {
  display: flex;
  align-items: center;                     /* vertical centering */
  background: var(--field-bg);             /* right side stays white */
  color: var(--field-fg);
  border: 1px solid var(--md-border);         /* darker border */
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: box-shadow .15s ease, background-color .15s ease;
}

/* Focus ring when real input receives focus */
.filepicker-ui:focus-within,
.filepicker-ui:focus-visible {
  outline: none;
  box-shadow:
          0 0 0 3px color-mix(in oklab, var(--focus) 35%, transparent);
}

/* 6) Left slab (“Choose file”) — fully filled, no gap */
.filepicker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem .9rem;                    /* reduced height */
  min-height: 2.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 400 .95rem/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* not bold */
  white-space: nowrap;
  border-right: 1px solid var(--border);   /* crisp seam */
  border-radius: var(--radius)+1 0 0 var(--radius)+1;
  flex: 0 0 auto;
  transition: background-color .15s ease;
}
.filepicker-ui:hover .filepicker-button { background: var(--btn-bg-hover); }
.filepicker-ui:active .filepicker-button { filter: brightness(0.97); }

/* 7) Right pane (filename) — fills remaining width and stays white */
.filepicker-name {
  display: inline-flex;
  align-items: center;                     /* vertical centering */
  padding: .6rem .8rem;                    /* reduced height */
  font-size: .95rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #ffffff;                     /* ensure white even if parent differs */
  color: var(--field-fg);
  opacity: .9;
}

/* 8) Disabled state (when input is disabled) */
.filepicker-input:disabled + .filepicker-ui,
.filepicker-input[disabled] + .filepicker-ui {
  cursor: not-allowed;
  opacity: .6;
  filter: grayscale(10%);
  pointer-events: none;
}
/* parent height (tweak as needed) */
.filepicker-ui {
  height: 44px;              /* or set a var and use var(--field-height) */
  align-items: stretch;      /* make children fill full height */
  box-sizing: border-box;
}

/* left button fills parent perfectly */
.filepicker-button {
  height: 100%;
  padding-block: 0;          /* remove vertical padding */
  padding-inline: 14px;      /* keep horizontal padding */
  display: flex;
  align-items: center;       /* center text vertically */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* right side also fills parent height */
.filepicker-name {
  height: 100%;
  display: flex;
  align-items: center;
}
.filepicker-label { display: inline-flex; align-items: center; gap: .5rem; }
.icon-attach { width: 18px; height: 18px; color: currentColor; opacity: .9; }


/* Ensure the container itself allows content to flow left */
#replyPreviews {
  display: flex; /* Use flexbox for easy left alignment of items */
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  justify-content: flex-start; /* Align items to the start (left) */
  gap: 10px; /* Add some space between preview tiles */
  /* You might also want to remove any existing text-align: right; if present */
  text-align: left;
}

/* Style for individual preview tiles (assuming they are direct children or have a specific class) */
/* Example: if each preview tile is a div with class 'preview-tile' */
.file-previews .preview-tile,
.file-previews img, /* If images are direct children */
.file-previews .file-item /* Another common class name for preview items */
{
  cursor: default; /* Change mouse pointer to normal arrow */
  /* Remove any zoom effects or transforms if present */
  transform: none;
  transition: none;
}

/* If you have a specific class for image previews and it's causing the zoom */
.file-previews img.thumbnail { /* Adjust .thumbnail to your actual class if different */
  cursor: default;
  /* If there's any object-fit: contain/cover that you want to change, do it here */
  /* For example, if you want actual size, or a different scaling */
}

/* Make sure no existing :hover state adds zoom or pointer */
.file-previews .preview-tile:hover,
.file-previews img:hover,
.file-previews .file-item:hover {
  cursor: default;
  transform: none; /* Crucial to undo any hover-based scaling */
  /* Remove any box-shadow or other hover effects if undesired */
}