:root {
  --color-primary: #072c2c;
  --color-primary-soft: #0d3f3f;
  --color-secondary: #ff5f03;
  --color-secondary-soft: #ff7d36;
  --color-surface: #edeade;
  --color-surface-alt: #f5f4ec;
  --color-background: #fafaf6;
  --color-card: #ffffff;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #d1cfc4;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-white: #ffffff;

  --font-primary: "Ubuntu", sans-serif;
  --font-display: "Ubuntu", sans-serif;
  --font-mono: "Ubuntu Mono", monospace;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 2px 10px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 8px 22px rgba(17, 24, 39, 0.12);
  --topbar-height: 56px;
}

html,
body {
  font-family: var(--font-primary);
}

body {
  color: var(--color-text);
}

/* Keep icon fonts intact; prevents square placeholders. */
.fa-solid,
.fas,
.fa-regular,
.far {
  font-family: "Font Awesome 6 Free" !important;
}

.fa-solid,
.fas {
  font-weight: 900 !important;
}

.fa-regular,
.far {
  font-weight: 400 !important;
}

.fa-brands,
.fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.dash-greeting h1,
.hero-title,
.section-title {
  font-family: var(--font-display);
}

a {
  color: var(--color-primary);
}

/* App shell */
.top-bar {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-md) !important;
  min-height: var(--topbar-height);
  padding: 10px 18px !important;
}

.top-bar nav {
  gap: 10px !important;
}

.top-bar a {
  color: rgba(255, 255, 255, 0.92) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
}

.top-bar a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--color-white) !important;
}

.top-bar a.active {
  background: rgba(255, 255, 255, 0.18) !important;
  color: var(--color-white) !important;
  box-shadow: inset 0 -2px 0 var(--color-secondary);
}

.top-bar > a:first-child,
.top-bar > a:first-child:hover {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 1100px) {
  .top-bar nav {
    background: var(--color-primary) !important;
  }
}

/* App cards and panels */
.kpi-card,
.todays-focus,
.week-glance,
.dash-panel,
.toolbar,
.group-manager,
.note-card,
.settings-card,
.account-card,
.calendar-page-header,
.calendar-planner-section,
.planner-card,
.support-card,
.admin-card,
.feed-header,
.filters,
.day-panel,
.calendar-sidebar,
.calendar-main-content,
.calendar-planner-filters,
.calendar-planner-legend,
.calendar-planner-unscheduled,
.month-view-container,
.add-card,
.members-card,
.modal-content {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}
.reply-card,
.thread-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.kpi-card:hover,
.note-card:hover {
  box-shadow: var(--shadow-md) !important;
}

/* Key action surfaces */
.focus-header,
.settings-header,
.support-header,
.calendar-planner-header,
.queue-section h2,
.pill,
.group-add button,
.primary-btn,
.filter-btn,
.toolbar-btn.primary {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.btn-refresh,
.submit-btn,
.cta-btn,
.nav-cta {
  background: var(--color-secondary) !important;
  border: 1px solid var(--color-secondary) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
}

.btn-refresh:hover,
.submit-btn:hover,
.cta-btn:hover,
.nav-cta:hover {
  background: var(--color-secondary-soft) !important;
  border-color: var(--color-secondary-soft) !important;
}

.btn-reset,
.ghost-btn,
.filter-pill,
.toolbar-btn:not(.primary),
.btn-secondary {
  background: var(--color-surface-alt) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}
.ghost-btn:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.filter-pill.has-filter,
.group-tag-all.active {
  background: rgba(7, 44, 44, 0.1) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea,
.search-input,
.sort-select {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-md) !important;
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus,
.sort-select:focus {
  border-color: var(--color-primary-soft) !important;
  box-shadow: 0 0 0 3px rgba(7, 44, 44, 0.14) !important;
  outline: none;
}

/* Data/table surfaces */
.column,
.kanban-column,
.table-wrap,
table,
thead,
tbody,
tr {
  border-color: var(--color-border) !important;
}

.column {
  background: var(--color-surface-alt) !important;
}

.column-header {
  background: var(--color-surface) !important;
}

th {
  background: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}

tbody tr:nth-of-type(even) {
  background: #f7f7f2 !important;
}

/* Home page tweaks (minimal; avoid layout breakage) */
.navbar {
  background: var(--color-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.navbar .logo,
.nav-links a:not(.nav-cta) {
  color: var(--color-white) !important;
}

.navbar.scrolled .logo,
.navbar.scrolled .nav-links a:not(.nav-cta) {
  color: var(--color-primary) !important;
}

.nav-cta {
  background: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 999px !important;
}

/* Utility */
.page-subtitle,
.greeting-sub,
.meta-label,
.card-preview,
.card-time,
.kpi-label,
.kpi-desc,
.empty-text {
  color: var(--color-text-muted) !important;
}

.flash-message.success {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

.flash-message.error,
.flash-message.danger {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

.flash-message.warning {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

/* Unified status badge colors */
.card-status-chip.status-todo,
.block-status.status-todo,
.list-status-badge.status-todo {
  background: #deebff !important;
  color: #0747a6 !important;
}

.card-status-chip.status-in-progress,
.block-status.status-in-progress,
.list-status-badge.status-in-progress {
  background: #fff7e6 !important;
  color: #b45309 !important;
}

.card-status-chip.status-waiting,
.block-status.status-waiting,
.list-status-badge.status-waiting {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
}

.card-status-chip.status-done,
.block-status.status-done,
.list-status-badge.status-done {
  background: #dcfce7 !important;
  color: #166534 !important;
}

/* Resizable inline images (signatures, reply editors) — class allowed by server sanitizer */
span.ib-resizable-img {
  display: inline-block;
  max-width: 100%;
  resize: both;
  overflow: auto;
  line-height: 0;
  min-width: 48px;
  min-height: 32px;
  vertical-align: bottom;
}
span.ib-resizable-img img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Reply compose only: no resize on inline/signature images (accounts/settings keep global rule above) */
#replyEditor span.ib-resizable-img,
.reply-card .editor span.ib-resizable-img {
  resize: none;
  overflow: visible;
}