/* ==========================================================================
   Helpdesk — application stylesheet.

   --navy and its two darker shades below are the brand colour, and an
   installation overrides all three from the settings page: inc/layout.php emits a
   :root block after this file that redeclares them. The greens, ambers and reds
   further down are status colours carrying meaning rather than branding, so they
   are deliberately not themeable.
   ========================================================================== */

:root {
  --navy: #163a66;
  --navy-dark: #0e2747;
  --navy-deeper: #0a1d36;
  --accent: #56aede;
  --accent-light: #9fd1ef;
  /* Text and wash derived from the accent. Overridden per installation by
     brand_colour_style(), so a chosen colour reaches these too. */
  --accent-ink: #135a96;
  --accent-wash: #e3effa;

  --bg: #f3f7fb;
  --panel: #ffffff;
  --ink: #1c2b3a;
  --muted: #5b6b7c;
  --line: #e3ebf2;
  /* Form controls need a stronger edge than panel dividers, otherwise the
     boxes almost vanish against the page background. */
  --field-line: #7590a9;

  /* legacy aliases kept so any stray reference still resolves */
  --brand: #163a66;
  --brand-dark: #0e2747;

  --ok: #1b6e3d;
  --warn: #8a6410;
  --err: #c0392b;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(14, 39, 71, 0.08);
  --shadow-md: 0 8px 30px rgba(14, 39, 71, 0.12);
  --shadow-lg: 0 18px 50px rgba(14, 39, 71, 0.18);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SF Mono", "Menlo", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: none; }

h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; color: var(--navy-dark); margin: 0 0 1rem; }
h2 { font-size: 1.15rem; font-weight: 700; color: var(--navy-dark); margin: 2rem 0 0.75rem; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.muted { color: var(--muted); }

/* ---- top nav ---- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(120deg, var(--navy-deeper) 0%, var(--navy) 100%);
  color: #d7e6f2;
  padding: 0 1.25rem;
  /* An admin's nav is wider than a 1440px laptop; let it take a second line
     rather than running off the edge and scrolling the whole page sideways. */
  flex-wrap: wrap;
  min-height: 60px;
  padding-block: 0.25rem;
  box-shadow: var(--shadow-md);
}
.topnav a { color: #cfe0f0; padding: 0.5rem 0.85rem; border-radius: 8px; font-weight: 600; font-size: 0.92rem; }
.topnav a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.topnav .brand { display: flex; align-items: center; gap: 0.5rem; padding-right: 0.75rem; }
.topnav .brand-logo, .topnav .brand-name { padding: 0.4rem 0.3rem; border-radius: 8px; }
.topnav .brand-logo { padding-left: 0; }
.topnav .brand-logo img { display: block; height: 26px; width: auto; }
.topnav .brand-logo:hover { background: none; }
.topnav .brand-name { font-weight: 700; color: var(--accent-light); letter-spacing: 0.02em; }
.topnav .brand-name:hover { background: none; color: #fff; }
.topnav .spacer { flex: 1; }
.topnav .who { color: #9fb8cd; font-weight: 500; }
.topnav .logout { color: #9fb8cd; }
.topnav .langsw { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.82rem; }
.topnav .langsw a { color: #9fb8cd; padding: 0.35rem 0.35rem; border-radius: 6px; font-weight: 600; }
.topnav .langsw a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.topnav .langsw .on { color: var(--accent-light); font-weight: 700; padding: 0.35rem 0.35rem; }
.topnav .langsw .sep { color: #45607a; }

/* Language switcher on the auth pages (login / register / verify / forgot). */
.auth-langsw { max-width: 780px; margin: 0.75rem auto -0.25rem; padding: 0 0.5rem; text-align: right; }
.auth-langsw .langsw { font-size: 0.85rem; }
.auth-langsw .langsw a { color: var(--muted); font-weight: 600; padding: 0.2rem 0.35rem; }
.auth-langsw .langsw a:hover { color: var(--navy); }
.auth-langsw .langsw .on { color: var(--navy); font-weight: 700; }
.auth-langsw .langsw .sep { color: var(--line); margin: 0 0.1rem; }

/* ---- flash messages ---- */
.flash {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  border: 1px solid;
  font-size: 0.95rem;
}
.flash-ok  { background: #e8f8ee; border-color: #b5e5c8; color: var(--ok); }
.flash-err { background: #fdeeee; border-color: #f2c7c7; color: var(--err); }

/* ---- login / setup ---- */
.auth-card {
  max-width: 400px;
  margin: 9vh auto 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.25rem;
  box-shadow: var(--shadow-lg);
}
.auth-card .auth-logo { display: block; height: 40px; width: auto; margin: 0 auto 1rem; }

/* ---- two-column sign-in (staff | customer) ---- */
.auth-split { max-width: 780px; margin: 6vh auto 0; }
.auth-split-head { text-align: center; margin-bottom: 1.4rem; }
.auth-split-head .auth-logo { display: block; height: 40px; width: auto; margin: 0 auto 0.7rem; }
.auth-split-head h1 { font-size: 1.35rem; margin: 0; }
.auth-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.auth-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.auth-panel h2 { font-size: 1.02rem; margin: 0 0 1.1rem; }
.auth-panel--staff { border-top: 3px solid var(--navy); }
.auth-panel--staff h2 { color: var(--navy); }
.auth-panel--customer { background: var(--bg); border-top: 3px solid var(--accent); }
.auth-panel--customer h2 { color: var(--accent-ink); }
.auth-panel--customer button { background: var(--accent); color: var(--navy-deeper); }
.auth-panel--customer button:hover { background: var(--accent-light); color: var(--navy-deeper); }
.auth-panel .auth-links { text-align: left; margin: 0.9rem 0 0; }
@media (max-width: 640px) { .auth-cols { grid-template-columns: 1fr; } }
.auth-card h1 { text-align: center; color: var(--navy-dark); font-size: 1.35rem; }
.auth-card .muted { text-align: center; }

/* ---- forms ---- */
label { display: block; margin-bottom: 0.85rem; font-weight: 600; font-size: 0.82rem; color: var(--navy-dark); }
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
select, textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(86, 174, 222, 0.18);
}
button {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.3rem;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
button:hover { background: var(--navy-dark); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; font-weight: 600; border-radius: 8px; }
.btn-link { align-self: center; font-weight: 600; }
.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.check input { width: auto; margin: 0; }

.ticket-form { max-width: 720px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1rem; }
.grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 1rem; }

/* ---- dashboard cards ---- */
.cards { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.card {
  flex: 1;
  min-width: 112px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--muted);
  font-size: 0.8rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { text-decoration: none; border-color: rgba(86, 174, 222, 0.6); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(86, 174, 222, 0.35); }
.card-n { font-size: 1.7rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }

/* ---- filters ---- */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; align-items: center; }
.filters input[type="search"] { flex: 2; min-width: 220px; margin: 0; width: auto; }
.filters select { flex: 1; min-width: 150px; margin: 0; width: auto; }
/* Date-range boxes stay inline and narrow, unlike the full-width form inputs. */
.filters input[type="text"].date-filter { flex: 0 0 auto; width: 10.5rem; margin: 0; }
.filters button { margin: 0; }

/* ---- helpers on a ticket (owner stays tickets.assigned_to) ---- */
.helper-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.6rem;          /* generous column gap: names must never crowd */
  flex: 1 0 100%;              /* its own row under the selects */
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.9rem 0.7rem;
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.helper-picker legend { padding: 0 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.helper-picker legend .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Beat `.update-bar label { flex: 1; min-width: 140px }`: a 0 flex-basis plus
   nowrap makes long names overflow their box and collide with the next one. */
.update-bar .helper-picker .helper-chk {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
}
.helper-chk input { width: auto; margin: 0; display: inline-block; flex: none; }
/* The owner is shown greyed and unclickable — they already have the ticket. */
.helper-chk.is-owner { opacity: 0.4; cursor: not-allowed; }
.helper-chk.is-owner input { cursor: not-allowed; }
.helper-more {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: #e3effa;
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: help;
}

/* ---- ticket linking (related tickets) ---- */
.ticket-links { margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.link-rel { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.link-children { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; }
.link-children ul { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.link-children li { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.link-children li .muted { font-size: 0.85rem; }
.link-remind { margin: 0.6rem 0 0.4rem; color: #8a6410; background: #fff4d6; border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; font-size: 0.9rem; }
.link-inline { display: inline; margin: 0; }
.link-inline button { margin-top: 0.5rem; }
.link-add { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.6rem; }
.link-add label { margin: 0; font-weight: 600; font-size: 0.85rem; }
.link-hash { display: inline-flex; align-items: center; gap: 0.15rem; margin-top: 0.3rem; font-weight: 400; }
.link-add input { width: 6rem; margin: 0; }
.link-flag { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }

/* ---- cross-folder search (search.php) ---- */
.search-summary { margin: 0 0 1.1rem; }
.search-summary p { margin: 0 0 0.45rem; }
.search-summary .tally .badge { margin-right: 0.35rem; }
.st-spam    { background: #fdf0dc; color: #8a5a00; }
.st-deleted { background: #fdeeee; color: var(--err); }
/* Monitoring / automation traffic (Zabbix, backup reports) — teal, distinct from
   spam's amber so an alert is never mistaken for junk at a glance. */
.st-alert   { background: #dcf3ef; color: #0e6f66; }
.card-alert .card-n { color: #0e6f66; }
.tickets th.nowrap, .tickets td.nowrap { white-space: nowrap; }

/* ---- ticket table ---- */
table.tickets { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.tickets th, .tickets td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tickets th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--bg); font-weight: 700; }
.tickets th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.tickets th.sortable:hover { color: var(--navy); }
.tickets th.sort-asc::after { content: "▲"; font-size: 0.62em; margin-left: 0.35em; vertical-align: 1px; }
.tickets th.sort-desc::after { content: "▼"; font-size: 0.62em; margin-left: 0.35em; vertical-align: 1px; }
.tickets tr:last-child td { border-bottom: 0; }
.tickets tbody tr:hover td { background: var(--bg); }
.tickets .num { color: var(--muted); }
.empty { color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: 2.5rem; text-align: center; box-shadow: var(--shadow-sm); }
/* A row pushed in by the live update briefly glows so it's noticed. */
@keyframes row-new-hl { 0% { background: #fff3c4; } 100% { background: transparent; } }
.tickets tbody tr.row-new td { animation: row-new-hl 3.5s ease-out; }

/* Dashboard tickets list: Subject and Customer get a big, fixed amount of room
   (roughly double), while every meta column is pinned to a width that fits its
   content (badges, names, dates) so nothing ever overlaps. The table keeps a
   min-width, so on narrow screens it scrolls horizontally instead of squashing. */
@media (min-width: 721px) {
  body:has(#ticket-table) .wrap { max-width: 1500px; }
  #ticket-table { table-layout: fixed; width: 100%; min-width: 1360px; }
  #ticket-table th:nth-child(1), #ticket-table td:nth-child(1) { width: 40px; }   /* # */
  #ticket-table th:nth-child(2), #ticket-table td:nth-child(2) { width: 380px; }  /* Subject */
  #ticket-table th:nth-child(3), #ticket-table td:nth-child(3) { width: 260px; }  /* Customer */
  #ticket-table th:nth-child(4), #ticket-table td:nth-child(4) { width: 110px; }  /* Category */
  #ticket-table th:nth-child(5), #ticket-table td:nth-child(5) { width: 90px; }   /* Priority */
  #ticket-table th:nth-child(6), #ticket-table td:nth-child(6) { width: 160px; }  /* Status */
  #ticket-table th:nth-child(7), #ticket-table td:nth-child(7) { width: 170px; }  /* Assignee */
  #ticket-table th:nth-child(8), #ticket-table td:nth-child(8) { width: 150px; }  /* Updated */
  #ticket-table td:nth-child(6), #ticket-table td:nth-child(7), #ticket-table td:nth-child(8) { white-space: nowrap; }
}

/* ---- badges ---- */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.st-open        { background: var(--accent-wash); color: var(--accent-ink); }
.st-in_progress { background: #fff4d6; color: #8a6410; }
.st-task        { background: #dcf3ef; color: #0e6f66; }
.st-waiting     { background: #f3e8fd; color: #6b3fa0; }
.st-resolved    { background: #e8f8ee; color: var(--ok); }
.st-closed      { background: #e9edf1; color: var(--muted); }
.pr-low    { background: #e9edf1; color: var(--muted); }
.pr-medium { background: var(--accent-wash); color: var(--accent-ink); }
.pr-high   { background: #fdebd7; color: #ad5b0d; }
.pr-urgent { background: #fdeeee; color: var(--err); }

/* ---- ticket view ---- */
/* Big floating "back to dashboard" arrow, vertically centred on the left. */
.ticket-back {
  position: fixed;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 2rem;
  line-height: 60px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  z-index: 60;
  transition: background 0.18s ease, transform 0.18s ease;
}
.ticket-back:hover { background: var(--navy-dark); text-decoration: none; color: #fff; transform: translateY(-50%) scale(1.07); }
/* Hide once the content column would reach the arrow, to avoid overlap. */
@media (max-width: 1300px) { .ticket-back { display: none; } }

/* Jump-to-top / jump-to-bottom controls, mirroring the back arrow on the right. */
.ticket-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  z-index: 60;
}
.ticket-nav-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background 0.18s ease, transform 0.18s ease;
}
.ticket-nav-btn:hover { background: var(--navy-dark); transform: scale(1.09); }
@media (max-width: 1300px) { .ticket-nav { display: none; } }

.ticket-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.meta-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.15rem; font-weight: 700; }
.ticket-body {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin-bottom: 1rem;
  white-space: normal;
  box-shadow: var(--shadow-sm);
}
.update-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.35rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.update-bar label { margin: 0; flex: 1; min-width: 140px; }
/* "Notify customer on resolve/close" — its own full-width row, compact. */
.update-bar label.notify-chk { flex: 1 0 100%; display: flex; align-items: center; gap: 0.4rem; font-weight: 400; font-size: 0.9rem; min-width: 0; }
.update-bar label.notify-chk input { width: auto; margin: 0; flex: none; }
.edit-details { margin-bottom: 1rem; }
.edit-details summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: 0.9rem; }
.edit-details form { margin-top: 0.75rem; }

/* ---- activity ---- */
.timeline { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.comment { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1.1rem; box-shadow: var(--shadow-sm); }
.comment-head { margin-bottom: 0.35rem; }
.event { font-size: 0.85rem; color: var(--muted); padding: 0.1rem 1rem; border-left: 3px solid var(--line); }
.comment-form textarea { margin-bottom: 0.6rem; }
.comment-box { margin-top: 1rem; }
.comment-box > label { margin-bottom: 0.3rem; }
.comment-actions { display: flex; justify-content: flex-end; margin-top: 0.6rem; }

/* ---- deleted folder & replies ---- */
.btn-danger { background: var(--err); }
.btn-danger:hover { background: #96281b; }
.card-deleted .card-n { color: var(--err); }
.ticket-head-actions { display: flex; align-items: center; gap: 0.5rem; }
.ticket-head-actions form { margin: 0; }
.deleted-banner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.deleted-actions { display: flex; gap: 0.5rem; }
.deleted-actions form { margin: 0; }
.comment-reply { border-left: 3px solid var(--accent); }
/* After posting a reply/comment the page jumps here; briefly highlight it. */
#activity { scroll-margin-top: 16px; animation: activity-hl 2.6s ease-out; }
@keyframes activity-hl {
  0%, 15% { box-shadow: 0 0 0 3px var(--accent); }
  100%    { box-shadow: 0 0 0 3px transparent; }
}

/* ---- attachments ---- */
.att-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.att-chip {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
}
.att-chip:hover { border-color: var(--accent); color: var(--navy); text-decoration: none; }
input[type="file"] { font-weight: 400; margin-top: 0.3rem; display: block; width: 100%; }
.att-list audio { display: block; width: 100%; max-width: 460px; height: 36px; }

/* ---- customers page: top form + filter ---- */
.cust-form { margin-bottom: 1.5rem; }
.cust-form > summary { font-weight: 600; color: var(--navy); }
.cust-form .ticket-form { margin-top: 0.75rem; }
.cust-searchbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.cust-searchbar input[type="search"] { flex: 1; max-width: 480px; margin: 0; }
#cust-count { white-space: nowrap; font-size: 0.85rem; }
/* Customers page uses more of the screen so the Company column can be large. */
body:has(#cust-table) .wrap { max-width: 1500px; }
/* Fixed layout with percentage widths; Company doubled (≈29% → 42%, ~2× its px
   width once the container is widened). Numbers/actions sized to their labels. */
#cust-table { table-layout: fixed; }
#cust-table thead th { white-space: nowrap; }
#cust-table td:nth-child(2), #cust-table td:nth-child(3) { overflow-wrap: anywhere; }
#cust-table th:nth-child(1), #cust-table td:nth-child(1) { width: 37%; }
#cust-table th:nth-child(2), #cust-table td:nth-child(2) { width: 19%; }
#cust-table th:nth-child(3), #cust-table td:nth-child(3) { width: 16%; }
#cust-table th:nth-child(4), #cust-table td:nth-child(4) { width: 6%; }
#cust-table th:nth-child(5), #cust-table td:nth-child(5) { width: 7%; }
#cust-table th:nth-child(6), #cust-table td:nth-child(6) { width: 6%; }
#cust-table th:nth-child(7), #cust-table td:nth-child(7) { width: 9%; }
/* Company name is the edit link. */
#cust-table td:nth-child(1) a { color: var(--navy); }
#cust-table td:nth-child(1) a:hover { color: var(--accent); }
/* Actions column: Edit + Delete on one line when there's room; wrap (stack)
   instead of clipping when the labels are long (Greek Επεξεργασία / Διαγραφή). */
#cust-table td:nth-child(7) { white-space: normal; }
#cust-table .row-actions { flex-wrap: wrap; justify-content: flex-start; gap: 0.35rem; }
#cust-table .row-actions .btn-sm { padding: 0.3rem 0.6rem; }
#cust-table td { padding-top: 0.4rem; padding-bottom: 0.4rem; }

/* ---- users page ---- */
.row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.row-actions form { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.inline-pass input { width: 140px; margin: 0; padding: 0.3rem 0.55rem; font-size: 0.8rem; }
.add-user { margin-top: 0.5rem; }

/* ---- portal / auth extras ---- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.6rem 0 1.1rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-links { text-align: center; margin-top: 1rem; font-size: 0.9rem; }
.auth-logo-link { display: block; }
.cf-turnstile { margin: 0.25rem 0 1rem; }
/* Dashboard activity badges: 'new' (red) and 'updated' (amber). */
.tickets tbody tr.row-attn td { background: #fff6f6; }
.tickets tbody tr.row-attn td.num { box-shadow: inset 3px 0 0 var(--err); }
.tickets tbody tr.row-attn td:nth-child(2) a { font-weight: 700; }
.tickets tbody tr.row-attn.is-upd td { background: #fff8ec; }
.tickets tbody tr.row-attn.is-upd td.num { box-shadow: inset 3px 0 0 var(--warn); }
.attn.attn-upd { color: var(--warn); background: #fff4d6; border-color: #f0dca6; }
.attn {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--err);
  background: #fdeeee;
  border: 1px solid #f2c7c7;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  vertical-align: middle;
  white-space: nowrap;
}
/* Green left-rail marks a message that came FROM the customer (portal). */
.comment-customer { border-left: 3px solid var(--ok); }
.inline-scope { margin: 0; }
.inline-scope select { width: auto; margin: 0; padding: 0.3rem 0.5rem; font-size: 0.85rem; }

@media (max-width: 720px) {
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .tickets th:nth-child(4), .tickets td:nth-child(4),
  .tickets th:nth-child(8), .tickets td:nth-child(8) { display: none; }
  /* On a phone the nav stays one swipeable row — wrapping it would eat the screen. */
  .topnav { gap: 0.25rem; overflow-x: auto; padding: 0 0.75rem; flex-wrap: nowrap; height: 60px; }
  .topnav .brand-name { display: none; }
}

/* Image lightbox (attachment viewer) */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 29, 54, 0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.lightbox-inner {
  max-width: min(1100px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--panel); border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.lightbox-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  background: var(--navy); color: #fff;
}
.lightbox-name {
  flex: 1; font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lightbox-dl, .lightbox-close {
  color: #fff; text-decoration: none; background: none; border: 0;
  font-size: 1rem; line-height: 1; cursor: pointer;
  padding: 0.25rem 0.4rem; border-radius: 6px;
}
.lightbox-dl:hover, .lightbox-close:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox-inner img {
  display: block; max-width: 100%;
  max-height: calc(92vh - 2.4rem);
  object-fit: contain;
  background: var(--navy-deeper);
}

/* Bulk delete on the Deleted folder */
.bulk-bar { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.6rem; }
.tickets th.chk, .tickets td.chk { width: 32px; text-align: center; padding-left: 8px; padding-right: 4px; }
.tickets th.chk input, .tickets td.chk input { cursor: pointer; margin: 0; }

/* Spam folder & banner */
.card-spam .card-n { color: #b26a00; }
/* Sender address shown beside the customer in the Spam list; one click selects
   the whole address so it can be copied into the Settings block list. */
.spam-email {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  word-break: break-all;
  user-select: all;
}
.spam-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff5e6; color: #7a4d00; border: 1px solid #f2d09a;
}
/* Monitoring alert banner — same shape as the spam one, teal instead of amber. */
.alert-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #e8f7f4; color: #0e6f66; border: 1px solid #b7e2da;
}
.spam-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.spam-actions form { margin: 0; }
.spam-assign { display: flex; gap: 0.4rem; align-items: center; }
.spam-assign input { margin: 0; padding: 0.3rem 0.5rem; font-size: 0.9rem; }

/* Signature editor preview */
.sig-preview {
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 14px; margin: 0 0 1rem; background: #fff;
  min-height: 48px; font-family: "Segoe UI", Arial, sans-serif;
}

/* Inline edit card (users edit form) */
.panel-card {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.25rem; margin: 0 0 1.5rem; background: #fff;
  box-shadow: var(--shadow-sm);
}
.panel-card h2 { margin-top: 0; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.panel-card h2 .btn-link { font-size: 0.85rem; font-weight: 500; }

/* Rich-text editor (reply / comment) — accepts pasted & dropped images inline. */
.richbox-editor {
  min-height: 5.5rem;
  max-height: 30rem;
  overflow-y: auto;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: break-word;
}
.richbox-editor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(19, 90, 150, 0.12); }
.richbox-editor:empty:before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.richbox-editor img { max-width: 100%; height: auto; border-radius: 4px; margin: 0.25rem 0; display: block; }

/* Speech-to-text toolbar injected above dictatable text areas. */
.dictate-bar { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem; flex-wrap: wrap; }
.dictate-mic { display: inline-flex; align-items: center; gap: 0.35rem; }
.dictate-mic.is-listening { background: var(--err); color: #fff; animation: dictate-pulse 1.2s ease-in-out infinite; }
.dictate-mic.is-listening:hover { background: #96281b; }
.dictate-lang { padding: 0.25rem 0.4rem; font-size: 0.8rem; }
.dictate-status { font-size: 0.82rem; font-style: italic; }
@keyframes dictate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 40, 27, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(200, 40, 27, 0); } }

/* Knowledge Base: canned-reply picker in the email box, and the edit actions row. */
.kb-insert { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.kb-insert-label { margin: 0; flex: 1 1 16rem; }
.kb-insert select { width: 100%; }
.kb-insert .btn-sm { white-space: nowrap; }
.kb-edit-actions { display: flex; gap: 0.6rem; align-items: center; }

/* WYSIWYG signature editor */
.sig-editor { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 0 0 0.4rem; background: #fff; }
.sig-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 5px 6px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.sig-tb {
  min-width: 30px; height: 28px; padding: 0 7px; margin: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--ink); font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.sig-tb:hover { background: #fff; border-color: var(--line); }
.sig-tb.on { background: var(--accent-light); border-color: var(--accent); }
.sig-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.sig-color { width: 30px; height: 28px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.sig-size { height: 28px; margin: 0; padding: 0 4px; font-size: 0.82rem; border: 1px solid var(--line); border-radius: 6px; width: auto; }
.sig-wysiwyg {
  min-height: 120px; padding: 12px 14px; outline: none;
  font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 400;
  line-height: 1.5; color: #1c2733; text-align: left;
}
.sig-wysiwyg:focus { box-shadow: inset 0 0 0 2px var(--accent-light); }
.sig-wysiwyg img { max-width: 100%; }

/* Email HTML rendered in a sandboxed iframe (scripts disabled) */
.mail-html {
  width: 100%; border: 0; display: block; background: #fff;
  min-height: 60px;
}
.ticket-body .mail-html { margin: 0.15rem 0; }
.comment .mail-html { margin-top: 0.3rem; }

/* Technician avatar */
.me-badge { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1.1rem; }
.me-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: #fff; }
.me-badge span { font-weight: 700; color: var(--navy-dark); font-size: 0.95rem; }
.avatar-edit { display: flex; align-items: center; gap: 1rem; margin: 0.35rem 0 0.4rem; }
.avatar-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: #fff; flex: none; }
.avatar-edit input[type="file"] { margin: 0; padding: 0.3rem 0; border: 0; background: none; width: auto; }

/* Inline editing of an internal staff note */
.comment-editlink { color: var(--accent); font-size: 0.78rem; font-weight: 600; margin-left: 0.5rem; }
.comment-editlink:hover { text-decoration: underline; }
.comment-editrow { margin-top: 0.3rem; }
.comment-editrow textarea { font-size: 0.9rem; margin: 0; }
.comment-canceledit { margin-top: 0.4rem; background: none; color: var(--muted); }
.comment-canceledit:hover { background: none; color: var(--ink); box-shadow: none; transform: none; }

/* --- Reminder pop-up ------------------------------------------------------
   A small panel bottom-right, over whatever page the technician is on. Never
   modal: it must not block work, only ask to be dealt with. */
.rem-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: min(380px, calc(100vw - 44px));
  max-height: min(70vh, 620px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 80;
  overflow: hidden;
}
.rem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--navy);
  color: #fff;
}
.rem-x {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
}
.rem-x:hover { background: none; box-shadow: none; transform: none; opacity: 0.8; }
.rem-body { overflow-y: auto; padding: 0.5rem; }
.rem-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.5rem;
  background: var(--bg);
}
.rem-card:last-child { margin-bottom: 0; }
.rem-note { font-weight: 600; line-height: 1.35; }
.rem-meta { color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }
.rem-link { display: block; font-size: 0.85rem; margin-top: 0.35rem; }
.rem-actions { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.6rem; }
.rem-actions select { margin: 0; padding: 0.3rem 0.4rem; font-size: 0.82rem; flex: 1 1 auto; min-width: 0; }
.rem-actions .btn-sm { flex: 0 0 auto; }
.rem-done { background: var(--ok, #1f7a4d); }

/* Reminders already sitting on a ticket. */
.rem-list { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.rem-list li {
  border-bottom: 1px solid var(--line);
  padding: 0.45rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.rem-list li:last-child { border-bottom: none; }

/* --- Customer context on a ticket, notes list, pending issues -------------- */
.cust-context { display: grid; gap: 0.75rem; margin: 1rem 0; }
/* Notes are pasted verbatim from Outlook, config sheets and mail: line breaks,
   blank lines and runs of spaces are all meaningful, and columns are lined up
   with spaces. pre-wrap keeps them (so the PHP must NOT also call nl2br), and a
   monospace face is what actually makes the columns line up. */
.note-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.5;
  tab-size: 4;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-top: 0.6rem;
  overflow-x: auto;
}
/* Type into the same shape you will read back. */
.note-form textarea, .note-edit textarea {
  font-family: var(--mono);
  font-size: 0.86rem;
  tab-size: 4;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.note-card > summary { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
/* One flat list of notes, grouped under a heading per company. */
.note-group {
  font-size: 0.95rem;
  color: var(--navy);
  margin: 1.4rem 0 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--line);
}
.note-list .note-card { margin-bottom: 0.5rem; }
.note-title { font-weight: 700; }
/* Titles-only list of a customer's notes on the ticket page. */
.note-peekrow { border-bottom: 1px solid var(--line); padding: 0.35rem 0; }
.note-peekrow:last-of-type { border-bottom: none; }
.note-peekrow > summary { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; cursor: pointer; }
.note-peekrow > summary:hover .note-title { color: var(--accent); }
.note-when { font-size: 0.8rem; font-weight: 400; }
.note-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; }
.note-actions .spacer { flex: 1; }
.note-count {
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.05rem 0.5rem;
}

/* Notes are long free text, so their boxes take the full content column instead
   of the 720px the other forms use. */
.wrap-wide { max-width: 1500px; }
.note-form { max-width: none; }
.note-form textarea { min-height: 26rem; line-height: 1.55; }

.note-entry {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  margin-top: 0.75rem;
  background: var(--panel);
}
.note-entry-head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; font-size: 0.86rem; }
.note-entry .note-body { margin-top: 0.4rem; }
.note-edit { margin-top: 0.5rem; }
.note-edit > summary { display: inline-block; cursor: pointer; list-style: none; background: var(--navy); color: #fff; }
.note-edit > summary::-webkit-details-marker { display: none; }
.note-edit > summary:hover { background: var(--navy-dark); }

.rem-edit-row > td { background: var(--bg); }
.rem-edit-row .ticket-form { max-width: none; margin: 0.5rem 0; }
.note-peek {
  font-weight: 400;
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}
.sec-h { margin-top: 2rem; }

/* "Add to Outlook calendar" tick-box on the reminder forms. */
.rem-cal { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.5rem 0 0.2rem; flex-wrap: wrap; }
.rem-cal input { width: auto; margin: 0; }

/* --- Tabs -------------------------------------------------------------------
   Used by the settings page, which had grown into one long scroll. The panels
   are ordinary blocks until JS marks the container .js-tabs, so with scripting
   off the page is exactly what it was before rather than only its first section:
   a settings page that hides four fifths of itself when a script fails to load
   would be a bad trade for tidiness. */
.tabs { display: flex; flex-wrap: wrap; gap: 0.15rem; border-bottom: 1px solid var(--line); margin: 0 0 1.25rem; }
.tabs .tab {
  /* Everything the global filled button sets has to come back off. */
  background: none; color: var(--muted); font-weight: 600;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 0.55rem 0.9rem; margin: 0 0 -1px;
}
.tabs .tab:hover { background: none; color: var(--ink); box-shadow: none; transform: none; }
.tabs .tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tabs .tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.js-tabs .tabpanel { display: none; }
.js-tabs .tabpanel.is-active { display: block; }
/* The first heading inside a panel would otherwise push it away from the tabs. */
.tabpanel > h2:first-child { margin-top: 0; }
/* With tabs on, that heading only repeats the tab you just clicked. It stays in the
   markup because with tabs off it is the only thing separating the sections. */
.js-tabs .tabpanel > h2:first-child { display: none; }
/* A repeating reminder that has just been cleared: the card is replaced by this for a
   moment so it is clear the reminder is coming back rather than gone. */
.rem-again {
  padding: .6rem .75rem;
  font-size: .9rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
/* The repeat rule beside a reminder in the list. */
.rem-repeat { font-size: .85rem; white-space: nowrap; }

/* The sign-in page with the customer portal switched off: one panel, not a half-width
   column with a gap where the other one used to be. */
.auth-cols--single { grid-template-columns: minmax(0, 26rem); justify-content: center; }

/* The list of optional modules on the settings page. A fieldset because these really
   are one choice made five times, and a bare run of checkboxes reads as five unrelated
   ones. */
.feature-set { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin: 1.25rem 0; }
.feature-set legend { font-weight: 600; font-size: .82rem; color: var(--navy-dark); padding: 0 .4rem; }
.feature-set label { margin-bottom: .35rem; }

/* An internal ticket: the company's own work, which the customer never sees. Given its
   own colour rather than another grey badge, because "can the customer read this?" is
   the question somebody needs answered before they start typing. */
.badge-internal { background: #f3e6c4; color: #6b5310; border: 1px solid #e0cd97; }
/* The checkbox that sets it, on the new-ticket and ticket-details forms. */
.int-toggle { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; margin: .9rem 0; }
.int-toggle input { width: auto; margin: 0; }