/* static/css/rtl.css - MartGain OS Baseline Styles */

:root {
  /* Core neutrals */
  --mg-black: #050505;
  --mg-charcoal: #111111;
  --mg-dark-gray: #2B2B2B;
  --mg-gray: #777777;
  --mg-mid-gray: #A7A7A7;
  --mg-light-gray: #D9D9D9;
  --mg-border: #E7E7E3;

  /* Backgrounds */
  --mg-white: #FFFFFF;
  --mg-off-white: #F5F5F2;
  --mg-soft-surface: #FAFAF8;

  /* Brand accent */
  --mg-green: #7FB34D;
  --mg-green-secondary: #8BC05A;
  --mg-green-dark: #5F9135;
  --mg-green-soft: #EDF5E6;

  /* Functional colors */
  --mg-positive: #5F9135;
  --mg-warning: #C8892D;
  --mg-negative: #B94B45;
  --mg-info: #4D6575;

  /* Spacing (8pt system) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* Typography */
  --font-ar: "Cairo", sans-serif;
  --font-en: "Inter", sans-serif;
}

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

html {
  font-family: var(--font-ar);
  font-size: 16px;
  background-color: var(--mg-off-white);
  color: var(--mg-dark-gray);
  -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] {
  direction: rtl;
}

html[dir="ltr"] {
  direction: ltr;
  font-family: var(--font-en);
}

/* English Text override for embedded or explicitly marked copy. */
.en-text, [dir="ltr"] {
  font-family: var(--font-en);
}

body {
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--mg-black);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; font-weight: 600; }

p {
  margin-bottom: var(--space-2);
  color: var(--mg-dark-gray);
}

a {
  color: var(--mg-green-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--mg-green);
}

/* Layout: Sidebar & Main Area */
.app-layout {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: 280px;
  background-color: var(--mg-white);
  border-inline-end: 1px solid var(--mg-border);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, width 0.3s ease, padding 0.3s ease;
  z-index: 40;
}

.sidebar.closed {
  width: 0;
  transform: translateX(100%);
  border-inline-end: none;
  padding: 0;
}

.sidebar.closed .brand-logo,
.sidebar.closed .sidebar-close {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.sidebar-header {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--mg-border);
}

.brand-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mg-black);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.brand-logo .dot {
  color: var(--mg-green);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: 8px;
  color: var(--mg-charcoal);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-item:hover, .nav-item.active {
  background-color: var(--mg-green-soft);
  color: var(--mg-green-dark);
}

.nav-item svg {
  width: 20px;
  height: 20px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Top Header */
.top-header {
  height: 72px;
  background-color: var(--mg-white);
  border-bottom: 1px solid var(--mg-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  z-index: 30;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.language-switcher { margin: 0; }
.language-switcher__button {
  min-width: 42px;
  min-height: 36px;
  padding: .35rem .7rem;
  border: 1px solid var(--mg-border);
  border-radius: 999px;
  background: var(--mg-white);
  color: var(--mg-charcoal);
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
}
.language-switcher__button:hover,
.language-switcher__button:focus-visible {
  border-color: var(--mg-green);
  color: var(--mg-green-dark, var(--mg-green));
  outline: 2px solid color-mix(in srgb, var(--mg-green) 28%, transparent);
  outline-offset: 2px;
}

.global-search-inline {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: min(260px, 26vw);
  padding: .25rem .55rem;
  border: 1px solid var(--mg-border);
  border-radius: 999px;
  background: var(--mg-soft-surface);
  color: var(--mg-gray);
}

.global-search-inline input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--mg-charcoal);
  font: inherit;
}

.global-search-results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + .45rem);
  z-index: 80;
  display: grid;
  gap: .25rem;
  max-height: 360px;
  overflow: auto;
  padding: .4rem;
  border: 1px solid var(--mg-border);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(17,17,17,.14);
}

.global-search-results:empty { display: none; }

/* Task list: one clear filter for every visible table column. */
.dash-filters {
  display: flex;
  align-items: end;
  gap: .55rem;
  flex-wrap: wrap;
}

.dash-filters > label:not(.sr-only) {
  display: grid;
  gap: .2rem;
  min-width: 145px;
  margin: 0;
}

.dash-filters > label:not(.sr-only) > span {
  color: var(--mg-gray);
  font-size: .72rem;
}

.dash-filters > .task-filter-field {
  display: grid;
  gap: .2rem;
  min-width: 145px;
  margin: 0;
}

.dash-filters > .task-filter-field > span {
  color: var(--mg-gray);
  font-size: .72rem;
}

.dash-filters input,
.dash-filters select {
  min-height: 40px;
  min-width: 145px;
  padding: .45rem .6rem;
  border: 1px solid var(--mg-border);
  border-radius: .55rem;
  background: #fff;
  color: var(--mg-charcoal);
  font: inherit;
  font-size: .8rem;
}

.dash-filters input[type="search"] { min-width: 190px; }
.dash-filters input:focus,
.dash-filters select:focus { border-color: var(--mg-green); outline: 2px solid var(--mg-green-soft); }

.task-status-picker { position: relative; min-width: 145px; }
.task-status-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-height: 40px;
  padding: .45rem .6rem;
  border: 1px solid var(--mg-border);
  border-radius: .55rem;
  background: #fff;
  color: var(--mg-charcoal);
  cursor: pointer;
  list-style: none;
  font-size: .8rem;
}
.task-status-picker > summary::-webkit-details-marker { display: none; }
.task-status-picker > summary::after { content: "⌄"; color: var(--mg-gray); }
.task-status-picker[open] > summary { border-color: var(--mg-green); outline: 2px solid var(--mg-green-soft); }
.task-status-menu {
  position: absolute;
  z-index: 30;
  inset-inline-start: 0;
  top: calc(100% + .35rem);
  display: grid;
  gap: .15rem;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--mg-border);
  border-radius: .65rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 30, 20, .14);
}
.task-status-menu label {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 34px;
  margin: 0;
  padding: .35rem .4rem;
  border-radius: .45rem;
  cursor: pointer;
  font-size: .8rem;
}
.task-status-menu label:hover { background: var(--mg-soft-surface); }
.task-status-menu input { min-width: 16px; width: 16px; height: 16px; accent-color: var(--mg-green-dark); }

@media (max-width: 760px) {
  .dash-filters { align-items: stretch; width: 100%; }
  .dash-filters > label:not(.sr-only),
  .dash-filters > .task-filter-field,
  .dash-filters input,
  .dash-filters select { width: 100%; min-width: 0; }
  .dash-filters .btn { flex: 1 1 auto; justify-content: center; }
}

.global-search-result,
.global-search-empty {
  display: grid;
  gap: .15rem;
  padding: .55rem .65rem;
  border-radius: .5rem;
  color: inherit;
  text-decoration: none;
}

.global-search-result:hover { background: var(--mg-green-soft); }
.global-search-result small,
.global-search-empty { color: var(--mg-gray); font-size: .72rem; }
.global-search-result strong { font-size: .78rem; }
.global-search-result .badge { justify-self: start; }

#id_platform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .55rem;
  width: 100%;
}

#id_platform > div { min-width: 0; }
#id_platform label {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 1px solid var(--mg-border);
  border-radius: .65rem;
  background: #fff;
  cursor: pointer;
  color: var(--mg-charcoal);
  transition: border-color .15s ease, background .15s ease;
}

#id_platform label:has(input:checked) { border-color: var(--mg-green); background: var(--mg-green-soft); }
#id_platform input { width: 18px; height: 18px; accent-color: var(--mg-green-dark); }

@media (max-width: 640px) {
  .global-search-inline { min-width: 42px; width: 42px; padding-inline: .65rem; }
  .global-search-inline input { position: absolute; inset-inline: 42px auto; width: min(220px, 65vw); padding: .4rem .6rem; border: 1px solid var(--mg-border); border-radius: 999px; background: #fff; display: none; }
  .global-search-inline:focus-within { width: min(270px, 78vw); }
  .global-search-inline:focus-within input { display: block; }
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mg-gray);
  padding: var(--space-1);
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  background-color: var(--mg-soft-surface);
  color: var(--mg-charcoal);
}

/* User Profile Dropdown Placeholder */
.user-profile {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: 8px;
  transition: background-color 0.2s;
}
.user-profile:hover {
  background-color: var(--mg-soft-surface);
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--mg-green-soft);
  color: var(--mg-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-en);
}

/* Content Area */
.content-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

/* Cards (Flat / Minimalist Design) */
.mg-card {
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mg-card.interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(5, 5, 5, 0.05);
  border-color: var(--mg-green-secondary);
}

.mg-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 10px var(--space-3);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  border: none;
  font-family: inherit;
}

.btn-primary {
  background-color: var(--mg-green);
  color: var(--mg-white);
}

.btn-primary:hover {
  background-color: var(--mg-green-dark);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--mg-border);
  color: var(--mg-charcoal);
}

.btn-outline:hover {
  background-color: var(--mg-soft-surface);
  border-color: var(--mg-mid-gray);
}

/* Badges / Tags */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.badge-green {
  background-color: var(--mg-green-soft);
  color: var(--mg-green-dark);
}

.badge-gray {
  background-color: var(--mg-soft-surface);
  color: var(--mg-gray);
  border: 1px solid var(--mg-border);
}

/* Utilities */
.text-green { color: var(--mg-green); }
.text-charcoal { color: var(--mg-charcoal); }
.text-gray { color: var(--mg-gray); }
.text-sm { font-size: 0.875rem; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.w-full { width: 100%; }

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dashboard-top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Sprint 0 component extensions. Existing baseline rules above are preserved. */
[x-cloak] { display: none !important; }

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(95, 145, 53, 0.35);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-title {
  margin: 0;
  font-size: 1.25rem;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--mg-green-dark);
  font-size: 0.75rem;
  font-weight: 700;
}

.sidebar-close {
  display: none;
  margin-inline-start: auto;
}

.sidebar-overlay {
  display: none;
}

.sidebar-overlay[hidden] {
  display: none !important;
}

.sidebar-account {
  display: none;
  padding: 0 var(--space-2) var(--space-2);
}

.nav-section {
  padding: var(--space-2) var(--space-2) var(--space-1);
  color: var(--mg-gray);
  font-size: 0.75rem;
  font-weight: 700;
}

.nav-icon {
  width: 22px;
  color: currentColor;
  text-align: center;
}

.nav-item.is-disabled {
  color: var(--mg-mid-gray);
  cursor: not-allowed;
}

.global-search input {
  width: min(280px, 30vw);
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--mg-border);
  border-radius: 8px;
  background: var(--mg-soft-surface);
  color: var(--mg-charcoal);
}

.global-search input:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.user-menu {
  position: relative;
}

.user-profile {
  border: 0;
  background: transparent;
  text-align: start;
}

.user-info {
  display: grid;
  line-height: 1.2;
}

.user-info small {
  margin-top: 4px;
  color: var(--mg-gray);
}

.dropdown-menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 180px;
  padding: 8px;
  border: 1px solid var(--mg-border);
  border-radius: 10px;
  background: var(--mg-white);
  box-shadow: 0 12px 28px rgba(5, 5, 5, 0.08);
  z-index: 70;
}

.dropdown-item {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: start;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--mg-soft-surface);
}

.notification-menu {
  position: relative;
}

.notification-popover {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 85;
  width: min(390px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--mg-border);
  border-radius: 14px;
  background: var(--mg-white);
  box-shadow: 0 16px 36px rgba(5, 5, 5, .14);
}
.notification-popover[hidden] { display: none; }

.notification-popover-loading,
.notification-popover-empty {
  padding: 1.25rem;
  color: var(--mg-gray);
  font-size: .8rem;
  text-align: center;
}

.notification-popover-head,
.notification-popover-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1rem;
  background: var(--mg-soft-surface);
}

.notification-popover-head {
  border-bottom: 1px solid var(--mg-border);
}

.notification-popover-head strong { color: var(--mg-black); }
.notification-popover-head span { color: var(--mg-gray); font-size: .72rem; }

.notification-popover-list {
  display: grid;
  max-height: min(420px, 60vh);
  overflow-y: auto;
}

.notification-popover-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 8px;
  align-items: start;
  gap: .65rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--mg-border);
  color: inherit;
}

.notification-popover-item:hover,
.notification-popover-item.is-unread { background: #f8fcf5; }
.notification-popover-item .notif-icon { color: var(--mg-green-dark); }
.notification-popover-copy { display: grid; gap: .12rem; min-width: 0; }
.notification-popover-copy strong { overflow: hidden; color: var(--mg-black); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-popover-copy small { overflow: hidden; color: var(--mg-gray); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-popover-copy time { color: var(--mg-gray); font-size: .67rem; }
.notification-popover-dot { width: 7px; height: 7px; margin-top: .35rem; border-radius: 50%; background: var(--mg-negative); }
.notification-popover-foot { justify-content: center; border-top: 1px solid var(--mg-border); }
.notification-popover-foot a { font-size: .76rem; font-weight: 700; }

/* Always-visible in-app fallback when the OS/browser suppresses Web Push. */
.live-notification-stack {
  position: fixed;
  inset-block-start: 86px;
  inset-inline-end: 18px;
  z-index: 120;
  display: grid;
  gap: .65rem;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}

.live-notification {
  display: grid;
  gap: .2rem;
  padding: .9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--mg-green) 45%, var(--mg-border));
  border-inline-start: 4px solid var(--mg-green);
  border-radius: .85rem;
  background: var(--mg-white);
  color: var(--mg-charcoal);
  box-shadow: 0 16px 36px rgba(17, 17, 17, .16);
  pointer-events: auto;
  animation: live-notification-in .2s ease-out;
}

.live-notification:hover { color: var(--mg-charcoal); border-color: var(--mg-green); }
.live-notification strong { color: var(--mg-black); font-size: .86rem; }
.live-notification span { color: var(--mg-gray); font-size: .76rem; line-height: 1.65; }
.bell.has-new-notification { animation: notification-bell-pulse .55s ease-in-out 2; }

@keyframes live-notification-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes notification-bell-pulse {
  50% { color: var(--mg-green-dark); background: var(--mg-green-soft); transform: scale(1.08); }
}

@media (max-width: 640px) {
  .notification-popover {
    position: fixed;
    inset-block-start: 70px;
    inset-inline: 12px;
    width: auto;
    max-height: calc(100dvh - 82px);
  }
  .notification-popover-list { max-height: calc(100dvh - 190px); }
  .live-notification-stack { inset-block-start: 76px; inset-inline: 12px; width: auto; }
}

.page-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Keep the strategy detail header on the same visual grid as the rest of the OS. */
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.page-actions,
.strategy-followup-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.metric-card {
  display: grid;
  gap: 8px;
  padding: var(--space-3);
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  background: var(--mg-white);
}

.metric-label {
  color: var(--mg-gray);
  font-size: 0.875rem;
}

.metric-value {
  color: var(--mg-black);
  font-family: var(--font-en);
  font-size: 2.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.status-neutral {
  background: var(--mg-soft-surface);
  color: var(--mg-gray);
  border: 1px solid var(--mg-border);
}

.status-success {
  background: var(--mg-green-soft);
  color: var(--mg-green-dark);
}

.status-warning {
  background: #fff6e8;
  color: #8a550b;
}

.status-danger {
  background: #fff0ef;
  color: #9c342f;
}

.empty-state {
  display: grid;
  justify-items: center;
  padding: var(--space-5) var(--space-3);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-2);
  place-items: center;
  border: 1px solid #dce8d2;
  border-radius: 12px;
  background: var(--mg-green-soft);
  color: var(--mg-green-dark);
  font-size: 1.25rem;
}

.breadcrumb {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-2);
  color: var(--mg-gray);
  font-size: 0.875rem;
}

.style-section {
  margin-bottom: var(--space-4);
}

.component-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.btn-danger {
  background: var(--mg-negative);
  color: var(--mg-white);
}

.btn-danger:hover {
  background: #963b36;
}

.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  border: 1px solid #efc8c5;
  background: #fffafa;
}

.danger-zone h3 {
  margin: 0 0 var(--space-1);
}

.danger-zone p {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .danger-zone {
    align-items: stretch;
    flex-direction: column;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.form-stack {
  display: grid;
  gap: var(--space-2);
}

.field {
  display: grid;
  gap: 8px;
  color: var(--mg-charcoal);
  font-weight: 600;
}

.create-form .field[hidden] {
  display: none;
}

.field-label {
  display: block;
  line-height: 1.5;
}

.field-choice-group {
  min-width: 0;
  padding: 0;
  border: 0;
}

.field-choice-group legend {
  padding: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.field input,
.field select,
.field textarea,
.auth-card input,
.auth-card select,
.auth-card textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--mg-border);
  border-radius: 8px;
  background: var(--mg-white);
  color: var(--mg-charcoal);
}

.field textarea {
  resize: vertical;
}

.field-help {
  color: var(--mg-gray);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.6;
}

.errorlist {
  list-style: none;
  color: var(--mg-negative);
  font-size: 0.875rem;
}

.field-errors .errorlist {
  margin: 0;
  padding-inline-start: 1.15rem;
}

.form-error-summary {
  display: grid;
  gap: .4rem;
  margin-bottom: var(--space-3);
}

.form-error-summary h3,
.form-error-summary p,
.form-error-summary ul {
  margin: 0;
}

.form-error-summary p {
  line-height: 1.6;
}

.form-error-summary ul {
  display: grid;
  gap: .3rem;
  padding-inline-start: 1.25rem;
}

.form-error-summary a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.create-publish-warning p {
  margin: .35rem 0 0;
  line-height: 1.65;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  background: var(--mg-white);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--mg-border);
  text-align: start;
}

th {
  background: var(--mg-soft-surface);
  color: var(--mg-charcoal);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.messages {
  display: grid;
  gap: 8px;
  margin-bottom: var(--space-2);
}

.alert {
  padding: 12px 16px;
  border: 1px solid var(--mg-border);
  border-radius: 8px;
  background: var(--mg-white);
}

.alert-success {
  border-color: #dce8d2;
  background: var(--mg-green-soft);
  color: var(--mg-green-dark);
}

.alert-warning {
  border-color: #f1d7ae;
  background: #fff6e8;
  color: #8a550b;
}

.alert-error,
.alert-danger {
  border-color: #efc5c2;
  background: #fff0ef;
  color: #9c342f;
}

.auth-layout {
  display: grid;
  width: 100%;
  min-height: 100vh;
  padding: var(--space-3);
  place-items: center;
  background:
    radial-gradient(circle at 85% 15%, rgba(127, 179, 77, 0.12), transparent 28%),
    var(--mg-off-white);
}

.auth-brand {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
}

.auth-card {
  width: min(100%, 440px);
  padding: var(--space-4);
  border: 1px solid var(--mg-border);
  border-radius: 16px;
  background: var(--mg-white);
}

.auth-link {
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  padding: var(--space-3);
  place-items: center;
  background: rgba(5, 5, 5, 0.45);
  z-index: 100;
}

.modal {
  width: min(100%, 480px);
  padding: var(--space-3);
  border-radius: 14px;
  background: var(--mg-white);
}

.modal-actions {
  display: flex;
  justify-content: end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.htmx-indicator {
  position: fixed;
  inset-block-end: var(--space-2);
  inset-inline-start: var(--space-2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--mg-border);
  border-radius: 999px;
  background: var(--mg-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 120;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--mg-border);
  border-top-color: var(--mg-green-dark);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeleton {
  height: 14px;
  margin-bottom: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eceee9 25%, #f8f9f6 50%, #eceee9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

.skeleton-title {
  width: 55%;
  height: 22px;
}

.skeleton-short {
  width: 70%;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 320px);
    transform: translateX(110%);
    visibility: hidden;
    pointer-events: none;
    box-shadow: -12px 0 28px rgba(5, 5, 5, 0.12);
  }

  html[dir="ltr"] .sidebar {
    transform: translateX(-110%);
    box-shadow: 12px 0 28px rgba(5, 5, 5, 0.12);
  }

  .sidebar.closed {
    width: min(86vw, 320px);
    transform: translateX(110%);
    visibility: hidden;
    pointer-events: none;
  }

  html[dir="ltr"] .sidebar.closed {
    transform: translateX(-110%);
  }

  .sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .sidebar-close {
    display: inline-flex;
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(5, 5, 5, 0.32);
    z-index: 35;
  }

  .global-search {
    display: none;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .sidebar-account { display: block; }

  .top-header {
    min-height: 64px;
    height: auto;
    padding: 10px var(--space-2);
    padding-inline-start: max(var(--space-2), env(safe-area-inset-right));
    padding-inline-end: max(var(--space-2), env(safe-area-inset-left));
  }

  .header-actions {
    gap: 4px;
  }

  .language-switcher__button { min-height: 44px; }

  .user-info {
    display: none;
  }

  .content-wrapper {
    padding: var(--space-2);
  }

  .page-header,
  .page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-grid,
  .dashboard-top-grid,
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .table-wrap {
    border: 0;
    background: transparent;
  }

  table,
  tbody,
  tr,
  td,
  th {
    display: block;
    width: 100%;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: var(--space-2);
    padding: 8px 14px;
    border: 1px solid var(--mg-border);
    border-radius: 10px;
    background: var(--mg-white);
  }

  td {
    display: grid;
    grid-template-columns: minmax(90px, 36%) 1fr;
    gap: 8px;
    padding: 10px 0;
  }

  td::before {
    content: attr(data-label);
    color: var(--mg-gray);
    font-weight: 700;
  }

  .auth-card {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================ */
/* Operations dashboard                                             */
/*                                                                  */
/* Kept inside rtl.css on purpose.  ManifestStaticFilesStorage       */
/* requires every referenced file to exist in staticfiles.json, so a */
/* separate stylesheet would make page rendering depend on           */
/* collectstatic having run -- which breaks tests on a fresh clone.  */
/* One stylesheet also means one request on the busiest screen.      */
/* ================================================================ */

/* ---------------------------------------------------------------- */
/* 1. Hero — the governing number                                    */
/* ---------------------------------------------------------------- */

.dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  border-inline-start: 4px solid var(--mg-light-gray);
}

.dash-hero--healthy  { border-inline-start-color: var(--mg-positive); }
.dash-hero--warning  { border-inline-start-color: var(--mg-warning); }
.dash-hero--critical { border-inline-start-color: var(--mg-negative); }

/* Overdue workbench: balanced cards on desktop, one readable column on mobile. */
.dash-overdue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  align-items: start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dash-overdue-grid--single { grid-template-columns: minmax(0, 1fr); }

.dash-overdue-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: start;
  padding: var(--space-3);
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-inline-start: 4px solid var(--mg-light-gray);
  border-radius: 12px;
}

.dash-overdue-card--personal.dash-hero--healthy { border-inline-start-color: var(--mg-positive); }
.dash-overdue-card--personal.dash-hero--warning { border-inline-start-color: var(--mg-warning); }
.dash-overdue-card--personal.dash-hero--critical { border-inline-start-color: var(--mg-negative); }
.dash-overdue-card--team { border-inline-start-color: var(--mg-green); }

.dash-overdue-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.dash-overdue-card-head .eyebrow { margin-bottom: 0; }
.dash-overdue-kicker { color: var(--mg-gray); font-size: .75rem; }
.dash-overdue-card .dash-hero-figure { margin-bottom: var(--space-2); }
.dash-overdue-card .dash-hero-breakdown { margin-top: 0; }
.dash-overdue-cta { align-self: flex-start; min-height: 44px; margin-top: var(--space-3); }

.dash-team-overdue-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--mg-soft-surface);
  border-radius: 8px;
}

.dash-team-overdue-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 32px;
}

.dash-team-overdue-list strong {
  min-width: 2ch;
  color: var(--mg-negative);
  font-feature-settings: "tnum";
  text-align: center;
}

.dash-team-overdue-empty { color: var(--mg-gray); }

.dash-hero-label {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--mg-charcoal);
}

.dash-hero-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.dash-hero-value {
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  line-height: 1;
  font-weight: 700;
  color: var(--mg-charcoal);
  font-feature-settings: "tnum";
}

.dash-hero--warning  .dash-hero-value { color: var(--mg-warning); }
.dash-hero--critical .dash-hero-value { color: var(--mg-negative); }

.dash-trend {
  font-size: 0.875rem;
  color: var(--mg-gray);
}

.dash-trend--up   { color: var(--mg-negative); }
.dash-trend--down { color: var(--mg-positive); }

.dash-hero-breakdown {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--mg-soft-surface);
  border-radius: 8px;
}

.dash-hero-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.dash-hero-breakdown strong {
  font-feature-settings: "tnum";
  color: var(--mg-charcoal);
}

.dash-mini-label {
  font-size: 0.8125rem;
  color: var(--mg-gray);
}

/* ---------------------------------------------------------------- */
/* 2. Waiting on you                                                 */
/* ---------------------------------------------------------------- */

.dash-waiting-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-waiting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--mg-border);
}

.dash-waiting-item:last-child { border-bottom: 0; }

.dash-waiting-link {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.dash-waiting-link:hover .dash-waiting-label { text-decoration: underline; }

.dash-waiting-label {
  font-weight: 500;
  color: var(--mg-charcoal);
  overflow-wrap: anywhere;
}

.dash-waiting-client {
  font-size: 0.8125rem;
  color: var(--mg-gray);
}

.dash-waiting-age {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 0.8125rem;
  font-feature-settings: "tnum";
  color: var(--mg-dark-gray);
  background: var(--mg-off-white);
  border-radius: 999px;
}

.dash-waiting-item.is-stale .dash-waiting-age {
  color: var(--mg-white);
  background: var(--mg-negative);
}

/* ---------------------------------------------------------------- */
/* 3. Content pipeline                                               */
/* ---------------------------------------------------------------- */

.dash-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.dash-filters select {
  padding: 6px 10px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--mg-charcoal);
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: 6px;
}

.dash-pipeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
  direction: rtl;
}

.dash-stage {
  display: grid;
  min-width: 0;
  min-height: 132px;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  background: var(--mg-soft-surface);
  border: 1px solid var(--mg-border);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.dash-stage.has-overdue {
  background: var(--mg-white);
  border-color: var(--mg-negative);
}

.dash-stage-name {
  min-height: 2.6em;
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--mg-gray);
  text-wrap: balance;
}

.dash-stage-count {
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
  color: var(--mg-charcoal);
  font-feature-settings: "tnum";
}

.dash-stage-status {
  min-height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  max-width: 100%;
  white-space: nowrap;
}

.dash-stage-clear {
  font-size: 0.75rem;
  color: var(--mg-positive);
}

@media (max-width: 1100px) {
  .dash-pipeline {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  }
}

@media (max-width: 640px) {
  .dash-pipeline {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 135px), 1fr));
    gap: var(--space-1);
  }

  .dash-stage {
    min-height: 116px;
    padding: var(--space-2) var(--space-1);
  }

  .dash-stage-count {
    font-size: 1.5rem;
  }
}

/* ---------------------------------------------------------------- */
/* 4. Team load bars                                                 */
/* ---------------------------------------------------------------- */

.dash-bars {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(60px, 2fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.dash-bar-name {
  font-weight: 500;
  color: var(--mg-charcoal);
  overflow-wrap: anywhere;
}

.dash-bar-track {
  display: block;
  height: 10px;
  background: var(--mg-off-white);
  border-radius: 999px;
  overflow: hidden;
}

.dash-bar-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: var(--mg-green);
}

.dash-bar-fill--warning  { background: var(--mg-warning); }
.dash-bar-fill--critical { background: var(--mg-negative); }

.dash-bar-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
}

.dash-bar-figures strong { font-feature-settings: "tnum"; }

/* Daily and overdue team work                                      */

.dash-daily-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-daily-team-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  background: var(--mg-soft-surface);
  border-radius: var(--radius-md);
}

.dash-daily-team-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dash-daily-count {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 48px;
  font-feature-settings: "tnum";
}

.dash-daily-count b { font-size: 1.1rem; }
.dash-daily-count.is-overdue b { color: var(--mg-negative); }

/* ---------------------------------------------------------------- */
/* 5. Client health table                                            */
/* ---------------------------------------------------------------- */

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.dash-table th,
.dash-table td {
  padding: var(--space-1) var(--space-2);
  text-align: start;
  border-bottom: 1px solid var(--mg-border);
}

.dash-table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mg-gray);
  white-space: nowrap;
}

.dash-table tbody th { font-weight: 500; }

.dash-table tbody tr:last-child th,
.dash-table tbody tr:last-child td { border-bottom: 0; }

.dash-table td { font-feature-settings: "tnum"; }

/* ---------------------------------------------------------------- */
/* 6. Finance                                                        */
/* ---------------------------------------------------------------- */

.dash-finance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-finance li {
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  background: var(--mg-soft-surface);
  border-radius: 8px;
}

.dash-finance strong {
  font-size: 1.125rem;
  font-feature-settings: "tnum";
  color: var(--mg-charcoal);
}

.dash-negative { color: var(--mg-negative); }

/* ---------------------------------------------------------------- */
/* Shared                                                            */
/* ---------------------------------------------------------------- */

.dash-note {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  color: var(--mg-gray);
}

/* ---------------------------------------------------------------- */
/* Narrow screens — laptop-first, but must stay usable on a phone     */
/* ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .dash-hero { grid-template-columns: 1fr; }
  .dash-overdue-grid { grid-template-columns: 1fr; }
  .dash-hero-value { font-size: 2.75rem; }
  .dash-bar-row { grid-template-columns: 1fr; gap: 6px; }
  .dash-filters { width: 100%; }
  .dash-filters select { flex: 1 1 auto; }
}

/* ================================================================ */
/* Task and workflow action panels                                  */
/* ================================================================ */

.task-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  background: var(--mg-soft-surface);
  border-radius: 8px;
}

.task-meta div { display: grid; gap: 2px; }
.task-meta dt { font-size: 0.8125rem; color: var(--mg-gray); }
.task-meta dd { margin: 0; font-weight: 500; color: var(--mg-charcoal); }

.task-status { margin: 0; font-size: 1.25rem; }

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: flex-start;
}

.task-actions form { margin: 0; }

.task-status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 11rem;
}

.task-actions-compact { gap: 6px; }
.task-actions-compact .btn { min-height: 32px; padding: 5px 9px; font-size: .8rem; }
.task-inline-error { color: var(--mg-negative); font-size: .78rem; }
.task-inline-notice { color: var(--mg-positive); font-size: .78rem; }

.task-delivery-action { position: relative; max-width: 100%; }
.task-delivery-action > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
}
.task-delivery-action > summary::-webkit-details-marker { display: none; }
.task-delivery-action[open] > summary { margin-bottom: var(--space-1); }
.task-delivery-form {
  display: grid;
  gap: var(--space-2);
  width: min(100%, 28rem);
  min-width: min(20rem, 100%);
  padding: var(--space-2);
  background: var(--mg-soft-surface);
  border: 1px solid var(--mg-border);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgb(20 35 50 / 8%);
}
.task-delivery-heading { display: grid; gap: 2px; }
.task-delivery-heading p { margin: 0; color: var(--mg-gray); font-size: .8rem; }
.task-delivery-field { display: grid; gap: 4px; }
.task-delivery-field > span { color: var(--mg-charcoal); font-size: .8125rem; font-weight: 600; }
.task-delivery-field small { color: var(--mg-gray); font-weight: 400; }
.task-delivery-field input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font: inherit;
  color: var(--mg-charcoal);
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: 6px;
  text-align: left;
}
.task-delivery-field input:focus-visible {
  outline: 3px solid rgb(42 157 143 / 24%);
  border-color: var(--mg-green);
}
.task-delivery-error,
.task-delivery-field-error {
  color: var(--mg-negative);
  font-size: .78rem;
}
.task-delivery-error:empty { display: none; }
.task-delivery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}
.task-delivery-form button[disabled] { opacity: .6; cursor: wait; }

.task-table-status-cell {
  min-width: 6rem;
  text-align: center !important;
  vertical-align: middle;
}

.task-table-status-control {
  display: grid;
  place-items: center;
  min-height: 2rem;
}

.task-table-status-control form { margin: 0; }

.task-table-status-checkbox {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  margin: 0;
  accent-color: var(--mg-green);
  cursor: pointer;
}

.task-table-status-checkbox:disabled {
  cursor: not-allowed;
  opacity: .65;
}

/* A reason box that is closed until needed keeps the row of buttons
   readable, and still works with JavaScript disabled. */
.task-action-reason { position: relative; }
.task-action-reason > summary { list-style: none; cursor: pointer; display: inline-block; }
.task-action-reason > summary::-webkit-details-marker { display: none; }

.task-action-reason[open] > summary { margin-bottom: var(--space-1); }

.task-action-reason form {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--mg-soft-surface);
  border: 1px solid var(--mg-border);
  border-radius: 8px;
  min-width: 260px;
}

@media (max-width: 640px) {
  .task-delivery-form {
    width: min(100vw - 2rem, 28rem);
    min-width: 0;
  }
  .task-delivery-actions > .btn { flex: 1 1 auto; justify-content: center; }
}

.task-action-reason textarea,
.comment-form textarea {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  color: var(--mg-charcoal);
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: 6px;
  resize: vertical;
}

.quick-update {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
  align-items: end;
}

.quick-update .field { display: grid; gap: 4px; }
.quick-update label { font-size: 0.8125rem; color: var(--mg-gray); }

.quick-update select,
.quick-update input {
  padding: 8px 10px;
  font: inherit;
  color: var(--mg-charcoal);
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: 6px;
}

.comment-form { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.comment-form button { justify-self: start; }

.comment {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--mg-border);
}
.comment:last-child { border-bottom: 0; }
.comment header { display: flex; gap: var(--space-1); align-items: baseline; }
.comment p { margin: 4px 0 0; }

.status-history { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.status-history li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: baseline;
  font-size: 0.875rem;
}

.stage-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }

.stage {
  display: grid;
  gap: 6px;
  padding: var(--space-2);
  background: var(--mg-soft-surface);
  border: 1px solid var(--mg-border);
  border-inline-start: 3px solid var(--mg-light-gray);
  border-radius: 8px;
}

.stage--approved { border-inline-start-color: var(--mg-positive); }
.stage--ready    { border-inline-start-color: var(--mg-warning); background: var(--mg-white); }
.stage--changes_requested { border-inline-start-color: var(--mg-negative); }

.stage-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-1); }
.stage-name { font-weight: 500; color: var(--mg-charcoal); }
.stage-meta { display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: 0.8125rem; color: var(--mg-gray); }

.slide-list { margin: 0; padding-inline-start: var(--space-2); display: grid; gap: var(--space-2); }

/* ================================================================ */
/* Reports                                                          */
/* ================================================================ */

.report-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }

.report-list a {
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  text-decoration: none;
  color: inherit;
  background: var(--mg-soft-surface);
  border: 1px solid var(--mg-border);
  border-radius: 8px;
}

.report-list a:hover { border-color: var(--mg-green); background: var(--mg-white); }
.report-list strong { color: var(--mg-charcoal); }

.report-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }

.report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.report-stat {
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-inline-start: 3px solid var(--mg-light-gray);
  border-radius: 8px;
}

.report-stat strong { font-size: 1.5rem; font-feature-settings: "tnum"; color: var(--mg-charcoal); }
.report-stat--positive { border-inline-start-color: var(--mg-positive); }
.report-stat--warning  { border-inline-start-color: var(--mg-warning); }
.report-stat--negative { border-inline-start-color: var(--mg-negative); }
.report-stat--negative strong { color: var(--mg-negative); }

/* ================================================================ */
/* Links panel                                                      */
/* ================================================================ */

.link-list { margin: 0 0 var(--space-2); padding: 0; list-style: none; }

.link-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--mg-border);
}

.link-item:last-child { border-bottom: 0; }
.link-item.is-primary { background: var(--mg-green-soft); border-radius: 6px; padding-inline: var(--space-1); }

.link-main { flex: 1; display: grid; gap: 2px; min-width: 0; text-decoration: none; color: inherit; }
.link-main:hover .link-title { text-decoration: underline; }
.link-title { font-weight: 500; color: var(--mg-charcoal); overflow-wrap: anywhere; }
.link-meta { font-size: 0.8125rem; color: var(--mg-gray); }

.link-form {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) minmax(120px, 1fr) minmax(110px, auto) auto auto;
  gap: var(--space-1);
  align-items: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--mg-border);
}

.link-form .field { display: grid; }

.link-form input,
.link-form select {
  padding: 8px 10px;
  font: inherit;
  color: var(--mg-charcoal);
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: 6px;
  min-width: 0;
}

.link-primary-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--mg-gray);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .link-form { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/*  Sidebar counter, notification bell, notification centre            */
/* ------------------------------------------------------------------ */

.nav-count {
  margin-inline-start: auto;
}

.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--mg-negative);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.bell {
  position: relative;
  text-decoration: none;
}

/* The badge sits on the bell's leading corner, which in RTL is the left. */
.bell-badge {
  position: absolute;
  top: -0.3rem;
  inset-inline-start: -0.3rem;
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.notif-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: 12px;
}

/* Unread is carried by weight and a solid dot, not by a coloured background:
   a page of coloured rows stops reading as "these need you". */
.notif-item.is-unread {
  border-color: var(--mg-light-gray);
  background: var(--mg-soft-surface);
}

.notif-dot {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--mg-light-gray);
  flex: none;
}

.notif-item.is-unread .notif-dot { background: var(--mg-info); }
.notif-item--warning.is-unread .notif-dot { background: var(--mg-warning); }
.notif-item--critical.is-unread .notif-dot { background: var(--mg-negative); }
.notif-item--success.is-unread .notif-dot { background: var(--mg-positive); }

.notif-main { flex: 1; min-width: 0; }

.notif-title {
  margin: 0;
  font-weight: 500;
  color: var(--mg-charcoal);
}

.notif-item.is-unread .notif-title { font-weight: 700; }

.notif-title a { color: inherit; text-decoration: none; }
.notif-title a:hover { text-decoration: underline; }

.notif-body {
    margin: 0.2rem 0 0;
    color: var(--mg-gray);
    font-size: 0.88rem;
    white-space: pre-line;
  }

  .notification-links {
    display: grid;
    gap: .35rem;
    margin: .55rem 0 0;
    padding: .55rem .75rem;
    border: 1px solid var(--mg-border);
    border-radius: .65rem;
    background: var(--mg-off-white);
    list-style: none;
  }
  .notification-links li { display: grid; gap: .1rem; }
  .notification-links a { color: var(--mg-green-dark); font-weight: 700; }
  .notification-links span { color: var(--mg-gray); font-size: .78rem; }

.notif-meta {
  margin: 0.35rem 0 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--mg-mid-gray);
  font-size: 0.78rem;
}

/* ------------------------------------------------------------------ */
/*  Content calendar                                                    */
/* ------------------------------------------------------------------ */

.cal-header { align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
.cal-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.cal-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
}

.cal-platform-picker { position: relative; min-width: 180px; }
.cal-platform-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--mg-border);
  border-radius: 8px;
  background: var(--mg-white);
  color: var(--mg-charcoal);
  cursor: pointer;
  list-style: none;
}
.cal-platform-picker > summary::-webkit-details-marker { display: none; }
.cal-platform-picker > summary::after { content: "⌄"; color: var(--mg-gray); }
.cal-platform-picker[open] > summary { border-color: var(--mg-green); box-shadow: 0 0 0 2px var(--mg-green-soft); }
.cal-platform-menu {
  position: absolute;
  z-index: 20;
  inset-inline-end: 0;
  top: calc(100% + 0.35rem);
  display: grid;
  gap: 0.2rem;
  min-width: 220px;
  padding: 0.55rem;
  border: 1px solid var(--mg-border);
  border-radius: 10px;
  background: var(--mg-white);
  box-shadow: 0 10px 24px rgba(20, 30, 20, 0.12);
}
.cal-platform-menu label { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.35rem; border-radius: 6px; cursor: pointer; }
.cal-platform-menu label:hover { background: var(--mg-soft-surface); }
.cal-platform-menu input { accent-color: var(--mg-green); }
.cal-platform-menu-actions { display: flex; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--mg-border); }

.cal-status { min-height: 1.25rem; margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--mg-gray); }
.cal-status.is-ok { color: var(--mg-positive); }
.cal-status.is-error { color: var(--mg-negative); }

.cal-grid {
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--mg-white);
}

.cal-weekdays, .cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-weekday {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mg-gray);
  background: var(--mg-soft-surface);
  border-bottom: 1px solid var(--mg-border);
}

.cal-day {
  min-height: 108px;
  padding: 0.35rem;
  border-inline-start: 1px solid var(--mg-border);
  border-bottom: 1px solid var(--mg-border);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cal-day:first-child { border-inline-start: 0; }

/* أيام الشهر المجاور موجودة عشان الأسبوع يكمل، مش عشان تتقرا — فبتبهت. */
.cal-day.is-outside { background: var(--mg-soft-surface); opacity: 0.55; }
.cal-day.is-weekend { background: #FCFCFA; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--mg-green); }
.cal-day.is-drop-target { background: var(--mg-green-soft); }

.cal-day-head { display: flex; justify-content: space-between; align-items: center; }
.cal-day-number { font-size: 0.8rem; font-weight: 600; color: var(--mg-dark-gray); }
.cal-day.is-today .cal-day-number { color: var(--mg-green-dark); }

.cal-day-count {
  font-size: 0.68rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--mg-light-gray);
  color: var(--mg-charcoal);
}
.cal-day-count.is-busy { background: var(--mg-warning); color: #fff; }

.cal-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  background: var(--mg-off-white);
  color: var(--mg-charcoal);
  font-size: 0.74rem;
  text-decoration: none;
  cursor: grab;
}
.cal-item:hover { background: var(--mg-green-soft); }

.cal-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-item-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
  background: var(--mg-mid-gray);
  display: inline-block;
}

/* اللون بيقول المرحلة من نظرة، من غير ما حد يقرا الحالة في كل بطاقة. */
.cal-item--draft .cal-item-dot,        .cal-item--draft.cal-item-dot        { background: var(--mg-mid-gray); }
.cal-item--planned .cal-item-dot,      .cal-item--planned.cal-item-dot      { background: var(--mg-mid-gray); }
.cal-item--in_progress .cal-item-dot,  .cal-item--in_progress.cal-item-dot  { background: var(--mg-info); }
.cal-item--in_review .cal-item-dot,    .cal-item--in_review.cal-item-dot    { background: var(--mg-warning); }
.cal-item--changes_requested .cal-item-dot { background: var(--mg-negative); }
.cal-item--approved .cal-item-dot,     .cal-item--approved.cal-item-dot     { background: var(--mg-green-secondary); }
.cal-item--ready_to_schedule .cal-item-dot, .cal-item--ready_to_schedule.cal-item-dot { background: var(--mg-green-secondary); }
.cal-item--scheduled .cal-item-dot,    .cal-item--scheduled.cal-item-dot    { background: var(--mg-green); }
.cal-item--published .cal-item-dot,    .cal-item--published.cal-item-dot    { background: var(--mg-green-dark); }
.cal-item--blocked .cal-item-dot       { background: var(--mg-negative); }

.cal-empty { color: var(--mg-light-gray); font-size: 0.7rem; margin-top: auto; }
.cal-add-content {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #dce8d2;
  border-radius: 50%;
  background: var(--mg-green-soft);
  color: var(--mg-green-dark);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.cal-add-content:hover { background: var(--mg-green); color: #fff; }
.cal-add-content:focus-visible { outline: 3px solid rgba(95, 145, 53, 0.35); outline-offset: 2px; }

.cal-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0 0;
  margin: 0;
  font-size: 0.76rem;
  color: var(--mg-gray);
}
.cal-legend li { display: flex; align-items: center; gap: 0.3rem; }
.cal-legend-count {
  display: inline-grid;
  min-inline-size: 1.45rem;
  block-size: 1.45rem;
  place-items: center;
  padding-inline: .3rem;
  border: 1px solid color-mix(in srgb, var(--mg-green) 35%, var(--mg-border));
  border-radius: 999px;
  background: var(--mg-green-soft);
  color: var(--mg-green-dark);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.cal-busy-key {
  width: 0.7rem; height: 0.7rem; border-radius: 3px;
  background: var(--mg-warning); display: inline-block;
}

.cal-breakdown ul { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.cal-breakdown li { display: flex; gap: 0.35rem; align-items: baseline; }

/* ------------------------------------------------------------------ */
/*  Important occasions calendar                                       */
/* ------------------------------------------------------------------ */

.important-occasions-header { align-items: flex-end; gap: 1rem; }
.important-occasion-toolbar {
  display: grid;
  gap: .75rem;
  margin-bottom: .65rem;
  padding: .75rem;
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  background: var(--mg-white);
}
.important-occasion-month-nav,
.important-occasion-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.important-occasion-month-nav strong { min-inline-size: 10rem; text-align: center; font-size: 1.05rem; }
.important-occasion-filters { justify-content: flex-start; }
.important-occasion-filters label { display: inline-flex; align-items: center; gap: .4rem; color: var(--mg-gray); font-size: .82rem; }
.important-occasion-filters select { min-inline-size: 10rem; }
.important-occasion-count { margin: 0 0 .6rem; color: var(--mg-gray); font-size: .85rem; }
.important-occasion-calendar { overflow: hidden; border: 1px solid var(--mg-border); border-radius: 14px; background: var(--mg-white); }
.important-occasion-weekdays,
.important-occasion-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.important-occasion-weekdays { background: var(--mg-soft-surface); color: var(--mg-gray); font-size: .78rem; font-weight: 700; text-align: center; }
.important-occasion-weekdays > div { padding: .65rem .4rem; border-inline-start: 1px solid var(--mg-border); }
.important-occasion-weekdays > div:first-child { border-inline-start: 0; }
.important-occasion-day { min-block-size: 9.5rem; padding: .55rem; border-top: 1px solid var(--mg-border); border-inline-start: 1px solid var(--mg-border); }
.important-occasion-day:first-child { border-inline-start: 0; }
.important-occasion-day.is-outside { background: var(--mg-soft-surface); opacity: .55; }
.important-occasion-day.is-today { box-shadow: inset 0 0 0 2px var(--mg-green); }
.important-occasion-day > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; color: var(--mg-dark-gray); font-size: .8rem; font-weight: 700; }
.important-occasion-day > header small { color: var(--mg-green-dark); font-size: .68rem; }
.important-occasion-day-items { display: grid; gap: .35rem; }
.important-occasion-card { display: grid; gap: .12rem; padding: .42rem .5rem; border: 1px solid #e6eadf; border-inline-start: 3px solid var(--mg-green); border-radius: 8px; background: var(--mg-off-white); color: var(--mg-charcoal); text-decoration: none; font-size: .72rem; line-height: 1.45; }
.important-occasion-card:hover { border-color: var(--mg-green-secondary); background: var(--mg-green-soft); }
.important-occasion-card strong { overflow: hidden; text-overflow: ellipsis; }
.important-occasion-card span { color: var(--mg-gray); }
.important-occasion-card em { color: var(--mg-green-dark); font-size: .68rem; font-style: normal; }
.important-occasion-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.important-occasion-actions form { margin: 0; }
.important-occasion-actions button { border: 0; background: none; color: var(--mg-negative); font: inherit; cursor: pointer; }
.important-occasion-form { max-inline-size: 56rem; }
.important-occasion-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.important-occasion-form-grid label { display: grid; gap: .35rem; color: var(--mg-gray); font-size: .82rem; }
.important-occasion-form-grid label.span-full { grid-column: 1 / -1; }
.important-occasion-form-grid input,
.important-occasion-form-grid textarea { inline-size: 100%; }
.important-occasion-form-grid ul.errorlist { margin: 0; padding: 0; color: var(--mg-negative); list-style: none; }

@media (max-width: 720px) {
  .important-occasion-weekdays { display: none; }
  .important-occasion-week { display: block; }
  .important-occasion-day { min-block-size: 0; border-inline-start: 0; }
  .important-occasion-day.is-outside { display: none; }
  .important-occasion-day > header::after { content: ""; }
  .important-occasion-card { min-block-size: 44px; font-size: .8rem; }
  .important-occasion-form-grid { grid-template-columns: 1fr; }
  .important-occasion-form-grid label.span-full { grid-column: auto; }
  .important-occasion-month-nav strong { flex: 1 1 100%; order: -1; }
  .important-occasion-filters label,
  .important-occasion-filters select,
  .important-occasion-filters .btn { inline-size: 100%; }
  .important-occasion-filters label { display: grid; }
}

/* على الموبايل الشبكة بتبقى غير مقروءة، فبتتحوّل لأعمدة يوم في السطر. */
@media (max-width: 720px) {
  .cal-weekdays { display: none; }
  .cal-week { grid-template-columns: 1fr; }
  .cal-day { min-height: 0; border-inline-start: 0; }
  .cal-day.is-outside { display: none; }
  .cal-day-head::after { content: attr(data-label); }
}

/* ------------------------------------------------------------------ */
/*  Client 360                                                          */
/* ------------------------------------------------------------------ */

.c360-hero { margin-bottom: 1rem; }
.c360-links-inline { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

.c360-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1rem;
  align-items: start;
}

.c360-problems { border-inline-start: 3px solid var(--mg-negative); margin-bottom: 1rem; }

.c360-problem-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.c360-problem {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: var(--mg-off-white);
  font-size: 0.85rem;
}
.c360-problem strong { font-size: 1.05rem; }
.c360-problem--critical { background: #FBEDEC; color: var(--mg-negative); }
.c360-problem--warning { background: #FBF3E6; color: var(--mg-warning); }
.c360-problem a { color: inherit; }

.c360-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.c360-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--mg-border);
  font-size: 0.88rem;
}
.c360-list li:last-child { border-bottom: 0; }

.c360-meta { color: var(--mg-gray); font-size: 0.78rem; white-space: nowrap; }
.c360-subhead { margin: 0; font-size: 0.85rem; color: var(--mg-gray); font-weight: 600; }
.c360-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

/* ------------------------------------------------------------------ */
/*  Icons and the client platform row                                   */
/* ------------------------------------------------------------------ */

.icon {
  display: inline-block;
  vertical-align: -0.18em;
  flex: none;
}

.platform-icon { display: inline-flex; align-items: center; }

.platform-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
  padding: 0;
  margin: 0.75rem 0 0;
}

.platform-slot a,
.platform-slot > span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--mg-border);
  border-radius: 10px;
  background: var(--mg-white);
  text-decoration: none;
  color: var(--mg-charcoal);
  min-width: 0;
}

.platform-slot a:hover { border-color: var(--mg-green); background: var(--mg-green-soft); }

.platform-copy { min-width: 0; display: block; }

.platform-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.platform-handle {
  display: block;
  font-size: 0.7rem;
  color: var(--mg-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* الناقص بيبان باهتًا مش مختفيًا: غيابه معلومة. */
.platform-slot.is-missing a {
  background: var(--mg-soft-surface);
  border-style: dashed;
  opacity: 0.62;
}
.platform-slot.is-missing:hover a { opacity: 1; }

.platform-extra-head { margin-top: 1rem; }

/* الأيقونات في القوائم والأزرار تاخد لون النص نفسه. */
.nav-item .icon, .btn .icon, .icon-btn .icon, .mg-card-header .icon { color: currentColor; }
.global-search-form { display: grid; gap: .65rem; }
.global-search-form .form-inline { display: flex; gap: .6rem; align-items: end; }
.global-search-form input { flex: 1; min-width: 0; }
.search-results { display: grid; gap: .55rem; }
.search-result { display: flex; align-items: center; gap: .8rem; padding: .8rem; border: 1px solid var(--border, #e5e7eb); border-radius: .7rem; text-decoration: none; color: inherit; }
.search-result:hover, .search-result:focus-visible { background: #f8fafc; border-color: #9333ea; }
.search-result strong, .search-result small { display: block; }
.search-result small { color: #64748b; margin-top: .18rem; }
.access-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.access-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.access-card { display: grid; gap: .9rem; }
.access-card-header, .access-card-meta, .preset-form, .scope-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.access-card-header h3 { margin: 0; }
.access-card-header p { margin: .25rem 0 0; }
.scope-list { display: grid; gap: .35rem; margin-top: .75rem; }
.scope-row { border-bottom: 1px solid #eef2f7; padding: .45rem 0; font-size: .9rem; }
.preset-form { border-top: 1px solid #eef2f7; padding-top: .8rem; flex-wrap: wrap; }
.preset-form select { flex: 1; min-width: 170px; }
@media (max-width: 640px) { .global-search-form .form-inline { display: grid; grid-template-columns: 1fr; } }

.push-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--mg-border);
  border-radius: 10px;
  background: var(--mg-soft-surface);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

/* The HTML `hidden` attribute must win over the flex layout above. */
.push-banner[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/*  My tasks tabs                                                       */
/* ------------------------------------------------------------------ */

.mine-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--mg-border);
  padding-bottom: 0.6rem;
}

.mine-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: max-content;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--mg-gray);
  font-size: 0.85rem;
}
.mine-tab:hover { background: var(--mg-off-white); color: var(--mg-charcoal); }
.mine-tab.is-active { background: var(--mg-green-soft); color: var(--mg-green-dark); border-color: var(--mg-green); font-weight: 600; }
.mine-tab.is-danger .mine-count { background: var(--mg-negative); color: #fff; }

@media (max-width: 640px) {
  .mine-tabs { flex-wrap: nowrap; padding-bottom: 0.45rem; }
  .mine-tab { flex: 0 0 auto; }
}

.mine-count {
  background: var(--mg-light-gray);
  color: var(--mg-charcoal);
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.dash-table tr.is-late th a { color: var(--mg-negative); }

/* Notification cards — icon, meaning, one button */
.notif-icon { flex: none; color: var(--mg-gray); margin-top: 0.15rem; }
.notif-item--critical .notif-icon { color: var(--mg-negative); }
.notif-item--warning .notif-icon { color: var(--mg-warning); }
.notif-item--success .notif-icon { color: var(--mg-positive); }

.notif-action { flex: none; align-self: center; white-space: nowrap; }
.notif-filters { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }

.badge-danger { background: #FBEDEC; color: var(--mg-negative); }

/* الحالة مش بتعتمد على اللون وحده: النص جنب اللون دايمًا. */
.status-pill::before { content: ""; }

/* ====================================================================== */
/*  إضافات: أفاتار، مشاريع، نماذج الإضافة، الحالة الفاضية                */
/*  الصق المحتوى ده في آخر static/css/rtl.css                             */
/* ====================================================================== */

/* --- أفاتار الأشخاص ---------------------------------------------------- */
.mg-avatar {
  --avatar-size: 32px;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-size: calc(var(--avatar-size) * 0.42);
  font-weight: 700;
  line-height: 1;
  object-fit: cover;
  user-select: none;
}
.mg-avatar-stack { display: inline-flex; }
.mg-avatar-stack .mg-avatar { box-shadow: 0 0 0 2px #fff; }
.mg-avatar-stack .mg-avatar + .mg-avatar { margin-inline-start: -8px; }
.mg-person { display: inline-flex; align-items: center; gap: 0.45rem; }
.person-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }

/* --- كارت حالة إشعارات المتصفح ---------------------------------------- */
.push-status {
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  background: var(--mg-soft-surface);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
.push-status__head { display: flex; align-items: center; gap: 0.65rem; }
.push-status__head h3 { margin: 0; font-size: 0.95rem; }
.push-status__head > .badge { margin-inline-start: auto; }
.push-status__hint { color: var(--mg-gray); margin: 0.5rem 0 0; }
.push-status__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.badge--ok { background: var(--mg-green-soft); color: var(--mg-green); }
.badge--warn { background: #fff4e0; color: #a86400; }
.badge--bad { background: #fdeaea; color: #b32020; }

/* --- المشاريع ---------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.project-card header { display: flex; align-items: flex-start; gap: 0.5rem; }
.project-card header h3 { margin: 0; font-size: 1rem; flex: 1; }
.project-card footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-top: 0.75rem;
}
.project-card.is-late { border-inline-start: 3px solid #b32020; }

.progress {
  block-size: 6px;
  border-radius: 999px;
  background: var(--mg-border);
  overflow: hidden;
  margin: 0.6rem 0 0.35rem;
}
.progress > span { display: block; block-size: 100%; background: var(--mg-green); }

.stat-row {
  display: grid; gap: 0.75rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.stat {
  border: 1px solid var(--mg-border); border-radius: 10px;
  padding: 0.65rem 0.8rem; background: var(--mg-soft-surface);
}
.stat-label { display: block; font-size: 0.75rem; color: var(--mg-gray); }
.stat strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* --- نماذج الإضافة ------------------------------------------------------ */
.form-stack { display: grid; gap: 0.9rem; }
.form-row { display: grid; gap: 0.3rem; }
.form-row label { font-weight: 600; font-size: 0.85rem; }
.form-row input, .form-row select, .form-row textarea { inline-size: 100%; }
.form-error { color: #b32020; font-size: 0.8rem; margin: 0; }
.form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.direction-picker { border: 0; padding: 0; margin: 0; }
.direction-picker legend { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; }
.direction-option {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--mg-border); border-radius: 10px;
  padding: 0.5rem 0.75rem; margin-inline-end: 0.5rem; margin-block-end: 0.5rem;
  cursor: pointer;
}
.direction-option:has(input:checked) {
  border-color: var(--mg-green); background: var(--mg-green-soft);
}

.totals { display: grid; grid-template-columns: auto auto; gap: 0.3rem 1.5rem; justify-content: start; margin-top: 1rem; }
.totals dt { color: var(--mg-gray); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }

/* --- الحالة الفاضية ----------------------------------------------------- */
/* الحالة الفاضية معرّفة فوق أصلًا — هنا بس اللمسة اللي بتفرّقها عن فراغ الصفحة. */
.empty-state { border: 1px dashed var(--mg-border); border-radius: 12px; gap: 0.5rem; }
.empty-state p { margin: 0; }
.text-danger { color: #b32020; }
.num { font-variant-numeric: tabular-nums; }

/* شريط التصفية — الكلاس كان مستعمل في الصفحات من غير ستايل. */
.dash-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;
}
.dash-filters .btn.active {
  border-color: var(--mg-green); background: var(--mg-green-soft); color: var(--mg-green);
}

/* Unified quick-create flow */
.quick-create {
  position: relative;
}

.quick-create-trigger {
  min-height: 42px;
  padding-inline: 16px;
  box-shadow: 0 5px 16px rgba(95, 145, 53, 0.18);
}

.quick-create-menu {
  width: min(340px, calc(100vw - 32px));
  min-width: 300px;
  padding: 10px;
}

.quick-create-menu-head {
  padding: 6px 10px 10px;
  color: var(--mg-gray);
  font-size: 0.75rem;
  font-weight: 700;
}

.quick-create-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--mg-charcoal);
}

.quick-create-item > span:first-child {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: var(--mg-green-soft);
  color: var(--mg-green-dark);
}

.quick-create-item > span:last-child {
  display: grid;
  line-height: 1.35;
}

.quick-create-item small {
  margin-top: 2px;
  color: var(--mg-gray);
  font-size: 0.72rem;
}

.quick-create-all {
  display: block;
  margin-top: 6px;
  padding: 10px 12px 4px;
  border-top: 1px solid var(--mg-border);
  color: var(--mg-green-dark);
  font-size: 0.82rem;
  font-weight: 700;
}

.create-page-head {
  margin-bottom: var(--space-3);
}

.create-lead {
  max-width: 720px;
  margin: 4px 0 0;
  color: var(--mg-gray);
}

.create-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.create-title-icon,
.create-card-icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #dce8d2;
  border-radius: 12px;
  background: var(--mg-green-soft);
  color: var(--mg-green-dark);
}

.create-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.create-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 112px;
  padding: var(--space-3);
  border: 1px solid var(--mg-border);
  border-radius: 14px;
  background: var(--mg-white);
  color: var(--mg-charcoal);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.create-card:hover {
  transform: translateY(-2px);
  border-color: var(--mg-green-secondary);
  box-shadow: 0 10px 24px rgba(5, 5, 5, 0.06);
  color: var(--mg-charcoal);
}

.create-card > span:nth-child(2) {
  display: grid;
}

.create-card strong {
  color: var(--mg-black);
  font-size: 1.05rem;
}

.create-card small {
  margin-top: 5px;
  color: var(--mg-gray);
  line-height: 1.6;
}

.create-card-arrow {
  color: var(--mg-green-dark);
  font-size: 1.25rem;
}

.create-form {
  max-width: 980px;
  margin-inline: auto;
  padding: var(--space-4);
}

.create-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.create-section-head h3,
.create-section-head p {
  margin: 0;
}

.create-section-head p {
  margin-top: 4px;
  color: var(--mg-gray);
  font-size: .875rem;
}

.required-mark {
  color: var(--mg-negative);
}

.create-advanced {
  margin-top: var(--space-3);
  border-top: 1px solid var(--mg-border);
}

.create-advanced summary {
  padding: var(--space-2) 0;
  color: var(--mg-charcoal);
  font-weight: 700;
  cursor: pointer;
}

.create-advanced summary small {
  margin-inline-start: 6px;
  color: var(--mg-gray);
  font-weight: 500;
}

.create-advanced-grid {
  padding-top: var(--space-1);
}

.create-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--mg-border);
}

.content-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas:
    "workflow caption tov"
    "workflow links links";
  gap: var(--space-3);
  align-items: stretch;
  direction: rtl;
  margin-bottom: var(--space-4);
}

.content-detail-column {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}

.content-detail-column--workflow {
  grid-area: workflow;
  align-content: stretch;
}
.content-detail-column--caption { grid-area: caption; }
.content-detail-column--tov { grid-area: tov; }
.content-detail-column--links { grid-area: links; }

.content-detail-panel--workflow {
  display: flex;
  min-width: 0;
}

.content-detail-panel--workflow > #workflow-panel,
.content-detail-panel--workflow > .mg-card {
  flex: 1;
  min-width: 0;
}

.content-detail-panel--workflow > #workflow-panel {
  display: flex;
  flex-direction: column;
}

.content-detail-panel--workflow > #workflow-panel > .mg-card {
  flex: 1;
  margin-bottom: 0;
}

.content-detail-card,
.content-detail-column--links > #links-panel,
.content-summary-card,
.content-copy-card {
  display: grid;
  gap: 1rem;
}

.content-detail-card,
.content-detail-column--links > #links-panel {
  margin-bottom: 0;
}

.content-detail-card .content-copy-value,
.content-detail-card h3,
.content-detail-card .eyebrow {
  overflow-wrap: anywhere;
}

.content-meta-grid,
.content-ownership-grid,
.content-copy-grid {
  display: grid;
  gap: .85rem;
}

.content-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-meta-item,
.content-ownership-grid > div,
.content-copy-block {
  min-width: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--mg-border);
  border-radius: .75rem;
  background: var(--mg-off-white);
}

.content-meta-item {
  display: grid;
  gap: .3rem;
}

.content-meta-label,
.content-ownership-grid dt {
  color: var(--mg-gray);
  font-size: .78rem;
}

.content-meta-item strong,
.content-ownership-grid dd {
  overflow-wrap: anywhere;
}

.content-ownership-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.content-ownership-grid dd {
  margin: .25rem 0 0;
  font-weight: 700;
}

.content-copy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-copy-block {
  display: grid;
  align-content: start;
  gap: .55rem;
}

.content-copy-block h4,
.content-copy-block .eyebrow {
  margin: 0;
}

.content-copy-value {
  min-height: 0;
  margin: 0;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.platform-review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .85rem 0;
}

.platform-review-summary span,
.platform-readiness {
  padding: .35rem .65rem;
  border: 1px solid var(--mg-border);
  border-radius: 999px;
  color: var(--mg-gray);
  font-size: .78rem;
}

.social-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.social-preview-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mg-border);
  border-radius: .9rem;
  background: var(--mg-white);
}

.social-preview-header,
.social-preview-caption,
.social-preview-visual,
.platform-placement-note,
.social-preview-empty,
.platform-readiness {
  margin: 0;
  padding: .85rem 1rem;
}

.social-preview-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px solid var(--mg-border);
}

.social-preview-header div {
  display: grid;
  gap: .15rem;
}

.social-preview-header span,
.platform-placement-note {
  color: var(--mg-gray);
  font-size: .78rem;
}

.social-preview-header h4,
.social-preview-header .eyebrow {
  margin: 0;
}

.social-preview-visual {
  display: grid;
  align-content: center;
  min-height: 12rem;
  border-block: 1px solid var(--mg-border);
  background: var(--mg-off-white);
  text-align: center;
}

.social-preview-caption {
  min-height: 8rem;
}

.platform-readiness {
  border: 0;
  border-top: 1px solid var(--mg-border);
  border-radius: 0;
}

.platform-readiness.is-ready {
  color: var(--mg-success, #1f6f43);
}

.platform-readiness.needs-copy {
  color: var(--mg-danger, #9f2d2d);
}

@media (max-width: 1100px) {
  .social-preview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .content-meta-grid,
  .content-ownership-grid,
  .content-copy-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .content-detail-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "workflow"
      "caption"
      "tov"
      "links";
  }
}

@media (max-width: 760px) {
  .create-card-grid {
    grid-template-columns: 1fr;
  }

  .create-form {
    padding: var(--space-2);
  }
}

@media (max-width: 639px) {
  .create-form .field,
  .create-form .field-choice-group {
    gap: .5rem;
  }

  .create-form #id_platform {
    grid-template-columns: 1fr;
  }

  .create-form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .quick-create-trigger {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    padding: 0;
  }

  .quick-create-trigger span {
    display: none;
  }

  .quick-create-menu {
    position: fixed;
    inset-inline: 16px;
    inset-block-start: 70px;
    width: auto;
    min-width: 0;
  }

  .create-card {
    grid-template-columns: 44px 1fr auto;
    min-height: 96px;
    padding: var(--space-2);
  }

  .create-title-icon {
    width: 42px;
    height: 42px;
  }

  .create-form-actions .btn {
    flex: 1;
  }
}

/* MG-UNIFIED-CREATE-V2: always-visible launcher and dashboard actions */
.new-feature-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
}

.dashboard-create-panel {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid #dce8d2;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbfdf9 0%, #f3f8ee 100%);
}
.dashboard-create-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.dashboard-create-head h2,
.dashboard-create-head p { margin: 0; }
.dashboard-create-head > div > p:last-child { margin-top: 5px; color: var(--mg-gray); }
.dashboard-create-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-create-grid > a {
  display: grid;
  gap: 5px;
  min-height: 116px;
  padding: 14px;
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  background: #fff;
  color: var(--mg-charcoal);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dashboard-create-grid > a:hover {
  transform: translateY(-2px);
  border-color: var(--mg-green-secondary);
  box-shadow: 0 8px 22px rgba(5,5,5,.06);
  color: var(--mg-charcoal);
}
.dashboard-create-grid > a > span { color: var(--mg-green-dark); }
.dashboard-create-grid strong { color: var(--mg-black); }
.dashboard-create-grid small { color: var(--mg-gray); line-height: 1.5; }

@media (max-width: 1180px) {
  .dashboard-create-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .new-feature-chip { display: none; }
  .dashboard-create-head { align-items: stretch; flex-direction: column; }
  .dashboard-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-create-grid > a { min-height: 102px; }
}

/* ---------------------------------------------------------------- */
/* Phase 3 — Client 360 workspace / simple nav additions             */
/* ---------------------------------------------------------------- */

/* MG-SIMPLE-NAV-V1: six-section navigation and work command centre */
.sidebar-footnote {
  display: grid;
  gap: 4px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--mg-border);
  color: var(--mg-gray);
  font-size: .72rem;
  line-height: 1.55;
}

.work-hub-head {
  align-items: center;
}

.work-command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.work-command-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--mg-border);
  border-radius: 14px;
  background: var(--mg-white);
  color: var(--mg-charcoal);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.work-command-card:hover {
  transform: translateY(-2px);
  border-color: var(--mg-green-secondary);
  box-shadow: 0 10px 28px rgba(5, 5, 5, .06);
  color: var(--mg-charcoal);
}

.work-command-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  background: var(--mg-green-soft);
  color: var(--mg-green-dark);
}

.work-command-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.work-command-copy strong {
  color: var(--mg-black);
  font-size: 1rem;
}

.work-command-copy small {
  color: var(--mg-gray);
  line-height: 1.55;
}

.work-command-number {
  min-width: 42px;
  color: var(--mg-black);
  font-family: var(--font-en);
  font-size: 1.65rem;
  font-weight: 700;
  text-align: center;
}

.work-command-arrow {
  color: var(--mg-green-dark);
  font-size: 1.35rem;
}

.work-alert-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: var(--space-3);
}

.work-alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--mg-border);
  border-radius: 10px;
  background: var(--mg-white);
  color: var(--mg-charcoal);
}

.work-alert-item strong {
  font-family: var(--font-en);
  font-size: 1.1rem;
}

.work-alert-item.is-danger {
  border-color: #f2c9c9;
  background: #fff7f7;
}

.work-alert-item.is-warning {
  border-color: #ead7a5;
  background: #fffaf0;
}

.work-simple-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-simple-list li + li {
  border-top: 1px solid var(--mg-border);
}

.work-simple-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  color: var(--mg-charcoal);
}

.work-simple-list a > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.work-simple-list strong {
  overflow: hidden;
  color: var(--mg-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-simple-list small,
.work-simple-list time {
  color: var(--mg-gray);
  font-size: .78rem;
}

.system-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 900px;
}

.system-tool-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 16px;
  padding: 22px;
  border: 1px solid var(--mg-border);
  border-radius: 14px;
  background: var(--mg-white);
  color: var(--mg-charcoal);
}

.google-drive-settings-card {
  display: block;
  width: min(100%, 900px);
  margin-inline: auto;
}

.google-drive-settings-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.google-drive-settings-heading h3 {
  margin: 0;
  color: var(--mg-black);
  font-size: 1.05rem;
}

.google-drive-settings-heading > span {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border-radius: 12px;
  background: var(--mg-soft-surface);
  color: var(--mg-charcoal);
}

.google-drive-settings-card .important-occasion-form-grid {
  margin-bottom: 0;
}

.google-drive-settings-card .google-drive-enabled-field {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.google-drive-settings-card .google-drive-enabled-field input[type="checkbox"] {
  inline-size: auto;
  margin: 0;
}

.system-tool-card > span {
  display: grid;
  grid-row: 1 / span 2;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 12px;
  background: var(--mg-soft-surface);
  color: var(--mg-charcoal);
}

.system-tool-card strong {
  align-self: end;
  color: var(--mg-black);
  font-size: 1.05rem;
}

.system-tool-card small {
  color: var(--mg-gray);
  line-height: 1.6;
}

@media (max-width: 980px) {
    .work-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .work-alert-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .work-command-grid,
      .work-alert-strip,
      .system-tool-grid { grid-template-columns: 1fr; }

    .work-command-card { min-height: 98px; padding: 14px; }

    .work-hub-head { align-items: flex-start; }

    .work-hub-head .btn { width: 100%; }
}

/* ==========================================================================
   Client 360 workspace — Phase 3
   ========================================================================== */
.client-workspace { display: grid; gap: 1rem; }

.client-workspace-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    margin: 0;
}

.client-workspace-identity { min-width: 0; }

.client-workspace-title-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.client-workspace-title-row h2 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.9rem); }

.client-workspace-actions,
.workspace-panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.client-workspace-tabs {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--mg-border);
    border-radius: 12px;
    scrollbar-width: thin;
}

.client-workspace-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .7rem .85rem;
    border-radius: .65rem;
    color: var(--mg-gray);
    text-decoration: none;
    font-size: .83rem;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.client-workspace-tab:hover { background: var(--mg-off-white); color: var(--mg-black); }

.client-workspace-tab.active {
    color: var(--mg-black);
    background: #eef6e8;
    box-shadow: inset 0 0 0 1px rgba(127,179,77,.35);
}

.client-workspace-tab strong {
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
    font-size: .72rem;
}

.client-workspace-tab.active strong { background: var(--mg-green); color: #fff; }

.workspace-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.workspace-metric {
    display: grid;
    gap: .25rem;
    min-width: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--mg-border);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

.workspace-metric:hover { border-color: rgba(127,179,77,.65); box-shadow: 0 8px 22px rgba(17,17,17,.06); }

.workspace-metric > span { color: var(--mg-gray); font-size: .78rem; }

.workspace-metric > strong { font-size: 1.45rem; line-height: 1.2; overflow-wrap: anywhere; }

.workspace-metric > small { color: var(--mg-gray); font-size: .72rem; }

.workspace-quick-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .7rem;
}

.workspace-quick-actions > a {
    display: grid;
    gap: .25rem;
    align-content: start;
    min-height: 112px;
    padding: .9rem;
    border: 1px solid var(--mg-border);
    border-radius: 12px;
    background: #fff;
    color: var(--mg-black);
    text-decoration: none;
}

.workspace-quick-actions > a:hover { border-color: var(--mg-green); transform: translateY(-1px); }

.workspace-quick-actions > a > span { color: var(--mg-green); }

.workspace-quick-actions strong { font-size: .86rem; }

.workspace-quick-actions small { color: var(--mg-gray); font-size: .72rem; line-height: 1.55; }

.client-workspace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    gap: 1rem;
    align-items: stretch;
}

.client-workspace-grid > .mg-card {
    min-width: 0;
    height: 100%;
}

.workspace-span-2 { grid-column: span 2; }

.workspace-tab-panel { display: grid; gap: 1rem; }

.workspace-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

.workspace-panel-head h2 { margin: .15rem 0 0; font-size: 1.2rem; }

.workspace-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(4, auto);
    gap: .55rem;
    align-items: end;
    padding: .75rem;
    border-radius: .75rem;
    background: var(--mg-off-white);
}

.workspace-filter input,
.workspace-filter select {
    width: 100%;
    min-height: 42px;
    padding: .55rem .7rem;
    border: 1px solid var(--mg-border);
    border-radius: .55rem;
    background: #fff;
    font: inherit;
    font-size: .8rem;
}

/* Client reference forms: fields keep a readable minimum width and reflow as
   a group instead of collapsing textareas into tiny native controls. */
.workspace-reference-form {
    display: grid;
    gap: .65rem;
    align-items: stretch;
    width: 100%;
}

.workspace-reference-form input,
.workspace-reference-form select,
.workspace-reference-form textarea {
    min-width: 0;
}

.workspace-reference-form textarea {
    min-height: 88px;
    resize: none;
    overflow-y: hidden;
    line-height: 1.65;
}

.workspace-idea-form {
    grid-template-columns: minmax(0, 1.35fr) minmax(150px, .65fr);
}

.workspace-idea-form textarea {
    grid-column: 1 / -1;
}

.workspace-reference-form .btn {
    justify-self: start;
    min-height: 42px;
}

.client-reference-grid {
    margin-top: 1rem;
}

.content-delete-toolbar {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    margin: 0 0 .8rem;
    padding: .7rem .85rem;
    border: 1px solid var(--mg-border);
    border-radius: .8rem;
    background: var(--mg-surface-muted, #fafaf8);
}

.content-delete-toolbar span {
    color: var(--mg-gray);
    font-size: .82rem;
    flex: 1 1 16rem;
}

.content-delete-toolbar .btn {
    margin-inline-start: auto;
}

.dash-table input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--mg-green);
}

.workspace-competitor-form {
    grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr);
}

.workspace-competitor-form textarea,
.workspace-competitor-form .btn {
    grid-column: 1 / -1;
}

@media (max-width: 620px) {
    .workspace-idea-form,
    .workspace-competitor-form {
        grid-template-columns: 1fr;
    }

    .workspace-idea-form textarea,
    .workspace-competitor-form textarea,
    .workspace-competitor-form .btn {
        grid-column: auto;
    }
}

.workspace-table { min-width: 760px; }

.content-selection-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .7rem;
    min-height: 42px;
}

.content-selection-column {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.content-selection-head {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.content-selection-column input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    accent-color: var(--mg-green);
    cursor: pointer;
}

/* Scoped bulk deletion edit mode. */
.bulk-edit-root { position: relative; }
.bulk-delete-form {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    padding: .65rem .8rem;
    border: 1px solid var(--mg-border);
    border-radius: 10px;
    background: var(--mg-soft-surface);
}
.bulk-delete-form[hidden] { display: none; }
.bulk-selection-column { display: none; width: 1%; white-space: nowrap; text-align: center; }
.bulk-edit-root.is-editing .bulk-selection-column { display: table-cell; }
.bulk-selection-column input[type="checkbox"],
.bulk-card-selection input[type="checkbox"],
.bulk-delete-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mg-green); cursor: pointer; }
.bulk-card-selection { display: none; position: absolute; inset-block-start: .8rem; inset-inline-start: .8rem; z-index: 1; }
.bulk-edit-root.is-editing .bulk-card-selection { display: block; }
.bulk-edit-root .project-card { position: relative; }
.bulk-edit-launcher { display: flex; justify-content: center; margin-top: 1.25rem; padding-bottom: .5rem; }
.bulk-edit-launcher button[hidden] { display: none; }
.bulk-delete-form .btn[disabled] { opacity: .55; cursor: not-allowed; }

.content-selection-toolbar button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.workspace-card-list { display: grid; gap: .55rem; }

.workspace-row-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem;
    border: 1px solid var(--mg-border);
    border-radius: .7rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

a.workspace-row-card:hover { border-color: var(--mg-green); }

.workspace-row-card > div { display: grid; gap: .22rem; min-width: 0; }

.workspace-row-card > div:last-child { text-align: left; justify-items: end; }

.workspace-row-card strong,
.workspace-row-card span { overflow-wrap: anywhere; }

.workspace-row-card small { color: var(--mg-gray); font-size: .73rem; }

.workspace-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--mg-border);
    font-size: .78rem;
    color: var(--mg-gray);
}

.workspace-pagination a { color: var(--mg-green-dark); font-weight: 600; text-decoration: none; }

.workspace-pagination a:last-child { justify-self: end; }

.workspace-periods { display: flex; flex-wrap: wrap; gap: .5rem; }

.workspace-periods button {
    padding: .55rem .8rem;
    border: 1px solid var(--mg-border);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
}

.workspace-periods button.active { background: var(--mg-black); color: #fff; border-color: var(--mg-black); }

.client-report-sections {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.client-report-card {
    padding: 1rem;
    border: 1px solid var(--mg-border);
    border-radius: 12px;
    background: var(--mg-off-white);
}

.client-report-card > div { display: flex; align-items: center; gap: .5rem; color: var(--mg-green-dark); }

.client-report-card h3 { margin: 0; font-size: .95rem; color: var(--mg-black); }

.client-report-card dl { display: grid; gap: .45rem; margin: .9rem 0 0; }

.client-report-card dl div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--mg-border); padding-bottom: .35rem; }

.client-report-card dt { color: var(--mg-gray); font-size: .75rem; }

.client-report-card dd { margin: 0; font-weight: 700; }

.workspace-note {
    margin: 0;
    padding: .75rem .9rem;
    border-inline-start: 3px solid var(--mg-green);
    background: #eef6e8;
    border-radius: .45rem;
    color: var(--mg-gray);
    font-size: .78rem;
    line-height: 1.7;
}

@media (max-width: 1180px) {
    .workspace-quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .client-report-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .client-workspace-hero,
        .workspace-panel-head { align-items: stretch; flex-direction: column; }

    .workspace-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .client-workspace-grid { grid-template-columns: 1fr; }

    .workspace-span-2 { grid-column: auto; }

    .workspace-filter { grid-template-columns: 1fr 1fr; }

    .workspace-filter input[type="search"] { grid-column: span 2; }
}

@media (max-width: 560px) {
    .client-workspace-actions .btn { flex: 1 1 calc(50% - .5rem); justify-content: center; }

    .workspace-metrics,
        .workspace-quick-actions,
        .client-report-sections { grid-template-columns: 1fr; }

    .workspace-filter { grid-template-columns: 1fr; }

    .workspace-filter input[type="search"] { grid-column: auto; }

    .workspace-row-card { align-items: flex-start; flex-direction: column; }

    .workspace-row-card > div:last-child { text-align: right; justify-items: start; }
}

/* ==========================================================================
   Finance workspace, Excel imports and daily edit forms — Phase 4
   ========================================================================== */
.finance-hero,.invoice-head{align-items:flex-start}.finance-actions{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}.finance-actions form{margin:0}.finance-tabs{display:flex;gap:.4rem;overflow-x:auto;padding:.4rem;margin-bottom:1rem;background:#fff;border:1px solid var(--mg-border);border-radius:12px}.finance-tabs a{display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;padding:.68rem .82rem;border-radius:.62rem;color:var(--mg-gray);text-decoration:none;font-size:.8rem;font-weight:700}.finance-tabs a:hover,.finance-tabs a.active{background:#eef6e8;color:var(--mg-black)}
.finance-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-bottom:1rem}.finance-currency-card{padding:1rem;background:#111;color:#fff;border-radius:14px}.finance-card-head{display:flex;justify-content:space-between;gap:1rem;align-items:center}.finance-card-head strong{font-size:1.2rem;color:var(--mg-green)}.finance-card-head span{font-size:.75rem;color:#aaa}.finance-currency-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:1rem 0 0}.finance-currency-card dl div{padding:.65rem;background:rgba(255,255,255,.06);border-radius:.65rem}.finance-currency-card dt{font-size:.7rem;color:#aaa}.finance-currency-card dd{margin:.25rem 0 0;font-weight:800}.positive{color:#4f8f24!important}.negative{color:#c33737!important}.finance-period-filter{display:flex;align-items:end;gap:.55rem;flex-wrap:wrap}.finance-period-filter label{display:grid;gap:.25rem}.finance-period-filter label span{font-size:.72rem;color:var(--mg-gray)}
.finance-alert-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.finance-alert-card{display:grid;gap:.2rem;padding:1rem;background:#fff;border:1px solid var(--mg-border);border-radius:12px;color:inherit;text-decoration:none}.finance-alert-card:hover{border-color:var(--mg-green)}.finance-alert-card>span,.finance-alert-card>small{color:var(--mg-gray);font-size:.75rem}.finance-alert-card>strong{font-size:1.5rem}.finance-alert-card.is-danger{border-inline-start:4px solid #c33737}
.finance-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}.finance-list{display:grid;gap:.45rem}.finance-list>a,.finance-list-static{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.7rem;border:1px solid var(--mg-border);border-radius:.65rem;color:inherit;text-decoration:none}.finance-list>a:hover{border-color:var(--mg-green)}.finance-list>a>div,.finance-list-static>div{display:grid;gap:.15rem}.finance-list small{color:var(--mg-gray);font-size:.7rem}.finance-filter{display:grid;grid-template-columns:minmax(200px,1fr) repeat(5,auto);gap:.5rem;align-items:center;padding:.75rem;margin-bottom:1rem;background:#fff;border:1px solid var(--mg-border);border-radius:12px}.finance-filter input,.finance-filter select{min-height:42px;padding:.55rem .65rem;border:1px solid var(--mg-border);border-radius:.55rem;background:#fff;font:inherit}.finance-table-card{padding:0;overflow:hidden}.finance-table{min-width:1000px}.finance-status--paid{background:#e9f5e3;color:#3b741e}.finance-status--partially_paid{background:#fff4dc;color:#8a5d00}.finance-status--void{background:#f2f2f2;color:#777}.finance-status--issued{background:#e8f1ff;color:#235c9b}
.finance-ledger-currency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-bottom:1rem}
.invoice-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.invoice-summary-grid article{display:grid;gap:.25rem;padding:1rem;background:#fff;border:1px solid var(--mg-border);border-radius:12px}.invoice-summary-grid span,.invoice-summary-grid small{color:var(--mg-gray);font-size:.75rem}.invoice-summary-grid strong{font-size:1.25rem}.invoice-layout{grid-template-columns:1.35fr .65fr}.simple-stack{display:grid;gap:.7rem}.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:1rem;border:1px solid #e5b8b8;background:#fff7f7;border-radius:12px}.danger-zone p{margin:.25rem 0 0;color:var(--mg-gray);font-size:.75rem}.btn-danger{background:#a92121;color:#fff;border-color:#a92121}
.invoice-editor{display:grid;gap:1rem}.invoice-lines{display:grid;gap:.65rem}.invoice-line-row{display:grid;grid-template-columns:minmax(240px,2fr) repeat(3,minmax(110px,.65fr)) auto;gap:.55rem;align-items:end;padding:.75rem;background:var(--mg-off-white);border:1px solid var(--mg-border);border-radius:.75rem}.invoice-delete{display:flex;align-items:center;gap:.3rem;padding-bottom:.65rem;font-size:.75rem}.invoice-line-row .field{margin:0}.invoice-line-row input{width:100%}
.invoice-payments-edit{display:grid;gap:.65rem}.invoice-payment-row{display:grid;grid-template-columns:auto repeat(4,minmax(150px,1fr));gap:.55rem;align-items:end;padding:.75rem;background:var(--mg-off-white);border:1px solid var(--mg-border);border-radius:.75rem}.invoice-payment-row .field{margin:0}.invoice-payment-meta{display:grid;gap:.2rem;align-self:center;min-width:90px}.invoice-payment-meta small{color:var(--mg-gray);font-size:.72rem}
.subscription-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.subscription-card{display:grid;gap:.8rem;padding:1rem;background:#fff;border:1px solid var(--mg-border);border-radius:12px}.subscription-card h3{margin:.5rem 0 .2rem}.subscription-card p{margin:0;color:var(--mg-gray);font-size:.75rem}.subscription-card>strong{font-size:1.25rem}.subscription-card dl{display:grid;gap:.4rem;margin:0}.subscription-card dl div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--mg-border);padding-bottom:.3rem}.subscription-card dt{color:var(--mg-gray);font-size:.72rem}.subscription-card dd{margin:0;font-weight:700;font-size:.78rem}
.content-data-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}.import-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-bottom:1rem}.import-steps article{display:flex;align-items:center;gap:.65rem;padding:.8rem;background:#fff;border:1px solid var(--mg-border);border-radius:10px}.import-steps strong{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mg-green);color:#fff}.import-steps span{font-size:.8rem;font-weight:700}.import-upload{display:grid;gap:.8rem}.file-drop{display:grid;justify-items:center;gap:.35rem;padding:2rem;border:2px dashed var(--mg-border);border-radius:12px;background:var(--mg-off-white);cursor:pointer}.file-drop input{margin-top:.6rem}.file-drop small{color:var(--mg-gray)}.import-preview{margin-top:1rem}.import-table{min-width:1050px}.import-table tr.is-invalid{background:#fff5f5}.import-table tr.is-valid{background:#f8fcf6}.import-errors{margin:0;padding-right:1rem;color:#a92121;font-size:.72rem}.status-danger{background:#ffe4e4;color:#a92121}.report-filter-form{display:flex;gap:.45rem}
@media(max-width:1100px){.finance-summary-grid,.subscription-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-alert-grid,.invoice-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-filter{grid-template-columns:repeat(3,minmax(0,1fr))}.invoice-line-row{grid-template-columns:repeat(2,minmax(0,1fr))}.invoice-line-row .line-description{grid-column:span 2}.invoice-payment-row{grid-template-columns:repeat(2,minmax(0,1fr))}.invoice-payment-meta{grid-column:span 2}.finance-two-col,.invoice-layout{grid-template-columns:1fr}}
@media(max-width:640px){.finance-summary-grid,.finance-alert-grid,.invoice-summary-grid,.subscription-grid,.import-steps{grid-template-columns:1fr}.finance-filter{grid-template-columns:1fr}.finance-actions .btn{flex:1 1 auto}.invoice-line-row,.invoice-payment-row{grid-template-columns:1fr}.invoice-line-row .line-description,.invoice-payment-meta{grid-column:auto}.danger-zone{align-items:stretch;flex-direction:column}}
.table-actions{display:flex;align-items:center;gap:.65rem;white-space:nowrap}.inline-form{display:inline;margin:0}.table-actions button.mini-action{border:0;background:transparent;padding:0;font-family:inherit;cursor:pointer}

/* Finance cards use the same calm green surface as the rest of the workspace. */
.finance-currency-card{background:linear-gradient(135deg,#173b27 0%,#285d35 100%);border:1px solid #39794a;box-shadow:0 12px 24px rgba(23,59,39,.14)}
.finance-currency-card dl div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08)}
.finance-currency-card .positive{color:#b9e58e!important}.finance-currency-card .negative{color:#ffaaa6!important}

/* UI quality pass — stable grids, grouped actions and touch-safe controls.
   These rules intentionally sit after the older phase blocks so the visual
   contract is consistent across role-dependent card counts. */
.dashboard-create-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.dashboard-create-grid > a { min-height: 96px; }
.work-command-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.work-command-card { min-height: 104px; }
.work-hub-lists { align-items: start; }
.work-hub-lists .empty-state { padding-block: 2.5rem; }
.page-header > div:last-child,
.page-heading > div:last-child { max-width: 100%; }
.page-header .btn,
.page-heading .btn { min-height: 42px; }

.cal-header { align-items: flex-start; }
.cal-header h2 { margin-block: .15rem .35rem; font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.cal-nav,
.content-data-tools,
.cal-filters {
  padding: .65rem;
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  background: var(--mg-soft-surface);
}
.cal-nav { align-self: end; }
.content-data-tools { margin-bottom: .6rem; }
.cal-filters { margin-bottom: 1rem; }
.cal-nav .btn,
.content-data-tools .btn,
.cal-filters .btn,
.cal-filters select { min-height: 42px; }
.cal-add-content { width: 36px; height: 36px; }
.cal-day-label { display: none; }

.skip-link {
  position: fixed;
  z-index: 2000;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  padding: .65rem .9rem;
  border-radius: .55rem;
  background: var(--mg-black);
  color: #fff;
  transform: translateY(-180%);
  transition: transform .15s ease;
}
.skip-link:focus { color: #fff; transform: translateY(0); }

.file-drop {
  position: relative;
  min-height: 190px;
  align-content: center;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.file-drop:focus-visible,
.file-drop:focus-within,
.file-drop.is-dragging {
  border-color: var(--mg-green);
  background: var(--mg-green-soft);
  box-shadow: 0 0 0 3px rgba(95,145,53,.16);
  outline: none;
}
.file-drop.is-error { border-color: var(--mg-negative); background: #fff7f7; }
.file-drop.is-ready { border-color: var(--mg-green-secondary); }
.file-drop-icon { color: var(--mg-green-dark); }
.file-drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-drop-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--mg-charcoal); font-size: .8rem; }
.file-drop-status { min-height: 1.2em; color: var(--mg-green-dark); font-size: .78rem; font-weight: 700; }
.file-drop-status:empty { display: none; }
.file-drop-status[data-state="error"] { color: var(--mg-negative); }

@media (max-width: 1180px) {
  .dashboard-create-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  /* The launcher has seven fixed destinations; keeping them in one row
     prevents a lone seventh card from creating a false second section. */
  .dashboard-create-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-header,
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-header .btn,
  .page-heading .btn { width: 100%; }
  .cal-nav { align-self: stretch; }
  .cal-nav .btn { flex: 1 1 calc(50% - .5rem); }
  .content-data-tools,
  .cal-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-data-tools .btn,
  .cal-filters .btn,
  .cal-filters select,
  .cal-platform-picker { width: 100%; min-width: 0; }
  .cal-platform-picker { grid-column: span 2; }
  .cal-filters .btn:last-child { grid-column: span 2; }
  .cal-day { padding: .65rem; gap: .35rem; }
  .cal-item { min-height: 44px; padding: .42rem .5rem; font-size: .82rem; }
  .cal-add-content { width: 44px; height: 44px; }
  .cal-day-label { display: inline; color: var(--mg-green-dark); font-size: .78rem; font-weight: 700; }
  .cal-day-number { display: none; }
  .file-drop { min-height: 170px; }
}
@media (max-width: 639px) {
  .dashboard-create-grid,
  .work-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-create-grid > a { min-height: 102px; padding: 12px; }
  .work-command-card { grid-template-columns: 40px minmax(0, 1fr); min-height: 96px; padding: 14px; gap: 10px; }
  .work-command-icon { width: 40px; height: 40px; }
  .work-command-number,
  .work-command-arrow { grid-column: 2; justify-self: start; font-size: .9rem; }
  .work-command-number { margin-top: -8px; }
}
@media (max-width: 430px) {
  .dashboard-create-grid,
  .work-command-grid,
  .content-data-tools,
  .cal-filters { grid-template-columns: 1fr; }
  .cal-platform-picker,
  .cal-filters .btn:last-child { grid-column: auto; }
}

@media (max-width: 639px) {
  .header-left { min-width: 0; flex: 1 1 auto; }
  .header-left > div { min-width: 0; }
  /* Account actions remain available from the mobile sidebar; reclaim this
     header width so the page title never sits beneath the action cluster. */
  .header-actions .user-menu { display: none; }
  .page-title {
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
  }
  .header-actions { flex: 0 0 auto; }
  .icon-btn,
  .user-profile { min-width: 44px; min-height: 44px; }
}

/* Strategy detail filters: keep the controls inside the card instead of
   letting a long inline form overflow as raw browser controls. */
.strategy-filters > form.inline-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: .75rem;
  align-items: end;
  width: 100%;
  margin: 0;
}

.strategy-filters > form.inline-form > label:first-child {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--mg-gray);
  font-size: .78rem;
  font-weight: 700;
}

.strategy-filters > form.inline-form > select,
.strategy-filters > form.inline-form > input[type="date"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 1px solid var(--mg-border);
  border-radius: .65rem;
  background: var(--mg-white);
  color: var(--mg-charcoal);
  font: inherit;
  font-size: .82rem;
}

.strategy-filters > form.inline-form > select:focus,
.strategy-filters > form.inline-form > input[type="date"]:focus {
  border-color: var(--mg-green);
  outline: 3px solid var(--mg-green-soft);
}

.strategy-filters > form.inline-form > label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  margin: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--mg-border);
  border-radius: .65rem;
  background: var(--mg-off-white);
  color: var(--mg-charcoal);
  font-size: .8rem;
  white-space: nowrap;
}

.strategy-filters > form.inline-form input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--mg-green);
}

.strategy-filters > form.inline-form > .btn {
  min-height: 44px;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .strategy-filters > form.inline-form { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}

@media (max-width: 680px) {
  .strategy-filters > form.inline-form { grid-template-columns: 1fr 1fr; }
  .strategy-filters > form.inline-form > .btn:last-of-type,
  .strategy-filters > form.inline-form > a.btn { grid-column: span 2; }
}

@media (max-width: 430px) {
  .strategy-filters > form.inline-form { grid-template-columns: 1fr; }
  .strategy-filters > form.inline-form > .btn:last-of-type,
  .strategy-filters > form.inline-form > a.btn { grid-column: auto; }
}
.child-editor{display:grid;gap:.8rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--mg-border)}.child-form-list{display:grid;gap:.7rem}.child-form-card{padding:.85rem;background:var(--mg-off-white);border:1px solid var(--mg-border);border-radius:.75rem}.child-delete-field{align-self:end}.mini-action{flex:0 0 auto;color:var(--mg-green-dark);font-size:.72rem;font-weight:700;text-decoration:none}.btn-sm{min-height:32px;padding:.35rem .6rem;font-size:.72rem}.c360-list li>div{display:grid;gap:.1rem;min-width:0}.c360-list li{gap:.7rem}.report-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* Strategy task-definition forms: keep labels and controls readable in RTL. */
.strategy-task-definition-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  max-width: 1100px;
  margin-inline: auto;
}

.strategy-task-definition-form > p {
  display: grid;
  gap: .45rem;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: .8rem 0;
  border-bottom: 1px solid var(--mg-border);
}

.strategy-task-definition-form > p:has(textarea),
.strategy-task-definition-form > p:has(select[multiple]),
.strategy-task-definition-form > p:has(.errorlist) {
  grid-column: 1 / -1;
}

.strategy-task-definition-form > p > label {
  color: var(--mg-charcoal);
  font-size: .9rem;
  font-weight: 700;
}

.strategy-task-definition-form > p > input:not([type="checkbox"]),
.strategy-task-definition-form > p > select,
.strategy-task-definition-form > p > textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: .65rem .75rem;
  border: 1px solid var(--mg-border);
  border-radius: .65rem;
  background: var(--mg-white);
  color: var(--mg-charcoal);
}

.strategy-task-definition-form > p > textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.7;
}

.strategy-task-definition-form > p > select[multiple] {
  min-height: 150px;
  padding-block: .5rem;
}

.strategy-task-definition-form > p:has(input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
}

.strategy-task-definition-form > p > input[type="checkbox"] {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  accent-color: var(--mg-green);
}

.strategy-task-definition-form .helptext {
  color: var(--mg-gray);
  font-size: .78rem;
  line-height: 1.6;
}

.strategy-task-definition-form .errorlist {
  margin: 0;
  padding: .55rem .75rem;
  border-radius: .55rem;
  background: #fff2f0;
}

.strategy-task-definition-form .form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: .65rem;
  justify-content: flex-start;
  padding-top: .35rem;
}

@media (max-width: 760px) {
  .strategy-task-definition-form { grid-template-columns: 1fr; }
  .strategy-task-definition-form > p:has(textarea),
  .strategy-task-definition-form > p:has(select[multiple]),
  .strategy-task-definition-form > p:has(.errorlist),
  .strategy-task-definition-form .form-actions { grid-column: auto; }
}

/* Shared Django form.as_p baseline: prevent native, narrow controls on all forms. */
.form-stack,
.stack-form {
  display: grid;
  gap: 1rem;
}

.form-stack > p,
.stack-form > p {
  display: grid;
  gap: .45rem;
  margin: 0;
}

.form-stack > p > label,
.stack-form > label,
.stack-form > p > label {
  color: var(--mg-charcoal);
  font-weight: 700;
}

.form-stack > p > input:not([type="checkbox"]),
.form-stack > p > select,
.form-stack > p > textarea,
.stack-form > input,
.stack-form > select,
.stack-form > textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: .65rem .75rem;
  border: 1px solid var(--mg-border);
  border-radius: .65rem;
  background: var(--mg-white);
  color: var(--mg-charcoal);
}

.form-stack > p > textarea,
.stack-form > textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.7;
}

.form-stack .helptext,
.stack-form .helptext {
  color: var(--mg-gray);
  font-size: .78rem;
  line-height: 1.6;
}

/* Service catalogue: one readable card per offer, with prices kept separate
   from scope/features so the same data can feed quotes and engagements. */
.catalog-filters { margin-bottom: 1rem; }
.catalog-filter-form { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr)) auto; gap: .8rem; align-items: end; }
.catalog-filter-form .field { margin: 0; }
.catalog-filter-actions { display: flex; gap: .5rem; align-items: center; padding-bottom: .05rem; }
.catalog-summary { color: var(--mg-gray); font-size: .86rem; margin: 0 0 1rem; }
.service-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.service-catalog-card { min-width: 0; display: grid; gap: .85rem; }
.service-catalog-card-featured { border-color: color-mix(in srgb, var(--mg-green) 45%, var(--mg-border)); box-shadow: 0 8px 24px rgba(52, 85, 45, .06); }
.service-catalog-card-header { display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start; }
.service-catalog-card-header h3 { margin: .2rem 0 .1rem; font-size: 1.15rem; }
.service-catalog-code { color: var(--mg-gray); font: .72rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; direction: ltr; text-align: right; margin: 0; }
.service-catalog-badges { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .35rem; }
.service-catalog-parent, .service-catalog-description, .service-price-note, .catalog-note { margin: 0; color: var(--mg-gray); line-height: 1.75; font-size: .86rem; }
.service-catalog-parent { color: var(--mg-green-dark); font-weight: 700; }
.service-catalog-section { border-top: 1px solid var(--mg-border); padding-top: .75rem; }
.service-catalog-section h4 { margin: 0 0 .55rem; font-size: .92rem; }
.service-price-list { display: grid; gap: .45rem; }
.service-price-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem .7rem; border: 1px solid var(--mg-border); border-radius: .65rem; background: var(--mg-off-white); }
.service-price-row strong, .service-price-row small { display: block; }
.service-price-row small { color: var(--mg-gray); font-size: .75rem; margin-top: .18rem; }
.service-price-value { color: var(--mg-green-dark); font-weight: 800; text-align: left; white-space: nowrap; }
.service-price-value small { display: inline; margin-inline-start: .25rem; }
.service-price-note { font-size: .76rem; padding: .1rem .7rem .25rem; }
.service-feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.service-feature-list li { display: grid; grid-template-columns: minmax(125px, .7fr) 1.3fr; gap: .6rem; padding-bottom: .45rem; border-bottom: 1px dashed var(--mg-border); font-size: .83rem; line-height: 1.65; }
.service-feature-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.service-feature-list li > span { color: var(--mg-gray); }
.feature-excluded { color: var(--mg-negative); font-size: .7rem; margin-inline-start: .4rem; }
.service-feature-list .is-excluded { opacity: .85; }
.service-catalog-empty { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .catalog-filter-form { grid-template-columns: 1fr 1fr; }
  .catalog-search { grid-column: 1 / -1; }
  .catalog-filter-actions { grid-column: 1 / -1; }
  .service-catalog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .catalog-filter-form { grid-template-columns: 1fr; }
  .catalog-search, .catalog-filter-actions { grid-column: auto; }
  .service-catalog-card-header { flex-direction: column; }
  .service-feature-list li { grid-template-columns: 1fr; gap: .1rem; }
}

/* Notification bulk actions: compact, touch-friendly, and consistent with the OS cards. */
.notification-bulk-form { display: grid; gap: .75rem; }
.notification-bulk-toolbar,
.notification-bulk-actions-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .75rem .9rem;
  border: 1px solid var(--mg-border);
  border-radius: .85rem;
  background: var(--mg-off-white);
}
.notification-select-all,
.notif-select {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
}
.notification-select-all { color: var(--mg-charcoal); font-size: .85rem; font-weight: 700; }
.notification-select-all input,
.notif-select input {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin: 0;
  accent-color: var(--mg-green);
}
.notification-selection-count { color: var(--mg-gray); font-size: .78rem; }
.notif-item { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.notif-select { align-self: start; padding-top: .2rem; }
.notification-bulk-actions-bottom { justify-content: flex-start; margin-top: .25rem; }
.notification-bulk-actions-bottom .btn-danger { background: var(--mg-negative); color: var(--mg-white); border-color: var(--mg-negative); }
.notification-bulk-actions-bottom button:disabled { cursor: not-allowed; opacity: .5; }
@media (max-width: 640px) {
  .notification-bulk-actions-bottom .btn { flex: 1 1 100%; }
  .notif-item { grid-template-columns: auto auto minmax(0, 1fr); }
  .notif-action { grid-column: 2 / -1; justify-self: start; }
}

/* Invoice lines keep the service and description readable before numeric inputs. */
.invoice-line-row {
  grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 2fr) repeat(3, minmax(110px, .65fr)) auto;
}
.invoice-error-summary { margin-bottom: 0; }
.invoice-error-summary p { margin: 0; }
.invoice-error-summary ul { margin: .5rem 0 0; padding-inline-start: 1.25rem; }
.invoice-error-summary li + li { margin-top: .2rem; }
.invoice-editor .form-error {
  margin: .25rem 0 0;
  padding-inline-start: 1rem;
  color: var(--mg-negative);
  font-size: .75rem;
}
.invoice-editor .field.has-error > input,
.invoice-editor .field.has-error > select,
.invoice-editor .field.has-error > textarea {
  border-color: var(--mg-negative);
}
@media (max-width: 1100px) {
  .invoice-line-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-line-row .line-service,
  .invoice-line-row .line-description { grid-column: span 2; }
}
@media (max-width: 640px) {
  .invoice-line-row { grid-template-columns: 1fr; }
  .invoice-line-row .line-service,
  .invoice-line-row .line-description { grid-column: auto; }
}
/* Task-page restore: compact quick entry and date-first states. */
.page-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.quick-task-widget-shell{position:relative}
.quick-task-widget{position:absolute;z-index:70;top:calc(100% + .75rem);inset-inline-end:0;width:min(92vw,420px);padding:1rem;background:var(--mg-white);border:1px solid var(--mg-border);border-radius:16px;box-shadow:0 18px 48px rgba(5,5,5,.16)}
.quick-task-widget-form{display:grid;gap:.75rem}.quick-task-widget-head{display:flex;justify-content:space-between;align-items:flex-start}.quick-task-widget-head h2{font-size:1.15rem;margin-bottom:.25rem}.quick-task-widget-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.quick-task-widget-details{border-top:1px solid var(--mg-border);padding-top:.65rem}.quick-task-widget-details summary{cursor:pointer;color:var(--mg-green-dark);font-weight:700}.quick-task-widget-actions{display:flex;justify-content:flex-end;gap:.5rem}.quick-task-widget .field textarea{min-height:72px}
[data-urgency="overdue"]{color:var(--mg-negative)}[data-urgency="today"],[data-urgency="soon"]{color:var(--mg-warning)}[data-urgency="scheduled"]{color:var(--mg-positive)}[data-urgency="closed"],[data-urgency="none"]{color:var(--mg-gray)}
@media (max-width:680px){.quick-task-widget{position:fixed;top:5rem;inset-inline:1rem;width:auto}.quick-task-widget-grid{grid-template-columns:1fr}.page-actions{width:100%}}

/* Google Drive upload widget: drop zone, progress, file list. */
.files-widget{display:grid;gap:.75rem}
.files-dropzone{display:grid;gap:.4rem;justify-items:center;text-align:center;padding:1.25rem 1rem;border:2px dashed var(--mg-border);border-radius:14px;background:var(--mg-white);transition:border-color .15s ease,background .15s ease}
.files-dropzone.is-dragging{border-color:var(--mg-green);background:rgba(46,125,50,.06)}
.files-dropzone-hint{margin:0;color:var(--mg-gray)}
.files-picker-label{cursor:pointer}
.files-picker-label input[type="file"]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.files-status{min-height:1.4rem;margin:0;font-weight:600}
.files-list{margin:0}
/* فاصل بصري: لوحة الرفع مقابل فتح مجلد Drive. */
.files-upload-panel{border:1px solid var(--mg-border);border-radius:14px;padding:.9rem;display:grid;gap:.4rem}
.files-drive-folder{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;border-top:1px dashed var(--mg-border);padding-top:.6rem}
.files-folder-notready{font-size:.85rem}
@media (max-width:640px){.files-dropzone{padding:1rem .75rem}}

/* MARTGAIN_CLIENT_SOCIAL_ACTIONS_START */

/*
 * Client Social Platforms V2
 *
 * Button green is the same MartGain green shown
 * in the existing primary action button:
 * RGB(127, 179, 77) = #7FB34D
 *
 * Typography remains inherited from MartGain.
 */

.c360-platforms {
    overflow: visible;
}


/* ---------- Section ---------- */

.mg-social-v2 {
    margin-top:
        var(--space-2, 1rem);

    padding-top:
        var(--space-2, 1rem);
}


/* ---------- Responsive platform grid ---------- */

.mg-social-v2-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--space-2, 1rem);

    overflow: visible;
}


/* ---------- Individual platform box ---------- */

.mg-social-v2-card {
    position: relative;

    min-width: 0;

    min-height: 168px;

    padding:
        14px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap:
        12px;

    /*
     * Keep the CURRENT MartGain platform
     * background / radius / typography.
     */

    transition:
        border-color 150ms ease;
}


/*
 * Hover copied from the existing social/account
 * box behavior shown in the supplied screenshot:
 * only the light green border emphasis.
 */

.mg-social-v2-card:hover,
.mg-social-v2-card:focus-within {
    border-color:
        #7FB34D;
}


/* ---------- Platform heading ---------- */

.mg-social-v2-head {
    display: flex;

    align-items: center;

    gap:
        9px;

    min-width: 0;
}


.mg-social-v2-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex:
        0 0 auto;

    color:
        currentColor;
}


.mg-social-v2-icon svg {
    display: block;
}


.mg-social-v2-head
.platform-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ---------- Action buttons ---------- */

.mg-social-v2-actions {
    display: flex;

    flex-direction: column;

    gap:
        8px;

    width: 100%;
}


/*
 * Shape taken from the existing green
 * "إنشاء" button shown in the supplied reference.
 */

.mg-social-v2-button {
    width: 100%;

    min-height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        8px 16px;

    border:
        1px solid #7FB34D;

    border-radius:
        999px;

    background:
        #7FB34D;

    color:
        #FFFFFF;

    font-family:
        inherit;

    font-size:
        inherit;

    font-weight:
        inherit;

    line-height:
        inherit;

    text-decoration:
        none;

    cursor:
        pointer;
}


.mg-social-v2-button:hover,
.mg-social-v2-button:focus-visible,
.mg-social-v2-button:active {
    background:
        #7FB34D;

    border-color:
        #7FB34D;

    color:
        #FFFFFF;
}


.mg-social-v2-button:focus-visible {
    outline:
        2px solid #7FB34D;

    outline-offset:
        2px;
}


/* ---------- Tablet ---------- */

@media (max-width: 900px) {

    .mg-social-v2-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* ---------- Mobile ---------- */

@media (max-width: 640px) {

    .mg-social-v2-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            12px;
    }


    .mg-social-v2-card {
        min-height:
            160px;
    }

}

/* MARTGAIN_CLIENT_SOCIAL_ACTIONS_END */