:root {
  --bg: #101827;
  --sidebar: #182235;
  --panel: #1f2d44;
  --panel-soft: #263652;
  --line: rgba(255,255,255,0.08);
  --text: #f4f7ff;
  --muted: #95a5c1;
  --green: #21c7a8;
  --blue: #69a7ff;
  --amber: #f3c04d;
  --danger: #ff8282;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Manrope", sans-serif; background: radial-gradient(circle at top left, rgba(105,167,255,0.12), transparent 22%), var(--bg); color: var(--text); }
button, input, select { font: inherit; }
.hidden { display: none !important; }
.standalone body { overscroll-behavior: none; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; color: var(--green); font-size: .72rem; font-weight: 800; margin: 0 0 10px; }
.muted { color: var(--muted); }
.message { color: var(--amber); min-height: 20px; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card, .card, .modal-card { background: rgba(31,45,68,.96); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.login-card { width: min(100%, 920px); display: grid; grid-template-columns: 1fr 420px; gap: 28px; padding: 32px; }
.demo { margin-top: 18px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { background: var(--sidebar); border-right: 1px solid var(--line); padding: 26px 16px; display: flex; flex-direction: column; gap: 18px; }
.brand { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.logo { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); padding: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.14); overflow: hidden; }
.logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.brand h2, .section-head h3, .main-area h1, .stat strong, .mini-card strong, .stat-flat strong { margin: 0; }
.brand p, .section-head p, .stat span, .mini-card span, .stat-flat span, .stack-item p { margin: 0; color: var(--muted); }
.nav-list { display: grid; gap: 8px; }
.nav-btn, .primary-btn, .secondary-btn, .ghost-btn, .danger-btn { border: 0; border-radius: 14px; padding: 12px 16px; font-weight: 700; cursor: pointer; }
.nav-btn { text-align: left; background: transparent; color: #c4d0e8; }
.nav-btn.active { background: rgba(33,199,168,.14); color: var(--green); }
.primary-btn { background: var(--green); color: white; }
.secondary-btn { background: rgba(105,167,255,.14); color: var(--blue); }
.ghost-btn { background: rgba(255,255,255,.08); color: white; }
.danger-btn { background: rgba(255,130,130,.12); color: var(--danger); border: 1px solid rgba(255,130,130,.25); }
.danger-btn.disabled { opacity: .45; cursor: not-allowed; }
.full { width: 100%; margin-top: auto; }
.main-area { padding: 30px; }
.topbar, .row-between, .section-head, .table-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.topbar { margin-bottom: 26px; }
.topbar h1 { font-size: 2.35rem; margin-bottom: 10px; }
.top-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.search-input, .stack-form input, .stack-form select { width: 100%; background: #172337; color: white; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 13px 14px; }
.search-input { min-width: 240px; }
.view { display: none; }
.view.active { display: block; }
.stats-grid, .split-grid, .stack-form.two-col-form { display: grid; gap: 18px; }
.stats-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
.split-grid { grid-template-columns: 1.2fr .8fr; margin-bottom: 18px; }
.narrow-right { grid-template-columns: 1.5fr .8fr; }
.card { padding: 20px; }
.stat { display: grid; gap: 8px; }
.stat strong { font-size: 2.1rem; }
.bar-chart { height: 220px; display: grid; align-items: end; gap: 12px; margin-top: 16px; }
.bar-chart.seven { grid-template-columns: repeat(7, 1fr); }
.bar-col { display: flex; align-items: end; height: 100%; }
.bar { width: 100%; border-radius: 16px 16px 6px 6px; min-height: 8px; background: linear-gradient(180deg, var(--blue), rgba(105,167,255,.22)); }
.progress-group { display: grid; gap: 16px; margin: 16px 0 22px; }
.track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.fill { height: 100%; width: 0; border-radius: inherit; }
.fill.amber { background: var(--amber); }
.fill.blue { background: var(--blue); }
.fill.green { background: var(--green); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini-card, .stat-flat, .stack-item { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.table-wrap, .user-table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 12px; text-align: left; border-top: 1px solid var(--line); }
th { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge.pending { background: rgba(243,192,77,.15); color: var(--amber); }
.badge.processing { background: rgba(105,167,255,.14); color: var(--blue); }
.badge.completed, .badge.paid { background: rgba(33,199,168,.14); color: var(--green); }
.badge.delivered { background: rgba(33,199,168,.18); color: #7ef0d5; }
.badge.pending-bill { background: rgba(255,130,130,.14); color: var(--danger); }
.table-actions { flex-wrap: wrap; }
.table-actions button { border: 0; border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.08); color: white; }
.table-actions .danger { color: var(--danger); }
.table-actions .print { color: var(--green); }
.stack-list { display: grid; gap: 12px; margin-top: 12px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 12px; }
.calendar-cell { min-height: 72px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-soft); padding: 10px; display: grid; gap: 6px; align-content: start; }
.calendar-cell strong { font-size: 0.95rem; }
.calendar-cell span { color: var(--muted); font-size: 0.82rem; }
.calendar-cell.has-count { border-color: rgba(33,199,168,.35); background: rgba(33,199,168,.09); }
.daily-plan-layout { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1.35fr); gap: 18px; align-items: start; }
.daily-plan-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.daily-plan-weekday { color: var(--muted); font-size: .78rem; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.daily-plan-day { min-height: 104px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); color: var(--text); padding: 10px; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; text-align: left; cursor: pointer; }
.daily-plan-day.empty { visibility: hidden; pointer-events: none; }
.daily-plan-day span { color: var(--muted); font-size: .82rem; font-weight: 800; }
.daily-plan-day strong { align-self: center; font-size: 1.65rem; line-height: 1; }
.daily-plan-day small { color: var(--muted); font-weight: 700; }
.daily-plan-day.has-orders { border-color: rgba(33,199,168,.38); background: rgba(33,199,168,.1); }
.daily-plan-day.selected { outline: 2px solid var(--green); outline-offset: 2px; }
.daily-plan-day.today span { color: var(--amber); }
.user-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.user-header h3 { margin: 0 0 8px; font-size: 1.45rem; }
.user-toolbar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.search-label { display: grid; gap: 8px; min-width: 220px; color: var(--muted); font-weight: 600; }
.compact-control { min-width: 220px; max-width: 260px; }
.user-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 24px; }
.user-editor { display: grid; gap: 14px; align-content: start; }
.editor-tabs { display: grid; gap: 10px; }
.editor-tab { border: 1px solid var(--line); background: white; color: #1f9b8b; border-radius: 14px; padding: 16px 18px; text-align: left; font-weight: 700; box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.editor-tab.active { background: rgba(33,199,168,.16); color: white; border-color: rgba(33,199,168,.18); }
.editor-tab[disabled] { opacity: .95; }
.editor-card { background: rgba(255,255,255,.98); color: #293447; border-radius: 22px; padding: 24px; border: 1px solid rgba(19,31,51,.08); box-shadow: 0 18px 36px rgba(6,18,38,.08); }
.editor-card .section-head { margin-bottom: 12px; }
.editor-card .section-head h3 { color: #293447; }
.user-form label { color: #546684; font-weight: 700; }
.user-form input, .user-form select { background: #fff; color: #1c2434; border: 1px solid rgba(23,35,55,.12); }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(23,35,55,.08); padding-top: 14px; }
.switch-row input[type="checkbox"] { width: 52px; height: 30px; accent-color: var(--green); }
.user-form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.user-link { background: transparent; border: 0; color: #3a66c9; font: inherit; padding: 0; cursor: pointer; text-align: left; }
.selected-row { background: rgba(33,199,168,.08); }
.daily-report { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 24px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.daily-report.yes { background: rgba(33,199,168,.14); color: var(--green); }
.daily-report.no { background: rgba(255,130,130,.14); color: #f05e73; }
.stack-item h4 { margin: 0 0 6px; }
.report-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hr-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.hr-header h3 { margin: 0 0 8px; font-size: 1.45rem; }
.hr-grid { grid-template-columns: 1.1fr .9fr; }
.stock-grid { grid-template-columns: 1.35fr .65fr; }
.hr-stats { margin-bottom: 18px; }
.compact-search { min-width: 200px; max-width: 260px; }
.report-grid { margin: 18px 0; }
.stat-flat strong { display: block; font-size: 1.7rem; margin-top: 6px; }
.stack-form { display: grid; gap: 14px; }
.bill-extra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.order-lines-block h4, .order-size-block h4 { margin: 0 0 6px; font-size: 1.05rem; }
.order-line-rows { display: grid; gap: 10px; margin-top: 8px; }
.order-line-row {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  padding: 14px;
}
.order-line-head {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) 120px 90px 120px 130px;
  gap: 10px;
  align-items: end;
}
.order-line-row .danger-btn, .order-line-size-row .danger-btn { padding: 13px 12px; }
.order-line-size-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.order-line-size-panel h5 { margin: 0 0 4px; font-size: .96rem; }
.order-line-size-rows { display: grid; gap: 10px; }
.order-line-size-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 90px;
  gap: 10px;
  align-items: end;
}
.order-lines-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.order-lines-summary div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  padding: 12px 14px;
}
.order-lines-summary span { color: var(--muted); font-weight: 700; font-size: .82rem; }
.order-lines-summary strong { font-size: 1.2rem; }
.order-size-rows { display: grid; gap: 10px; margin-top: 8px; }
.order-size-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px 90px; gap: 10px; align-items: end; }
.order-size-row .danger-btn { padding: 13px 12px; }
.order-image-block h4 { margin: 0 0 6px; font-size: 1.05rem; }
.order-image-input-wrap { max-width: 260px; }
.order-image-input-wrap input[type="file"] { padding: 10px 12px; }
.order-image-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 10px; }
.order-image-card { position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.03); min-height: 128px; }
.order-image-card img { display: block; width: 100%; height: 128px; object-fit: cover; }
.order-image-card-actions { position: absolute; inset: 10px 10px auto auto; display: flex; gap: 8px; }
.order-image-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(16,24,39,.78); color: white; cursor: pointer; text-decoration: none; font-weight: 800; font-size: .72rem; }
.order-image-chip.danger { color: var(--danger); }
.order-image-footer { padding: 10px 12px; color: var(--muted); font-size: .8rem; }
.helper-text { margin: 0; line-height: 1.5; }
.two-col-form { grid-template-columns: repeat(2, 1fr); }
.two-col-form .full-span { grid-column: 1 / -1; }
label { display: grid; gap: 8px; font-weight: 700; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.68); display: grid; place-items: center; padding: 20px; }
.modal-card { width: min(100%, 760px); padding: 24px; }
.modal-card.tall-modal { max-height: calc(100vh - 40px); overflow-y: auto; }
.issuing-modal-card { width: min(100%, 980px); }
.issuing-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.issuing-summary .mini-card {
  padding: 14px 16px;
  background: rgba(255,255,255,.05);
}
.issuing-summary .mini-card p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: .82rem;
}
.issuing-summary .mini-card strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
}
.issuing-subsection { margin-bottom: 18px; }
.issuing-meta-grid,
.issuing-receiver-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.issuing-receiver-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.issuing-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.issuing-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .82rem;
  text-transform: capitalize;
}
.issuing-status-pill.pending { background: rgba(245, 158, 11, .18); color: #f6c453; }
.issuing-status-pill.delivered { background: rgba(16, 185, 129, .18); color: #48d8aa; }
.issuing-table-wrap { overflow-x: auto; }
.issuing-table {
  width: 100%;
  border-collapse: collapse;
}
.issuing-table th,
.issuing-table td {
  white-space: normal;
  vertical-align: top;
}
.issuing-row-input {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: #fff;
  padding: 10px 12px;
}
.issuing-row-check {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}
.issuing-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.table-link-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: #9cc0ff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.table-link-btn:hover { color: #c1d8ff; text-decoration: underline; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    gap: 14px;
    padding: 16px 14px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(24,34,53,.95);
    backdrop-filter: blur(16px);
  }
  .brand { padding-bottom: 12px; }
  .logo { width: 50px; height: 50px; }
  .nav-list {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .nav-list::-webkit-scrollbar { display: none; }
  .nav-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: max-content;
  }
  .full { margin-top: 0; }
  .main-area { padding: 20px; }
  .stats-grid, .split-grid, .narrow-right, .hr-grid, .user-layout, .daily-plan-layout, .issuing-summary, .issuing-stat-strip, .issuing-meta-grid, .issuing-receiver-grid { grid-template-columns: 1fr; }
  .top-tools { width: 100%; }
  .top-tools .search-input {
    flex: 1 1 100%;
    min-width: 0;
  }
}
@media (max-width: 1100px) {
  .login-card, .stats-grid, .split-grid, .two-col-form, .user-layout, .daily-plan-layout { grid-template-columns: 1fr; }
  .bill-extra-grid { grid-template-columns: 1fr; }
  .order-line-head, .order-line-size-row, .order-lines-summary, .order-size-row { grid-template-columns: 1fr; }
  .order-image-preview { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
@media (max-width: 720px) {
  .main-area { padding: 18px; }
  .topbar, .top-tools { flex-direction: column; align-items: stretch; }
  .top-tools .primary-btn, .top-tools .secondary-btn, .top-tools .ghost-btn { width: 100%; }
  .mini-stats { grid-template-columns: 1fr; }
  .calendar-grid { grid-template-columns: repeat(2, 1fr); }
  .daily-plan-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-plan-weekday, .daily-plan-day.empty { display: none; }
  .daily-plan-day { min-height: 92px; }
  .user-header, .user-toolbar, .user-form-actions, .switch-row, .hr-header { flex-direction: column; align-items: stretch; }
  .modal { align-items: start; overflow-y: auto; }
  .modal-card { margin: 12px 0; padding: 20px; }
}

/* Business dashboard theme */
:root {
  --bg: #F4F8FB;
  --sidebar: #FFFFFF;
  --panel: #FFFFFF;
  --panel-soft: #F8FAFC;
  --line: #E5E7EB;
  --text: #101B4D;
  --muted: #666666;
  --green: #00AFC8;
  --blue: #3B82F6;
  --amber: #F59E0B;
  --danger: #EF4444;
  --header-gradient: linear-gradient(135deg, #00B6C6 0%, #008C8C 100%);
  --soft-shadow: 0 10px 28px rgba(16, 27, 77, .08);
  --small-shadow: 0 4px 14px rgba(16, 27, 77, .06);
}

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

.app-shell {
  background: var(--bg);
}

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 24px rgba(16, 27, 77, .04);
}

.brand {
  border-bottom-color: var(--line);
}

.brand h2,
.brand p {
  color: var(--text);
}

.logo {
  border-radius: 12px;
  background: #F4F8FB;
  box-shadow: inset 0 0 0 1px var(--line), var(--small-shadow);
}

.nav-btn {
  border-radius: 8px;
  color: var(--text);
  font-weight: 700;
}

.nav-btn:hover {
  background: #EEF8FB;
  color: var(--text);
}

.nav-btn.active {
  background: #DDF5FA;
  color: var(--text);
}

.main-area {
  background: var(--bg);
}

.topbar {
  margin-bottom: 24px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--header-gradient);
  box-shadow: 0 14px 32px rgba(0, 140, 140, .22);
}

.topbar h1,
.topbar .eyebrow,
.topbar .muted {
  color: #FFFFFF;
}

.topbar h1 {
  font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.eyebrow {
  color: var(--green);
  letter-spacing: .12em;
}

.muted,
.brand p,
.section-head p,
.stat span,
.mini-card span,
.stat-flat span,
.stack-item p {
  color: var(--muted);
}

.login-card,
.card,
.modal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.login-screen {
  background: var(--header-gradient);
}

.login-card {
  color: var(--text);
}

.card {
  padding: 22px;
}

.stat,
.mini-card,
.stat-flat,
.stack-item,
.calendar-cell,
.daily-plan-day,
.editor-card,
.editor-tab,
.order-image-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--small-shadow);
  color: var(--text);
}

.stat strong,
.mini-card strong,
.stat-flat strong,
.stack-item h4,
.section-head h3,
.hr-header h3,
.user-header h3,
.main-area h1 {
  color: var(--text);
}

.topbar .main-area h1,
.topbar h1 {
  color: #FFFFFF;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn,
.table-actions button {
  border-radius: 8px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.primary-btn {
  background: var(--green);
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(0, 175, 200, .24);
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.table-actions button:hover {
  transform: translateY(-1px);
}

.secondary-btn {
  background: #E7F8FB;
  color: #007B89;
  border: 1px solid #BCEBF2;
}

.ghost-btn {
  background: #FFFFFF;
  color: var(--text);
  border: 1px solid var(--line);
}

.topbar .ghost-btn,
.topbar .secondary-btn {
  background: rgba(255,255,255,.18);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.28);
}

.danger-btn,
.table-actions .danger {
  background: #FEF2F2;
  color: var(--danger);
  border: 1px solid #FECACA;
}

.search-input,
.stack-form input,
.stack-form select,
.issuing-row-input {
  background: #FFFFFF;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(16, 27, 77, .02);
}

.topbar .search-input {
  background: rgba(255,255,255,.95);
  color: var(--text);
  border-color: rgba(255,255,255,.35);
}

.search-input::placeholder,
.stack-form input::placeholder {
  color: #9CA3AF;
}

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

th,
td {
  border-top-color: var(--line);
}

th {
  color: #64748B;
  letter-spacing: .04em;
}

.table-actions button {
  background: #EEF8FB;
  color: var(--text);
}

.table-actions .print {
  color: #007B89;
}

.badge.pending,
.issuing-status-pill.pending {
  background: rgba(245, 158, 11, .16);
  color: #B45309;
}

.badge.processing {
  background: rgba(59, 130, 246, .14);
  color: #1D4ED8;
}

.badge.completed,
.badge.paid,
.badge.delivered,
.issuing-status-pill.delivered {
  background: rgba(0, 175, 200, .13);
  color: #007B89;
}

.badge.pending-bill {
  background: rgba(239, 68, 68, .12);
  color: #B91C1C;
}

.bar {
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--green), rgba(0,175,200,.25));
}

.bar-col:nth-child(2n) .bar {
  background: linear-gradient(180deg, var(--blue), rgba(59,130,246,.25));
}

.bar-col:nth-child(3n) .bar {
  background: linear-gradient(180deg, var(--amber), rgba(245,158,11,.24));
}

.bar-col:nth-child(4n) .bar {
  background: linear-gradient(180deg, #EC4899, rgba(236,72,153,.22));
}

.track {
  background: #EAF0F6;
}

.fill.green {
  background: var(--green);
}

.fill.blue {
  background: var(--blue);
}

.fill.amber {
  background: var(--amber);
}

.calendar-cell.has-count,
.daily-plan-day.has-orders {
  border-color: rgba(0, 175, 200, .35);
  background: #EAFBFE;
}

.daily-plan-day.selected {
  outline-color: var(--green);
}

.daily-plan-day.today span {
  color: var(--amber);
}

.daily-plan-weekday {
  color: #64748B;
}

.editor-card {
  color: var(--text);
}

.editor-card .section-head h3,
.user-form label {
  color: var(--text);
}

.editor-tab {
  color: var(--text);
}

.editor-tab.active,
.selected-row {
  background: #DDF5FA;
  color: var(--text);
}

.user-link,
.table-link-btn {
  color: #008C8C;
}

.table-link-btn:hover {
  color: #006F73;
}

.order-image-chip {
  background: rgba(16, 27, 77, .78);
}

.modal {
  background: rgba(16, 27, 77, .38);
  backdrop-filter: blur(2px);
}

.issuing-summary .mini-card {
  background: #FFFFFF;
}

.permission-panel {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.permission-title {
  color: var(--text);
  font-weight: 800;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.permission-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #F8FAFC;
  color: var(--text);
  font-weight: 700;
}

.permission-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.permission-check.disabled {
  opacity: .55;
}

.access-summary {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.order-modal-card {
  width: min(98vw, 1360px);
  max-height: calc(100vh - 24px);
  padding: 30px;
}

.order-modal-card .two-col-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.order-modal-card .full-span {
  grid-column: 1 / -1;
}

.order-modal-card .order-line-head {
  grid-template-columns: minmax(220px, 1.45fr) 140px 110px 140px 150px;
}

.order-modal-card .order-line-row {
  padding: 18px;
}

@media (max-width: 900px) {
  .sidebar {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
  }

  .topbar {
    border-radius: 10px;
  }
}

@media (max-width: 720px) {
  .main-area {
    padding: 14px;
  }

  .topbar {
    padding: 18px;
  }

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

@media (max-width: 1100px) {
  .order-modal-card {
    width: min(96vw, 920px);
    padding: 22px;
  }

  .order-modal-card .two-col-form,
  .order-modal-card .order-line-head {
    grid-template-columns: 1fr;
  }
}