/* ====== osTicket Modernized Theme (drop-in) ====== */
/* Load after the original theme.css to override safely */

/* ---------- Design tokens ---------- */
:root {
  --bg: #f7f9fc;
  --fg: #0f172a;            /* near-slate-900 */
  --muted: #64748b;         /* slate-500 */
  --primary: #0ea5e9;       /* sky-500 */
  --primary-600: #0284c7;   /* sky-600 */
  --success: #16a34a;       /* green-600 */
  --warning: #f59e0b;       /* amber-500 */
  --danger: #ef4444;        /* red-500 */
  --surface: #ffffff;
  --surface-2: #f1f5f9;     /* slate-100 */
  --ring: rgba(14,165,233,.45);
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(2,8,23,.06), 0 1px 1px rgba(2,8,23,.04);
  --shadow-md: 0 10px 15px rgba(2,8,23,.08), 0 4px 6px rgba(2,8,23,.06);
  --shadow-lg: 0 20px 25px rgba(2,8,23,.10), 0 8px 10px rgba(2,8,23,.08);
  --spacing: clamp(14px, 1.2vw, 18px);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --fg: #e5e7eb;
    --muted: #a1a1aa;
    --surface: #0f172a;
    --surface-2: #111827;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --ring: rgba(56,189,248,.45);
  }
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.55;
}

/* Remove the old textured background + fixed width container */
body { background-image: none !important; } /* overrides page_bg.png */

/* Container */
#container {
  width: min(1100px, 92%);
  margin: clamp(12px, 2.2vh, 24px) auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: clip;
}

/* ---------- Header ---------- */
#header {
  height: auto;
  padding: calc(var(--spacing) * 1.2) clamp(18px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(2,8,23,.08);
}

#logo,
#header #logo { height: auto; }
#header #logo img {
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
}

#header p {
  width: auto;
  padding: 0;
  margin: 0;
  color: var(--muted);
  text-align: right;
}

/* ---------- Top Nav ---------- */
#nav {
  margin: 0;
  padding: 8px clamp(12px, 2vw, 20px);
  height: auto;
  background: var(--surface);
  border: 0;
  box-shadow: none;
  border-top: 1px solid rgba(2,8,23,.06);
}

#nav ul, #nav { white-space: normal; }
#nav li { list-style: none; display: inline-flex; }

#nav li a {
  /* Replace image-bullets with clean pills */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  line-height: 1;
  padding: 10px 14px;
  margin: 6px 8px 6px 0;
  color: var(--fg);
  background: var(--surface-2);
  border-radius: 999px;
  border: 1px solid rgba(2,8,23,.06);
  background-image: none !important;        /* kill icon sprites */
  transition: background .2s, color .2s, transform .05s, border-color .2s;
}
#nav li a:hover,
#nav li a.active {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--primary) 25%, rgba(2,8,23,.06));
  color: var(--fg);
}
#nav li a:active { transform: translateY(1px); }

/* ---------- Content ---------- */
#content {
  padding: clamp(18px, 3vw, 32px);
  margin: 0;
  min-height: 320px;
}

/* Headings */
h1 {
  color: var(--primary);
  font-weight: 600;
  letter-spacing: .2px;
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 28px);
}
h2 {
  color: var(--fg);
  font-weight: 600;
  margin: 18px 0 8px;
  font-size: clamp(16px, 1.8vw, 20px);
}
h3 { font-weight: 600; }

/* ---------- Buttons ---------- */
.button, .button:visited,
.blue.button, .green.button {
  --btn-bg: var(--primary);
  --btn-bg-h: var(--primary-600);
  --btn-fg: white;
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border: 0 !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-md) !important;
  text-shadow: none !important;
  transition: transform .05s, box-shadow .2s, background .15s;
}
.button:hover { background: var(--btn-bg-h) !important; }
.button:active { transform: translateY(1px); box-shadow: var(--shadow-sm) !important; }

/* Color variants mapped to old classes */
.green.button { --btn-bg: var(--success); --btn-bg-h: #15803d; }
.blue.button  { --btn-bg: var(--primary); --btn-bg-h: var(--primary-600); }

/* ---------- Landing page CTAs ---------- */
#landing_page #new_ticket,
#landing_page #check_status {
  background: none !important; /* remove bitmap icons */
  width: 100%;
  max-width: 480px;
  padding: 18px 20px;
  margin-top: 18px;
  border-radius: 14px;
  border: 1px solid rgba(2,8,23,.08);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#landing_page #new_ticket::before,
#landing_page #check_status::before {
  content: attr(data-icon);
  /* Use emoji or swap to inline SVG if you prefer */
  font-size: 26px;
  opacity: .9;
}

#landing_page #new_ticket { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
#landing_page #check_status { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }

/* Responsive 2-up -> 1-up */
@media (min-width: 680px) {
  #landing_page #new_ticket { float: left; }
  #landing_page #check_status { float: right; }
}
@media (max-width: 679.98px) {
  #landing_page #new_ticket,
  #landing_page #check_status { float: none; width: 100%; }
}

/* ---------- Alerts (IDs kept) ---------- */
#msg_notice,
#msg_warning,
#msg_error,
#msg_info,
.warning-banner {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  line-height: 1.4;
  background-image: none !important;
  box-shadow: var(--shadow-sm);
}

#msg_notice { background: color-mix(in srgb, var(--success) 12%, var(--surface)); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
#msg_warning, .warning-banner { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
#msg_error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
#msg_info  { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }

/* ---------- Forms ---------- */
input, select, textarea {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid rgba(2,8,23,.12) !important;
  padding: 9px 10px;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(2,8,23,.04);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px var(--ring);
}

label.required, span.required { font-weight: 700; }

/* Make wide textareas responsive */
#ticketForm td textarea,
#clientLogin td textarea,
#ticketForm div textarea,
#clientLogin div textarea,
#reply textarea {
  width: 100% !important;
  max-width: 100%;
  min-height: 120px;
}

/* Client login card */
#clientLogin {
  display: block;
  margin-top: 20px;
  padding: clamp(16px, 2.5vw, 22px);
  border: 1px solid rgba(2,8,23,.08);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  background: var(--surface) !important; /* remove lock image */
  background-image: none !important;
}

/* ---------- Tables ---------- */
table {
  width: 100%;
}

#ticketTable {
  border: 1px solid rgba(2,8,23,.12);
  border-left: 0;
  border-bottom: 0;
  border-radius: 10px;
  overflow: hidden;
}

#ticketTable th {
  background: var(--surface-2) !important;
  border: 1px solid rgba(2,8,23,.12);
  border-right: 0;
  border-top: 0;
  padding: 10px;
  font-weight: 600 !important;
}

#ticketTable td {
  padding: 10px;
  border: 1px solid rgba(2,8,23,.08);
  border-right: 0;
  border-top: 0;
}

/* Zebra */
#ticketTable tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-2) 40%, var(--surface));
}

/* ---------- Thread / messages ---------- */
.thread-entry .header {
  border: 1px solid rgba(2,8,23,.12);
  border-radius: 12px 12px 0 0;
  padding: 10px 14px;
}

.thread-entry .thread-body {
  border: 1px solid rgba(2,8,23,.12);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--surface);
}

/* ---------- Pagination ---------- */
#pagination li a,
#pagination .active,
#pagination .previousOff,
#pagination .nextOff {
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(2,8,23,.12);
}
#pagination li a:hover { color: var(--primary-600); }

/* ---------- Footer ---------- */
#footer {
  text-align: center;
  font-size: 13px;
  padding: 18px;
  color: var(--muted);
  border-top: 1px solid rgba(2,8,23,.08);
}
#footer #poweredBy {
  background: none !important;  /* remove raster */
  width: auto; height: auto;
  text-indent: 0;
  margin-top: 6px;
  opacity: .7;
}

/* ---------- Utility ---------- */
.hidden { display: none !important; }
.centered { text-align: center; }

/* RTL nudge (keeps your existing RTL hooks) */
.rtl #nav li a { margin-left: 0; margin-right: 8px; }