/*
  Eximious Tech ERP — TeamHub-inspired presentation layer
  ---------------------------------------------------------
  This file intentionally contains visual rules only. The existing app shell,
  routes, state, API calls, and responsive menu behaviour remain the source
  of truth so the interface can be refreshed without changing ERP behaviour.
*/

:root {
  --primary: #0b5ed7;
  --primary-strong: #0849aa;
  --primary-soft: #eaf2ff;
  --blue-soft: #eaf2ff;
  --bg: #f5f7f8;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --text: #1c2a36;
  --muted: #75818d;
  --line: #e4e9ed;
  --ink: #182733;
  --accent: var(--primary);
  --success: #16866d;
  --green-soft: #e9f8f3;
  --warning: #bf7a19;
  --amber-soft: #fff7e9;
  --danger: #ce4b59;
  --red-soft: #fff0f2;
  --creative: #7564cc;
  --purple-soft: #f2efff;
  --production: #147d99;
  --cyan-soft: #eaf8fb;
  --radius: 14px;
  --sidebar-expanded: 248px;
  --shadow: 0 5px 20px rgba(22, 38, 51, .045);
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --primary: #68a0ff;
  --primary-strong: #8ab6ff;
  --primary-soft: #172b47;
  --blue-soft: #172b47;
  --bg: #101719;
  --surface: #172023;
  --surface-2: #1d282b;
  --text: #edf4f3;
  --muted: #9eaeac;
  --line: #2d3a3c;
  --ink: #0d1416;
  --green-soft: #16362f;
  --amber-soft: #392d19;
  --red-soft: #3c2127;
  --purple-soft: #2d2942;
  --cyan-soft: #16343a;
  --shadow: 0 7px 24px rgba(0, 0, 0, .2);
}

html,
body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--ui-font) !important;
  letter-spacing: 0;
}

body { font-size: 13px; }
button, input, select, textarea { font-family: inherit; }

/* Workspace shell and navigation */
.app-shell {
  grid-template-columns: var(--sidebar-expanded) minmax(0, 1fr) !important;
  background: var(--bg);
}

.sidebar {
  width: var(--sidebar-expanded) !important;
  padding: 18px 13px !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.sidebar .brand-lockup {
  gap: 10px;
  margin: 0 5px;
  padding: 3px 3px 17px !important;
  border-bottom: 1px solid var(--line) !important;
}

.sidebar .brand-lockup img {
  width: 35px;
  height: 35px;
  padding: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}

.sidebar .brand-lockup strong {
  color: var(--text) !important;
  font-family: var(--ui-font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .095em !important;
}

.sidebar .brand-lockup small {
  color: var(--muted) !important;
  font-family: var(--ui-font) !important;
  font-size: 8px !important;
  letter-spacing: .13em !important;
}

.sidebar-nav {
  gap: 2px;
  margin-top: 12px !important;
  padding-right: 2px !important;
}

.nav-section {
  padding: 14px 10px 5px !important;
  color: #9ba6ad !important;
  font-family: var(--ui-font) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

.nav-link {
  min-height: 39px;
  padding: 8px 10px !important;
  gap: 9px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: var(--muted) !important;
  font-family: var(--ui-font) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}

.nav-link:hover {
  transform: none !important;
  color: var(--text) !important;
  background: var(--surface-2) !important;
  border-color: transparent !important;
}

.nav-link.active {
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.nav-icon {
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px !important;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  font-size: 14px !important;
}

.nav-icon svg { width: 17px; height: 17px; }
.nav-link.active .nav-icon,
.nav-link:hover .nav-icon { background: transparent !important; color: currentColor !important; }
.nav-favourite { color: #d39b38; }

.sidebar-bottom {
  margin-top: 10px !important;
  padding: 12px 5px 2px !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}

.sidebar-bottom .user-mini { padding: 4px 2px 10px !important; }
.sidebar-bottom .user-mini strong { color: var(--text) !important; font-size: 11px !important; }
.sidebar-bottom .user-mini small { color: var(--muted) !important; font-size: 9px !important; }
.avatar { background: var(--primary) !important; color: #fff !important; box-shadow: none !important; }
.sidebar-bottom .btn-ghost {
  min-height: 34px;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  font-size: 11px;
}

/* This is the existing persisted collapse state, presented as a true workspace expansion. */
.app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) !important; }
.app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-right: 0 !important;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-105%) !important;
}
.app-shell.sidebar-collapsed .main { grid-column: 2 !important; }

/* Top navigation */
.topbar {
  position: sticky !important;
  z-index: 20;
  min-height: 68px;
  height: 68px;
  padding: 0 26px !important;
  gap: 10px !important;
  background: color-mix(in srgb, var(--bg) 93%, transparent) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) !important;
}

.topbar::before { display: none !important; }
.topbar .icon-btn,
.menu-toggle,
.sidebar-collapse {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.topbar .icon-btn:hover,
.menu-toggle:hover,
.sidebar-collapse:hover {
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line)) !important;
  background: var(--primary-soft) !important;
}

.topbar .menu-toggle,
.topbar [data-action="theme"],
.topbar [data-route="notifications"] { font-size: inherit !important; }
.topbar .icon-btn svg { width: 17px; height: 17px; }

.global-search { max-width: 555px; }
.global-search .search-mark { left: 13px; color: var(--muted); }
.global-search input {
  min-height: 38px;
  padding: 9px 64px 9px 37px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-size: 12px;
}
.global-search input::placeholder { color: var(--muted) !important; }
.global-search input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}
.global-search kbd { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
.top-actions { gap: 7px; }

.quick-create > summary.btn {
  min-height: 36px;
  padding: 8px 11px;
  border-radius: 9px !important;
  font-size: 11px;
}

.profile-summary {
  min-height: 38px;
  padding: 2px 7px 2px 3px;
  border-color: var(--line) !important;
  border-radius: 10px;
  background: var(--surface) !important;
}
.profile-summary strong { color: var(--text); font-family: var(--ui-font) !important; font-size: 10px; }
.profile-summary small { color: var(--muted); font-family: var(--ui-font) !important; font-size: 9px; }
.profile-summary .avatar { width: 30px; height: 30px; font-size: 10px; }
.top-menu-panel {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(25, 43, 55, .12);
}

/* Page hierarchy and reusable surfaces */
.content { max-width: 1560px; padding: 25px 28px 40px !important; }
.breadcrumbs { margin: 0 0 7px; color: var(--muted); font-family: var(--ui-font) !important; font-size: 10px; font-weight: 650; }
.breadcrumbs button { color: var(--muted); font-family: inherit; }
.eyebrow { color: var(--primary); font-family: var(--ui-font) !important; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.page-head { align-items: center; margin-bottom: 18px; }
.page-head h1 {
  margin: 3px 0 4px;
  color: var(--text) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(24px, 2vw, 29px) !important;
  font-style: normal !important;
  font-weight: 780 !important;
  letter-spacing: -.038em !important;
}
.page-head p,
.card-head p,
.metric-note,
.cell-sub,
.field small {
  color: var(--muted) !important;
  font-family: var(--ui-font) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}
.page-head p { font-size: 12px; }
.head-actions { gap: 7px; }
.head-actions .icon-btn { width: 36px; height: 36px; }

.card,
.metric-card,
.record-card,
.filter-panel,
.table-wrap {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow) !important;
}
.card { padding: 18px !important; }
.card-head { margin-bottom: 15px; }
.card-head h2,
.card-head h3,
.modal-head h2,
.kanban-card h4 {
  color: var(--text) !important;
  font-family: var(--ui-font) !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  letter-spacing: -.015em !important;
}
.card-head p { font-size: 11px; }

/* Buttons, controls, tables and status treatment */
.btn {
  min-height: 36px;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-family: var(--ui-font) !important;
  font-size: 12px;
  font-weight: 700;
}
.btn:hover { transform: none !important; }
.btn-primary,
.head-actions .btn-outline {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.head-actions .btn-outline:hover { border-color: var(--primary-strong) !important; background: var(--primary-strong) !important; }
.btn-outline {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}
.btn-outline:hover,
.btn-ghost:hover { color: var(--primary) !important; background: var(--primary-soft) !important; border-color: color-mix(in srgb, var(--primary) 38%, var(--line)) !important; }
.btn-ghost { color: var(--muted) !important; }
.favourite-toggle.active { color: #c98b21 !important; background: #fff6df !important; }

.toolbar { gap: 9px; margin-bottom: 12px; }
.filter-panel { margin-bottom: 14px; padding: 13px 14px 2px !important; }
.filter-panel .field label,
.field label { color: var(--muted); font-family: var(--ui-font) !important; font-size: 10px; font-weight: 750; letter-spacing: .035em; }
.filter-panel input,
.filter-panel select,
.toolbar input,
.toolbar select,
.field input,
.field select,
.field textarea {
  min-height: 37px;
  border-color: var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.filter-panel input:focus,
.filter-panel select:focus,
.toolbar input:focus,
.toolbar select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

.table-wrap { overflow: auto; }
table { min-width: 720px; }
th,
td {
  padding: 12px 14px !important;
  border-bottom-color: var(--line) !important;
  color: var(--text);
  font-family: var(--ui-font) !important;
  font-size: 12px;
}
th {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  font-weight: 800;
  letter-spacing: .075em;
}
tbody tr { transition: background-color .14s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)) !important; }
.cell-main { font-weight: 720; }
.status { padding: 4px 7px; border-radius: 999px; font-family: var(--ui-font) !important; font-size: 9px; font-weight: 800; }
.status.info { color: var(--primary); background: var(--primary-soft); }
.status.success { color: var(--success); background: var(--green-soft); }
.status.warning { color: var(--warning); background: var(--amber-soft); }
.status.danger { color: var(--danger); background: var(--red-soft); }
.status.creative { color: var(--creative); background: var(--purple-soft); }
.status.production { color: var(--production); background: var(--cyan-soft); }

/* Dashboard: compact cards and calm, data-first composition. */
.range-bar { gap: 6px; margin: -2px 0 16px; }
.range-bar .btn { min-height: 31px; padding: 5px 10px; font-size: 10px; }
.dashboard-widget + .dashboard-widget { margin-top: 14px; }
.metric-grid,
.metric-grid-wide { gap: 11px; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.metric-card {
  min-height: 112px !important;
  padding: 16px !important;
  overflow: hidden;
}
.metric-card::after { display: none !important; }
.metric-card.tone-blue { border-top: 3px solid var(--primary) !important; }
.metric-card.tone-green { border-top: 3px solid var(--success) !important; }
.metric-card.tone-red { border-top: 3px solid var(--danger) !important; }
.metric-card.tone-purple { border-top: 3px solid var(--creative) !important; }
.metric-card.tone-amber { border-top: 3px solid var(--warning) !important; }
.metric-card.tone-cyan { border-top: 3px solid var(--production) !important; }
.metric-label { color: var(--muted) !important; font-family: var(--ui-font) !important; font-size: 10px; font-weight: 750; }
.metric-value { position: static; margin-top: 8px; color: var(--text); font-family: var(--ui-font) !important; font-size: clamp(21px, 1.8vw, 27px) !important; font-weight: 780; letter-spacing: -.04em; }
.metric-note { margin-top: 4px; font-size: 10px; }
.dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(290px, .82fr); gap: 13px; margin-top: 0; }
.dashboard-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.multi-chart { height: 225px; padding-top: 9px; }
.multi-bars { height: 169px; }
.chart-revenue { background: linear-gradient(180deg, #6ca7ff, var(--primary)) !important; }
.chart-expense { background: linear-gradient(180deg, #f49aa5, var(--danger)) !important; }
.chart-legend { margin-top: 0; font-size: 10px; }
.paid-split > div,
.profile-metrics > div { border: 1px solid var(--line); background: var(--surface-2); }
.status-bars > div > i,
.budget-mini > i { background: var(--surface-2); }
.status-bars b.info { background: var(--primary); }
.activity-feed > div { padding: 10px 0; border-bottom-color: var(--line); }
.activity-feed > div > i { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.quick-grid-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quick-action {
  min-height: 54px;
  padding: 12px !important;
  border: 1px solid var(--line) !important;
  border-left-width: 1px !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-family: var(--ui-font) !important;
  font-size: 11px;
  transition: border-color .15s ease, background-color .15s ease !important;
}
.quick-action:hover { transform: none !important; border-color: color-mix(in srgb, var(--primary) 45%, var(--line)) !important; background: var(--primary-soft) !important; color: var(--primary) !important; }
.quick-action.blue,.quick-action.green,.quick-action.amber,.quick-action.purple,.quick-action.cyan,.quick-action.red { border-left-width: 1px !important; }

/* Details, forms, modals and mobile record cards use the same quiet surfaces. */
.kanban-col { background: var(--surface-2); border-color: var(--line); border-radius: 12px; }
.kanban-card { border-color: var(--line); border-radius: 10px; box-shadow: none; }
.detail-item { border-color: var(--line); border-radius: 9px; background: var(--surface-2); }
.notice { border-left-color: var(--primary); background: var(--primary-soft); color: var(--muted); }
.modal { border-radius: 16px; background: var(--surface); color: var(--text); }
.modal-head,.modal-foot { border-color: var(--line); }
.line-item { background: var(--surface-2); border-radius: 9px; }
.record-card { padding: 15px; }
.record-card dl > div { background: var(--surface-2) !important; }

.empty-state { border-color: var(--line); border-radius: var(--radius); background: var(--surface); }
.empty-state strong { color: var(--text); font-family: var(--ui-font) !important; }
.empty-icon { border-radius: 12px; color: var(--primary); background: var(--primary-soft); }

/* Tablet: preserve an airy grid while keeping all controls accessible. */
@media (max-width: 1280px) {
  .content { padding: 22px 22px 36px !important; }
  .metric-grid,
  .metric-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .quick-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .topbar { padding: 0 17px !important; }
  .content { padding: 20px 17px 34px !important; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .global-search { max-width: none; }
}

/* Mobile keeps the existing drawer state; only its presentation changes. */
@media (max-width: 820px) {
  .app-shell,
  .app-shell.sidebar-collapsed { display: block !important; }
  .app-shell.sidebar-collapsed .sidebar {
    width: min(294px, 86vw) !important;
    min-width: 0 !important;
    padding: 15px 12px !important;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-105%, 0, 0) !important;
  }
  .sidebar {
    width: min(294px, 86vw) !important;
    padding: 15px 12px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: none !important;
  }
  .sidebar.open,
  .app-shell.sidebar-collapsed .sidebar.open { transform: translate3d(0, 0, 0) !important; box-shadow: 16px 0 38px rgba(15, 28, 35, .2) !important; }
  .sidebar .brand-lockup { background: transparent !important; border-color: var(--line) !important; }
  .sidebar .brand-lockup strong,.sidebar .user-mini strong { color: var(--text) !important; }
  .sidebar .brand-lockup small,.sidebar .user-mini small,.sidebar .nav-section { color: var(--muted) !important; }
  .sidebar .nav-link { color: var(--muted) !important; }
  .sidebar .nav-link.active { color: var(--primary) !important; background: var(--primary-soft) !important; }
  .sidebar-bottom { background: var(--surface) !important; border-color: var(--line) !important; }
  .sidebar-close { color: var(--muted) !important; border-color: var(--line) !important; background: var(--surface-2) !important; }
  .main,.app-shell.sidebar-collapsed .main { grid-column: auto !important; }
  .topbar { min-height: 62px; height: 62px; padding: 0 13px !important; gap: 7px !important; }
  .topbar .icon-btn,.menu-toggle,.sidebar-collapse { width: 35px !important; height: 35px !important; }
  .global-search input { min-height: 35px; font-size: 12px; }
  .content { padding: 18px 13px 96px !important; }
  .breadcrumbs { margin-bottom: 5px; }
  .page-head { gap: 12px; margin-bottom: 15px; }
  .page-head h1 { font-size: 25px !important; }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1; }
  .metric-grid,
  .metric-grid-wide,
  .dashboard-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px; }
  .metric-card { min-height: 105px !important; padding: 13px !important; }
  .metric-value { font-size: 21px !important; }
  .quick-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-panel { padding: 11px 12px 1px !important; }
  .record-card { border-radius: 12px !important; }
}

@media (max-width: 520px) {
  .topbar .quick-create { display: none; }
  .global-search kbd { display: none; }
  .global-search input { padding-right: 12px !important; }
  .page-head h1 { font-size: 23px !important; }
  .metric-grid,
  .metric-grid-wide,
  .dashboard-grid-three,
  .quick-grid-wide { grid-template-columns: 1fr !important; }
  .metric-card { min-height: 94px !important; }
  .range-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .range-bar .btn { flex: 0 0 auto; }
  .card { padding: 15px !important; }
}

@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f6f7f8; --text: #111; --muted: #555; --line: #d9dde0; }
  .sidebar,.topbar,.mobile-bottom-nav,.page-head .head-actions,.toolbar,.filter-panel,.btn,.pagination { display: none !important; }
  .app-shell,.main { display: block !important; }
  .content { max-width: none; padding: 0 !important; }
  .card,.metric-card,.table-wrap { box-shadow: none !important; }
}