/* ===================================================================
   EmiraiTask — base styles
   A distinctive, premium interface built with plain CSS (no framework,
   no build step) so it works reliably on shared hosting. Ink + warm
   paper surfaces, a gold brand accent, and a violet accent reserved for
   AI-powered features.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* Warm neutral surfaces */
  --paper:          #f7f5f0;
  --surface:        #ffffff;
  --surface-2:      #f1efe6;
  --surface-sunken: #ece8db;
  --border:         #e5e1d3;
  --border-strong:  #d6d0bd;

  /* Ink (near-black — matches the EMIRAI mark) */
  --ink:    #13131c;
  --ink-2:  #1c1c28;
  --ink-3:  #292937;

  /* Text */
  --text:          #1a1a22;
  --text-soft:      #63626e;
  --text-faint:     #98979f;
  --text-on-ink:      #f6f5f1;
  --text-on-ink-soft: rgba(246,245,241,0.62);
  --text-on-ink-faint: rgba(246,245,241,0.4);

  /* Brand accent — warm gold */
  --gold:      #c8912e;
  --gold-deep: #9c701f;
  --gold-soft: #f7ecd8;

  /* AI accent — violet (reserved for AI-powered surfaces) */
  --violet:      #6d5bd6;
  --violet-deep: #5544b0;
  --violet-soft: #eee9fb;

  /* Status */
  --st-not-started: #92909d; --st-not-started-soft: #ecebee;
  --st-working:     #2f7de1; --st-working-soft:     #e4edfc;
  --st-stuck:       #dd4a40; --st-stuck-soft:        #fbe7e5;
  --st-done:        #1f9d5b; --st-done-soft:         #e2f5ea;

  /* Priority */
  --pr-low:      #7c8591; --pr-low-soft:      #edeff1;
  --pr-medium:   #c8912e; --pr-medium-soft:   #f7ecd8;
  --pr-high:     #e0793a; --pr-high-soft:     #fbead9;
  --pr-critical: #d23a3a; --pr-critical-soft: #fbe3e3;

  /* Roles */
  --role-super:    #13131c; --role-super-soft:    #efeee9;
  --role-chairman: #7d5ad1; --role-chairman-soft: #ece7fa;
  --role-hr:       #0f9d76; --role-hr-soft:        #e0f5ee;
  --role-admin:    #2f7de1; --role-admin-soft:     #e4edfc;
  --role-member:   #6b6a76; --role-member-soft:    #ececee;

  --danger:      #d23a3a; --danger-soft: #fbe4e4;
  --success:     #1f9d5b; --success-soft: #e2f5ea;

  --radius-sm: 7px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(19,19,28,0.05), 0 1px 1px rgba(19,19,28,0.04);
  --shadow:    0 6px 20px rgba(19,19,28,0.08);
  --shadow-lg: 0 24px 60px rgba(19,19,28,0.22);

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute must always win over any element's own
   `display` rule (e.g. .btn's `display: inline-flex`) -- an author rule
   otherwise beats the browser's built-in `[hidden]{display:none}`, which
   is exactly backwards for a toggle like #attach-upload-btn. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 8px; font-weight: 700; letter-spacing: -0.01em; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* -------------------------------------------------------------- */
/* Layout shell                                                    */
/* -------------------------------------------------------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 246px;
  flex-shrink: 0;
  background: var(--ink);
  background-image: radial-gradient(circle at 15% 0%, rgba(200,145,46,0.14), transparent 55%);
  color: var(--text-on-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .15s ease;
  /* Higher than .topbar's z-index:10 -- otherwise the topbar (a sibling
     stacking context) paints over the toggle button below, which pokes
     out past the sidebar's own right edge into that shared boundary. */
  z-index: 15;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 26px 22px 22px;
}

.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo-full { height: 20px; width: auto; flex-shrink: 0; }
.brand-logo-mark { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: none; }
.brand-suffix {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  padding-left: 10px;
  border-left: 1px solid rgba(246,245,241,0.22);
  white-space: nowrap;
}

/* Kept for auth pages / any legacy reference. */
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; background: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0; color: var(--ink);
}
.brand-name { font-size: 16px; font-weight: 700; }

.sidebar-nav {
  flex: 1;
  padding: 6px 14px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-on-ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 2px;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
}
.nav-item svg { opacity: 0.75; transition: opacity .15s ease; }

.nav-item:hover { background: rgba(246,245,241,0.06); text-decoration: none; color: var(--text-on-ink); }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { background: rgba(200,145,46,0.14); color: #fff; }
.nav-item.active svg { opacity: 1; color: var(--gold); }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--gold);
}

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--radius-pill);
}

.sidebar-user {
  padding: 16px 16px 20px;
  border-top: 1px solid rgba(246,245,241,0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-user-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: var(--text-on-ink);
  padding: 6px;
  border-radius: var(--radius-sm);
}
.sidebar-user-link:hover { background: rgba(246,245,241,0.07); text-decoration: none; }

.sidebar-user-info { display: flex; flex-direction: column; min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 11px; color: var(--text-on-ink-faint); margin-top: 1px; }

.logout-link {
  color: var(--text-on-ink-soft);
  font-size: 16px;
  padding: 8px;
  border-radius: var(--radius-sm);
  display: flex;
}
.logout-link:hover { background: rgba(220,80,70,0.18); color: #ff9d94; text-decoration: none; }

/* Manual sidebar collapse (see #sidebar-toggle-btn in includes/header.php
   and its click handler in app.js) -- separate from the automatic
   max-width:900px collapse below, which is viewport-driven and always on
   regardless of this toggle. Persisted per-browser via localStorage so it
   survives a reload/navigation; there's nothing sensitive or
   cross-device about it, so it's never sent to the server. */
.sidebar-toggle-btn {
  position: absolute;
  top: 26px;
  right: -12px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}
.sidebar-toggle-btn:hover { color: var(--text); }
.sidebar-toggle-btn svg { transition: transform .15s ease; }

body.sidebar-collapsed .sidebar-toggle-btn svg { transform: rotate(180deg); }
body.sidebar-collapsed .sidebar { width: 76px; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 22px 0; }
body.sidebar-collapsed .brand-logo-full { display: none; }
body.sidebar-collapsed .brand-logo-mark { display: block; }
body.sidebar-collapsed .brand-suffix,
body.sidebar-collapsed .sidebar-user-info,
body.sidebar-collapsed .nav-item span:last-child { display: none; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 12px; }
body.sidebar-collapsed .nav-item.active::before { left: 0; }
body.sidebar-collapsed .sidebar-user-link { justify-content: center; }

.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: rgba(247,245,240,0.88);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--border);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-right { display: flex; align-items: center; gap: 14px; }
.page-title { font-size: 21px; display: flex; align-items: center; gap: 12px; }
.page-subtitle { color: var(--text-soft); margin: 20px 32px 0; font-size: 13.5px; }

.back-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-soft);
  background: var(--surface);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}
.back-arrow:hover { color: var(--text); border-color: var(--gold); background: var(--surface-2); }

.page-content { padding: 22px 32px 64px; }

/* -------------------------------------------------------------- */
/* Auth pages (login / install)                                    */
/* -------------------------------------------------------------- */

.auth-body {
  background: var(--ink);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(200,145,46,0.16), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(109,91,214,0.16), transparent 45%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 28px;
}
.auth-brand .brand-lockup { gap: 12px; }
.auth-logo { height: 24px; width: auto; }
.auth-brand .brand-suffix { color: var(--gold-deep); border-left-color: var(--border-strong); font-size: 14px; }

.auth-heading { font-size: 21px; margin-bottom: 18px; }
.auth-form { display: flex; flex-direction: column; }
/* Every field gets 16px of breathing room above it via .field-label's own
   margin-top, but the submit button isn't a labeled field -- with no rule
   of its own it sat flush against the password input while everything
   else above it had visible spacing, reported as uneven spacing on the
   login form. */
.auth-form .btn { margin-top: 20px; }

/* -------------------------------------------------------------- */
/* Buttons & form fields                                           */
/* -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
  transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--text-on-ink); }
.btn-primary:hover { background: var(--ink-2); box-shadow: var(--shadow-sm); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-danger-outline { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); }
.btn-danger-outline:hover { background: var(--danger-soft); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #b52e2e; border-color: #b52e2e; }
.btn-block { width: 100%; }
.btn-small { padding: 8px 14px; font-size: 12.5px; margin-top: 8px; border-radius: var(--radius-pill); }
.btn-tiny { padding: 5px 12px; font-size: 11.5px; border-radius: var(--radius-pill); }

/* AI-flagged actions get the violet accent treatment. */
.btn-ai, #ai-generate-btn, #ai-create-btn {
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
}
.btn-ai:hover, #ai-generate-btn:hover, #ai-create-btn:hover { box-shadow: 0 6px 18px rgba(109,91,214,0.35); }

.field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-soft);
  margin: 16px 0 7px;
}
.field-label:first-child { margin-top: 0; }

.field-input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
textarea.field-input { resize: vertical; }

/* Small "fix with AI" sparkle button, anchored to the top-right corner of
   a Name/Title/Description field -- used on the New Project and New Task
   forms. See tfAiFix() in app.js. */
.field-with-ai { position: relative; }
.field-with-ai .field-input { padding-right: 42px; }
.ai-fix-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  color: var(--gold-deep);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ai-fix-btn:hover { background: var(--gold); color: #fff; }
.ai-fix-btn:disabled { cursor: default; opacity: .7; }
.ai-fix-btn svg { width: 14px; height: 14px; }
.ai-fix-btn-busy svg { animation: tf-spin .8s linear infinite; }
@keyframes tf-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.field-color { width: 60px; height: 40px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }

.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.avatar-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.avatar-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; background: var(--surface); transition: border-color .12s, background .12s;
}
.avatar-pick:hover { border-color: var(--border-strong); }
.avatar-radio:checked + .avatar-pick { border-color: var(--gold); background: var(--gold-soft); }
.avatar-pick .avatar { width: 34px; height: 34px; font-size: 12px; }
.avatar-pick-label { font-size: 10px; font-weight: 700; color: var(--text-soft); text-align: center; }
.avatar-pick-none .avatar { color: #fff; }

/* -------------------------------------------------------------- */
/* Cards, flash messages, stats                                    */
/* -------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.card-narrow { max-width: 480px; }
.card-title { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }

/* Reports page */
.card-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.card-title-row .card-title { margin-bottom: 0; }

.export-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.report-filter-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.report-filter-field { min-width: 150px; }
.report-filter-field .field-label { margin: 0 0 6px; }
.report-filter-check { display: flex; align-items: center; padding-bottom: 9px; }
.report-filter-actions { display: flex; gap: 8px; padding-bottom: 1px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }

/* Dashboard's custom date-range form (see dashboard.php) -- sits directly
   under the preset tabs, unwrapped by a .card like reports.php's filter
   form is, so it needs its own bottom margin before the stat grid. */
.dash-range-form { margin-bottom: 20px; }
.checkbox-label input { width: 16px; height: 16px; }

.flash-stack { margin: 18px 32px 0; }
.flash {
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
}
.flash-success { background: var(--success-soft); color: #147a45; }
.flash-error { background: var(--danger-soft); color: #b52e2e; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin: 20px 0 22px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--violet));
  opacity: 0.85;
}
.stat-card-alert { border-color: var(--danger); }
.stat-card-alert::before { background: var(--danger); }
.stat-value { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.stat-label { display: block; font-size: 12px; color: var(--text-soft); margin-top: 5px; font-weight: 600; }

.stat-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-card-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink); flex-shrink: 0;
}
.stat-card-icon-gold    { background: var(--gold-soft);    color: var(--gold-deep); }
.stat-card-icon-danger  { background: var(--danger-soft);  color: var(--danger); }
.stat-card-icon-violet  { background: var(--violet-soft);  color: var(--violet-deep); }
.stat-card-icon-success { background: var(--success-soft); color: var(--success); }

.dashboard-columns { display: flex; gap: 22px; align-items: flex-start; }
.dashboard-main { flex: 2; min-width: 0; }
.dashboard-side { flex: 1; min-width: 260px; }

.empty-state { color: var(--text-soft); font-size: 13px; padding: 8px 0; }

/* -------------------------------------------------------------- */
/* Badges (status / priority / role) — soft pill style              */
/* -------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.status-not-started { background: var(--st-not-started-soft); color: var(--st-not-started); }
.status-working     { background: var(--st-working-soft);     color: var(--st-working); }
.status-stuck        { background: var(--st-stuck-soft);        color: var(--st-stuck); }
.status-done          { background: var(--st-done-soft);          color: var(--st-done); }

.priority-low       { background: var(--pr-low-soft);      color: var(--pr-low); }
.priority-medium    { background: var(--pr-medium-soft);   color: var(--pr-medium); }
.priority-high       { background: var(--pr-high-soft);     color: var(--pr-high); }
.priority-critical  { background: var(--pr-critical-soft); color: var(--pr-critical); }

/* Task category badges -- neutral by default; "Graphic Design" gets its
   own color since it's the one category with a document-required gate
   (see task_category_requires_document() in includes/functions.php). */
[class*="badge-category-"] { background: var(--surface-2); color: var(--text-soft); }
.badge-category-graphic_design { background: var(--violet-soft); color: var(--violet-deep); }

.role-super-admin { background: var(--role-super); color: #fff; box-shadow: inset 0 0 0 1px var(--gold); }
.role-chairman { background: var(--role-chairman-soft); color: var(--role-chairman); }
.role-hr       { background: var(--role-hr-soft);       color: var(--role-hr); }
.role-admin    { background: var(--role-admin-soft);    color: var(--role-admin); }
.role-member   { background: var(--role-member-soft);   color: var(--role-member); }

.badge-you {
  font-size: 10px;
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  font-weight: 700;
}

/* Inline editable board cells stay solid for quick scanning. -------- */
select.cell-select.status-not-started { background: var(--st-not-started); color: #fff; }
select.cell-select.status-working     { background: var(--st-working);     color: #fff; }
select.cell-select.status-stuck       { background: var(--st-stuck);       color: #fff; }
select.cell-select.status-done        { background: var(--st-done);        color: #fff; }
select.cell-select.priority-low       { background: var(--pr-low);      color: #fff; }
select.cell-select.priority-medium    { background: var(--pr-medium);   color: #fff; }
select.cell-select.priority-high      { background: var(--pr-high);     color: #fff; }
select.cell-select.priority-critical  { background: var(--pr-critical); color: #fff; }
select.cell-select.status-not-started, select.cell-select.status-working,
select.cell-select.status-stuck, select.cell-select.status-done,
select.cell-select.priority-low, select.cell-select.priority-medium,
select.cell-select.priority-high, select.cell-select.priority-critical {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-align: center;
}

/* -------------------------------------------------------------- */
/* Avatars                                                          */
/* -------------------------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface);
}
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-tiny { width: 18px; height: 18px; font-size: 8px; }
.avatar-animal { padding: 2px; }
.avatar-animal-svg { width: 100%; height: 100%; display: block; }

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

/* -------------------------------------------------------------- */
/* Tables                                                            */
/* -------------------------------------------------------------- */

/* No overflow:hidden here on purpose -- it would clip the attachment
   quick-access popover (.attach-quick-menu), which is an absolutely
   positioned descendant that needs to escape the table's box. Rounded
   corners are done per-cell instead of via container clipping. */
.simple-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-lg); }
.simple-table th, .simple-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.simple-table th { color: var(--text-soft); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; background: var(--surface-2); }
.simple-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-lg); }
.simple-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-lg); }
.simple-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.simple-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }
.simple-table tr:last-child td { border-bottom: none; }
.simple-table tbody tr:hover { background: var(--surface-2); }

/* The arrow used to be absolutely positioned at a fixed distance from the
   TH's right edge (right: 7px). That put it right next to the label only
   when the column happened to be about as wide as its label text -- on a
   wide, auto-sized column like "Task" or "Project" (which stretch to fit
   long task/project names in the rows below), the header word sits at the
   left while the arrow floats far away near the column's right edge,
   looking completely disconnected from its own label. Reported twice by
   Luiza ("Arrows are still not aligned"). Fixed by making the arrow an
   ordinary inline character right after the text instead of an
   absolutely-positioned one -- it now always sits immediately next to its
   own label, regardless of how wide the column ends up being. */
th[data-sort-key] { cursor: pointer; user-select: none; }
th[data-sort-key]:hover { color: var(--text); }
th[data-sort-key]::after { content: '\2195'; display: inline-block; margin-left: 5px; opacity: .35; font-size: 10px; font-weight: 400; vertical-align: middle; }
th[data-sort-key].sorted-asc::after  { content: '\2191'; opacity: 1; color: var(--gold-deep); }
th[data-sort-key].sorted-desc::after { content: '\2193'; opacity: 1; color: var(--gold-deep); }

.table-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.table-filters select {
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
}
.table-filters select:focus { outline: none; border-color: var(--gold); }

.text-overdue { color: var(--st-stuck); font-weight: 700; }

/* -------------------------------------------------------------- */
/* Tabs                                                              */
/* -------------------------------------------------------------- */

.tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tab { padding: 10px 14px; color: var(--text-soft); font-size: 13px; font-weight: 700; border-bottom: 2px solid transparent; }
.tab:hover { text-decoration: none; color: var(--text); }
.tab.active { color: var(--gold-deep); border-bottom-color: var(--gold); }
.tab-count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 700;
}
.tab.active .tab-count { background: var(--gold-soft); color: var(--gold-deep); }
.tab-count-danger { background: rgba(224, 74, 74, .12); color: #c73333; }
.tab.active .tab-count-danger { background: rgba(224, 74, 74, .18); color: #c73333; }

/* -------------------------------------------------------------- */
/* Progress bars                                                    */
/* -------------------------------------------------------------- */

.progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.progress-label { flex: 0 0 150px; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-track { flex: 1; height: 8px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold), var(--violet)); }
.progress-pct { flex: 0 0 90px; font-size: 12px; color: var(--text-soft); text-align: right; font-weight: 600; }

/* Dashboard's "Project progress" card -- each project is a small block
   (name + percentage on one line, a full-width bar below) instead of one
   dense inline row. Reports keeps its own compact single-row .progress-row
   layout above, untouched. */
.proj-progress-list { display: flex; flex-direction: column; gap: 16px; }
.proj-progress-item { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color .12s, background .12s; }
.proj-progress-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.proj-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.proj-progress-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-progress-pct { font-size: 12.5px; font-weight: 700; color: var(--text); flex-shrink: 0; }
.proj-progress-count { font-weight: 600; color: var(--text-soft); }
.proj-progress-item .progress-track { height: 7px; }

/* -------------------------------------------------------------- */
/* Project grid (projects.php)                                     */
/* -------------------------------------------------------------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 18px;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 20px 18px;
  color: var(--text);
  display: block;
  position: relative;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.project-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--project-color, var(--gold));
}
.project-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--project-color, var(--border-strong)); }
.project-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.project-card-title { font-size: 15.5px; margin: 0; line-height: 1.3; }
/* The card is a plain <div> (not a wrapping <a>) so the Archive/Delete
   forms inside it are real, normal form submits -- no nested-interactive-
   content markup and no JS click-hijacking that could silently swallow the
   button click along with the card's own navigation. Instead, the title
   link is stretched to cover the whole card via ::after, so clicking
   anywhere on the card still opens the project, while the admin buttons
   (stacked above it with z-index) remain fully, natively clickable. */
.project-card-link { color: inherit; text-decoration: none; }
.project-card-link:hover { text-decoration: none; }
.project-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.project-card-desc { font-size: 12.5px; color: var(--text-soft); margin: 6px 0 14px; max-height: 32px; overflow: hidden; }
.project-card-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.project-card-badge-done { background: rgba(0, 200, 117, .14); color: #00a35e; }
.project-card-badge-overdue { background: rgba(224, 74, 74, .12); color: #c73333; }
.project-card-badge-mine { background: var(--gold-soft); color: #8a6d00; }
.project-card-badge-archived { background: var(--surface-2); color: var(--text-soft); }
.project-card-progress-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.project-card-progress-row .progress-track { flex: 1; }
.project-card-pct { font-size: 11.5px; font-weight: 700; color: var(--text-soft); min-width: 32px; text-align: right; }
.project-card-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.project-card-stat {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-soft);
}
.project-card-stat-open    { background: var(--st-not-started-soft); color: var(--st-not-started); }
.project-card-stat-overdue { background: var(--danger-soft);         color: var(--danger); }
.project-card-stat-done    { background: var(--st-done-soft);        color: var(--st-done); }
.project-card-stat-stuck   { background: var(--st-stuck-soft);       color: var(--st-stuck); }
.project-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-soft); margin-top: 12px; font-weight: 600; }
.project-card-creator { display: flex; align-items: center; gap: 6px; }
.project-card-admin { position: relative; z-index: 2; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.project-card-admin form { display: contents; }

/* -------------------------------------------------------------- */
/* Board (project.php)                                              */
/* -------------------------------------------------------------- */

.board-group { margin-bottom: 28px; }

.board-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid var(--gold);
  padding: 6px 0 6px 14px;
  margin-bottom: 8px;
}

.inline-rename-form { flex: 1; }
.group-name-input {
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  width: 100%;
  max-width: 320px;
  font-family: inherit;
}
.group-name-input:hover, .group-name-input:focus { background: var(--surface-2); outline: none; }

.board-group-count { font-size: 12px; color: var(--text-soft); white-space: nowrap; font-weight: 600; }

/* No overflow:hidden here either -- same reason as .simple-table above:
   it would clip the attachment quick-access popover. */
.board-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.board-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-soft);
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.board-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-lg); }
.board-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-lg); }
.board-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.board-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }
.board-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.board-table tr:hover td { background: rgba(200,145,46,0.04); }
.board-table tr:last-child td { border-bottom: none; }
.col-task { min-width: 220px; }
.col-status, .col-priority, .col-category { width: 150px; }
.col-assignee { width: 160px; }
.col-due { width: 140px; }
.col-created { width: 130px; }
.col-actions { width: 36px; }

.task-title-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.subtask-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
  color: var(--text-soft); background: var(--surface-2); border-radius: var(--radius-pill);
  padding: 2px 7px; flex-shrink: 0;
}
.subtask-badge svg { width: 12px; height: 12px; }
.subtask-badge-complete { color: #147a45; background: var(--success-soft); }

/* Attachment quick-access -- a plain <details> disclosure so a file can be
   opened straight from the board/list, no need to open the full task. */
.attach-quick { position: relative; display: inline-block; }
.attach-quick-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 2px 8px 2px 6px;
  cursor: pointer;
  user-select: none;
}
.attach-quick-summary::-webkit-details-marker { display: none; }
.attach-quick-summary:hover { background: var(--gold-soft); color: var(--gold-deep); }
.attach-quick[open] .attach-quick-summary { background: var(--gold-soft); color: var(--gold-deep); }
.attach-quick-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 200px;
  max-width: 280px;
}
.attach-quick-item { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-sm); }
.attach-quick-item:hover { background: var(--surface-2); }
.attach-quick-name {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 6px 8px;
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attach-quick-item:hover .attach-quick-name { text-decoration: none; }
.attach-quick-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
}
.attach-quick-dl:hover { background: var(--gold-soft); color: var(--gold-deep); }

/* Attachment list on the task detail page -- icon + name/meta + view/
   download/delete actions, all one row. */
.attachment-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.attachment-row:last-child { border-bottom: none; }
.attachment-icon { color: var(--text-faint); flex-shrink: 0; display: flex; }
.attachment-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.attachment-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.icon-btn-danger:hover { background: var(--danger-soft); color: var(--danger); }

/* Drag-and-drop upload zone. The whole thing is a <label> around a hidden
   file input, so "click to browse" works with zero JS; drag/drop and the
   file-chip preview are progressive enhancement on top. */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 22px 16px;
  margin-top: 10px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--gold); }
.dropzone-active { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-deep); }
.dropzone-text { font-size: 13px; color: var(--text); }
.dropzone-text strong { color: inherit; }
.dropzone-hint { font-size: 11px; color: var(--text-faint); }
.dropzone-filelist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dropzone-file-chip {
  font-size: 11.5px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  color: var(--text);
}
.dropzone-file-chip em { color: var(--text-faint); font-style: normal; }
#attach-upload-btn { margin-top: 10px; }

/* Brief highlight when a board row jumps to a different group after a
   status change, so the move doesn't feel like it happened silently. */
.row-moved-flash { animation: rowMovedFlash 1s ease-out; }
@keyframes rowMovedFlash {
  0%   { background: var(--gold-soft); }
  100% { background: transparent; }
}

.cell-created {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 600;
  white-space: nowrap;
}

.cell-select {
  border: none;
  background: transparent;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  color: var(--text);
  font-family: inherit;
}
.cell-select-block { width: 100%; margin-bottom: 4px; }

.cell-date {
  border: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  width: 100%;
  font-family: inherit;
  color: var(--text);
}
.cell-date:hover, .cell-select:hover { background: var(--surface-2); }

/* An empty <input type="date"> renders its own "dd/mm/yyyy" (or
   "mm/dd/yyyy") format hint in Chrome/Edge, which reads like real content
   sitting in the cell instead of "no due date set". Hide that hint while
   the field is empty and unfocused -- clicking it still opens the date
   picker as normal, and typing/picking a date makes the text visible
   again via updateField() toggling this class off. */
.cell-date.cell-date-empty { color: transparent; }
.cell-date.cell-date-empty:focus { color: var(--text); }

.add-task-row td { padding: 3px 10px; }
.add-task-input, .add-group-input {
  border: none;
  background: transparent;
  padding: 8px 6px;
  font-size: 13px;
  width: 100%;
  color: var(--text-soft);
  font-family: inherit;
}
.add-task-input:focus, .add-group-input:focus { outline: none; background: var(--surface-2); color: var(--text); }
.add-group-form { margin-top: 6px; }
.add-group-input { font-weight: 700; padding: 11px 14px; border-radius: var(--radius); background: var(--surface); border: 1.5px dashed var(--border-strong); }

.row-delete-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.row-delete-btn:hover { background: var(--danger-soft); color: var(--danger); }

.inline-select-form select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
}

.user-row-actions { display: flex; gap: 6px; }

/* -------------------------------------------------------------- */
/* Task detail                                                      */
/* -------------------------------------------------------------- */

.breadcrumb { color: var(--text-soft); font-size: 13px; margin-bottom: 16px; font-weight: 600; }

.task-detail-grid { display: flex; gap: 22px; align-items: flex-start; }
.task-detail-main { flex: 2; min-width: 0; }
.task-detail-side { flex: 1; min-width: 240px; }

.task-title-input {
  width: 100%;
  border: none;
  font-size: 21px;
  font-weight: 800;
  padding: 4px 2px;
  margin-bottom: 10px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
}
.task-title-input:focus { outline: none; background: var(--surface-2); border-radius: var(--radius-sm); }

.task-meta { font-size: 12px; color: var(--text-soft); margin: 16px 0; font-weight: 600; }

.subtask-progress-label { font-size: 11px; font-weight: 700; color: var(--text-soft); }
.subtask-progress-track { height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 14px; }
.subtask-progress-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold), var(--violet)); transition: width .2s; }
.subtask-list { list-style: none; margin: 0 0 12px; padding: 0; }
.subtask-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.subtask-item:last-child { border-bottom: none; }
.subtask-check { display: flex; align-items: center; gap: 9px; cursor: pointer; flex: 1; min-width: 0; }
.subtask-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; cursor: pointer; }
.subtask-title { font-size: 13px; word-break: break-word; }
.subtask-done .subtask-title { text-decoration: line-through; color: var(--text-faint); }
.subtask-delete { opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.subtask-item:hover .subtask-delete { opacity: 1; }
.subtask-add-form { display: flex; gap: 8px; margin-top: 4px; }
.subtask-add-form .field-input { flex: 1; }

.comment-list, .attachment-list { list-style: none; margin: 0; padding: 0; }
.comment-item { display: flex; gap: 10px; margin-bottom: 15px; }
.comment-meta { font-size: 12px; margin-bottom: 2px; font-weight: 700; }
.comment-text { font-size: 13px; }
.activity-time { color: var(--text-faint); font-size: 11px; margin-left: 6px; font-weight: 500; }
.comment-form { margin-top: 12px; }

.attachment-meta { color: var(--text-faint); font-size: 11px; }
.upload-form { margin-top: 12px; }

/* -------------------------------------------------------------- */
/* Activity feed                                                    */
/* -------------------------------------------------------------- */

.activity-feed { list-style: none; margin: 0; padding: 0; }
.activity-feed li { display: flex; gap: 10px; margin-bottom: 15px; align-items: flex-start; }
.activity-text { font-size: 13px; }

/* -------------------------------------------------------------- */
/* Modal                                                             */
/* -------------------------------------------------------------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(19, 19, 28, 0.5);
  backdrop-filter: blur(2px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal.open { display: flex; }
.modal-dialog {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 16px; margin: 0; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-faint); line-height: 1; }
.modal-body { padding: 18px 22px; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* -------------------------------------------------------------- */
/* Responsive                                                        */
/* -------------------------------------------------------------- */

@media (max-width: 900px) {
  .dashboard-columns, .task-detail-grid { flex-direction: column; }
  .sidebar { width: 76px; }
  .sidebar-brand { justify-content: center; padding: 22px 0; }
  .brand-suffix, .sidebar-user-info, .nav-item span:last-child { display: none; }
  .brand-logo-full { display: none; }
  .brand-logo-mark { display: block; }
  .nav-item { justify-content: center; padding: 12px; }
  .nav-item.active::before { left: 0; }
  .sidebar-user-link { justify-content: center; }
}

@media (max-width: 600px) {
  .topbar, .page-content { padding-left: 16px; padding-right: 16px; }
  .page-subtitle { margin-left: 16px; margin-right: 16px; }
  .col-priority, .col-assignee, .col-created, .col-category { display: none; }
}

/* ==================================================================
   Roles, AI features, performance dashboard
   ================================================================== */

/* Icons ------------------------------------------------------------ */

.icon { vertical-align: -3px; flex-shrink: 0; }
.card-title svg, .btn svg { vertical-align: -2px; margin-right: 2px; }

.role-select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

/* Misc small text helpers -------------------------------------------- */

.field-hint { font-size: 11.5px; color: var(--text-faint); margin: 5px 0 0; }
.text-muted-sm { font-size: 12px; color: var(--text-soft); }
.assignee-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.group-name-static { font-size: 15px; font-weight: 800; flex: 1; }
.task-title-static { font-size: 21px; margin: 0 0 10px; font-weight: 800; }
.task-desc-static { font-size: 13px; color: var(--text); white-space: pre-wrap; }
.table-scroll { overflow-x: auto; }
.table-scroll .simple-table { min-width: 760px; }

/* AI: "not configured" notice ---------------------------------------- */

.ai-not-configured { display: flex; gap: 12px; align-items: flex-start; color: var(--text-soft); }
.ai-not-configured strong { color: var(--text); display: block; margin-bottom: 2px; }
.ai-not-configured svg { flex-shrink: 0; margin-top: 2px; color: var(--violet); }

.ai-key-status { font-size: 13px; padding: 9px 13px; border-radius: var(--radius-sm); margin-bottom: 12px; font-weight: 600; }
.ai-key-status-ok { background: var(--success-soft); color: #147a45; }
.ai-key-status-missing { background: var(--danger-soft); color: #b52e2e; }
.ai-key-status code { background: rgba(19,19,28,0.06); padding: 1px 6px; border-radius: 4px; }

/* AI Task Assistant suggestion rows ----------------------------------- */

.ai-suggestion-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.ai-suggestion-row:last-child { border-bottom: none; }
.ai-suggestion-row > input[type="checkbox"] { margin-top: 12px; flex-shrink: 0; accent-color: var(--violet); }
.ai-sugg-fields { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ai-sugg-fields .field-input { padding: 8px 11px; }
.ai-sugg-title { font-weight: 700; }
.ai-sugg-row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }

/* Leaderboard --------------------------------------------------------- */

.leaderboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.leaderboard-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
  position: relative;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.leaderboard-rank { position: absolute; top: 12px; left: 14px; font-size: 12px; font-weight: 800; color: var(--text-faint); }
.leaderboard-rank-1 { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-soft) 0%, var(--surface) 65%); }
.leaderboard-rank-2 { border-color: var(--border-strong); }
.leaderboard-rank-3 { border-color: #d9a877; }
.leaderboard-card .avatar { margin: 8px auto; width: 46px; height: 46px; font-size: 16px; }
.leaderboard-name { display: block; font-weight: 800; margin-top: 6px; }
.leaderboard-score { display: block; font-size: 25px; font-weight: 800; color: var(--gold-deep); margin-top: 4px; letter-spacing: -0.02em; }
.leaderboard-sub { display: block; font-size: 11px; color: var(--text-faint); margin-top: 4px; font-weight: 600; }

/* AI Chat Assistant (floating panel) ----------------------------------- */

.ai-chat-launcher {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
  border: none;
  box-shadow: 0 10px 28px rgba(85,68,176,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  transition: transform .15s ease;
}
.ai-chat-launcher:hover { transform: translateY(-2px) scale(1.03); }

.ai-chat-panel {
  position: fixed;
  bottom: 94px;
  right: 26px;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 490px;
  max-height: calc(100vh - 120px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  border: 1px solid var(--border);
}
.ai-chat-panel.open { display: flex; }

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.ai-chat-header span { display: flex; align-items: center; gap: 6px; }
.ai-chat-header-actions { display: flex; gap: 4px; }
.ai-chat-header-actions button { background: rgba(255,255,255,0.16); border: none; color: #fff; border-radius: var(--radius-sm); padding: 6px; cursor: pointer; display: flex; }
.ai-chat-header-actions button:hover { background: rgba(255,255,255,0.3); }

.ai-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.ai-chat-empty { font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 22px; }

.ai-chat-bubble { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.ai-chat-bubble-user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.ai-chat-bubble-assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; }
.ai-chat-thinking { opacity: 0.6; font-style: italic; }

.ai-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--surface); }
.ai-chat-form textarea {
  flex: 1;
  resize: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  max-height: 80px;
}
.ai-chat-form textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.ai-chat-form button {
  background: var(--violet);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  width: 40px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-chat-form button:hover { background: var(--violet-deep); }

@media (max-width: 480px) {
  .ai-chat-panel { right: 12px; left: 12px; width: auto; }
  .ai-chat-launcher { right: 16px; bottom: 16px; }
}

/* Report-a-bug floating launcher ---------------------------------------- */

.bugreport-launcher {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--danger);
  border: 1.5px solid var(--border-strong);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 199;
  transition: transform .15s ease, background .15s ease;
}
.bugreport-launcher:hover { transform: translateY(-2px) scale(1.05); background: var(--danger-soft); }
/* When the AI chat launcher (managers only) is also on screen, stack this
   one above it instead of overlapping -- both stay in the bottom-right
   corner, just at different heights. */
.bugreport-launcher-raised { bottom: 92px; width: 40px; height: 40px; }

@media (max-width: 480px) {
  .bugreport-launcher { right: 16px; bottom: 16px; }
  .bugreport-launcher-raised { bottom: 78px; }
}

#bugreport-modal .modal-header h2 { display: flex; align-items: center; gap: 8px; }
#bugreport-error { margin-top: 12px; margin-bottom: 0; }
.bugreport-shot-preview { margin-top: 10px; max-width: 100%; max-height: 160px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; }

/* Notification bell (topbar, every logged-in user) ----------------------- */

.notif-wrap { position: relative; }
.notif-bell {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.notif-bell:hover { background: var(--surface-2); color: var(--text); }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--paper);
}

.notif-dropdown {
  display: none;
  position: absolute;
  top: 46px;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 210;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-header {
  padding: 12px 16px;
  font-weight: 800;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.notif-list { padding: 6px; }
.notif-empty { padding: 18px 12px; text-align: center; color: var(--text-faint); font-size: 12.5px; }
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
}
.notif-item:hover { background: var(--surface-2); }
.notif-item-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-item-body { min-width: 0; }
.notif-item-text { font-size: 12.5px; font-weight: 700; margin: 0; }
.notif-item-desc { font-size: 12px; color: var(--text-soft); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The AI-triage notification's message is our own composed template text
   (not a short user-typed title), so it needs to be readable in full rather
   than clipped to one line -- the dropdown itself already scrolls
   (.notif-dropdown has max-height + overflow-y: auto) so wrapping here is
   safe. */
.notif-item-desc-wrap { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
.notif-item-time { font-size: 11px; color: var(--text-faint); }

/* Bug Reports admin page (Super Admin) ----------------------------------- */

.bug-report-list { display: flex; flex-direction: column; gap: 14px; }
.bug-report-card { margin-bottom: 0; }
.bug-report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bug-report-reporter { display: flex; align-items: center; gap: 10px; }
.bug-report-reporter-info { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.bug-report-desc { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; margin: 0 0 8px; }
.bug-report-url { font-size: 12px; color: var(--text-soft); display: flex; align-items: center; gap: 5px; margin: 0 0 8px; }
.bug-report-shot-link { display: inline-block; margin-bottom: 10px; }
.bug-report-shot {
  max-width: 260px;
  max-height: 170px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}
.bug-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bug-report-ai-diagnosis { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.bug-diagnosis-label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-soft); margin: 0 0 6px; }
.bug-diagnosis-text { font-size: 13px; line-height: 1.5; margin: 0 0 8px; white-space: pre-wrap; }

/* Admin-only hint badge from the real-time AI triage pass (see
   ajax/report_bug.php + ai_triage_bug_report()) -- always informational,
   never a reason the report itself is hidden or removed from the queue. */
.bug-triage-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  margin: 0 0 10px;
  width: fit-content;
  cursor: default;
}
.badge-triage-likely   { background: var(--violet-soft); color: var(--violet-deep); }
.badge-triage-unclear  { background: var(--gold-soft);   color: var(--gold-deep); }
.badge-triage-invalid  { background: var(--surface-2);   color: var(--text-soft); }