/* MiexedOS design tokens — Corporate Trust register: premium, calm, confident. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Lexend:wght@400;500;600;700&display=swap');

:root {
  /* Brand */
  --brand: #0d9488;         /* teal */
  --brand-dark: #0a6f66;
  --brand-soft: #e6f6f4;
  --brand-ink: #064e46;
  --accent: #f97316;        /* sharp amber-orange accent for attention items */
  --accent-soft: #fff2e6;

  /* Status */
  --ok: #16a34a;
  --ok-soft: #eafbf0;
  --info: #2563eb;
  --info-soft: #eaf1ff;
  --warn: #d97706;
  --warn-soft: #fff6e8;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --muted-status: #6b7280;
  --muted-status-soft: #f1f2f4;

  /* Surface */
  --bg: #f7f8f9;
  --bg-tint: #eef1f2;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --sidebar-bg: #0e1013;
  --sidebar-bg-hover: #1a1d21;
  --sidebar-text: #cbd3d6;
  --sidebar-text-dim: #767d82;
  --border: #e6e8eb;
  --border-soft: #f0f1f3;

  /* Text */
  --text: #14181a;
  --text-dim: #565f66;
  --text-faint: #8a9298;

  /* Type */
  --display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Radii */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(11,43,40,.05), 0 1px 8px rgba(11,43,40,.04);
  --shadow-pop: 0 12px 32px rgba(11,43,40,.16);

  /* Layout */
  --sidebar-w: 248px;

  /* Miexed Media brand kit */
  --mx-navy: #011627;
  --mx-navy-soft: #0b2b3a;
  --mx-teal: #0e9594;
  --mx-red: #f21b3f;
  --mx-pink: #ffd9da;
  --mx-ice: #eff7ff;
}

/* Accessibility: easy-read font (Lexend) toggle, independent of light/dark. */
html[data-font="easy-read"] {
  --display: 'Lexend', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Lexend', ui-sans-serif, system-ui, sans-serif;
}
html[data-font="easy-read"] body { letter-spacing: .01em; line-height: 1.7; }
html[data-font="easy-read"] h1, html[data-font="easy-read"] h2,
html[data-font="easy-read"] h3, html[data-font="easy-read"] .font-display { letter-spacing: normal; }

/* Accessibility: larger text-size toggle, independent of the above. Uses zoom
   rather than rem-scaling since most of the app's type scale is set in fixed
   px utility classes that rem-scaling wouldn't reach. */
html[data-size="large"] { zoom: 1.15; }

/* Topbar accessibility toggle group (font + size), styled like mx-toggle but
   with a text label instead of icons since these are opt-in, less obvious
   affordances. */
.mx-a11y-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
}
.mx-a11y-toggle button {
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px; height: 30px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text-faint);
  transition: background .15s ease, color .15s ease; white-space: nowrap;
}
.mx-a11y-toggle button.active { background: var(--mx-teal); color: #fff; }

[data-theme="dark"] {
  --bg: #0b0c0e;
  --bg-tint: #17181b;
  --surface: #1a1b1f;
  --surface-raised: #202226;
  --border: #2a2c30;
  --border-soft: #232427;
  --text: #f2f3f4;
  --text-dim: #a3a7ab;
  --text-faint: #6e7276;
  --brand-soft: #163531;
  --info-soft: #16202f;
  --ok-soft: #142a1f;
  --warn-soft: #2c2213;
  --danger-soft: #2c1417;
}

* { box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display { font-family: var(--display); letter-spacing: -0.01em; }

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

.app-sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
}

.app-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
}

.sidebar-logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  padding: 22px 22px 18px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-nav { padding: 4px 12px; display: flex; flex-direction: column; gap: 2px; }

.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.sidebar-link:hover { background: var(--sidebar-bg-hover); color: #fff; }
.sidebar-link.active { background: var(--brand); color: #fff; }
.sidebar-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .9; }

/* Collapsible nav group (e.g. "Staff" bundling Directory/Payouts/Splits/My Payout) */
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary { list-style: none; }
.sidebar-group summary::after {
  content: ''; width: 6px; height: 6px; margin-left: auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  opacity: .6; transform: rotate(45deg); transition: transform .15s ease;
}
.sidebar-group[open] summary::after { transform: rotate(-135deg); }
.sidebar-subnav { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 14px; }
.sidebar-sublink { padding: 7px 12px; font-size: 13.5px; opacity: .92; }

.sidebar-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--sidebar-text-dim); padding: 16px 14px 6px;
}

/* Topbar */
.app-topbar {
  min-height: 64px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 28px;
  position: sticky; top: 0; z-index: 10;
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.stat-card { padding: 20px 22px; }
.stat-label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-family: var(--display); font-size: 28px; font-weight: 700; margin-top: 6px; }

/* Premium dashboard header + theme toggle */
.mx-hero {
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.mx-hero::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--mx-teal) 0%, transparent 70%);
  opacity: .18;
  pointer-events: none;
}
[data-theme="dark"] .mx-hero::before { opacity: .28; }

.mx-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px; border-radius: 999px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
}
.mx-toggle button {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  color: var(--text-faint);
  transition: background .15s ease, color .15s ease;
}
.mx-toggle button.active { background: var(--mx-teal); color: #fff; }
.mx-toggle svg { width: 15px; height: 15px; }

/* Goal ring (small, used inline in stat rows) */
.mx-ring-card {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px;
}
.mx-ring-value { font-family: var(--display); font-size: 24px; font-weight: 700; }
.mx-ring-label { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* Feature goal ring (hero-height, mirrors the "Marketing Goal" reference card) */
.mx-goal-feature {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.mx-goal-feature::before {
  content: "";
  position: absolute; bottom: -70px; left: -70px;
  width: 200px; height: 200px; border-radius: 999px;
  background: radial-gradient(circle, var(--mx-teal) 0%, transparent 70%);
  opacity: .12;
}
[data-theme="dark"] .mx-goal-feature::before { opacity: .3; }
.mx-goal-feature-title {
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin-bottom: 18px; position: relative;
}
.mx-goal-feature-value {
  font-family: var(--display); font-size: 30px; font-weight: 700; position: relative;
  color: var(--text);
}
.mx-goal-feature-sub {
  font-size: 12.5px; color: var(--text-dim); margin-top: 6px; position: relative;
}
.mx-goal-feature .btn {
  margin-top: 18px; position: relative;
  background: var(--mx-teal); color: #fff; border-color: transparent;
}
.mx-goal-feature svg circle:first-child { stroke: var(--bg-tint); }

/* Premium stat card with icon chip */
.mx-stat {
  padding: 18px 20px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mx-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.mx-stat-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  margin-bottom: 12px;
}
.mx-stat-icon svg { width: 17px; height: 17px; }

/* Badges / status pills */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-muted { background: var(--muted-status-soft); color: var(--muted-status); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; white-space: nowrap; flex-shrink: 0;
  padding: 8px 16px; border-radius: var(--radius-sm);
  transition: all .12s ease; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-tint); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.input, .textarea, .select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--sans);
  background: var(--surface);
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.label { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; display: block; }

/* Lightweight bold/italic toolbar for large freeform text fields (proposal builder) */
.fmt-toolbar { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.fmt-btn { width: 24px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; border: 1px solid var(--border); border-radius: 5px; background: var(--card-bg, #fff); color: var(--text-dim); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.fmt-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-tint); }
.fmt-btn.italic { font-style: italic; }

/* Table */
.table-clean { width: 100%; border-collapse: collapse; }
.table-clean th {
  text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint);
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
/* This hardcoded text-align:left above was silently beating the .text-right
   utility class on header cells everywhere .table-clean is used (same CSS
   specificity, this rule just happens to load first) -- headers stayed
   left-aligned while the numeric cells beneath them were right-aligned,
   so right-aligned number columns never lined up under their own header
   app-wide. This explicit override fixes it for every table, not just one. */
.table-clean th.text-right { text-align: right; }

/* Modal/dialog cards (the "fixed inset-0 ... flex items-center justify-center"
   overlay + inner .card pattern used app-wide) never scrolled internally.
   Normally the card is short enough to fit, but with large-text/easy-read mode
   on, or just a long form on a small screen, content can run taller than the
   viewport -- and since only the page behind the overlay could scroll, fields
   below the fold were completely unreachable. This caps every modal card's
   height and lets it scroll on its own, everywhere, without touching each
   page individually. */
div[class*="fixed inset-0"] > .card {
  max-height: min(88vh, 900px);
  overflow-y: auto;
}
.table-clean td { padding: 13px 14px; border-bottom: 1px solid var(--border-soft); font-size: 14px; overflow-wrap: break-word; word-break: break-word; }
.table-clean td:last-child { white-space: nowrap; width: 1%; }
.table-clean tr:last-child td { border-bottom: none; }
.table-row-link { cursor: pointer; transition: background .1s ease; }
.table-row-link:hover { background: var(--bg-tint); }

/* Context panel */
.context-panel {
  width: 320px; flex-shrink: 0; min-width: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
  padding: 20px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.context-block { margin-bottom: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.context-block:first-child { padding-top: 0; border-top: none; }
.context-block-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin-bottom: 10px;
}

/* Fade-in */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: fadeUp .35s ease both; }

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #d6dadc; border-radius: 999px; }
.app-sidebar::-webkit-scrollbar-thumb { background: #2c2f33; }

.empty-state {
  text-align: center; padding: 56px 24px; color: var(--text-dim);
}
.empty-state svg { width: 40px; height: 40px; margin: 0 auto 14px; opacity: .5; }

/* Social calendar */
.cal-cell {
  min-height: 118px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 6px;
  cursor: pointer;
  transition: background .1s ease;
}
.cal-cell:hover { background: var(--bg-tint); }
.cal-cell-out { background: #fafbfb; }
.cal-cell-out .cal-date { color: var(--text-faint); }
.cal-cell-today { background: var(--brand-soft); }
.cal-cell-over { background: var(--brand-soft); outline: 2px dashed var(--brand); outline-offset: -2px; }
.cal-date { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 4px; }

.cal-post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: grab;
  box-shadow: var(--shadow-card);
  transition: opacity .15s ease, transform .15s ease;
}
.cal-post-card:active { cursor: grabbing; }
.cal-post-dragging { opacity: .35; transform: scale(.96); }
/* Flagged when a post is blocked on the client sending us something -- amber
   tint + left edge so it reads as "action needed" at a glance in a packed
   month view, not just a small emoji you could miss. */
.cal-post-needs-content { background: #fffbeb; border-left: 3px solid #f59e0b; padding-left: 5px; }

.cal-type-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; background: var(--muted-status); }
.type-reel { background: #ec4899; }
.type-story { background: #a855f7; }
.type-static { background: var(--info); }
.type-carousel { background: var(--brand); }
.type-video { background: var(--accent); }
.type-other { background: var(--muted-status); }

/* Kanban board */
.kanban-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.kanban-col {
  padding: 0 18px;
  border-right: 1px solid var(--border);
}
.kanban-col:first-child { padding-left: 2px; }
.kanban-col:last-child { border-right: none; padding-right: 2px; }
.kanban-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-right: 4px; }
.kanban-count {
  font-size: 12px; font-weight: 700; color: var(--text-faint);
  background: var(--bg-tint); border-radius: 999px; min-width: 22px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.kanban-card {
  margin-bottom: 10px;
  cursor: grab;
  transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card-dragging { opacity: .35; transform: scale(.97); }
.kanban-col {
  border-radius: var(--radius);
  transition: background .12s ease;
}
.kanban-col-over { background: var(--brand-soft); }
.kanban-dropline {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
}

/* Fixed-width tag used for activity object-type labels so the left/right
   edges line up regardless of word length. */
.tag-fixed {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; flex-shrink: 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 6px; border-radius: 999px;
  background: var(--muted-status-soft); color: var(--muted-status);
}

/* Scripture card -- now visually consistent with the rest of the app: same
   flat surface, same display/sans fonts, a single teal accent bar instead of
   a multicolor ombre wash. */
.scripture-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.scripture-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--mx-teal);
}
.scripture-card .scripture-quote-mark {
  position: absolute;
  top: 14px; right: 22px;
  font-family: var(--display);
  font-size: 64px;
  line-height: 1;
  color: var(--brand);
  opacity: .08;
  pointer-events: none;
  user-select: none;
}
.scripture-card .scripture-ref {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
}
.scripture-card .scripture-text {
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  margin: 10px 0 16px;
}
.scripture-card .scripture-meta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.scripture-card .scripture-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .02em;
}
.scripture-card .scripture-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand);
  margin-bottom: 4px;
}
.scripture-card .scripture-section-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}