/* ════════════════════════════════════════════════════════════════
   OPS Creative Team — App Styles
   Loads AFTER mosaic-design-system.css.
   Sets OPS brand tokens, fixes layout, bridges Bootstrap classes.
════════════════════════════════════════════════════════════════ */

/* ── 1. Override Mosaic tokens with OPS brand ──────────────────
   Mosaic classes use hsl(var(--primary)). We swap Mosaic blue for
   OPS teal so every primary-coloured component uses our brand.
──────────────────────────────────────────────────────────────── */
:root {
  --primary:             194 86% 43%;   /* OPS teal #0F9FCA */
  --primary-foreground:  0   0%  100%;
  --ring:                194 86% 43%;

  /* OPS semantic aliases — views reference these directly */
  --ops-primary:        hsl(194 86% 43%);
  --ops-primary-dk:     #0e7490;
  --ops-primary-lt:     #e0f9ff;
  --ops-primary-rgb:    15, 159, 202;
  --ops-success:        #10b981;
  --ops-success-lt:     #d1fae5;
  --ops-warning:        #f59e0b;
  --ops-warning-lt:     #fef3c7;
  --ops-danger:         #ef4444;
  --ops-danger-lt:      #fee2e2;
  --ops-info:           #3b82f6;
  --ops-info-lt:        #dbeafe;
  --ops-purple:         #8b5cf6;
  --ops-purple-lt:      #ede9fe;

  /* Bridge OPS surface tokens → Mosaic values */
  --ops-bg:             hsl(var(--background));
  --ops-surface:        hsl(var(--card));
  --ops-surface-2:      hsl(var(--secondary));
  --ops-border:         hsl(var(--border));
  --ops-border-lt:      hsl(var(--muted));
  --ops-text:           hsl(var(--foreground));
  --ops-text-2:         hsl(var(--muted-foreground));
  --ops-text-muted:     hsl(var(--muted-foreground));
  --ops-sidebar-width:  16rem;

  /* Bootstrap compat — OPS teal for Bootstrap primary utilities */
  --bs-primary:          hsl(194 86% 43%);
  --bs-primary-rgb:      15, 159, 202;
  --bs-link-color:       hsl(194 86% 43%);
  --bs-link-hover-color: #0e7490;
  --bs-body-bg:          hsl(var(--background));
  --bs-body-font-family: var(--font-body);
  --bs-border-color:     hsl(var(--border));
}

/* ── 2. Base ─────────────────────────────────────────────────── */
body { font-size: 14px; }
body.ops-app { background: hsl(var(--background)); }

/* ── 3. Sidebar — white, sticky flex (overrides Mosaic fixed) ── */
/* Mosaic uses position:fixed. OPS uses Bootstrap flex — sidebar
   is a flex child. We also force white bg with a hardcoded fallback
   so it works even if mosaic-design-system.css fails to load.      */
.sidebar {
  position: sticky !important;
  top: 0;
  left: unset !important;
  bottom: unset !important;
  z-index: 10 !important;
  height: 100vh;
  width: var(--ops-sidebar-width, 16rem);
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #ffffff;                              /* hard fallback */
  background-color: hsl(var(--sidebar, 0 0% 100%));      /* Mosaic token  */
  border-right: 1px solid #e2e8f0;                       /* hard fallback */
  border-right: 1px solid hsl(var(--sidebar-border, 214 32% 91%));
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

/* Mobile off-canvas sidebar also needs explicit white bg */
.offcanvas#mobileSidebar {
  background-color: #ffffff !important;
  background-color: hsl(var(--sidebar, 0 0% 100%)) !important;
  border-right: 1px solid hsl(var(--sidebar-border, 214 32% 91%));
}

.sidebar-brand {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0f172a;
  color: hsl(var(--foreground, 222 47% 11%));
}

/* Nav items: horizontal margin creates the MosaicDRM floating-pill effect */
.sidebar .nav-item,
.offcanvas#mobileSidebar .nav-item {
  margin: 2px 0.625rem;
}

/* Bootstrap Icons in nav-item (Mosaic expects SVG .nav-icon) */
.nav-item i.bi {
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.125rem;
  text-align: center;
}

/* ── 4. Top header bar ───────────────────────────────────────── */
header.bg-white {
  background-color: hsl(var(--card)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  box-shadow: var(--shadow-sm);
}
/* .page-title in the top bar: keep compact, inherit Mosaic font + weight */
header .page-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
/* .page-subtitle in the content area */
.content-page-subtitle {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

/* ── 5. Bootstrap primary utilities ─────────────────────────── */
.bg-primary     { background-color: hsl(var(--primary)) !important; }
.text-primary   { color:            hsl(var(--primary)) !important; }
.border-primary { border-color:     hsl(var(--primary)) !important; }

/* ── 6. Button bridges ───────────────────────────────────────── */
.btn-primary {
  background-color: hsl(var(--primary));
  border-color:     hsl(var(--primary));
  color:            hsl(var(--primary-foreground));
  box-shadow:       0 1px 3px hsl(var(--primary) / .3);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ops-primary-dk);
  border-color:     var(--ops-primary-dk);
  box-shadow:       0 4px 10px hsl(var(--primary) / .35);
  color:            hsl(var(--primary-foreground));
}

/* Bootstrap outline variants not defined by Mosaic */
.btn-outline-secondary {
  color:            hsl(var(--muted-foreground));
  border-color:     hsl(var(--border));
  background-color: transparent;
}
.btn-outline-secondary:hover {
  background-color: hsl(var(--muted));
  border-color:     hsl(var(--border));
  color:            hsl(var(--foreground));
  box-shadow:       none;
  transform:        none;
}
.btn-outline-primary {
  color:            hsl(var(--primary));
  border-color:     hsl(var(--border));
  background-color: transparent;
}
.btn-outline-primary:hover {
  background-color: hsl(var(--primary));
  border-color:     hsl(var(--primary));
  color:            hsl(var(--primary-foreground));
}
.btn-outline-danger {
  color:            hsl(var(--destructive));
  border-color:     hsl(var(--destructive) / .4);
  background-color: transparent;
}
.btn-outline-danger:hover {
  background-color: hsl(var(--destructive));
  border-color:     hsl(var(--destructive));
  color:            hsl(var(--destructive-foreground));
}
.btn-outline-info {
  color:            var(--ops-primary-dk);
  border-color:     hsl(var(--border));
  background-color: transparent;
}
.btn-outline-info:hover {
  background-color: hsl(var(--primary));
  border-color:     hsl(var(--primary));
  color:            hsl(var(--primary-foreground));
}

.btn-success {
  background-color: var(--ops-success);
  border-color:     var(--ops-success);
  color:            #fff;
  box-shadow:       0 1px 3px rgb(16 185 129 / .3);
}
.btn-success:hover { background-color: #059669; border-color: #059669; color: #fff; }

.btn-danger {
  background-color: hsl(var(--destructive));
  border-color:     hsl(var(--destructive));
  color:            hsl(var(--destructive-foreground));
}

.btn-xs { padding: .2rem .5rem; font-size: .72rem; border-radius: var(--radius-md); min-height: unset; }

/* ── Checklist row controls ──────────────────────────────────── */
/* Suppress mosaic's lift on circle toggles */
.task-item-toggle:hover,
.ot-toggle:hover,
.task-item-toggle-dash:hover,
.checklist-toggle-form .btn:hover,
.btn-icon-ghost:hover,
.checklist-actions .btn:hover {
  box-shadow: none !important;
  transform:  none !important;
}
/* Ghost icon button — named utility; .checklist-actions .btn is the fallback */
.btn-icon-ghost,
.checklist-actions .btn {
  border:        none !important;
  background:    transparent !important;
  color:         hsl(var(--muted-foreground));
  padding:       .4rem;
  line-height:   1;
  box-shadow:    none !important;
  transform:     none !important;
  border-radius: var(--radius-md);
}
.btn-icon-ghost .bi,
.checklist-actions .btn .bi { font-size: 1.15rem; }
.btn-icon-ghost:hover,
.checklist-actions .btn:hover {
  background: hsl(var(--muted)) !important;
  color:      hsl(var(--foreground));
}
/* Active/filled state (e.g. ignore applied, task taken) */
.btn-icon-ghost.active,
.checklist-actions .btn.active {
  background: hsl(var(--muted-foreground) / .12) !important;
  color:      hsl(var(--muted-foreground));
}
.btn-icon-ghost.active:hover,
.checklist-actions .btn.active:hover {
  background: hsl(var(--muted)) !important;
  color:      hsl(var(--foreground));
}
/* Danger variant (e.g. delete) */
.btn-icon-ghost.text-danger         { color: hsl(var(--destructive)) !important; }
.btn-icon-ghost.text-danger:hover   { background: hsl(var(--destructive) / .1) !important; color: hsl(var(--destructive)) !important; }

/* ── 7. Cards ────────────────────────────────────────────────── */
.card { overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }

.card-header {
  display: flex;
  flex-direction: row;        /* Mosaic sets column — force row for OPS's title+action layout */
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: hsl(var(--foreground));
  background-color: hsl(var(--card)) !important;
  border-bottom-color: hsl(var(--border)) !important;
  padding: .875rem 1.25rem;
}
.card-body { color: hsl(var(--muted-foreground)); }

.card-hover       { cursor: pointer; }
.card-hover:hover,
.stat-card:hover  {
  box-shadow:   var(--shadow-elevate) !important;
  transform:    translateY(-2px);
  border-color: hsl(var(--primary) / .25) !important;
}

.card-accent-primary { border-left: 3px solid hsl(var(--primary)) !important; }
.card-accent-success { border-left: 3px solid var(--ops-success) !important; }
.card-accent-warning { border-left: 3px solid var(--ops-warning) !important; }
.card-accent-danger  { border-left: 3px solid hsl(var(--destructive)) !important; }

/* ── 8. Stat / KPI cards ─────────────────────────────────────── */
/* Mosaic's .stat-card is a flat element (display:flex, padding:1.5rem).
   OPS uses Bootstrap's .card > .card-body pattern, so we override the
   Mosaic flex/padding on the outer wrapper and let .card-body drive layout.
   Must be flex-column (not block) so .card-body gets flex-grow:1, which
   fills the h-100 card height and pins the indicator bar to the bottom. */
.card.stat-card {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.stat-card { transition: box-shadow .15s ease, transform .15s ease; }
.stat-card .stat-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: .75rem;
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 800;
  line-height: 1; letter-spacing: -.03em;
}
.stat-card .stat-label {
  font-size: .75rem; font-weight: 500;
  color: hsl(var(--muted-foreground));
  margin-top: .2rem; letter-spacing: .02em; text-transform: uppercase;
}

/* ── 9. Badges ───────────────────────────────────────────────── */
.badge { letter-spacing: .02em; }

.badge-soft-success { background: var(--ops-success-lt); color: #065f46; }
.badge-soft-warning { background: var(--ops-warning-lt); color: #92400e; }
.badge-soft-danger  { background: var(--ops-danger-lt);  color: #991b1b; }
.badge-soft-info    { background: var(--ops-info-lt);    color: #1e40af; }
.badge-soft-primary { background: var(--ops-primary-lt); color: var(--ops-primary-dk); }
.badge-soft-purple  { background: var(--ops-purple-lt);  color: #5b21b6; }
.badge-soft-muted   { background: hsl(var(--muted));      color: hsl(var(--muted-foreground)); }

/* ── 10. Forms ───────────────────────────────────────────────── */
.form-label { font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }

.form-control,
.form-select {
  font-family:      var(--font-body);
  font-size:        .875rem;
  border:           1px solid hsl(var(--input));
  border-radius:    var(--radius-md);
  background-color: hsl(var(--background));
  color:            hsl(var(--foreground));
  padding:          .5rem .75rem;
  height:           2.25rem;
  transition:       border-color .15s, box-shadow .15s;
  box-shadow:       none;
}
.form-control:focus,
.form-select:focus {
  border-color:     hsl(var(--ring));
  box-shadow:       0 0 0 3px hsl(var(--ring) / .15), 0 0 0 1px hsl(var(--ring));
  outline:          none;
  background-color: hsl(var(--background));
}
.form-control::placeholder { color: hsl(var(--muted-foreground)); font-weight: 400; }
textarea.form-control  { height: auto; min-height: 5rem; }
.form-control-sm,
.form-select-sm { padding: .3rem .6rem; font-size: .8rem; height: auto; }

/* ── 11. Tables ──────────────────────────────────────────────── */
.table {
  font-size: .84rem;
  color: hsl(var(--foreground));
  --bs-table-hover-bg: hsl(var(--primary) / .06);
}
.table > :not(caption) > * > * {
  padding: .65rem 1rem;
  border-color: hsl(var(--border) / .7);
}
.table th {
  font-weight: 600; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted) / .5) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding: .6rem 1rem; white-space: nowrap;
}
.table td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: hsl(var(--primary) / .06) !important; }
.table-light { --bs-table-bg: hsl(var(--muted) / .5); }
.table > tbody > tr.table-danger > * { background-color: #fef2f2 !important; }
.table > tbody > tr.row-overdue > *  { background-color: #fff7ed !important; }

/* ── 12. Nav tabs ────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid hsl(var(--border));
  gap: .25rem;
}
/* Prevent Mosaic's a:hover opacity from dimming tab links */
.nav-tabs .nav-link { opacity: 1; }
.nav-tabs .nav-link:hover { opacity: 1; }

.nav-tabs .nav-link {
  font-size: .82rem; font-weight: 600;
  color: hsl(var(--muted-foreground));
  border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; border-radius: 0;
  padding: .6rem 1rem;
  transition: color .15s, border-color .15s;
  background: transparent;
}
.nav-tabs .nav-link:hover:not(.active) {
  color: hsl(var(--foreground));
  border-bottom-color: hsl(var(--border));
  background: transparent;
  box-shadow: none; transform: none;
}
.nav-tabs .nav-link.active {
  font-weight: 700;
  color: hsl(var(--primary));
  border-bottom-color: hsl(var(--primary));
  background: transparent;
}
.nav-tabs .badge { font-size: .6rem; padding: .2em .45em; margin-left: .3rem; vertical-align: middle; }

@media (max-width: 991px) {
  .nav-tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1px;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-item { flex-shrink: 0; }
  .nav-tabs .nav-link { white-space: nowrap; }
}

/* ── 13. List groups ─────────────────────────────────────────── */
.list-group-item {
  font-size: .85rem; border-color: hsl(var(--border));
  color: hsl(var(--muted-foreground)); padding: .7rem 1.1rem;
  transition: background .15s, color .15s;
}
.list-group-item-action:hover {
  background-color: hsl(var(--muted) / .5) !important;
  color: hsl(var(--foreground)) !important;
}
.list-group-flush .list-group-item:last-child { border-bottom: none; }

/* ── 14. Alerts ──────────────────────────────────────────────── */
.alert { font-size: .85rem; border-width: 1px; }
.alert-warning   { background: var(--ops-warning-lt); border-color: #fcd34d;  color: #92400e; }
.alert-danger,
.alert-error     { background: var(--ops-danger-lt);  border-color: #fca5a5;  color: #991b1b; }
.alert-success   { background: var(--ops-success-lt); border-color: #6ee7b7;  color: #065f46; }
.alert-info,
.alert-primary   { background: var(--ops-primary-lt); border-color: #7dd3fc;  color: #0c4a6e; }
.alert-secondary {
  background: hsl(var(--muted)); border-color: hsl(var(--border));
  color: hsl(var(--muted-foreground));
}

/* ── 15. Modals ──────────────────────────────────────────────── */
.modal-content {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: 1px solid hsl(var(--border)); padding: 1.1rem 1.5rem; }
.modal-footer {
  border-top: 1px solid hsl(var(--border));
  padding: 1rem 1.5rem;
  background-color: hsl(var(--muted) / .5);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.modal-body { padding: 1.25rem 1.5rem; }

/* ── 16. Dropdowns ───────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: .4rem; font-size: .84rem;
}
.dropdown-item {
  border-radius: var(--radius-sm); padding: .5rem .75rem;
  color: hsl(var(--muted-foreground)); font-weight: 500;
  transition: background .15s, color .15s;
}
.dropdown-item:hover { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); }

/* ── 17. Input groups ────────────────────────────────────────── */
.input-group-text {
  background-color: hsl(var(--muted));
  border-color: hsl(var(--border));
  font-size: .85rem; color: hsl(var(--muted-foreground));
}

/* ── 18. Notification dropdown ───────────────────────────────── */
.notif-dropdown { width: 340px; border-radius: var(--radius-md) !important; }
.notif-item { transition: background .15s; }
.notif-item:hover { background-color: hsl(var(--muted) / .5) !important; }

/* ── 19. Progress bars ───────────────────────────────────────── */
.progress { background-color: hsl(var(--muted)); border-radius: 100px; overflow: hidden; }
.progress-bar { border-radius: 100px; transition: width .4s ease; }
.progress-bar.bg-success { background-color: var(--ops-success) !important; }
.progress-bar.bg-primary { background-color: hsl(var(--primary)) !important; }

/* ── 20. Avatars ─────────────────────────────────────────────── */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .72rem; flex-shrink: 0;
  letter-spacing: .02em; border: 2px solid hsl(var(--card));
}
.avatar-sm { width: 28px; height: 28px; font-size: .65rem; }
.avatar-lg { width: 44px; height: 44px; font-size: .9rem; }

.avatar-a, .avatar-b { background:#dbeafe; color:#1e40af; }
.avatar-c, .avatar-d { background:#dcfce7; color:#166534; }
.avatar-e, .avatar-f { background:#fef3c7; color:#92400e; }
.avatar-g, .avatar-h { background:#fce7f3; color:#9d174d; }
.avatar-i, .avatar-j { background:var(--ops-primary-lt); color:var(--ops-primary-dk); }
.avatar-k, .avatar-l { background:#ede9fe; color:#5b21b6; }
.avatar-m, .avatar-n { background:#d1fae5; color:#065f46; }
.avatar-o, .avatar-p { background:#ffedd5; color:#9a3412; }
.avatar-q, .avatar-r { background:#e0e7ff; color:#3730a3; }
.avatar-s, .avatar-t { background:#fce7f3; color:#831843; }
.avatar-u, .avatar-v { background:#ecfdf5; color:#047857; }
.avatar-w, .avatar-x { background:#f0f9ff; color:#0369a1; }
.avatar-y, .avatar-z { background:#f5f3ff; color:#6d28d9; }
.avatar-default       { background:var(--ops-primary-lt); color:var(--ops-primary-dk); }

/* ── 21. Status dots ─────────────────────────────────────────── */
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.status-dot-success { background:var(--ops-success); box-shadow:0 0 0 3px var(--ops-success-lt); }
.status-dot-warning { background:var(--ops-warning); box-shadow:0 0 0 3px var(--ops-warning-lt); }
.status-dot-danger  { background:var(--ops-danger);  box-shadow:0 0 0 3px var(--ops-danger-lt); }
.status-dot-muted   { background:hsl(var(--muted-foreground)); }

/* ── 22. Kanban ──────────────────────────────────────────────── */
.kanban-board { -webkit-overflow-scrolling: touch; }
.kanban-card  { line-height: 1.45; }
.kanban-col   { min-width: 260px; }

@media (max-width: 991px) {
  .kanban-board {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 1.25rem; scroll-snap-type: x mandatory;
  }
  .kanban-col { scroll-snap-align: start; }
}

/* ── 23. Calendar (FullCalendar) ─────────────────────────────── */

/* Toolbar layout — flex row with gaps so buttons aren't crammed */
.fc .fc-toolbar.fc-header-toolbar {
  gap: .75rem;
  flex-wrap: wrap;
}
.fc .fc-toolbar-chunk {
  display: flex;
  align-items: center;
  gap: .375rem;
}

/* Button group — give each button its own rounded shape + gap */
.fc .fc-button-group {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.fc .fc-button-group > .fc-button {
  border-radius: .375rem !important;
  margin-left: 0 !important;       /* FullCalendar default adds negative margin */
}
/* Remove the connected-pill border overrides FullCalendar applies */
.fc .fc-button-group > .fc-button:not(:first-child) {
  border-left-width: 1px !important;
  border-top-left-radius: .375rem !important;
  border-bottom-left-radius: .375rem !important;
}
.fc .fc-button-group > .fc-button:not(:last-child) {
  border-top-right-radius: .375rem !important;
  border-bottom-right-radius: .375rem !important;
}

.fc .fc-toolbar-title { font-size: 1rem; font-weight: 700; font-family: var(--font-display); }

.fc .fc-button-primary {
  background-color: hsl(var(--primary));
  border-color:     hsl(var(--primary));
  border-radius:    .375rem !important;
  font-weight:      600;
  font-size:        .8rem;
  padding:          .375rem .75rem;
}
.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus {
  background-color: var(--ops-primary-dk);
  border-color:     var(--ops-primary-dk);
  box-shadow:       none !important;
}
.fc .fc-button-primary:disabled {
  background-color: hsl(var(--primary));
  border-color:     hsl(var(--primary));
  opacity: .45;
}

/* Square, evenly-sized day cells */
.fc .fc-daygrid-day-frame {
  min-height: 110px;
}

/* Breathing room inside cells */
.fc .fc-daygrid-day-top {
  padding: 6px 8px 2px;
}
.fc .fc-daygrid-day-events {
  padding: 0 6px 6px;
}

/* Today highlight — subtle teal tint instead of default yellow */
.fc .fc-day-today {
  background-color: hsl(var(--primary) / .05) !important;
}

.fc-event {
  font-size: .75rem;
  border-radius: .25rem !important;
  cursor: pointer;
  border: none !important;
  padding: 2px 6px;
  margin-bottom: 2px !important;
}
.fc-event .fc-event-title { font-weight: 500; }

.fc-daygrid-day-number {
  font-size: .8rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 4px 6px !important;
}
.fc-day-today .fc-daygrid-day-number {
  background-color: hsl(var(--primary));
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.fc-col-header-cell-cushion {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: hsl(var(--muted-foreground));
  padding: 8px 0 !important;
}

/* Clean column header row */
.fc .fc-col-header-cell {
  border-color: hsl(var(--border)) !important;
  background-color: hsl(var(--muted) / .3);
}

/* Uniform cell borders */
.fc td, .fc th {
  border-color: hsl(var(--border)) !important;
}

/* "more" link */
.fc .fc-daygrid-more-link {
  font-size: .72rem;
  font-weight: 600;
  color: hsl(var(--primary));
  padding: 1px 6px;
}

/* ── 24. Proof viewer ────────────────────────────────────────── */
#proofImgWrapper { background:hsl(var(--background)); overflow:auto; border-radius:var(--radius); }
.proof-viewer-image { max-width:100%; display:block; }

/* ── 25. Priority labels ─────────────────────────────────────── */
.priority-critical { color:#dc2626; }
.priority-high     { color:#f97316; }
.priority-normal   { color:hsl(var(--primary)); }
.priority-low      { color:hsl(var(--muted-foreground)); }

/* ── 26. Spinner overlay ─────────────────────────────────────── */
.spinner-overlay {
  position:fixed; inset:0; background:rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; backdrop-filter:blur(4px);
}

/* ── 27. Public layout ───────────────────────────────────────── */
body:not(.ops-app) {
  background-color: #f1f5f9;
  background-color: hsl(var(--background, 210 20% 98%));
  min-height: 100vh;
}
body:not(.ops-app) header {
  border-bottom: 3px solid hsl(var(--primary));
  box-shadow: var(--shadow-sm);
}

/* ── 28. Utility helpers ─────────────────────────────────────── */
.text-xs    { font-size:.72rem !important; }
.text-sm    { font-size:.82rem !important; }
.fw-medium  { font-weight:600 !important; }
.lh-tight   { line-height:1.3 !important; }
.rounded-xl { border-radius:var(--radius-xl) !important; }
.border-lt  { border-color:hsl(var(--border)) !important; }
.bg-surface   { background-color:hsl(var(--card)) !important; }
.bg-surface-2 { background-color:hsl(var(--muted)) !important; }
.text-purple  { color:var(--ops-purple) !important; }

.text-truncate-2 {
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 29. Responsive ──────────────────────────────────────────── */
@media (max-width: 575px) {
  .notif-dropdown { width:calc(100vw - 24px) !important; right:0 !important; left:auto !important; }
}
@media (max-width: 767px) {
  main.flex-grow-1 { padding-left:.875rem !important; padding-right:.875rem !important; padding-top:1rem !important; }
  .card-body.p-4 { padding:1rem !important; }
  .modal-dialog  { margin:.75rem; }
}

/* ── 30. Print ───────────────────────────────────────────────── */
@media print {
  .sidebar, header, footer, .btn, form, nav, #mobileSidebar { display:none !important; }
  .card { border:1px solid #ddd !important; box-shadow:none !important; break-inside:avoid; }
  body { background:#fff !important; font-size:12px; }
}

/* ── 31. PWA / iOS Standalone ───────────────────────────────── */

/* Bottom tab bar — hidden by default, shown by JS when in standalone mode */
.pwa-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: #fff;
  border-top: 1px solid hsl(var(--border, 214 32% 91%));
  box-shadow: 0 -1px 8px rgba(0,0,0,.06);
  /* Push content above iOS home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pwa-bottom-nav .pwa-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: .45rem .25rem;
  text-decoration: none;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .01em;
  gap: 3px;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.pwa-bottom-nav .pwa-tab i {
  font-size: 1.3rem;
  line-height: 1;
}

.pwa-bottom-nav .pwa-tab.active {
  color: var(--ops-primary, #0F9FCA);
}

/* Show bottom nav and add content padding when in standalone mode */
body.pwa-standalone .pwa-bottom-nav {
  display: flex;
}

body.pwa-standalone .flex-grow-1.overflow-auto {
  /* Prevent content hiding behind fixed bottom nav */
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}

/* Safe area for top bar in standalone with black-translucent status bar */
body.pwa-standalone > .d-flex > header,
body.pwa-standalone .flex-grow-1 > header {
  padding-top: max(env(safe-area-inset-top, 0px), 0px);
}

/* ── 32. Push notification subscribe prompt ─────────────────── */
.push-prompt {
  display: none;
  position: fixed;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 1025;
  background: #fff;
  border-top: 1px solid hsl(var(--border, 214 32% 91%));
  box-shadow: 0 -2px 12px rgba(0,0,0,.1);
}

/* ── 33. Pull-to-refresh indicator (PWA standalone only) ────── */
.ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-56px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ops-primary, #0d9488);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}
.ptr-indicator i {
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.ptr-indicator.ptr-ready i {
  transform: rotate(180deg);
}
.ptr-indicator.ptr-refreshing i {
  animation: ptr-spin 0.7s linear infinite;
}
@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}

/* ── 34. Global Search ───────────────────────────────────────── */
/* Bordered nav-item trigger for search */
.sidebar-search-btn {
  background: none;
  border: 1px solid hsl(var(--border));
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: calc(100% - 1.25rem); /* match anchor nav-items: accounts for 0.625rem side margins */
}
.sidebar-search-shortcut {
  margin-left: auto;
  font-size: .65rem;
  font-family: monospace;
  opacity: .4;
}

/* Overlay scrim */
.ops-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.ops-search-overlay.open { display: flex; }

/* Panel */
.ops-search-panel {
  width: 560px;
  max-width: calc(100vw - 2rem);
  background: hsl(var(--card));
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.1);
  border: 1px solid hsl(var(--border));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(480px, calc(100vh - 120px));
}

/* Input row */
.ops-search-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}
.ops-search-icon { font-size: 1rem; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.ops-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: .9375rem;
  color: hsl(var(--foreground));
  background: transparent;
  font-family: inherit;
}
.ops-search-input::placeholder { color: hsl(var(--muted-foreground)); }

/* Spinner */
.ops-search-spinner { flex-shrink: 0; display: flex; align-items: center; }
.ops-spinner-ring {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: ops-spin .6s linear infinite;
}
@keyframes ops-spin { to { transform: rotate(360deg); } }

/* Esc key chip */
.ops-search-esc {
  font-size: .65rem;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 6px;
  color: #475569;
  cursor: pointer;
  font-family: monospace;
  flex-shrink: 0;
}

/* Results scroll area */
.ops-search-results { overflow-y: auto; flex: 1; }
.ops-search-results::-webkit-scrollbar { width: 4px; }
.ops-search-results::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 2px; }

/* Empty / hint state */
.ops-search-state {
  text-align: center;
  padding: 32px 20px;
  color: hsl(var(--muted-foreground));
  font-size: .8125rem;
  line-height: 1.6;
}
.ops-search-state i { font-size: 1.75rem; display: block; margin-bottom: 8px; opacity: .4; }
.ops-search-state strong { display: block; color: hsl(var(--foreground)); font-size: .875rem; margin-bottom: 2px; }

/* Result group */
.ops-result-group { padding: 6px 0 2px; }
.ops-result-group + .ops-result-group { border-top: 1px solid hsl(var(--border)); }
.ops-result-group-label {
  font-size: .6875rem;
  font-weight: 700;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 4px 14px;
}

/* Result row */
.ops-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  color: hsl(var(--foreground));
  transition: background .08s;
  cursor: pointer;
}
.ops-result-row:hover,
.ops-result-row.ops-focused {
  background: hsl(var(--primary) / .07);
  color: hsl(var(--foreground));
  text-decoration: none;
}

/* Icon tile */
.ops-result-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
}
.ops-icon-campaign { background: #fef3c7; color: #d97706; }
.ops-icon-project  { background: #ede9fe; color: #7c3aed; }
.ops-icon-task     { background: #dcfce7; color: #16a34a; }
.ops-icon-file     { background: #fee2e2; color: #dc2626; }

/* Title / subtitle */
.ops-result-text { flex: 1; min-width: 0; }
.ops-result-title {
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: hsl(var(--foreground));
}
.ops-result-sub {
  font-size: .6875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status badge */
.ops-result-badge {
  font-size: .6875rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
  white-space: nowrap;
}

/* Highlight mark */
.ops-search-results mark {
  background: #fef08a;
  color: #713f12;
  border-radius: 2px;
  padding: 0 1px;
}

/* Footer key hints */
.ops-search-footer {
  border-top: 1px solid hsl(var(--border));
  padding: 7px 14px;
  display: flex;
  gap: 14px;
  font-size: .6875rem;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}
.ops-search-footer kbd {
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 1px 4px;
  color: #475569;
  font-family: monospace;
  font-size: .625rem;
}

/* Mobile: push panel to top edge */
@media (max-width: 480px) {
  .ops-search-overlay { padding-top: 40px; }
  .ops-search-panel { border-radius: 12px 12px 0 0; max-height: calc(100vh - 60px); }
}

/* ── Attachment Lightbox ─────────────────────────────────────────── */
.ops-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(15, 23, 42, .92);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.ops-lightbox-overlay.open { display: flex; }

.ops-lightbox-body {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 56px 64px;
}
.ops-lightbox-body img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.ops-lightbox-body iframe {
  width: min(900px, 92vw);
  height: 78vh;
  border: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.ops-lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ops-lightbox-close:hover { background: rgba(255,255,255,.22); }

.ops-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ops-lightbox-nav:hover { background: rgba(255,255,255,.22); }
.ops-lightbox-prev { left: max(12px, env(safe-area-inset-left, 0px)); }
.ops-lightbox-next { right: max(12px, env(safe-area-inset-right, 0px)); }

.ops-lightbox-caption {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  color: rgba(255,255,255,.85);
  font-size: .8rem;
}
.ops-lightbox-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}
.ops-lightbox-download {
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  opacity: .85;
}
.ops-lightbox-download:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 640px) {
  .ops-lightbox-body { padding: 48px 20px; }
  .ops-lightbox-nav { width: 40px; height: 40px; font-size: 1.15rem; }
  .ops-lightbox-filename { max-width: 45vw; }
}