:root {
  /* ── v3 layout, v2 palette — the team's original dark navy + blue accent ── */
  --bg: #0d1117;
  --bg-elev: #161b22;
  --bg-elev2: #1c2230;
  --border: #2a3343;
  --border-soft: #222a37;
  --text: #e6edf3;
  --text-dim: #9aa7b8;
  --muted: #6b7785;
  --accent: #2ea6ff;
  --accent-2: #1f7fd6;
  --green: #3fb950;
  --red: #f85149;
  --amber: #d29922;
  --purple: #a371f7;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* semantic tokens (themable; consumed by the shell + the vault tab) */
  --bg-grad: #16243a;              /* radial highlight behind the app bg */
  --row-hover: #1c2230;            /* hover bg for list rows / table rows */
  --bar-bg: rgba(13,17,23,.86);    /* translucent sticky toolbar bg */
  --overlay: rgba(2,6,14,.66);     /* modal scrim */
  --badge-ring: rgba(255,255,255,.06); /* subtle inset ring on monogram chips */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  background: radial-gradient(1200px 700px at 80% -10%, var(--bg-grad) 0%, var(--bg) 55%);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
/* display face for the marquee moments — view titles, dialogs, brand */
.topbar h2, .modal-head h3, .login-card h1, .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
a { color: var(--accent); }

/* ── buttons ─────────────────────────────────────────── */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-elev2); color: var(--text);
  padding: 9px 14px; border-radius: var(--radius-sm); transition: .15s;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-color: var(--accent-2); color: #fff; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--red) 38%, var(--border)); color: var(--red); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: var(--red); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-icon { padding: 6px 9px; }

/* ── login ───────────────────────────────────────────── */
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card {
  width: 340px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow); text-align: center;
}
.login-logo { font-size: 42px; }
.login-card h1 { margin: 8px 0 2px; font-size: 22px; }
.login-card p { margin: 0 0 22px; }
.login-card input {
  width: 100%; padding: 11px 13px; margin-bottom: 12px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--border); color: var(--text); font: inherit;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-error { color: var(--red); margin-top: 12px; min-height: 18px; font-size: 13px; }

/* ── layout ──────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 232px 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh; }
.sidebar {
  background: var(--bg-elev); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 18px 14px; min-height: 0;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; padding: 4px 8px 18px; }
.brand-icon { font-size: 20px; }
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.nav-item {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: transparent; border: none; color: var(--text-dim); text-decoration: none;
  padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-weight: 500;
}
.nav-item span { text-align: left; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; }
.nav-item .icon { opacity: .85; }
.nav-item.active .icon { opacity: 1; color: var(--accent); }
.brand-icon { display: inline-flex; color: var(--accent); }
.btn .icon { width: 16px; height: 16px; }
/* user box + language toggle */
.user-box { display: flex; flex-direction: column; gap: 8px; padding: 8px 4px 12px; }
.user-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.user-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; align-self: flex-start; }
.lang-toggle button { background: var(--bg-elev); border: none; color: var(--text-dim); padding: 4px 10px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.lang-toggle button.active { background: var(--accent); color: #fff; }
.nav-item:hover { background: var(--bg-elev2); color: var(--text); }
.nav-item.active { background: var(--bg-elev2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.sidebar-footer { padding-top: 12px; border-top: 1px solid var(--border-soft); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px; border-bottom: 1px solid var(--border-soft); gap: 14px;
}
.topbar h2 { margin: 0; font-size: 19px; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* admin-configurable quick-link buttons (topbar). order:-1 keeps them at the far
   LEFT of the icon cluster — left of the notification bell — regardless of the
   order the bell/theme icons are inserted in. */
.quick-links { display: inline-flex; align-items: center; gap: 6px; order: -1; flex-wrap: wrap; }
.quick-links:empty { display: none; }
.ql-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-sm);
  background: var(--bg-elev2); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s, color .15s; }
.ql-btn:hover { border-color: var(--accent); color: var(--accent); }
.ql-edit { color: var(--text-dim); }
@media (max-width: 900px) { .ql-btn { max-width: 96px; padding: 0 9px; } }
/* quick-links editor modal */
.ql-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ql-row .ql-l { flex: 0 0 34%; }
.ql-row .ql-u { flex: 1; min-width: 0; }
.ql-row .ql-del { flex: 0 0 auto; }
.ql-modal-actions { display: flex; gap: 8px; margin-top: 10px; }
.view { padding: 22px 26px; overflow: auto; flex: 1; min-height: 0; scrollbar-gutter: stable; }

/* ── cards / grids ───────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.stat-card {
  background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-card .label { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.stat-card .value { font-size: 28px; font-weight: 700; margin-top: 6px; }
.stat-card .value.green { color: var(--green); }
.stat-card .value.red { color: var(--red); }

.panel {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: var(--radius); margin-top: 18px; overflow: hidden;
}
.panel-head { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.panel-body { padding: 4px 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } .app { grid-template-columns: 1fr; } .sidebar { flex-direction: row; flex-wrap: wrap; } .nav { flex-direction: row; flex: 1 1 100%; flex-wrap: wrap; } }

/* ── tables ──────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: var(--bg-elev2); }
td .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* ── badges ──────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); }
.badge.green { color: var(--green); border-color: color-mix(in srgb, var(--green) 32%, var(--border-soft)); background: color-mix(in srgb, var(--green) 10%, transparent); }
.badge.red { color: var(--red); border-color: color-mix(in srgb, var(--red) 32%, var(--border-soft)); background: color-mix(in srgb, var(--red) 10%, transparent); }
.badge.amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 32%, var(--border-soft)); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.badge.blue { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.badge.gray { color: var(--text-dim); }
.badge.purple { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 32%, var(--border-soft)); background: color-mix(in srgb, var(--purple) 10%, transparent); }
.pill { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.lang-tag { font-family: var(--mono); text-transform: uppercase; font-size: 11px; background: var(--bg-elev2); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; }

/* ── forms ───────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; }
.field .hint { color: var(--muted); font-weight: 400; font-size: 12px; }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; padding: 9px 11px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font: inherit;
}
textarea { resize: vertical; min-height: 90px; font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.row { display: flex; gap: 12px; } .row > * { flex: 1; }
.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.checkbox input { width: auto; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar select, .toolbar input { width: auto; min-width: 130px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { background: var(--bg-elev); border: none; color: var(--text-dim); padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 600; }
.seg button.active { background: var(--accent); color: #fff; }

/* ── modal ───────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: 24px; z-index: 50; backdrop-filter: blur(2px); }
.modal { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.modal.lg { max-width: 880px; }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-body { padding: 20px 22px; overflow: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 10px; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.section-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.section-title:first-child { margin-top: 0; }

/* variants / chips */
.variant-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; background: var(--bg); }
.variant-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--bg-elev2); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; font-size: 12.5px; user-select: none; }
.chip.on { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); color: var(--accent); }
.cron-preview { font-family: var(--mono); font-size: 12px; color: var(--green); background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 8px; white-space: pre-wrap; }
.cron-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── toast ───────────────────────────────────────────── */
.toast-root { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.toast { background: var(--bg-elev); border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; padding: 12px 16px; min-width: 240px; box-shadow: var(--shadow); animation: slidein .2s ease; }
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }
.toast.info { border-left-color: var(--accent); }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } }

.loading { padding: 40px; text-align: center; color: var(--muted); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.muted-sm { color: var(--muted); font-size: 12px; }

/* ── announcement ticker ─────────────────────────────── */
.ticker-bar {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--bg-elev)), color-mix(in srgb, var(--green) 8%, var(--bg-elev)));
  border-bottom: 1px solid var(--border-soft); padding: 0 18px; height: 38px; overflow: hidden;
}
.ticker-label { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; flex: 0 0 auto; letter-spacing: .02em; }
.ticker-viewport { flex: 1; overflow: hidden; position: relative; height: 100%; display: flex; align-items: center; }
.ticker-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: ticker-scroll linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
/* translateZ(0): each item gets its OWN small compositor layer. Without it the
   whole 2x-wide track is one huge tiled texture, and Chrome sometimes doesn't
   rasterize the upcoming (right-side) tiles while the animation runs on the
   compositor — the text looks missing until a mouse move forces a repaint. */
.ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 26px; font-size: 13px; font-weight: 500; color: var(--text); transform: translateZ(0); }
.ticker-item::before { content: '●'; color: var(--muted); font-size: 8px; }
.ticker-item.info { color: var(--accent); }
.ticker-item.warn { color: var(--amber); }
.ticker-item.success { color: var(--green); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── rich text editor ────────────────────────────────── */
.rich-editor { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.re-toolbar { display: flex; align-items: center; gap: 3px; padding: 6px 8px; background: var(--bg-elev2); border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.re-toolbar button { background: transparent; border: 1px solid transparent; color: var(--text-dim); width: 30px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.re-toolbar button:hover { background: var(--bg-elev); color: var(--text); border-color: var(--border); }
.re-toolbar button[data-cmd=clear] { width: auto; padding: 0 8px; font-size: 11.5px; }
.re-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.re-raw-toggle { margin-left: auto; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.re-raw-toggle input { width: auto; }
.re-surface { min-height: 110px; max-height: 320px; overflow: auto; padding: 11px 13px; color: var(--text); font-size: 14px; line-height: 1.5; outline: none; }
.re-surface:empty::before { content: attr(data-ph); color: var(--muted); }
.re-surface a { color: var(--accent); }
.re-surface code { background: var(--bg-elev2); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 12.5px; }
.re-surface .tg-spoiler, .tg-spoiler { background: var(--border); color: var(--border); border-radius: 4px; transition: .15s; }
.re-surface .tg-spoiler:hover { color: var(--text); }
.re-raw-area { width: 100%; min-height: 130px; border: none; border-radius: 0; background: var(--bg); color: var(--text-dim); font-family: var(--mono); font-size: 12.5px; padding: 11px 13px; }

/* ── inline button builder ───────────────────────────── */
.btn-builder { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--bg); }
.bb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; margin-bottom: 8px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.bb-cell { display: flex; gap: 6px; align-items: center; flex: 1 1 260px; }
.bb-cell .bb-text { flex: 0 0 38%; }
.bb-cell .bb-url { flex: 1; }
.bb-cell input { padding: 7px 9px; font-size: 13px; }
.bb-x { background: transparent; border: 1px solid var(--border); color: var(--red); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; flex: 0 0 auto; }
.bb-x:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.bb-add-btn { flex: 0 0 auto; }
.bb-add-row { width: 100%; justify-content: center; border-style: dashed; }

/* ── weekday picker ──────────────────────────────────── */
.weekday-row { display: flex; gap: 6px; flex-wrap: wrap; }
.weekday { flex: 1; min-width: 52px; text-align: center; padding: 9px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--text-dim); user-select: none; text-transform: uppercase; }
.weekday.on { background: var(--accent); border-color: var(--accent-2); color: #fff; }

/* ── nav section divider ─────────────────────────────── */
.nav-section { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 12px 5px; }

/* ── avatars ─────────────────────────────────────────── */
.avatar { border-radius: 50%; object-fit: cover; vertical-align: middle; display: inline-block; }
.avatar-fallback { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.avatar-lg { display: inline-flex; }
.user-box .avatar { width: 26px; height: 26px; }

/* ── social platform badge ───────────────────────────── */
.plat-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; vertical-align: middle; flex: 0 0 auto; }
.acct-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; background: var(--bg-elev2); border: 1px solid var(--border); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }

/* ── weekly report board ─────────────────────────────── */
.board-toolbar { align-items: center; }
.board-range { color: var(--text-dim); font-weight: 600; font-size: 13px; }
.week-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding-bottom: 4px; }
@media (max-width: 900px) { .week-board { grid-template-columns: repeat(7, minmax(140px, 1fr)); overflow-x: auto; } }
.day-col { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 220px; }
.day-col.today { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.day-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); font-weight: 700; font-size: 12.5px; }
.day-head .day-date { color: var(--muted); font-weight: 600; }
.day-body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.day-add { justify-content: center; margin: 0 8px 10px; opacity: .8; }
.day-add:hover { opacity: 1; }
.entry-card { background: var(--bg-elev2); border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; padding: 8px 9px; cursor: pointer; transition: .12s; }
.entry-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.entry-card.pri-high { border-left-color: var(--red); }
.entry-card.pri-normal { border-left-color: var(--accent); }
.entry-card.pri-low { border-left-color: var(--muted); }
.entry-top { display: flex; align-items: center; gap: 6px; }
.pri-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex: 0 0 auto; }
.pri-dot.red { background: var(--red); } .pri-dot.blue { background: var(--accent); } .pri-dot.gray { background: var(--muted); }
.entry-note { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.entry-bottom { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.entry-link { color: var(--accent); display: inline-flex; } .entry-link .icon { width: 14px; height: 14px; }
.entry-author { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }

/* off-day */
.day-head { position: relative; }
.day-off-btn { margin-left: 8px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; cursor: pointer; }
.day-off-btn:hover { border-color: var(--amber); color: var(--amber); }
.day-off-btn.on { background: var(--amber); border-color: var(--amber); color: #1a1205; }
.day-col.is-off { background: repeating-linear-gradient(45deg, var(--bg-elev), var(--bg-elev) 10px, var(--bg-elev2) 10px, var(--bg-elev2) 20px); }
.off-banner { text-align: center; font-weight: 800; letter-spacing: .08em; color: var(--amber); border: 1px dashed var(--amber); border-radius: 8px; padding: 10px 6px; margin-bottom: 8px; }

/* önemli gün / hafta marker (i) + hover tooltip */
.day-head .day-date { display: inline-flex; align-items: center; gap: 5px; }
.special-day { position: relative; display: inline-flex; align-items: center; color: var(--accent); cursor: help; outline: none; }
.special-day.is-week { color: var(--purple); }
.special-day.match-day { color: var(--green); } /* ⚽ upcoming Turkey matches marker */
.special-day .icon { width: 14px; height: 14px; }
.special-day:hover, .special-day:focus { filter: brightness(1.25); }
.special-tip {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  min-width: 180px; max-width: 300px; width: max-content;
  background: var(--bg-elev2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 8px 10px; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s, transform .14s; pointer-events: none;
}
/* show the FULL list on hover/focus (no inner scroll — reading only) */
.special-day:hover .special-tip, .special-day:focus .special-tip,
.special-day:focus-within .special-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.day-col { position: relative; z-index: 0; }
/* lift the hovered/focused column just above its neighbours so its özel-gün
   tooltip shows over the sibling cards — but LOW enough that the body-level
   match popup (z-index 48) still floats above every card. */
.day-col:hover, .day-col:focus-within { z-index: 5; }

/* ⚽ MATCH popup — click the marker to toggle. Rendered on <body> (app.js), so it
   is never clipped by the board and always positioned under its icon. z-index is
   below the modal overlay (50) so it can never sit on top of a dialog. */
.match-day { cursor: pointer; }
.match-pop { position: fixed; z-index: 48; display: none; min-width: 200px; max-width: 340px;
  background: var(--bg-elev2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 8px 10px; }
.match-pop.open { display: block; }
.match-pop .mt-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 5px; }
.match-pop .mt-group { display: block; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--muted);
  margin: 7px 0 2px; padding-top: 5px; border-top: 1px solid var(--border-soft); }
.match-pop .mt-group:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.match-pop .mt-item { display: block; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; padding: 1px 0; }
.match-pop .mt-when { color: var(--text-dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.special-tip::before {
  content: ''; position: absolute; bottom: 100%; left: 12px;
  border: 6px solid transparent; border-bottom-color: var(--border);
}
.special-tip-head { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
.special-tip-item { display: block; font-size: 12px; font-weight: 600; color: var(--text);
  line-height: 1.4; padding: 2px 0; }
.special-tip-item + .special-tip-item { border-top: 1px solid var(--border-soft); }
.day-col.has-special { box-shadow: inset 3px 0 0 var(--purple); }
.day-col.has-special.today { box-shadow: inset 3px 0 0 var(--purple), inset 0 2px 0 var(--accent); }
/* right-most columns: flip the tooltip so it stays inside the scroll area */
.day-col:nth-last-child(-n+2) .special-tip { left: auto; right: 0; }
.day-col:nth-last-child(-n+2) .special-tip::before { left: auto; right: 12px; }

/* grouped entries: account (parent) -> platform (child) -> items */
.acct-group { margin-bottom: 10px; }
.acct-group-head { margin-bottom: 6px; }
.acct-group-head .acct-badge { background: var(--accent); border-color: var(--accent-2); color: #fff; }
.plat-group { border-left: 2px solid var(--border); margin: 0 0 8px 4px; padding-left: 8px; }
.plat-group-head { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.plat-name { } .plat-count { margin-left: auto; background: var(--bg-elev2); border: 1px solid var(--border); border-radius: 10px; padding: 0 7px; font-size: 10.5px; }
.entry-item { display: flex; align-items: center; gap: 7px; background: var(--bg-elev2); border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; margin-bottom: 5px; cursor: pointer; transition: .12s; }
.entry-item:hover { border-color: var(--accent); }
.entry-item .pri-dot { margin: 0; }
.entry-item-main { flex: 1; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-item .entry-link { color: var(--accent); display: inline-flex; }
.entry-item .entry-link .icon { width: 13px; height: 13px; }

/* ── team grid ───────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.team-card { padding: 20px; text-align: center; cursor: pointer; transition: .12s; }
.team-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.team-name { font-weight: 700; margin: 10px 0 6px; }

/* ── custom emoji ────────────────────────────────────── */
.ce-emoji { width: 20px; height: 20px; vertical-align: -4px; object-fit: contain; margin: 0 1px; }
.ce-emoji.ce-fallback { display: inline-block; width: auto; height: auto; border-bottom: 1.5px dotted var(--accent); }
.re-convert-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-soft)); padding: 8px 10px; font-size: 12.5px; color: var(--text); }
.re-convert-bar select { width: auto; min-width: 120px; padding: 5px 8px; font-size: 12.5px; }
.re-convert-bar .re-convert-x { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.re-convert-warn { color: var(--amber); font-size: 11.5px; }
.re-emoji-panel { max-height: 230px; overflow: auto; background: var(--bg-elev2); border-bottom: 1px solid var(--border-soft); padding: 8px 10px; }
.re-emoji-loading { color: var(--muted); font-size: 12.5px; padding: 8px; }
.re-emoji-pack { margin-bottom: 10px; }
.re-emoji-title { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; margin: 4px 0 6px; }
.re-emoji-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; position: sticky; top: 0; }
.re-emoji-tab { background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 11.5px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-emoji-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.re-emoji-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.re-emoji-opt { width: 30px; height: 30px; object-fit: contain; padding: 4px; border-radius: 6px; cursor: pointer; background: var(--bg); border: 1px solid transparent; }
.re-emoji-opt:hover { border-color: var(--accent); background: var(--bg-elev); }
.emoji-pack-card { display: flex; align-items: center; gap: 12px; }
.emoji-pack-thumbs { display: flex; gap: 3px; }
.emoji-pack-thumbs img { width: 24px; height: 24px; object-fit: contain; }

/* preset apply bar in editor */
.preset-bar { display: flex; gap: 8px; align-items: center; background: var(--bg-elev2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 16px; flex-wrap: wrap; }
.preset-bar select { max-width: 240px; }
.preset-bar .spacer { flex: 1; }

/* send-to-preview-first: choice modal */
.send-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.send-choice { text-align: left; background: var(--bg-elev2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: .12s; }
.send-choice:hover { border-color: var(--accent); transform: translateY(-1px); }
.send-choice-title { font-weight: 700; font-size: 13.5px; color: var(--text); margin-bottom: 3px; }
.send-choice-desc { line-height: 1.4; }

/* publish-choice modal (now / delay / at time) */
.send-choice.as-block { cursor: default; }
.send-choice.as-block:hover { transform: none; border-color: var(--border); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.pp-row input, .pp-row select { background: var(--bg); border: 1px solid var(--border); color: var(--text); font: inherit; padding: 6px 9px; border-radius: var(--radius-sm); }

/* ── theme toggle (top bar) ──────────────────────────── */
.topbar-right { display: flex; align-items: center; gap: 8px; }
.theme-toggle { padding: 7px 9px; }
.theme-toggle .icon { width: 18px; height: 18px; }
.theme-toggle:hover { color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   Set <html data-theme="light"> to activate (app.js manages this + persistence,
   defaulting to the OS prefers-color-scheme when the user hasn't chosen).
   Every panel section is variable-driven, so overriding the tokens themes the
   whole shell; the handful of rules below re-tint the few hard-coded accents
   (badges, spoilers, ticker, off-day stripes) so light mode reads cleanly
   instead of looking like an inversion. Selector uses :root[data-theme=…] so
   the token overrides always beat :root regardless of source order.
   NOTE: the vault tab (accounts.js, owned by another worker) consumes these same
   tokens (--bg, --bg-elev, --bg-elev2, --border, --border-soft, --text,
   --text-dim, --muted, --accent, --accent-2, --green/red/amber/purple, --shadow,
   plus --row-hover, --bar-bg, --overlay, --badge-ring), so it themes with us.
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --bg: #eef1f6;
  --bg-elev: #ffffff;
  --bg-elev2: #e6ebf2;
  --border: #cfd7e3;
  --border-soft: #e3e8ef;
  --text: #16202e;
  --text-dim: #4b5768;
  --muted: #707b8a;
  --accent: #1f7fd6;
  --accent-2: #1566b6;
  --green: #1f9d52;
  --red: #d23b30;
  --amber: #a9790f;
  --purple: #7b4fd0;
  --shadow: 0 10px 30px rgba(23,38,64,.12);
  --bg-grad: #dde8f6;
  --row-hover: #eef2f8;
  --bar-bg: rgba(255,255,255,.9);
  --overlay: rgba(22,32,46,.42);
  --badge-ring: rgba(0,0,0,.06);
}
:root[data-theme="light"] body { -webkit-font-smoothing: auto; }
/* base accent rules are color-mix-derived and theme-proof — no re-tints needed */

/* ════════════════════════════════════════════════════════════════════════════
   LISTS-UI — per-account/-platform color + icon (app.js). Shown on the
   raporlarım board, entry-editor dropdowns, and the Listeler manager. Per-item
   color is an override; everything else stays on the theme vars (light/dark ok).
   ════════════════════════════════════════════════════════════════════════════ */
.li-icon { border-radius: 5px; object-fit: cover; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--badge-ring); vertical-align: middle; }
.li-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--badge-ring); vertical-align: middle; }
.li-cell { display: inline-flex; align-items: center; gap: 7px; }
.acct-group-head .acct-badge .li-icon { width: 14px; height: 14px; margin-right: 5px; }
.plat-group-head .li-dot { margin-right: 2px; }
.li-sel-prev { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }

/* color picker + icon uploader (mirrors the vault's UX, theme-aware) */
.lp-color { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.lp-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px var(--badge-ring); transition: transform .1s, border-color .12s; }
.lp-swatch:hover { transform: scale(1.12); }
.lp-swatch.active { border-color: var(--text); }
.lp-none { position: relative; background: var(--bg-elev2); }
.lp-none::after { content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 2px; background: var(--red); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.lp-custom { position: relative; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--border); color: var(--text-dim); font-weight: 800; }
.lp-custom input[type=color] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; padding: 0; opacity: 0; cursor: pointer; }
.lp-iconup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-iconup-prev { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; }
.lp-iconup-prev .li-icon { width: 40px; height: 40px; border-radius: 8px; }

/* ════════════════════════════════════════════════════════════════════════════
   CUSTOM THEME PRESETS  (app.js: palette button next to the light/dark toggle)
   Each [data-preset] is a complete, coherent palette overriding the SAME tokens
   the light/dark system uses, so the whole panel (all views + Aktivite/Güvenlik/
   vault/Ekip Planı) re-themes. Placed AFTER the light-theme block so the token
   overrides win at equal specificity regardless of data-theme. app.js sets a
   matching data-theme (light for "Gün Batımı", dark for the rest) so the few
   hard-coded badge/spoiler/ticker re-tints read correctly.
   ════════════════════════════════════════════════════════════════════════════ */
/* Okyanus — teal, dark */
:root[data-preset="ocean"] {
  --bg: #0b1618; --bg-elev: #0f2023; --bg-elev2: #142b2f; --border: #244347; --border-soft: #193033;
  --text: #e3f2f1; --text-dim: #95b6b4; --muted: #6a8a89;
  --accent: #2bb3b0; --accent-2: #148f8c; --green: #3fb950; --red: #f8625a; --amber: #e0a93a; --purple: #9a86e6;
  --shadow: 0 8px 30px rgba(0,0,0,.42); --bg-grad: #103237; --row-hover: #142b2f;
  --bar-bg: rgba(11,22,24,.86); --overlay: rgba(2,11,12,.66); --badge-ring: rgba(255,255,255,.06);
}
/* Orman — green, dark */
:root[data-preset="forest"] {
  --bg: #0c130e; --bg-elev: #131f17; --bg-elev2: #1a2a1f; --border: #2a3d30; --border-soft: #203026;
  --text: #e6f1e8; --text-dim: #9db6a5; --muted: #6e8777;
  --accent: #41c46a; --accent-2: #2c9b4f; --green: #46cf72; --red: #f0635a; --amber: #d6a32f; --purple: #9a86e6;
  --shadow: 0 8px 30px rgba(0,0,0,.42); --bg-grad: #163322; --row-hover: #1a2a1f;
  --bar-bg: rgba(12,19,14,.86); --overlay: rgba(3,10,5,.66); --badge-ring: rgba(255,255,255,.06);
}
/* Gün Batımı — warm, light */
:root[data-preset="sunset"] {
  --bg: #fbf3ea; --bg-elev: #fffaf3; --bg-elev2: #f5e7d6; --border: #e6d3bd; --border-soft: #efe2d1;
  --text: #3a2415; --text-dim: #6f5640; --muted: #927a63;
  --accent: #e8722e; --accent-2: #c85a1c; --green: #2f9d52; --red: #d23b30; --amber: #b3760f; --purple: #8a5cd0;
  --shadow: 0 10px 30px rgba(80,50,20,.14); --bg-grad: #f7e4cf; --row-hover: #f7ede0;
  --bar-bg: rgba(255,250,243,.9); --overlay: rgba(60,36,21,.42); --badge-ring: rgba(0,0,0,.06);
}
/* Mor — purple, dark */
:root[data-preset="purple"] {
  --bg: #120f1c; --bg-elev: #1a1528; --bg-elev2: #221a33; --border: #352a4d; --border-soft: #281f3b;
  --text: #ece6f6; --text-dim: #b0a4c8; --muted: #7f7396;
  --accent: #a371f7; --accent-2: #7d4fe0; --green: #3fb950; --red: #f8625a; --amber: #d8a93a; --purple: #c9a7ff;
  --shadow: 0 8px 30px rgba(0,0,0,.45); --bg-grad: #241a3a; --row-hover: #221a33;
  --bar-bg: rgba(18,15,28,.86); --overlay: rgba(8,5,16,.66); --badge-ring: rgba(255,255,255,.06);
}
/* Gece — deep near-black, cool blue */
:root[data-preset="midnight"] {
  --bg: #060a10; --bg-elev: #0c121c; --bg-elev2: #121a26; --border: #1f2a3a; --border-soft: #16202d;
  --text: #dbe6f2; --text-dim: #8a99ac; --muted: #5d6b7d;
  --accent: #4f8cff; --accent-2: #2f6fe0; --green: #3fb950; --red: #f8625a; --amber: #d29922; --purple: #8f9bf0;
  --shadow: 0 8px 34px rgba(0,0,0,.55); --bg-grad: #0c1830; --row-hover: #121a26;
  --bar-bg: rgba(6,10,16,.9); --overlay: rgba(0,2,6,.72); --badge-ring: rgba(255,255,255,.05);
}

/* preset picker popover (anchored to .topbar-right) */
.topbar-right { position: relative; }
.theme-presets-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 216px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
.theme-presets-pop .tpp-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 6px 8px 8px; }
.tpp-item { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; cursor: pointer;
  color: var(--text); padding: 8px; border-radius: var(--radius-sm); font: inherit; font-size: 13px; font-weight: 600; text-align: left; transition: background .12s; }
.tpp-item:hover { background: var(--row-hover); }
.tpp-item.active { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.tpp-sw { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tpp-dot { width: 9px; height: 9px; border-radius: 50%; }
.tpp-name { flex: 1; white-space: nowrap; }
.tpp-check { color: var(--accent); font-weight: 800; width: 12px; }

/* ── Genel Raporlar (shared per-account notes tab inside Raporlarım) ───────── */
.report-tabs { margin-bottom: 4px; align-items: center; gap: 12px; }
.report-tabs .seg button { padding: 8px 18px; }
.gnotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.gnote-acct .panel-head .acct-badge { background: var(--accent); border-color: var(--accent-2); color: #fff; }
.gnote-acct .panel-head .acct-badge .li-icon { width: 14px; height: 14px; margin-right: 5px; }
/* account panel → platform sub-group (all users' notes on that account+platform together) → note cards */
.gnote-plats { padding: 8px 10px; display: flex; flex-direction: column; gap: 12px; }
.gnote-plat-group { display: flex; flex-direction: column; }
.gnote-plat-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); font-weight: 700; padding: 2px 2px 6px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; }
.gnote-plat-head .li-icon { width: 16px; height: 16px; }
.gnote-list { display: flex; flex-direction: column; gap: 8px; }
.gnote { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 11px; }
.gnote.can-edit { cursor: pointer; }
.gnote.can-edit:hover { border-color: var(--accent); }
.gnote:not(.can-edit) { cursor: default; }
.gnote-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.gnote-author { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-weight: 600; }
.gnote-text { white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.45; }

/* ════════════════════════════════════════════════════════════════════════════
   UI POLISH PASS (2026-07-07) — additive, token-driven. No feature/behavior
   changes: adds keyboard-focus rings, scrollbar styling, spacing/type/elevation
   tokens, button sizing, reduced-motion + print support. Everything reads the
   existing theme vars so it themes for dark/light automatically.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --shadow-md: 0 8px 24px rgba(0,0,0,.30);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.42);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="light"] { color-scheme: light; }

/* ── keyboard focus — one ruleset themes the whole app (all reads --accent) ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .nav-item:focus-visible, .seg button:focus-visible, .chip:focus-visible,
.lang-toggle button:focus-visible, .modal-close:focus-visible, .theme-toggle:focus-visible,
[data-rtab]:focus-visible, .vault-section-head:focus-visible, .vault-ctl-btn:focus-visible {
  outline-color: transparent; box-shadow: var(--ring); border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
:focus:not(:focus-visible) { outline: none; } /* no double-draw for mouse users */

/* ── styled scrollbars (themes via tokens, dark + light) ───────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; }

/* ── button polish: stable heights + disabled/busy + smoother transitions ──── */
.btn { min-height: 36px; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease, box-shadow .15s ease; }
.btn-sm { min-height: 30px; }
.btn-icon { min-height: 36px; justify-content: center; }
.btn:disabled, .btn[aria-disabled="true"], .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; transform: none; filter: none; }

/* ── depth: subtle inset top-highlight on cards; real shadow only when floating ── */
.stat-card, .panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.stat-card { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.stat-card:hover { border-color: var(--border); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.03); }
.modal { box-shadow: var(--shadow-lg); }
.toast { box-shadow: var(--shadow-md); }

/* ── numeric/date alignment ────────────────────────────────────────────────── */
.stat-card .value, .pill, .lang-tag, .mono, .num, time, .board-range, .day-date { font-variant-numeric: tabular-nums; }

/* ── sidebar nav: truncate long Turkish labels instead of wrapping/clipping ── */
.nav-item { min-width: 0; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── light theme: the white inset highlight is invisible — lean on border ──── */
:root[data-theme="light"] .stat-card, :root[data-theme="light"] .panel { box-shadow: none; }
:root[data-theme="light"] .stat-card:hover { box-shadow: var(--shadow-sm); }

/* ── respect reduced-motion: kill the infinite ticker + one-shot transitions ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ticker-track { animation: none !important; }
}

/* ── print: a report board should print on white, not as a black rectangle ── */
@media print {
  .sidebar, .topbar-actions, .ticker-bar, .toolbar, .board-toolbar, .vault-bar, .theme-toggle, .lang-toggle, .report-tabs { display: none !important; }
  :root { color-scheme: light; }
  body { background: #fff !important; color: #000 !important; }
  .app { display: block !important; }
  .panel, .vault-section, .week-board, .gnote-acct, .day-col { break-inside: avoid; border-color: #ccc !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE NAV DRAWER + DASHBOARD QUICK CARDS + PING FEED + NOTE LIKES (2026-07-07)
   ════════════════════════════════════════════════════════════════════════════ */
/* hamburger — hidden on desktop */
.nav-toggle { display: none; background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 6px 9px; cursor: pointer; margin-left: auto; }
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* mobile drawer backdrop (created by app.js) — hidden until the drawer opens */
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55;
  opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.nav-backdrop.show { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  /* Let the whole document scroll with the finger instead of trapping it in the
     nested `.view` box (that nested overflow kills touch-scroll momentum). */
  html, body { height: auto; }
  .app { height: auto; min-height: 100vh; grid-template-rows: auto; }
  .nav { overflow-y: visible; }
  .view { overflow: visible; flex: none; min-height: 0; }

  /* Collapsed: the sidebar is a slim sticky top bar (brand + hamburger only).
     The whole page scrolls with the finger normally in this state. */
  .sidebar { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 14px;
    position: sticky; top: 0; z-index: 40; border-right: none; border-bottom: 1px solid var(--border); }
  .brand { padding: 0; flex: 1; display: flex; align-items: center; }
  .nav-toggle { display: inline-flex; }
  .nav, .sidebar-footer { display: none; }
  .nav-backdrop { display: block; }

  /* Open: the sidebar becomes a real off-canvas drawer sliding in from the left,
     full height and independently scrollable; the backdrop covers the content. */
  .sidebar.nav-open { position: fixed; top: 0; left: 0; bottom: 0; width: min(82vw, 320px);
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 14px 14px;
    z-index: 60; border-right: 1px solid var(--border); border-bottom: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .sidebar.nav-open .brand { flex: 0 0 auto; padding: 0 4px 12px; }
  .sidebar.nav-open .nav { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; gap: 4px; }
  .sidebar.nav-open .sidebar-footer { display: block; padding-top: 12px; }

  /* lock the page behind the open drawer so touch scroll stays inside it */
  body.nav-lock { overflow: hidden; }
}

/* dashboard quick-access cards */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 18px; }
.quick-card { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 14px 16px; color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03); transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease; text-align: left; }
.quick-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.quick-card .icon { width: 19px; height: 19px; color: var(--accent); flex: 0 0 auto; }
:root[data-theme="light"] .quick-card { box-shadow: none; }

/* dashboard ping feed */
.ping-feed { display: flex; flex-direction: column; }
.ping-item { padding: 10px 16px; border-bottom: 1px solid var(--border-soft); }
.ping-item:last-child { border-bottom: none; }
.ping-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 3px; }
.ping-msg { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.table-compact td { padding: 8px 16px; font-size: 13px; }

/* +1 / like chip on shared notes */
.gnote-like { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 14px; padding: 2px 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: color .13s, border-color .13s, background .13s, transform .08s; }
.gnote-like .icon { width: 14px; height: 14px; }
.gnote-like:hover { color: var(--accent); border-color: var(--accent); }
.gnote-like:active { transform: translateY(1px); }
.gnote-like.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ── "Şu An Vardiyada" dashboard strip (replaces stat cards + presence dock) ── */
.shift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; padding: 10px 14px; }
.shift-card { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 6px 9px; min-width: 0; opacity: .62; transition: opacity .15s, border-color .15s; }
.shift-card.is-online { opacity: 1; border-color: color-mix(in srgb, var(--green) 45%, var(--border-soft)); }
.shift-av { position: relative; flex: 0 0 auto; line-height: 0; }
.shift-av img, .shift-av .avatar-fallback { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.shift-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); border: 2px solid var(--bg-elev); }
.shift-dot.on { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.shift-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shift-name { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-info .badge { align-self: flex-start; font-size: 10.5px; padding: 1px 7px; }
.dash-statline { margin-top: 12px; padding: 0 2px; }
.dash-statline b { color: var(--text); font-variant-numeric: tabular-nums; }
.dash-statline .stat-ok { color: var(--green); }
.dash-statline .stat-bad { color: var(--red); }

/* ── collapsible nav sections (header = fold/unfold toggle) ────────────────── */
.nav-sec-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: transparent; border: none; cursor: pointer; font: inherit;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 14px 12px 5px; border-radius: var(--radius-sm); }
.nav-sec-toggle:hover { color: var(--text-dim); }
.nav-sec-chev { font-size: 10px; opacity: .8; }
.nav-item.nav-folded { display: none; }

/* ── Sahte Hesap Takibi — advanced finder ─────────────────────────────────── */
.cl-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 18px 0 8px; }
.cl-engines { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cl-engine { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); text-decoration: none; transition: border-color .15s, transform .1s; }
.cl-engine:hover { border-color: var(--accent); transform: translateY(-1px); }
.cl-engine-t { font-weight: 700; font-size: 13px; color: var(--accent); }
.cl-engine-d { font-size: 12px; color: var(--text-dim); }
.cl-variants { max-height: 320px; overflow: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.cl-vtable { font-size: 13px; }
.cl-vtable th { position: sticky; top: 0; background: var(--bg-elev); z-index: 1; }
.cl-vtable td, .cl-vtable th { padding: 7px 12px; }
.cl-vtable td a { font-size: 12px; }

/* ── ping acknowledgements (dashboard) ────────────────────────────────────── */
.ping-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ping-ok { padding: 3px 10px; }
.ping-acked { color: var(--green); font-size: 12px; font-weight: 600; }
.ping-ackwho { cursor: default; }

/* ── team performance / leaderboard ───────────────────────────────────────── */
.perf-list { display: flex; flex-direction: column; }
.perf-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); }
.perf-row:last-child { border-bottom: none; }
.perf-row.is-me { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.perf-row.perf-zero { opacity: .55; }
.perf-medal { width: 26px; text-align: center; font-size: 17px; flex: 0 0 auto; }
.perf-rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elev2); border: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--text-dim); }
.perf-av { flex: 0 0 auto; line-height: 0; }
.perf-av img, .perf-av .avatar-fallback { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.perf-name { flex: 0 0 150px; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-bar-wrap { flex: 1; height: 8px; background: var(--bg); border-radius: 6px; overflow: hidden; min-width: 40px; }
.perf-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 6px; }
.perf-count { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.perf-days { flex: 0 0 auto; min-width: 90px; text-align: right; }
@media (max-width: 720px) { .perf-name { flex-basis: 90px; } .perf-days { display: none; } }

/* @mention highlight in notes/reports */
.mention { color: var(--accent); font-weight: 700; }

/* per-platform quick-add "+" in the weekly report board */
.plat-group-head .plat-add { margin-left: auto; flex: 0 0 auto; width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--bg-elev2); color: var(--text-dim); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .13s, color .13s, border-color .13s; }
.plat-group-head .plat-add .icon { width: 13px; height: 13px; }
.acct-group:hover .plat-add, .plat-add:focus-visible { opacity: 1; }
.plat-group-head .plat-add:hover { color: var(--accent); border-color: var(--accent); }
/* when a platform has a count badge, keep the + after it */
.plat-group-head .plat-count { margin-left: auto; }
.plat-group-head .plat-count + .plat-add { margin-left: 6px; }

/* 🎂 birthday celebration banner (dashboard) */
.bday-panel { border-color: color-mix(in srgb, var(--purple,#a371f7) 45%, var(--border-soft)); background: color-mix(in srgb, var(--purple,#a371f7) 10%, var(--bg-elev)); }
.bday-body { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; }
.bday-cake { flex: 0 0 auto; display: inline-flex; color: var(--purple,#a371f7); }
.bday-cake .icon { width: 34px; height: 34px; }
.bday-text { flex: 1; min-width: 160px; }
.bday-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bday-gift { display: inline-flex; color: var(--purple,#a371f7); }
.bday-gift .icon { width: 18px; height: 18px; }
.bday-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bday-wish { border-color: var(--purple,#a371f7); color: var(--purple,#a371f7); }
.bday-wish .icon { width: 15px; height: 15px; }
.bday-wish:hover { background: color-mix(in srgb, var(--purple,#a371f7) 16%, transparent); border-color: var(--purple,#a371f7); }
.bday-wish:disabled { opacity: .5; }