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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0c12;
  --bg-elevated: #10131c;
  --surface: rgba(255,255,255,0.045);
  --surface-hover: rgba(255,255,255,0.075);
  --surface-strong: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --accent: #6c63ff;
  --accent-soft: #8b83ff;
  --accent2: #00d4aa;
  --danger: #ff4d6d;
  --warning: #ffd166;
  --text: #eef0fa;
  --muted: #8892b0;
  --muted-soft: #626a87;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-deep: 0 20px 60px -12px rgba(0,0,0,0.55);
  --font-latin: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-fa: 'Vazirmatn', 'Inter', 'Segoe UI', system-ui, sans-serif;
}

html {
  font-size: 16px;
  max-width: 100%;
  overflow-x: clip;
}

/* Shared workspace controls preserve the same keyboard path as drag/drop. */
.workspace-filters { display:flex; flex-wrap:wrap; gap:14px; padding:20px; border-radius:var(--radius); margin:20px 0; align-items:end; }
.workspace-filters label { flex:1 1 150px; display:grid; gap:6px; color:var(--muted); font-size:.85rem; }
.workspace-filters label:first-of-type { flex-grow:2; }
.workspace-filters input,.workspace-filters select,.task-status-control select { width:100%; padding:10px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg-elevated); color:var(--text); font:inherit; }
.workspace-filters button,.workspace-filters a { flex-shrink:0; }
.workspace-filters>a,.gantt-label,.month-task,.monitoring-grid a,.work-list a { color:var(--text); text-decoration:none; }
.workspace-filters>a:hover,.gantt-label:hover,.month-task:hover,.monitoring-grid a:hover,.work-list a:hover { color:var(--accent2); }
.workspace-filters>a:focus-visible,.gantt-label:focus-visible,.month-task:focus-visible { outline:2px solid var(--accent2); }
.task-status-control { display:flex; gap:6px; align-items:center; margin-top:10px; }
.task-status-control select { min-width:0; }
.task-tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.task-tags span { padding:2px 9px; border-radius:20px; background:rgba(108,99,255,.15); color:var(--accent-soft); font-size:.75rem; }
.task-blocked { padding:8px; border-inline-start:3px solid var(--warning); color:var(--warning); margin:8px 0; font-size:.8rem; }
.task-overdue { border-color:rgba(255,77,109,.4); }
.task-card[draggable=true] { cursor:grab; }
.kanban-column.drag-over { outline:2px solid var(--accent2); }
.task-time-form { display:grid; gap:8px; margin:12px 0; }
.task-time-form input { width:100%; }
.task-form-fields select[multiple] { min-height:96px; }
.task-form-fields label { display:grid; gap:6px; color:var(--muted); font-size:.85rem; }
.task-form-fields input,.task-form-fields select,.task-form-fields textarea { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-elevated); color:var(--text); font:inherit; }
.task-form-fields .form-row { margin-bottom:16px; }
.form-grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }.form-grid .full-width { grid-column:1/-1; }
.form-grid label.form-group { font-size:.85rem; color:var(--muted); }
.modal-close { border:0; background:transparent; color:var(--text); font-size:1.6rem; cursor:pointer; }
.project-month { display:grid; grid-template-columns:repeat(7,minmax(110px,1fr)); gap:1px; background:var(--border); overflow:auto; }
.month-weekday { padding:10px; background:var(--bg-elevated); text-align:center; font-size:.8rem; }
.month-day { min-height:130px; padding:10px; background:var(--bg); }
.month-day>strong { font-size:.75rem; color:var(--muted); }
.outside-month { opacity:.45; }
.month-task { display:block; border-inline-start:3px solid var(--accent); background:var(--surface-strong); padding:6px; border-radius:4px; margin-top:7px; font-size:.75rem; }
.month-task small { display:block; color:var(--muted); }
.gantt-scroll { overflow-x:auto; margin-block:20px; }
.gantt-chart { min-width:620px; direction:ltr; }
.gantt-scale { display:flex; justify-content:space-between; margin-left:220px; color:var(--muted); font-size:.8rem; padding:8px; }
.gantt-row { display:grid; grid-template-columns:220px 1fr; min-height:54px; align-items:center; border-top:1px solid var(--border); }
.gantt-label { padding:10px; overflow-wrap:anywhere; font-size:.85rem; }
.gantt-track { height:34px; position:relative; background:repeating-linear-gradient(to right,transparent 0,transparent calc(10% - 1px),var(--border) calc(10% - 1px),var(--border) 10%); }
.gantt-bar { position:absolute; height:26px; top:4px; min-width:3px; border-radius:5px; background:var(--accent); color:white; text-align:center; font-size:.75rem; line-height:26px; overflow:hidden; }
.gantt-bar.late { background:#b53c55; }.gantt-bar.complete { background:#13795e; }
.gantt-today { position:absolute; top:-10px; bottom:-10px; border-left:2px dashed var(--warning); z-index:1; pointer-events:none; }
.notes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.note-card { padding:22px; border-radius:var(--radius); border-top:3px solid var(--muted); overflow-wrap:anywhere; }
.note-violet { border-top-color:var(--accent); }.note-teal { border-top-color:var(--accent2); }.note-amber { border-top-color:var(--warning); }.note-rose { border-top-color:var(--danger); }
.note-body { white-space:pre-wrap; margin:12px 0; }.note-check { display:flex; gap:8px; align-items:center; margin:5px 0; }
.is-checked { text-decoration:line-through; color:var(--muted); }
.note-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:22px; color:var(--muted); }
.note-card h2 { font-size:1.15rem; }.notes-grid .empty-state { grid-column:1/-1; }
.monitoring-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; margin-top:24px; }
.monitoring-grid progress { max-width:110px; accent-color:var(--accent2); height:7px; }
.monitoring-grid td .muted-note { display:block; }.work-status-form { display:flex; gap:8px; align-items:center; }
@media(max-width:900px) { .monitoring-grid { grid-template-columns:1fr; }.project-month { grid-template-columns:repeat(7,minmax(85px,1fr)); }.panel:has(.project-month) { overflow-x:auto; } }
@media(max-width:600px) { .workspace-filters { padding:14px; }.notes-grid { grid-template-columns:1fr; }.work-status-form { flex-wrap:wrap; width:100%; }.page-header .actions-cell { flex-wrap:wrap; }.form-grid { grid-template-columns:1fr; } }
@media print { .navbar,.workspace-filters,.page-header .actions-cell,.panel-heading button,.modal-overlay { display:none!important; }.gantt-scroll { overflow:visible; }.gantt-chart { min-width:0; }.gantt-bar { print-color-adjust:exact; -webkit-print-color-adjust:exact; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-fa);
  line-height: 1.6;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(108,99,255,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 10%, rgba(0,212,170,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 800px 800px at 50% 120%, rgba(108,99,255,0.08) 0%, transparent 60%);
  background-attachment: fixed;
  max-width: 100%;
  overflow-x: clip;
}

img, svg, video, canvas { max-width:100%; }
input, select, textarea, button { max-width:100%; }
form, .form-group, .panel, .settings-grid > *, .page-header > * { min-width:0; }

/* ---------- Bidi / mixed Persian-English text handling ---------- */
/* Elements that hold user or mixed content auto-detect their paragraph
   direction per Unicode Bidi Algorithm rather than inheriting a fixed dir,
   so a Persian sentence with embedded English words (or vice versa) lays
   out correctly without manual dir switching. */
body, input, textarea, select, button, td, th, label, p, h1, h2, h3, h4,
.badge, .empty, .alert, .nav-user {
  unicode-bidi: plaintext;
}

/* Numbers, quantities and codes should always stay LTR even inside RTL flow */
.ltr-num, td.numeric, input[type="number"] {
  direction: ltr;
  unicode-bidi: isolate;
}

.glass {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Navbar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2.2rem;
  background: rgba(10,12,18,0.72);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.nav-brand {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color .2s ease;
  position: relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0);
  transition: transform .2s ease;
}
.nav-links a:hover { color: var(--text); transform:translateY(-1px); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); font-weight: 600; }
.nav-links a.active::after { transform: scaleX(1); }
.nav-user { color: var(--muted); font-size: 0.85rem; }
.btn-logout {
  background: rgba(255,77,109,0.12);
  color: var(--danger) !important;
  padding: .45rem 1rem;
  border-radius: 9px;
  border: 1px solid rgba(255,77,109,0.28);
  font-weight: 500;
  transition: background .2s ease, transform .1s ease;
  cursor: pointer;
  font-family: inherit;
}
.btn-logout:hover { background: rgba(255,77,109,0.22) !important; transform: translateY(-1px); }
.logout-form { display: inline-flex; }
.nav-language-form { display:inline-flex; align-items:center; }
.nav-language-select { min-width:82px; padding:.42rem .58rem; color:var(--text); background:rgba(255,255,255,.055); border:1px solid var(--border); border-radius:9px; font:inherit; font-size:.78rem; cursor:pointer; }
.nav-language-select:hover,.nav-language-select:focus { border-color:var(--accent); outline:none; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* Container — dense operational screens need more horizontal room on desktop. */
.container {
  width: min(calc(100% - 3rem), 1480px);
  margin: 0 auto;
  padding: clamp(1.75rem, 2.5vw, 3rem) 0;
}

/* Login */
.login-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; }
.login-card { padding: 3rem 2.5rem; width: 100%; max-width: 420px; text-align: center; box-shadow: var(--shadow-deep); }
.login-icon { font-size: 3rem; margin-bottom: 1rem; filter: drop-shadow(0 4px 12px rgba(108,99,255,0.4)); }
.login-card h2 { margin-bottom: 1.75rem; font-size: 1.5rem; font-weight: 700; }

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-header h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Forms */
.form-group { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.form-group label {
  font-size: .76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.form-group input, .form-group select, .form-group textarea {
  background: rgba(255,255,255,0.055);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted-soft); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(108,99,255,0.09);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.16);
}
.form-group select option { background: #161a28; color: var(--text); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff;
  border: none;
  padding: .7rem 1.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(108,99,255,0.55);
  transition: opacity .2s ease, transform .12s ease, box-shadow .2s ease;
}
.btn-primary:hover { opacity: .95; transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(108,99,255,0.65); }
.btn-primary:active { transform: translateY(0); }
.btn-primary.full-width { width: 100%; padding: .85rem; font-size: 1rem; }
.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
  padding: .7rem 1.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  transition: background .2s ease, border-color .2s ease;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--border-strong); }
.btn-danger-sm {
  background: rgba(255,77,109,0.12);
  border: 1px solid rgba(255,77,109,0.28);
  color: var(--danger);
  padding: .4rem .7rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  transition: background .2s ease, transform .12s ease;
}
.btn-danger-sm:hover { background: rgba(255,77,109,0.26); transform: translateY(-1px); }
.btn-icon-sm {
  background: rgba(108,99,255,0.12);
  border: 1px solid rgba(108,99,255,0.28);
  color: var(--accent-soft);
  padding: .4rem .6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  transition: background .2s ease, transform .12s ease;
}
.btn-icon-sm:hover { background: rgba(108,99,255,0.24); transform: translateY(-1px); }
.actions-cell { display: flex; align-items: center; gap: .5rem; }
.actions-cell form { display: contents; }

/* Enterprise CRM shell */
.eyebrow {
  color: var(--accent2);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.select-native { position: absolute !important; inset:0 auto auto 0 !important; width: 1px !important; height: 1px !important; min-width:0 !important; padding:0 !important; margin:0 !important; border:0 !important; opacity: 0 !important; pointer-events: none !important; }
.select-combobox { position: relative; width: 100%; min-width: 0; }
.select-combobox-trigger {
  position: relative; width: 100%; min-height: 42px; padding: .7rem 2.2rem .7rem .8rem;
  color: var(--text); background: rgba(255,255,255,.055); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: inherit; font-size: .95rem; text-align: start; cursor: pointer;
}
.select-combobox-trigger::after { content: '⌄'; position: absolute; inset-inline-end: .8rem; top: 50%; transform: translateY(-55%); color: var(--muted); font-size: 1.1rem; pointer-events: none; }
.select-combobox-trigger:hover, .select-combobox-trigger[aria-expanded="true"] { border-color: var(--accent); background: rgba(108,99,255,.09); }
.select-combobox.has-choice .select-combobox-trigger { border-color: rgba(38, 216, 170, .78); background: rgba(38, 216, 170, .09); color: #dcfff6; }
.select-combobox.has-choice .select-combobox-trigger::after { color: var(--accent2); }
.select-combobox-trigger:focus { outline: none; box-shadow: 0 0 0 3px rgba(108,99,255,.16); }
.select-combobox-popup { position: absolute; z-index: 310; top: calc(100% + .3rem); inset-inline: 0; padding: .35rem; overflow: hidden; background: #171b28; border: 1px solid rgba(108,99,255,.7); border-radius: 10px; box-shadow: var(--shadow-deep); }
.select-combobox-search { display:block; width:100%; padding:.52rem .65rem; color:#10131c; background:#fff; border:0; border-radius:6px; font:inherit; font-size:.88rem; }
.select-combobox-search:focus { outline:2px solid rgba(108,99,255,.55); outline-offset:1px; }
.select-combobox-options { max-height:240px; overflow:auto; padding-top:.28rem; }
.select-combobox-option { display:block; width:100%; padding:.58rem .7rem; color:var(--text); background:transparent; border:0; border-radius:6px; font:inherit; font-size:.88rem; text-align:start; cursor:pointer; }
.select-combobox-option:hover, .select-combobox-option.selected { background:#286dca; color:#fff; }
.select-combobox-option:disabled { opacity:.45; cursor:not-allowed; }
.page-header h1 { line-height: 1.25; }
.panel { padding: 1.35rem; }
.panel h2 { font-size: 1.15rem; }
.field-hint { display:block; margin-top:.35rem; color:var(--muted); font-size:.78rem; }
.jalali-date-control { display:grid; grid-template-columns:minmax(0,1fr) 2.65rem; align-items:stretch; width:100%; min-width:0; direction:rtl; }
.jalali-date-control .jalali-date { width:100%; min-width:0; direction:rtl; text-align:right; font-variant-numeric:tabular-nums; cursor:pointer; border-inline-end-width:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.jalali-date-trigger { position:static; z-index:auto; display:grid; place-items:center; width:auto; min-width:2.65rem; margin:0; color:var(--accent-soft); background:rgba(108,99,255,.11); border:1px solid var(--border); border-inline-start:1px solid var(--border); border-radius:0 var(--radius-sm) var(--radius-sm) 0; cursor:pointer; font-size:1rem; }
.jalali-date-trigger:hover,.jalali-date-trigger:focus-visible { color:#fff; background:rgba(108,99,255,.3); outline:none; }
.jalali-calendar-popup { position:absolute; z-index:1200; width:292px; padding:.72rem; color:var(--text); background:#171b28; border:1px solid rgba(108,99,255,.8); border-radius:14px; box-shadow:var(--shadow-deep); direction:rtl; }
.jalali-calendar-head { display:grid; grid-template-columns:2.2rem minmax(0,1fr) 2.2rem; align-items:center; margin-bottom:.55rem; text-align:center; }.jalali-calendar-head > button,.jalali-calendar-today { color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:8px; cursor:pointer; font:inherit; }.jalali-calendar-head > button { width:2rem; height:2rem; font-size:1.35rem; }.jalali-calendar-title { display:flex; justify-content:center; gap:.15rem; min-width:0; }.jalali-calendar-title button { min-width:0; padding:.35rem .3rem; color:var(--text); background:transparent; border:0; border-radius:7px; cursor:pointer; font:inherit; font-weight:700; }.jalali-calendar-title button:hover { background:rgba(108,99,255,.2); }.jalali-calendar-weekdays,.jalali-calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.2rem; text-align:center; }.jalali-calendar-weekdays { margin-bottom:.25rem; color:var(--muted); font-size:.72rem; }.jalali-calendar-grid i { min-height:2.05rem; }.jalali-calendar-grid button,.jalali-calendar-choice-grid button { min-height:2.05rem; color:var(--text); background:transparent; border:1px solid transparent; border-radius:8px; cursor:pointer; font:inherit; }.jalali-calendar-grid button:hover,.jalali-calendar-choice-grid button:hover { background:rgba(108,99,255,.22); }.jalali-calendar-grid button.selected,.jalali-calendar-choice-grid button.selected { color:#fff; background:var(--accent); }.jalali-calendar-grid button.today { border-color:var(--accent2); }.jalali-calendar-grid button:disabled,.jalali-calendar-choice-grid button:disabled,.jalali-calendar-today:disabled { opacity:.28; cursor:not-allowed; background:transparent; }.jalali-calendar-grid button.has-work { background:rgba(0,212,170,.22); border-color:rgba(0,212,170,.5); }.jalali-calendar-grid button.no-work { background:rgba(255,77,109,.12); }.jalali-calendar-choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }.jalali-calendar-choice-grid button { min-height:3.15rem; padding:.35rem; }.jalali-calendar-today { width:100%; margin-top:.55rem; padding:.42rem; }

/* Unified Persian calendar: based on the pro calendar pattern, with one
   non-overlapping view for days, months, or years. */
.jalali-date-control {
  position:relative;
  grid-template-columns:58px minmax(0,1fr);
  min-height:58px;
  overflow:hidden;
  direction:rtl;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  box-shadow:inset 0 1px rgba(255,255,255,.03);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.jalali-date-control:hover { border-color:rgba(255,255,255,.16); background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.015)); }
.jalali-date-control:focus-within { border-color:#5b49ff; box-shadow:0 0 0 3px rgba(91,73,255,.12),inset 0 1px rgba(255,255,255,.03); }
.jalali-date-control .jalali-date {
  height:56px;
  padding:0 1rem;
  color:var(--text);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.02em;
  direction:ltr;
  text-align:left;
}
.jalali-date-control .jalali-date::placeholder { color:#7d87a4; font-weight:500; }
.jalali-date-trigger {
  min-width:58px;
  height:58px;
  padding:0;
  color:#a594ff;
  background:linear-gradient(180deg,rgba(109,92,255,.06),rgba(109,92,255,.025));
  border:0;
  border-inline-start:1px solid rgba(255,255,255,.07);
  border-radius:0;
  font-size:0;
}
.jalali-date-trigger::before { content:'◫'; font-size:1.35rem; line-height:1; }
.jalali-date-trigger:hover,.jalali-date-trigger:focus-visible { color:#fff; background:linear-gradient(180deg,rgba(109,92,255,.25),rgba(109,92,255,.11)); box-shadow:none; }
.jalali-calendar-popup {
  width:min(94vw,360px);
  padding:.75rem;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(22,28,48,.98),rgba(15,21,37,.98));
  border-color:#5b49ff;
  border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  animation:jalali-calendar-enter .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes jalali-calendar-enter { from { opacity:0; transform:translateY(-6px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
.jalali-calendar-head { grid-template-columns:36px minmax(0,1fr) 36px; gap:.5rem; margin-bottom:.6rem; }
.jalali-calendar-head > button {
  width:36px;
  height:36px;
  color:#d7dcf0;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
  border-radius:10px;
  font-size:1.35rem;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.jalali-calendar-head > button:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.14); transform:scale(.97); }
.jalali-calendar-title { gap:.1rem; }
.jalali-calendar-title button {
  min-height:36px;
  padding:0 .45rem;
  color:var(--text);
  border-radius:10px;
  font-size:1rem;
  font-weight:800;
}
.jalali-calendar-title button::after { content:'⌄'; display:inline-block; margin-inline-start:.3rem; color:#939dbb; font-size:.8rem; transition:transform .18s ease; }
.jalali-calendar-title button:hover,.jalali-calendar-title button:focus-visible { background:rgba(255,255,255,.065); outline:0; }
.jalali-calendar-weekdays,.jalali-calendar-grid { grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.jalali-calendar-weekdays { min-height:34px; margin:0; padding:0 .1rem; align-items:center; color:#939dbb; font-size:.75rem; font-weight:700; }
.jalali-calendar-grid { grid-auto-rows:38px; min-height:calc(38px * 6 + 15px); padding:.15rem; }
.jalali-calendar-grid i,.jalali-calendar-grid button { min-height:38px; height:38px; border-radius:11px; }
.jalali-calendar-grid button,.jalali-calendar-choice-grid button { color:#eef1ff; font-size:.88rem; font-weight:800; transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease; }
.jalali-calendar-grid button:hover,.jalali-calendar-choice-grid button:hover { background:rgba(255,255,255,.07); }
.jalali-calendar-grid button:active,.jalali-calendar-choice-grid button:active { transform:scale(.97); }
.jalali-calendar-grid button.selected,.jalali-calendar-choice-grid button.selected { background:#6d5cff; border-color:#6d5cff; box-shadow:0 7px 16px rgba(109,92,255,.28); }
.jalali-calendar-grid button.today { color:#ebfffd; border-color:rgba(0,215,201,.95); box-shadow:inset 0 0 0 1px rgba(0,215,201,.95); }
.jalali-calendar-grid button.selected.today { box-shadow:0 7px 16px rgba(109,92,255,.28),inset 0 0 0 1px rgba(198,255,250,.75); }
.jalali-calendar-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:50px; min-height:278px; align-content:center; gap:.5rem; padding:.3rem; }
.jalali-calendar-choice-grid button { min-height:50px; height:50px; padding:.2rem; border-radius:12px; }
.jalali-calendar-choice-grid button.today { color:#effffd; border-color:rgba(0,215,201,.78); }
.jalali-calendar-today { min-height:44px; margin-top:.6rem; color:#eef1ff; border-color:rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.05); font-weight:800; }
.jalali-calendar-today:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
@media (max-width:390px) {
  .jalali-calendar-popup { padding:.62rem; }
  .jalali-date-control { min-height:54px; border-radius:14px; }
  .jalali-date-control .jalali-date,.jalali-date-trigger { height:54px; }
  .jalali-date-control { grid-template-columns:54px minmax(0,1fr); }
  .jalali-date-trigger { min-width:54px; }
}
.language-switch { display:inline-flex; }.btn-language { padding:.42rem .65rem; color:var(--text); background:transparent; border:1px solid var(--border); border-radius:8px; cursor:pointer; font:inherit; }
html[dir="rtl"] .ltr-num { direction:ltr; text-align:left; }
.project-workspace, .project-calendar { margin-top:1rem; }
.project-polls details { margin-top:.65rem; padding:.7rem; background:rgba(108,99,255,.08); border:1px solid var(--border); border-radius:10px; }.project-polls summary { color:var(--accent-soft); cursor:pointer; font-weight:700; }.project-polls details form { display:grid; gap:.55rem; margin-top:.7rem; }.project-polls details input,.project-polls details textarea { width:100%; }
.workspace-members { display:flex; flex-wrap:wrap; gap:.55rem; margin:1rem 0; }
.member-chip { padding:.45rem .72rem; border:1px solid var(--border); border-radius:999px; background:rgba(108,99,255,.1); }
.activity-feed { display:grid; gap:.45rem; }
.activity-feed article, .calendar-task { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; padding:.75rem; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.025); }
.activity-feed small, .calendar-task small { color:var(--muted); margin-inline-start:auto; }
.project-polls { margin-top:1.4rem; display:grid; gap:.65rem; }
.poll-card { padding:.85rem; border:1px solid var(--border); border-radius:10px; display:grid; gap:.4rem; }
.poll-choice { width:100%; display:flex; justify-content:space-between; padding:.5rem .7rem; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:7px; cursor:pointer; text-align:start; }
.poll-choice.selected { background:rgba(38,216,170,.14); border-color:var(--accent2); }
.checklist-item { display:flex; align-items:center; gap:.35rem; margin:.3rem 0; }.task-done{text-decoration:line-through;color:var(--muted);}
.project-files { margin-top:1.25rem; display:grid; gap:.45rem; }.file-chip { display:flex; justify-content:space-between; gap:.5rem; padding:.6rem .75rem; border:1px solid var(--border); border-radius:8px; color:var(--text); background:rgba(255,255,255,.035); text-decoration:none; }.file-chip small{color:var(--muted);}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}
.text-link, .entity-link {
  color: var(--accent-soft);
  text-decoration: none;
  font-weight: 700;
}
.text-link:hover, .entity-link:hover { color: var(--accent2); }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.metric-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.2rem;
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.metric-card:hover { transform: translateY(-3px); border-color: rgba(108,99,255,.45); background: var(--surface-hover); }
.metric-card strong { font-size: 2rem; line-height: 1; }
.metric-label { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.metric-help { color: var(--muted-soft); font-size: .75rem; }
.metric-danger { border-color: rgba(255,77,109,.35); }
.metric-danger strong { color: var(--danger); }
.dashboard-grid, .settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}
.compact-list, .stack-list { display: flex; flex-direction: column; gap: .65rem; }
.compact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  background: rgba(255,255,255,.025);
}
.compact-row:hover { background: var(--surface-hover); }
.compact-row > span { display: flex; flex-direction: column; gap: .15rem; }
.compact-row small, small { color: var(--muted); }
.status-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(108,99,255,.15);
  color: var(--accent-soft);
  border: 1px solid rgba(108,99,255,.25);
}
.status-done, .status-won, .status-completed, .status-active {
  color: var(--accent2);
  background: rgba(0,212,170,.12);
  border-color: rgba(0,212,170,.28);
}
.status-lost, .status-urgent {
  color: var(--danger);
  background: rgba(255,77,109,.12);
  border-color: rgba(255,77,109,.28);
}
.status-review, .status-proposal, .status-negotiation, .status-on_hold {
  color: var(--warning);
  background: rgba(255,209,102,.1);
  border-color: rgba(255,209,102,.25);
}
.status-in_progress, .status-discovery, .status-contacted, .status-qualified {
  color: #62b5ff;
  background: rgba(98,181,255,.11);
  border-color: rgba(98,181,255,.25);
}
.filter-form select, .compact-select {
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: .55rem .7rem;
  font-family: inherit;
}
.filter-form select option, .compact-select option { background: #161a28; }
.admin-tabs {
  display: flex;
  gap: .35rem;
  padding: .45rem;
  margin-bottom: 1.2rem;
  overflow-x: auto;
}
.admin-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: .65rem 1rem;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.admin-tab span { margin-inline-start: .35rem; color: var(--muted-soft); }
.admin-tab.active { color: #fff; background: linear-gradient(135deg, var(--accent), #8b5cf6); }
.admin-section { display: none; }
.admin-section.active { display: block; animation: fadeIn .18s ease; }
.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr);
  gap: 1.2rem;
}
.editor-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.editor-card summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem;
  cursor: pointer;
  color: var(--muted);
}
.editor-card summary > span:first-child { display: flex; flex-direction: column; color: var(--text); }
.editor-card form { padding: 1rem; border-top: 1px solid var(--border); }
.toggle-grid, .choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
}
.toggle-card, .choice-grid label {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: .85rem;
}
.toggle-card input, .choice-grid input { accent-color: var(--accent); }
.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}
.permission-grid fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8rem;
}
.permission-grid legend { color: var(--accent-soft); padding: 0 .4rem; font-weight: 700; }
.permission-grid label {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .5rem;
  border-radius: 8px;
}
.permission-grid label:hover { background: var(--surface-hover); }
.permission-grid label span { display: flex; flex-direction: column; }
.permission-grid input { margin-top: .25rem; accent-color: var(--accent); }
.modal-wide { max-width: min(1040px, calc(100vw - 4rem)); max-height: 88vh; overflow-y: auto; }
.table-scroll { overflow-x: auto; }

/* CRM */
.crm-tabs .admin-tab { display: flex; gap: .35rem; }
.inline-convert { display: flex !important; gap: .4rem; align-items: center; }
.inline-convert input, .comment-form input {
  min-width: 0;
  width: 110px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .45rem .55rem;
}
.pipeline-board, .kanban-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: .8rem;
  overflow-x: auto;
  padding-bottom: .4rem;
}
.pipeline-column, .kanban-column {
  min-width: 220px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem;
}
.pipeline-heading, .kanban-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  color: var(--muted);
  padding: .25rem .25rem .7rem;
  text-transform: capitalize;
}
.deal-card, .task-card {
  background: rgba(10,12,18,.7);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .85rem;
  margin-bottom: .65rem;
}
.deal-card h3, .task-card h3 { font-size: .95rem; margin: .55rem 0 .2rem; }
.deal-card p, .task-card p { color: var(--muted); font-size: .8rem; margin-bottom: .65rem; }
.deal-card form { margin-top: .7rem; }
.deal-value { display: block; font-size: 1.05rem; color: var(--accent2); }
.column-empty { color: var(--muted-soft); text-align: center; padding: 1.5rem .5rem; font-size: .8rem; }
.customer-hero, .project-summary {
  padding: 1.4rem;
  margin-bottom: 1.2rem;
}
.customer-hero {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.5fr);
  gap: 1.5rem;
}
.customer-hero h2 { font-size: 1.6rem; margin: .6rem 0 .2rem; }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.detail-grid div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem .8rem;
}
.detail-grid dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.detail-grid dd { margin: .2rem 0 0; }
.timeline-panel { margin-top: 1.2rem; }
.timeline { position: relative; padding-inline-start: 1rem; }
.timeline-item {
  position: relative;
  padding: 0 0 1.25rem 1.4rem;
  border-inline-start: 1px solid var(--border-strong);
}
.timeline-dot {
  position: absolute;
  inset-inline-start: -5px;
  top: .2rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 10px rgba(0,212,170,.7);
}
.timeline-meta { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .75rem; }
.timeline-item h3 { margin: .45rem 0 .25rem; }
.timeline-item p { color: var(--muted); }
.meeting-notes, .meeting-actions { padding: 1.25rem; margin-bottom: 1.2rem; }
.meeting-notes p:not(.eyebrow) { color: var(--muted); white-space: pre-wrap; }
.row-overdue td { background: rgba(255,77,109,.06); }
.danger-text { color: var(--danger); font-weight: 700; }

/* Collaboration — familiar, fast conversation layout without copying another product's UI. */
.chat-shell { display:grid; grid-template-columns:minmax(210px,280px) minmax(0,1fr) minmax(230px,330px); min-width:0; min-height:calc(100vh - 180px); gap:1rem; }
.chat-sidebar,.chat-main,.chat-directory-panel { min-width:0; min-height:0; overflow:hidden; }
.chat-sidebar,.chat-directory-panel { padding:.75rem; display:flex; flex-direction:column; }
.chat-sidebar-head,.chat-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.65rem .8rem 1rem; border-bottom:1px solid var(--border); }
.chat-sidebar-head h2,.chat-header h2 { font-size:1.05rem; }.chat-recipient { display:block; margin-top:.2rem; color:var(--muted); font-size:.72rem; font-weight:500; }
.chat-section-title { color:var(--muted-soft); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:1rem .8rem .45rem; }
.chat-list { display:grid; grid-auto-rows:max-content; align-content:start; gap:.2rem; overflow-y:auto; overflow-x:hidden; min-width:0; }
.chat-conversation-list { max-height:36%; }.directory-list { flex:1; }
.chat-list-item { position:relative; display:flex; gap:.7rem; min-width:0; align-items:center; padding:.65rem .7rem; border-radius:12px; text-decoration:none; color:var(--text); overflow:hidden; transition:background .18s ease, border-color .18s ease; }
.chat-list-item:hover { background:var(--surface-hover); }.chat-list-item.active { background:rgba(108,99,255,.22); }.chat-list-item.has-unread::after { content:""; width:7px; height:7px; flex:none; border-radius:50%; background:var(--accent2); box-shadow:0 0 10px var(--accent2); }
.member-directory { cursor:default; opacity:.76; }.member-directory:hover { transform:none; background:transparent; }
.chat-list-item span:nth-child(2) { min-width:0; display:flex; flex:1; flex-direction:column; overflow:hidden; }.chat-list-item strong,.chat-list-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.chat-list-item small,.chat-empty { color:var(--muted); font-size:.75rem; }.chat-empty { padding:.7rem; }
.chat-list-time { flex:none; color:var(--muted-soft); font-size:.68rem; white-space:nowrap; }
.chat-avatar { width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#4759d6);font-weight:800; }.chat-avatar.channel { background:rgba(0,212,170,.16); color:var(--accent2); }
.chat-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.presence-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--muted-soft); transition:background .2s ease, box-shadow .2s ease; }.presence-dot.online { background:var(--accent2); box-shadow:0 0 0 3px rgba(0,212,170,.13); }.online-count,.chat-live-state { color:var(--muted); font-size:.72rem; white-space:nowrap; }.chat-live-state.connected { color:var(--accent2); }.directory-hint { color:var(--muted); font-size:.75rem; padding:.75rem .8rem; border-bottom:1px solid var(--border); }
.profile-identity-row { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }.profile-identity-row .form-group { flex:1; margin:0; }.profile-avatar-preview { width:76px; height:76px; flex:none; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:linear-gradient(135deg,var(--accent),#4759d6); color:#fff; font-size:1.65rem; font-weight:800; box-shadow:0 8px 24px rgba(74,83,210,.25); }.profile-avatar-preview img { width:100%; height:100%; object-fit:cover; }.profile-chat-link { color:var(--accent-soft); font-size:.82rem; text-decoration:none; white-space:nowrap; }.notification-panel .toggle-card { margin:.55rem 0; }.notification-panel .toggle-card small { margin-inline-start:.35rem; color:var(--muted); }
.profile-signature-row { display:flex; align-items:center; gap:1rem; margin:0 0 1rem; }.profile-signature-row .form-group { flex:1; margin:0; }.profile-signature-preview { width:170px; height:72px; display:grid; place-items:center; overflow:hidden; border:1px dashed var(--border-strong); border-radius:9px; background:#fff; color:var(--muted-soft); }.profile-signature-preview img { width:100%; height:100%; object-fit:contain; }
.chat-main { display:flex; flex-direction:column; min-height:620px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); }
.chat-messages { min-height:0; flex:1; overflow-y:auto; overflow-x:hidden; padding:1.25rem; display:flex; flex-direction:column; gap:.55rem; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:18px 18px; }
.message-bubble { align-self:flex-start; inline-size:fit-content; min-inline-size:20%; max-inline-size:min(84%,760px); padding:.65rem .85rem .5rem; border-radius:4px 15px 15px 15px; background:rgba(255,255,255,.095); box-shadow:0 5px 14px rgba(0,0,0,.15); animation:messageIn .2s ease both; }.message-bubble.mine { align-self:flex-end; border-radius:15px 4px 15px 15px; background:linear-gradient(135deg,rgba(91,100,239,.9),rgba(79,84,197,.9)); }.message-bubble strong{font-size:.72rem;color:var(--accent2)}.message-bubble.mine strong{color:#d8fff7}.message-bubble p{max-inline-size:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;hyphens:auto}.message-bubble small{display:block;text-align:end;color:rgba(255,255,255,.58);font-size:.65rem;margin-top:.25rem}
.message-bubble strong img { width:18px; height:18px; vertical-align:middle; object-fit:cover; border-radius:50%; margin-inline-end:.35rem; }.message-bubble.mine strong img { display:none; }
.chat-composer { display:flex!important; align-items:flex-end; gap:.7rem; min-width:0; padding:1rem; border-top:1px solid var(--border); background:rgba(10,12,18,.5); }.chat-composer textarea { box-sizing:border-box; min-width:0; flex:1; min-height:46px; max-height:120px; padding:.75rem .85rem; resize:vertical; margin:0; border:1px solid var(--border-strong); border-radius:12px; color:var(--text); background:rgba(255,255,255,.065); font:inherit; line-height:1.35; }.chat-composer textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,99,255,.18); }.chat-composer button { flex:none; min-height:46px; align-self:flex-end; }.chat-start,.chat-welcome { display:grid; flex:1; place-items:center; align-content:center; text-align:center; color:var(--muted); padding:2rem; }.chat-start span{font-size:3rem;color:var(--accent-soft)}
.chat-file-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.chat-tool-button { display:grid; place-items:center; flex:none; width:42px; min-height:46px; padding:0; cursor:pointer; border:1px solid var(--border-strong); border-radius:12px; color:var(--muted); background:rgba(255,255,255,.045); font-size:1.05rem; transition:background .18s ease,color .18s ease,transform .18s ease; }.chat-tool-button:hover { color:var(--accent2); background:rgba(0,212,170,.1); }.chat-tool-button.recording { color:#fff; background:var(--danger); border-color:var(--danger); animation:voicePulse 1s ease-in-out infinite; }.chat-attachment-status { position:absolute; max-width:180px; bottom:.15rem; inset-inline-start:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted-soft); font-size:.67rem; }.chat-composer { position:relative; padding-bottom:1.35rem; }
.chat-image-attachment { display:block; margin-top:.45rem; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:10px; }.chat-image-attachment img { display:block; max-width:min(330px,100%); max-height:260px; object-fit:cover; }.chat-file-attachment { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.15rem .55rem; align-items:center; margin-top:.45rem; padding:.55rem .65rem; min-width:190px; max-width:310px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(0,0,0,.13); color:inherit; text-decoration:none; }.chat-file-attachment:hover { border-color:var(--accent); }.chat-file-attachment span { grid-row:span 2; color:var(--accent2); font-size:1.2rem; }.chat-file-attachment b,.chat-file-attachment small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.chat-file-attachment small { color:var(--muted); font-size:.68rem; }.chat-voice { display:block; width:min(280px,100%); height:34px; margin-top:.4rem; }
.chat-date-separator { display:flex; justify-content:center; margin:.7rem 0 .15rem; pointer-events:none; }.chat-date-separator span { padding:.27rem .65rem; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(8,12,20,.7); color:var(--muted-soft); font-size:.68rem; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.12); }
@keyframes voicePulse { 50% { transform:scale(.94); box-shadow:0 0 0 6px rgba(255,77,109,.14); } }
.chat-project-inline { margin:0 .8rem; padding:.7rem .1rem; border-bottom:1px solid var(--border); }.chat-project-inline>summary { display:flex; justify-content:space-between; cursor:pointer; color:var(--accent-soft); list-style:none; }.chat-project-inline>summary::-webkit-details-marker { display:none; }.chat-project-inline .progress-bar { margin-top:.7rem; }.project-step-list{display:grid;gap:.5rem;margin-top:1rem}.project-step{display:flex;gap:.5rem;justify-content:space-between;align-items:center;border:1px solid var(--border);padding:.65rem;border-radius:10px}.project-step span{display:flex;flex-direction:column;min-width:0}.project-step small{color:var(--muted);font-size:.7rem}.chat-add-step{margin-top:1rem}.chat-add-step summary{cursor:pointer;color:var(--accent-soft);font-weight:700}.chat-add-step form{padding-top:1rem}
@keyframes messageIn { from{opacity:0;transform:translateY(6px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }

/* Workflow automation */
.page-subtitle { max-width: 760px; color: var(--muted); margin-top: .35rem; font-size: .9rem; }
.automation-summary { display: flex; gap: .7rem; flex-wrap: wrap; }
.automation-summary span {
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.035);
  color: var(--muted);
  border-radius: 999px;
  font-size: .78rem;
}
.automation-summary strong { color: var(--accent2); margin-inline-end: .2rem; }
.automation-builder, .automation-rules-panel, .automation-runs-panel { padding: 1.25rem; margin-bottom: 1.2rem; }
.workflow-form { max-width: 920px; }
.workflow-help { color: var(--muted-soft); font-size: .78rem; margin: -.2rem 0 1rem; }
.workflow-rule-list { display: grid; gap: .7rem; }
.workflow-rule {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.018);
  overflow: hidden;
}
.workflow-rule[open] { border-color: rgba(108,99,255,.42); }
.workflow-rule.is-paused { opacity: .72; }
.workflow-rule summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  cursor: pointer;
  list-style: none;
}
.workflow-rule summary::-webkit-details-marker { display: none; }
.workflow-rule-title, .workflow-rule-title > span:last-child { display: flex; align-items: center; gap: .6rem; }
.workflow-rule-title > span:last-child { align-items: flex-start; flex-direction: column; gap: .05rem; }
.workflow-rule-title small, .workflow-rule-action { color: var(--muted); font-size: .77rem; }
.workflow-rule-action { text-align: end; }
.workflow-rule-body { border-top: 1px solid var(--border); padding: 1rem; }
.workflow-rule-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.compact-workflow { padding-top: .1rem; }
.workflow-actions { margin-top: .6rem; }
.workflow-actions form { margin: 0; }

/* Office automation: correspondence, secretariat, and personal inbox. */
.office-tabs { display:flex; gap:.35rem; padding:.5rem; margin-bottom:1.1rem; overflow-x:auto; }.office-tabs a { color:var(--muted); text-decoration:none; white-space:nowrap; padding:.6rem .9rem; border-radius:9px; font-size:.84rem; font-weight:700; }.office-tabs a:hover { background:var(--surface-hover); color:var(--text); }.office-tabs a.active { color:#fff; background:linear-gradient(135deg,var(--accent),#8b5cf6); }
.office-list { display:grid; gap:.75rem; }.office-document { display:grid; grid-template-columns:minmax(125px,.45fr) minmax(0,1.9fr) auto; align-items:center; gap:1rem; padding:1rem 1.15rem; color:var(--text); text-decoration:none; }.office-document:hover { border-color:rgba(108,99,255,.48); background:var(--surface-hover); }.office-document-number { display:flex; flex-direction:column; gap:.12rem; color:var(--accent-soft); }.office-document-number small,.office-document-copy small,.office-document-state small { color:var(--muted); font-size:.72rem; }.office-document-copy { min-width:0; }.office-document-copy h2 { font-size:1.04rem; margin:.35rem 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.office-document-state { text-align:center; display:flex; flex-direction:column; min-width:70px; }.office-document-state strong { font-size:1.35rem; color:var(--accent2); }
.letter-sheet { position:relative; width:min(100%,760px); min-height:1050px; margin:0 auto 1.2rem; padding:4.1rem 3.8rem; direction:rtl; color:#f2f2f2; background:#242424; border:1px solid #b5b5b5; box-shadow:0 18px 50px rgba(0,0,0,.32); font-family:var(--font-fa); font-size:.9rem; line-height:2.15; }.letterhead { display:flex; justify-content:center; padding-bottom:.5rem; }.letterhead-brand { display:none; }.letterhead-title { color:#9f9f9f; font-size:1.35rem; font-weight:700; }.letter-reference { position:absolute; top:104px; left:54px; display:flex; width:185px; flex-direction:column; gap:.05rem; color:#f1f1f1; font-size:.78rem; text-align:right; }.letter-recipient { width:270px; margin:5.7rem 0 0 auto; display:flex; flex-direction:column; gap:.15rem; }.letter-recipient span { font-weight:600; }.letter-subject { width:270px; margin:1rem 0 0 auto; padding:.25rem 0; text-decoration:underline; text-underline-offset:.25rem; }.letter-greeting { margin:1.4rem 0 1.35rem; }.letter-body { min-height:260px; white-space:pre-wrap; text-align:justify; }.letter-signature { display:flex; min-width:170px; margin-top:2.6rem; margin-right:auto; margin-left:0; flex-direction:column; align-items:center; text-align:center; line-height:1.6; }.letter-signature img { width:150px; height:76px; object-fit:contain; margin:.2rem 0 -.25rem; }.office-referral-list { display:grid; gap:.65rem; }.office-referral { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:.85rem; border:1px solid var(--border); background:rgba(255,255,255,.025); border-radius:10px; }.office-referral p { color:var(--muted); font-size:.82rem; margin:.25rem 0; }.office-referral small { color:var(--muted-soft); font-size:.72rem; }.office-upload-form { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }.office-upload-form input { max-width:260px; color:var(--muted); }.office-attachment-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.75rem; }.office-attachment { min-width:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:rgba(255,255,255,.025); }.office-attachment a { display:flex; flex-direction:column; gap:.35rem; min-height:152px; padding:.65rem; color:var(--text); text-decoration:none; }.office-attachment a:hover { background:var(--surface-hover); }.office-attachment img { width:100%; height:98px; object-fit:cover; border-radius:7px; }.office-file-icon { display:grid; place-items:center; height:80px; border-radius:8px; background:rgba(108,99,255,.12); color:var(--accent-soft); font-weight:800; letter-spacing:.08em; }.office-attachment strong,.office-attachment small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.office-attachment small { color:var(--muted); font-size:.7rem; }
.office-attachment { display:flex; flex-direction:column; gap:.45rem; padding:.65rem; }.office-attachment > img { width:100%; height:98px; object-fit:cover; border-radius:7px; }.office-attachment-actions { display:flex; gap:.45rem; margin-top:auto; }.office-attachment-actions .btn-secondary { flex:1; padding:.45rem .55rem; text-align:center; font-size:.72rem; text-decoration:none; }.attachment-viewer { min-height:65vh; padding:1rem; }.pdf-viewer { display:block; width:100%; height:min(78vh,960px); border:1px solid var(--border); border-radius:10px; background:#fff; }.docx-viewer { max-width:850px; margin:0 auto; padding:2rem clamp(1rem,4vw,4rem); color:#1d2432; background:#fff; border-radius:8px; line-height:2; }.docx-viewer p { margin:0 0 1rem; white-space:pre-wrap; }.preview-sheet { margin:.8rem 0; border:1px solid var(--border); border-radius:9px; overflow:hidden; }.preview-sheet summary { padding:.7rem .9rem; cursor:pointer; font-weight:700; }.sheet-scroll { overflow:auto; max-height:65vh; }.preview-table { width:max-content; min-width:100%; border-collapse:collapse; direction:auto; background:rgba(0,0,0,.12); }.preview-table td { max-width:280px; padding:.55rem .7rem; border:1px solid var(--border); overflow-wrap:anywhere; vertical-align:top; }.docx-viewer .preview-table { color:#202633; background:#fff; }.text-file-viewer { min-height:55vh; margin:0; padding:1rem; overflow:auto; white-space:pre-wrap; direction:ltr; text-align:left; color:#e5e7eb; background:#11131b; border:1px solid var(--border); border-radius:9px; }
.meeting-action-form { display:grid; grid-template-columns:minmax(180px,1.45fr) minmax(140px,1fr) minmax(150px,1fr) minmax(130px,.8fr) auto; gap:.7rem; align-items:end; margin:.7rem 0; padding:.8rem; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.025); }.meeting-action-form .form-group { margin:0; }.meeting-action-form .btn-danger-sm { margin-bottom:.1rem; } @media (max-width:850px) { .meeting-action-form { grid-template-columns:1fr 1fr; } .meeting-action-form .btn-danger-sm { grid-column:span 2; } } @media (max-width:520px) { .meeting-action-form { grid-template-columns:1fr; } .meeting-action-form .btn-danger-sm { grid-column:auto; } }
@media print { body { background:#242424 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .navbar,.office-detail-actions,.office-attachments,.office-detail-actions + .alert,.letter-sheet ~ .panel { display:none !important; } .container { width:100%; margin:0; padding:0; } .letter-sheet { width:100%; min-height:0; margin:0; border:0; box-shadow:none; padding:18mm; } }

/* Projects */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.project-card {
  padding: 1.15rem;
  color: var(--text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.project-card:hover { transform: translateY(-3px); border-color: rgba(108,99,255,.45); }
.project-card-top, .project-meta, .progress-label, .task-card-head, .task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
}
.project-card h2 { font-size: 1.1rem; margin: .9rem 0 .35rem; }
.project-card > p { color: var(--muted); min-height: 3em; font-size: .85rem; }
.project-card .progress-bar { margin: .4rem 0 .8rem; background: rgba(255,255,255,.05); }
.progress-label { margin-top: 1rem; font-size: .75rem; color: var(--muted); }
.project-meta { color: var(--muted-soft); font-size: .72rem; }
.project-health { display:flex; gap:.65rem; flex-wrap:wrap; color:var(--muted-soft); font-size:.68rem; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 4rem 2rem; }
.empty-state > span { font-size: 3rem; color: var(--accent-soft); }
.empty-state p { color: var(--muted); margin: .5rem 0 1.2rem; }
.project-summary .summary-copy { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.project-summary .summary-copy p { color: var(--muted); }
.summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.summary-stats > div { display: flex; flex-direction: column; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 10px; }
.summary-stats small { color: var(--muted); }
.project-summary .progress-bar { margin: 1rem 0 0; }
.kanban-board { grid-template-columns: repeat(4, minmax(270px, 1fr)); }
.kanban-stack { min-height: 140px; }
.kanban-heading { justify-content: flex-start; }
.kanban-heading > span:last-child { margin-inline-start: auto; }
.status-bg-todo { background: var(--muted-soft); }
.status-bg-in_progress { background: #62b5ff; }
.status-bg-review { background: var(--warning); }
.status-bg-done { background: var(--accent2); }
.priority-urgent { border-color: rgba(255,77,109,.4); }
.priority-high { border-color: rgba(255,209,102,.35); }
.priority-label, .weight-label { color: var(--muted); font-size: .68rem; text-transform: uppercase; font-weight: 800; }
.task-meta { flex-wrap: wrap; color: var(--muted); font-size: .72rem; }
.task-actions { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.comment-form { display: flex !important; gap: .35rem; margin-top: .55rem; }
.comment-form input { flex: 1; width: auto; }
.comments { margin-top: .7rem; font-size: .75rem; color: var(--muted); }
.comment { padding: .5rem; border-top: 1px solid var(--border); }
.comment p { margin: .2rem 0 0; }

/* Unified work inbox */
.work-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.work-list { display:grid; gap:.8rem; }
.work-item { display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem; padding:1.05rem 1.15rem; }
.work-item:hover { border-color:rgba(108,99,255,.4); }
.work-overdue { border-color:rgba(255,77,109,.38); }
.work-item-copy { min-width:0; }.work-item-copy h2 { font-size:1.05rem; margin:.35rem 0; }.work-item-copy p { color:var(--muted); font-size:.84rem; margin-bottom:.35rem; white-space:pre-wrap; }.work-item-meta { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; font-size:.76rem; }.source-badge { padding:.17rem .45rem; border-radius:999px; color:var(--accent2); background:rgba(0,212,170,.1); border:1px solid rgba(0,212,170,.22); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }.work-status-form { flex:none; }.work-status-form select { min-width:130px; }
.work-calendar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; align-items:start; }.calendar-day { min-height:150px; padding:.8rem; }.calendar-day header { display:flex; justify-content:space-between; gap:.5rem; padding-bottom:.65rem; margin-bottom:.65rem; border-bottom:1px solid var(--border); }.calendar-day header small { font-size:.68rem; }.calendar-today { border-color:rgba(0,212,170,.45); }.calendar-item { display:flex; flex-direction:column; gap:.3rem; padding:.6rem; margin-bottom:.45rem; border-inline-start:3px solid var(--accent); border-radius:8px; background:rgba(255,255,255,.035); font-size:.78rem; }.calendar-item.priority-urgent { border-inline-start-color:var(--danger); }.calendar-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Settings */
.membership-grid { grid-template-columns: 1fr; }
.replacement-card p { color: var(--muted); margin-bottom: 1rem; }
.muted-note { color: var(--muted-soft) !important; font-size: .78rem; margin: 1rem 0 0 !important; }

/* Network discovery page */
.network-summary {
  display: flex;
  gap: 2.5rem;
  padding: 1rem 1.4rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.summary-item { display: flex; flex-direction: column; gap: .25rem; }
.summary-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
}
.summary-value { font-size: 1.05rem; font-weight: 700; }

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-inline-end: .45rem;
  vertical-align: middle;
}
.status-dot.online { background: var(--accent2); box-shadow: 0 0 8px rgba(0,212,170,0.7); }
.status-dot.offline { background: var(--muted-soft); }
tr.row-offline td { opacity: .5; }

.port-tag {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  background: rgba(0,212,170,0.14);
  color: var(--accent2);
  border: 1px solid rgba(0,212,170,0.3);
  padding: .18rem .55rem;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 600;
  margin: .12rem .25rem .12rem 0;
}
.port-tag .port-num { color: var(--muted); font-weight: 400; font-size: .7rem; }
.empty-inline { color: var(--muted-soft); font-size: .85rem; }

.btn-loading { opacity: .7; cursor: progress; }
.btn-loading:hover { transform: none; }

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.1rem;
  margin-bottom: 1.1rem;
}
.search-icon { font-size: .95rem; opacity: .7; flex-shrink: 0; }
.search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  padding: .3rem 0;
}
.search-input::placeholder { color: var(--muted-soft); }
.search-input:focus { outline: none; }
.search-count {
  color: var(--muted);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  direction: ltr;
}

/* Table */
.table-card { overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
table.hidden { display: none; }
tbody tr.hidden { display: none; }
thead tr { background: rgba(255,255,255,0.045); }
th {
  padding: 1rem 1.1rem;
  text-align: start;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color .15s ease;
}
th.sortable:hover { color: var(--text); }
th.sortable.sorted-asc, th.sortable.sorted-desc { color: var(--accent-soft); }
th.sortable .sort-arrow {
  display: inline-block;
  margin-inline-start: .35rem;
  font-size: .68rem;
  color: var(--accent-soft);
}
td {
  padding: .95rem 1.1rem;
  border-top: 1px solid var(--border);
  font-size: .92rem;
  text-align: start;
  vertical-align: middle;
}
tbody tr { transition: background .15s ease; }
tbody tr:hover td { background: rgba(255,255,255,0.035); }
.row-warning td { border-inline-start: 3px solid var(--warning); }
.row-danger td { border-inline-start: 3px solid var(--danger); }
.empty { text-align: center; color: var(--muted); padding: 3rem !important; font-size: .95rem; }

/* Badge */
.badge {
  display: inline-block;
  background: rgba(108,99,255,0.16);
  color: var(--accent-soft);
  padding: .25rem .7rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 500;
  border: 1px solid rgba(108,99,255,0.3);
}

/* Alert */
.alert {
  padding: .85rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.1rem;
  font-size: .9rem;
}
.alert.error { background: rgba(255,77,109,0.12); border: 1px solid rgba(255,77,109,0.3); color: var(--danger); }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(5,6,10,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  animation: fadeIn .18s ease;
}
.modal-overlay.hidden { display: none; }
.modal {
  padding: clamp(1.4rem, 2.5vw, 2.6rem);
  width: min(100%, 680px);
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: var(--shadow-deep);
  animation: modalIn .22s cubic-bezier(.2,.9,.3,1.1);
}
.modal h3 { margin-bottom: 1.6rem; font-size: 1.2rem; font-weight: 700; }
.modal-actions { display: flex; gap: .9rem; justify-content: flex-end; margin-top: .6rem; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* IT Reports page */
.tabs { display: flex; gap: .3rem; padding: .5rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.tab {
  padding: .6rem 1.2rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.tab:hover { color: var(--text); background: var(--surface-hover); }
.tab.active { color: #fff; background: linear-gradient(135deg, var(--accent), #8b5cf6); }

.report-summary {
  display: flex;
  gap: 2.5rem;
  padding: 1rem 1.4rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
  align-items: center;
}
.inline-date-form { display: inline-block; }
.date-input {
  background: rgba(255,255,255,0.055);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .4rem .6rem;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  width: 130px;
}
.network-page-header { align-items:center; padding-bottom:1.15rem; border-bottom:1px solid var(--border); }.network-scan-form { display:grid; grid-template-columns:minmax(310px,430px) auto; align-items:end; gap:.65rem; margin-inline-start:auto; direction:rtl; }.network-range-control { min-width:0; padding:.48rem; background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:12px; }.network-range-control input { width:100%; margin-top:.42rem; color:var(--text); background:rgba(255,255,255,.055); border-color:var(--border); text-align:left; direction:ltr; }.network-range-modes { display:flex; gap:.35rem; }.network-range-modes button { flex:1; min-width:0; padding:.42rem .35rem; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:7px; cursor:pointer; font:inherit; font-size:.72rem; white-space:nowrap; }.network-range-modes button:hover { color:var(--text); border-color:rgba(108,99,255,.75); }.network-range-modes button.active { color:#fff; background:rgba(108,99,255,.6); border-color:var(--accent); }.network-scan-form .btn-primary { min-height:46px; white-space:nowrap; }
.pattern-variables { overflow:hidden; }.pattern-variables .panel-heading { gap:.75rem; margin-bottom:.5rem; }.pattern-variable-row { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto; align-items:center; margin:.45rem 0; }.pattern-variable-row input { min-width:0; }.admin-section .form-group input,.admin-section .form-group textarea { max-width:100%; }.admin-section .table-scroll td { overflow-wrap:anywhere; }.admin-section #smsBalanceLabel { min-width:100px; padding:.45rem .7rem; text-align:center; border:1px solid rgba(0,212,170,.45); background:rgba(0,212,170,.12); }
.plugin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; margin:1rem 0; }.plugin-card { display:flex; align-items:flex-start; gap:.7rem; min-width:0; padding:1rem; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.025); cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }.plugin-card:hover { border-color:rgba(108,99,255,.7); background:rgba(108,99,255,.08); transform:translateY(-1px); }.plugin-card.core-plugin { cursor:default; border-color:rgba(0,212,170,.25); background:rgba(0,212,170,.045); }.plugin-card.core-plugin:hover { border-color:rgba(0,212,170,.35); background:rgba(0,212,170,.065); transform:none; }.plugin-card input { accent-color:var(--accent); margin-top:.18rem; }.plugin-card.core-plugin input { accent-color:var(--accent2); }.plugin-card span { display:grid; gap:.25rem; }.plugin-card small { color:var(--muted); line-height:1.45; }.plugin-save { margin-top:.2rem; }.admin-filter { margin:.85rem 0; }.admin-filter input { width:min(100%,430px); }
.time-dial-field { width:100%; }
.time-dial-trigger { width:100%; padding:.65rem .8rem; color:var(--text); background:rgba(255,255,255,.055); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font:inherit; text-align:center; }
.time-dial-trigger:hover,.time-dial-trigger:focus-visible { border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,99,255,.14); outline:0; }

/* Samsung-style duration picker used by the work-log form. */
.time-dial-popup {
  position:absolute;
  z-index:1100;
  width:min(94vw,360px);
  padding:1.15rem;
  color:var(--text);
  direction:rtl;
  text-align:center;
  user-select:none;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),#171b28;
  border:1px solid rgba(112,92,255,.9);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.025);
}
.time-dial-title { margin:0 0 .7rem; color:var(--text); font-size:1rem; font-weight:800; }
.time-dial-clock { position:relative; width:min(100%,310px); aspect-ratio:1; margin:0 auto .35rem; touch-action:none; }
.time-dial-dial { position:absolute; inset:0; border:1px solid rgba(90,73,255,.52); border-radius:50%; background:radial-gradient(circle at center,rgba(32,202,201,.22) 0 31%,rgba(28,31,58,.92) 31.5% 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),inset 0 0 50px rgba(0,0,0,.1); }
.time-dial-minute-ring { position:absolute; inset:18.7%; border:1px solid rgba(0,227,208,.38); border-radius:50%; pointer-events:none; }
.time-dial-center { position:absolute; top:50%; left:50%; z-index:5; width:103px; height:103px; padding:0; transform:translate(-50%,-50%); display:grid; place-items:center; color:var(--text); direction:ltr; border:0; border-radius:50%; background:#224c58; box-shadow:0 0 0 1px rgba(0,227,208,.08),0 10px 26px rgba(0,0,0,.14); font:900 1.6rem/1 inherit; letter-spacing:.4px; pointer-events:none; }
.time-dial-hand { position:absolute; top:50%; left:50%; z-index:3; width:2px; transform-origin:50% 100%; pointer-events:none; }
.time-dial-hand.hour { background:linear-gradient(to top,rgba(118,88,255,0),rgba(118,88,255,.82)); }
.time-dial-hand.minute { background:linear-gradient(to top,rgba(0,227,208,0),rgba(0,227,208,.9)); }
.time-dial-dot { position:absolute; z-index:4; width:8px; height:8px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; }
.time-dial-dot.hour { background:#8b78ff; box-shadow:0 0 14px rgba(139,120,255,.65); }
.time-dial-dot.minute { background:#00e3d0; box-shadow:0 0 14px rgba(0,227,208,.65); }
.time-dial-hour-label,.time-dial-minute-label { position:absolute; z-index:6; display:grid; width:34px; height:24px; margin:-12px 0 0 -17px; padding:0; place-items:center; color:#9d8dff; background:transparent; border:0; border-radius:8px; cursor:pointer; font:inherit; font-size:.75rem; line-height:1; transition:color .15s ease,background .15s ease,transform .15s ease; }
.time-dial-minute-label { color:#00e3d0; font-size:.68rem; }
.time-dial-hour-label:hover,.time-dial-hour-label:focus-visible,.time-dial-hour-label.active-hour { color:#fff; background:rgba(139,120,255,.18); font-weight:900; text-shadow:0 0 10px rgba(139,120,255,.9); outline:0; }
.time-dial-minute-label:hover,.time-dial-minute-label:focus-visible,.time-dial-minute-label.active-minute { color:#fff; background:rgba(0,227,208,.14); font-weight:900; text-shadow:0 0 10px rgba(0,227,208,.9); outline:0; }
.time-dial-hint { margin:-.05rem 0 .85rem; color:var(--muted); font-size:.75rem; }
.time-dial-actions { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; direction:ltr; }
.time-dial-actions button { width:100%; min-width:0; min-height:44px; }
.notification-connection { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 .8rem; padding:.8rem; border:1px solid var(--border); border-radius:10px; background:rgba(108,99,255,.07); }.notification-connection > div { display:grid; gap:.2rem; }.notification-connection small,.bale-link-code small { color:var(--muted); font-size:.78rem; }.bale-link-code { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:.7rem; margin:-.2rem 0 .9rem; padding:.75rem .85rem; border:1px dashed rgba(0,212,170,.55); border-radius:10px; background:rgba(0,212,170,.08); }.bale-link-code code { padding:.28rem .55rem; color:#dffff8; background:rgba(0,0,0,.22); border-radius:6px; font-weight:800; letter-spacing:.12em; }

.progress-bar { height: 10px; border-radius: 999px; overflow: hidden; margin-bottom: 1.5rem; padding: 0; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s ease; }

.checklist-group { padding: 1.3rem 1.5rem; margin-bottom: 1.1rem; }
.checklist-group h3 { font-size: 1rem; font-weight: 700; margin-bottom: .9rem; color: var(--accent-soft); }
.checklist-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.checklist-item:first-of-type { border-top: none; }
.checklist-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.checklist-item.readonly { cursor: default; }

.alert.success { background: rgba(0,212,170,0.12); border: 1px solid rgba(0,212,170,0.3); color: var(--accent2); }
.note-view { padding: 1.1rem 1.3rem; white-space: pre-wrap; line-height: 1.8; }

/* Work log page */
.badge-done { background: rgba(0,212,170,0.16); color: var(--accent2); border-color: rgba(0,212,170,0.3); }
.badge-undone { background: rgba(255,77,109,0.12); color: var(--danger); border-color: rgba(255,77,109,0.28); }
tfoot .sum-row td { background: rgba(255,255,255,0.04); border-top: 2px solid var(--border-strong); padding: .85rem 1.1rem; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  body { padding-bottom:6.35rem; }
  .navbar { position:fixed; top:auto; bottom:.55rem; left:.55rem; right:.55rem; z-index:100; min-height:4.8rem; padding:.38rem .48rem; overflow:hidden; border:1px solid rgba(135,127,255,.34); border-radius:1.2rem; background:rgba(13,16,28,.9); box-shadow:0 16px 40px rgba(0,0,0,.38); backdrop-filter:blur(22px) saturate(160%); }
  .nav-brand,.nav-user,.logout-form { display:none; }
  .nav-links { width:100%; min-width:0; flex-wrap:nowrap; justify-content:flex-start; gap:.28rem; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-links a { display:grid; flex:0 0 3.7rem; min-height:3.92rem; padding:.25rem .16rem .36rem; place-items:center; align-content:center; gap:.2rem; color:var(--muted); font-size:.55rem; line-height:1.1; text-align:center; scroll-snap-align:center; border-radius:.85rem; transition:transform .18s ease,background .18s ease,color .18s ease; }
  .nav-links a::before { font-size:1.25rem; line-height:1; content:'◈'; }.nav-links a::after { display:none; }.nav-links a:hover,.nav-links a:active,.nav-links a.active { color:#fff; background:rgba(108,99,255,.26); transform:translateY(-3px) scale(1.04); }
  .nav-links a[href$="/dashboard"]::before{content:'▦'}.nav-links a[href$="/crm"]::before{content:'◎'}.nav-links a[href$="/automation"]::before{content:'✉'}.nav-links a[href$="/chat"]::before{content:'●'}.nav-links a[href$="/projects"]::before{content:'▤'}.nav-links a[href$="/work"]::before{content:'✓'}.nav-links a[href$="/meetings"]::before{content:'◉'}.nav-links a[href$="/inventory"]::before{content:'▣'}.nav-links a[href$="/deliveries"]::before{content:'▧'}.nav-links a[href$="/network"]::before{content:'◌'}.nav-links a[href$="/reports"]::before{content:'▥'}.nav-links a[href$="/worklog"]::before{content:'◷'}.nav-links a[href$="/settings"]::before{content:'⚙'}.nav-links a[href$="/admin"]::before{content:'⚙'}
  .nav-language-form { flex:0 0 auto; margin-inline:.1rem; }.nav-language-select { min-width:3.7rem; min-height:3.92rem; padding:.25rem .16rem; font-size:.56rem; text-align:center; border-radius:.85rem; }
  .container { width: 100%; padding: 1.5rem 1.1rem; }
  .modal-overlay { padding: .65rem; align-items: flex-end; }
  .modal, .modal-wide { width: 100%; max-width: 100%; max-height: calc(100vh - 1.3rem); border-radius: 18px 18px 12px 12px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > * { flex: 1 1 140px; }
  .chat-shell { grid-template-columns:1fr; min-height:auto; }.chat-sidebar,.chat-directory-panel{max-height:310px}.chat-main{min-height:560px}.chat-list{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-list-item{padding:.5rem}.chat-list-item small{display:none}
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tbody tr {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  td { border-top: 1px solid var(--border); }
  td:first-child { border-top: none; }
  .metric-grid, .dashboard-grid, .settings-grid, .two-column, .project-grid, .customer-hero, .detail-grid, .summary-stats {
    grid-template-columns: 1fr;
  }
  .work-metrics, .work-calendar { grid-template-columns:1fr; }
  .work-item { flex-direction:column; gap:.75rem; }.work-status-form,.work-status-form select { width:100%; }
  .toggle-grid, .choice-grid, .permission-grid { grid-template-columns: 1fr; }
  .panel { padding: 1rem; }
  .network-page-header { align-items:stretch; }.network-scan-form { width:100%; grid-template-columns:1fr; margin-inline:0; }.network-scan-form .btn-primary { width:100%; }
  .plugin-grid { grid-template-columns:1fr; }
  .settings-grid > .panel { min-width:0; overflow:hidden; }
  .settings-grid .panel-heading { align-items:flex-start; }
  .profile-identity-row,.profile-signature-row { flex-direction:column; align-items:stretch; min-width:0; }
  .profile-identity-row .form-group,.profile-signature-row .form-group { width:100%; min-width:0; }
  .profile-avatar-preview { align-self:center; }
  .profile-signature-preview { width:100%; max-width:100%; height:78px; }
  .profile-identity-row input[type="file"],.profile-signature-row input[type="file"] { width:100%; min-width:0; font-size:.75rem; }
  .notification-connection { flex-direction:column; align-items:stretch; gap:.75rem; }
  .notification-connection > div { min-width:0; }
  .notification-link-action,.notification-link-action button { width:100%; }
  .bale-link-code { grid-template-columns:1fr; gap:.4rem; overflow-wrap:anywhere; }
  .bale-link-code code { width:fit-content; max-width:100%; overflow-wrap:anywhere; }
  .notification-panel .toggle-card { align-items:flex-start; overflow-wrap:anywhere; }
}

@media (min-width: 641px) and (max-width: 1050px) {
  .container { width: min(calc(100% - 3rem), 1080px); }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-calendar { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width: 1051px) and (max-width: 1399px) {
  .container { width: min(calc(100% - 4rem), 1280px); }
  .modal-wide { max-width: min(940px, calc(100vw - 5rem)); }
  .chat-shell { grid-template-columns:250px minmax(0,1fr); }.chat-project-panel { grid-column:1 / -1; max-height:300px; }.chat-project-panel .project-step-list{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width: 1400px) {
  .container { width: min(calc(100% - 5rem), 1480px); }
  .modal-wide { max-width: min(1120px, calc(100vw - 8rem)); }
  .modal .form-row { gap: 1.25rem; }
}

/* The meeting-outcome form has several project fields and repeatable tasks.
   Make full use of desktop width while retaining the mobile bottom sheet. */
@media (min-width: 1051px) {
  #addMeetingModal .modal { width: min(1280px, calc(100vw - 6rem)); max-width: min(1280px, calc(100vw - 6rem)); }
  #addMeetingModal .form-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #addMeetingModal .form-row:first-of-type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}