@import url('./colors_and_type.css');

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--fg-1);
  font-size: var(--fs-13);
}

.app-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────── */
.hk-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--ink-900);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  /* Slide-animation när hamburgaren togglar sidomenyn. */
  transition: margin-left 260ms cubic-bezier(.4, 0, .2, 1),
              opacity     180ms ease-out;
  will-change: margin-left;
}
.app-shell.sidebar-hidden .hk-sidebar {
  margin-left: -260px;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hk-sidebar { transition: none; }
}
.sidebar-brand {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 8px 14px; margin-bottom: 4px;
}
.sidebar-brand .wordmark { font-weight: 700; letter-spacing: 0.18em; font-size: 17px; }
.sidebar-brand .version { color: var(--ink-400); font-size: var(--fs-11); }

.tenant-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-800); border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg); padding: 8px 10px; margin-bottom: 10px;
  width: 100%; color: inherit;
}
.tenant-mark {
  width: 30px; height: 30px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-sky-400), var(--brand-sky-700));
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--fs-13);
}
.tenant-info { display: flex; flex-direction: column; flex-grow: 1; text-align: left; }
.tenant-info .tenant-name { font-size: var(--fs-13); font-weight: 600; }
.tenant-info .tenant-sub { font-size: var(--fs-11); color: var(--ink-400); }

.mode-switch {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink-800); border-radius: var(--radius-lg); padding: 4px; gap: 2px; margin-bottom: 14px;
}
.mode-switch .mode-btn {
  border: 0; background: transparent; color: var(--ink-300);
  font-size: var(--fs-11); padding: 7px 6px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.mode-switch .mode-btn.active { background: var(--ink-700); color: var(--white); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
.mode-switch .mode-btn.portal { grid-column: span 2; }
.mode-icon { font-size: var(--fs-13); }

.sidebar-section {
  color: var(--ink-500); font-size: var(--fs-10); letter-spacing: 0.12em;
  text-transform: uppercase; padding: 10px 10px 6px;
}
.nav-list { list-style: none; padding: 0; margin: 0; }
.nav-list .nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; color: var(--ink-200);
  font-size: var(--fs-13); border-radius: var(--radius-md); text-decoration: none;
}
.nav-list .nav-link:hover { background: var(--ink-800); color: var(--white); }
.nav-list .nav-link.active { background: var(--ink-700); color: var(--white); }
.nav-list .nav-link .bi { font-size: 15px; width: 18px; text-align: center; opacity: 0.9; }
.nav-list .nav-link .badge { margin-left: auto; font-weight: 500; font-size: var(--fs-10); }
.sidebar-spacer { flex-grow: 1; }
.sidebar-footer {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--ink-700); padding-top: 10px; margin-top: 4px;
}
.sidebar-footer .flex-grow-1 { min-width: 0; }
.sidebar-footer .flex-grow-1 > div {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-footer form { flex-shrink: 0; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-sky-500); display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 600; font-size: var(--fs-12);
}

/* ── Topbar ─────────────────────────────────────── */
.hk-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 24px; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 5;
}
.hk-topbar .breadcrumb { font-size: var(--fs-13); margin: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.search { position: relative; }
.search .bi {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--fg-4); font-size: var(--fs-13);
}
.search input {
  padding-left: 30px; background: var(--ink-100);
  border: 1px solid transparent; width: 320px; border-radius: var(--radius-md);
}
.search input:focus { background: var(--white); border-color: var(--brand-sky-500); box-shadow: var(--ring-sky-focus); }
.notif-btn {
  position: relative; background: transparent; border: 0;
  padding: 6px 8px; color: var(--fg-3); cursor: pointer;
}
.notif-btn:hover { color: var(--fg-1); }
.notif-btn .notif-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  background: var(--danger-500); color: var(--white); font-size: 9px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.notif-dropdown { position: relative; }
/* Osynlig klickfångare bakom panelen. Ligger i topbarens stacking context (z-index 5),
   som målas över sidinnehållet — 25 < panelens 30 räcker. */
.notif-backdrop { position: fixed; inset: 0; z-index: 25; }
.notif-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: 360px; max-height: 480px; overflow-y: auto;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.notif-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-13);
}
.notif-empty { padding: 24px; text-align: center; color: var(--fg-3); font-size: var(--fs-13); }
.notif-list { list-style: none; padding: 0; margin: 0; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; transition: background 0.12s ease;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--ink-50); }
.notif-item.unread { background: var(--brand-sky-bg); }
.notif-item.unread:hover { background: #dbeafe; }
.notif-icon { font-size: 16px; color: var(--brand-sky-700); margin-top: 2px; }
.notif-item.unread .notif-icon { color: var(--brand-sky-700); }
.notif-title { font-size: var(--fs-13); font-weight: 600; color: var(--fg-1); }
.notif-body {
  font-size: var(--fs-12); color: var(--fg-2); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-meta { font-size: var(--fs-11); color: var(--fg-3); margin-top: 4px; }

/* ── Main ───────────────────────────────────────── */
.main-scroll { flex-grow: 1; padding: 24px 28px 40px; }

/* ── Cards ──────────────────────────────────────── */
.card {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.card .card-title { font-size: var(--fs-14); font-weight: 600; color: var(--fg-1); margin: 0; }
.card .card-subtitle { font-size: var(--fs-12); color: var(--fg-3); }
/* Neutral KPI card: defined border matching the weight of accent-bordered cards */
.card.kpi-neutral { border-color: var(--border-strong) !important; }

.stat-card { cursor: default; transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.stat-card .label { font-size: var(--fs-12); color: var(--fg-3); display: flex; align-items: center; justify-content: space-between; }
.stat-card .label .bi { color: var(--fg-4); }
.stat-card .value { font-size: var(--fs-28); font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; color: var(--fg-1); }
.stat-card .value .unit { font-size: var(--fs-14); font-weight: 500; color: var(--fg-3); margin-left: 4px; }
.stat-card .meta { display: flex; gap: 8px; align-items: center; font-size: var(--fs-11); color: var(--fg-3); margin-top: 2px; }
.stat-card .delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.stat-card .delta.up { color: var(--success-600); }
.stat-card .delta.down { color: var(--danger-600); }
.stat-card .spark { margin-top: 10px; height: 40px; }

/* ── Status pills ───────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: var(--fs-11); font-weight: 500; border: 1px solid transparent;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.delivered { background: #ecfdf5; color: #065f46; }
.status-pill.production { background: var(--warning-100); color: var(--warning-700); }
.status-pill.packing { background: var(--info-100); color: #1e40af; }
.status-pill.picking { background: #ede9fe; color: #5b21b6; }
.status-pill.shipped { background: #cffafe; color: #155e75; }
.status-pill.quoted { background: var(--ink-100); color: var(--ink-600); }
.status-pill.invoiced { background: #fce7f3; color: #9d174d; }
.status-pill.onhold { background: var(--danger-100); color: #991b1b; }

/* ── Tables ─────────────────────────────────────── */
.order-table { font-size: var(--fs-13); }
.order-table thead th {
  font-size: var(--fs-11); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--fg-3);
  font-weight: 500; border-bottom: 1px solid var(--border-subtle);
  padding: 10px 8px;
}
.order-table tbody td { padding: 12px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.order-table tbody tr:last-child td { border-bottom: 0; }
.order-table tbody tr:hover td { background: var(--ink-50); }
.cust-mark {
  width: 28px; height: 28px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-10); font-weight: 600; color: var(--white); flex-shrink: 0;
}
.mark-orange { background: linear-gradient(135deg, #fb923c, #c2410c); }
.mark-blue { background: linear-gradient(135deg, var(--brand-sky-400), var(--brand-sky-700)); }
.mark-red { background: linear-gradient(135deg, #f87171, #b91c1c); }
.mark-green { background: linear-gradient(135deg, #34d399, #047857); }
.mark-yellow { background: linear-gradient(135deg, #fbbf24, #b45309); }

/* ── Side list ──────────────────────────────────── */
.side-list { padding: 8px 0 8px; }
.side-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 16px; border-top: 1px solid var(--border-subtle);
}
.side-item:first-child { border-top: 0; }
.side-icon {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.side-icon.approval { background: var(--warning-100); color: var(--warning-700); }
.side-icon.ship { background: #cffafe; color: #155e75; }

/* ── Timeline ───────────────────────────────────── */
.timeline { position: relative; padding-left: 16px; }
.timeline::before {
  content: ''; position: absolute; left: 15px; top: 12px; bottom: 12px;
  width: 2px; background: var(--border-subtle);
}
.tl-step { display: flex; gap: 14px; padding: 10px 0; position: relative; }
.tl-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1;
  color: var(--fg-3);
}
.tl-step.done .tl-dot { background: var(--success-500); border-color: var(--success-500); color: var(--white); }
.tl-step.active .tl-dot { background: var(--brand-sky-500); border-color: var(--brand-sky-500); color: var(--white); box-shadow: var(--ring-sky-focus); }

/* ── Bootstrap overrides ────────────────────────── */
.btn { font-size: var(--fs-13); border-radius: var(--radius-md); }
.btn-sm { font-size: var(--fs-12); padding: 5px 10px; }
.btn-primary { background: var(--brand-sky-500); border-color: var(--brand-sky-500); }
.btn-primary:hover { background: var(--brand-sky-700); border-color: var(--brand-sky-700); }
.btn-dark { background: var(--ink-900); border-color: var(--ink-900); }
.nav-underline .nav-link { color: var(--fg-3); padding: 8px 12px; font-size: var(--fs-13); border-bottom: 2px solid transparent; }
.nav-underline .nav-link.active { color: var(--brand-sky-700); border-bottom-color: var(--brand-sky-500); background: transparent; }

/* ── Stale-banner — rolig knuff för obesvarade 10-dagarsärenden ─────────────
   Renderas i MainLayout före @Body. Färgglad gradient + wigglande maskot;
   krysset snoozar till nästa dag (StaleTicketsBanner.razor). */
.stale-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 16px 28px 0;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--brand-sky-400), var(--chart-violet) 48%, var(--chart-rose) 96%);
  color: var(--white);
  box-shadow: var(--shadow-md);
  animation: stale-pop 320ms cubic-bezier(.2, .9, .3, 1.2);
}
.stale-banner-mascot {
  font-size: 26px; line-height: 1; flex-shrink: 0;
  display: inline-block;
  animation: stale-wiggle 1.6s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.stale-banner-body { flex: 1; min-width: 0; }
.stale-banner-title { font-weight: 700; font-size: var(--fs-14); text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.stale-banner-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.stale-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 320px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .18);
  color: var(--white); text-decoration: none; font-size: var(--fs-12);
  transition: background 120ms ease;
}
.stale-chip:hover { background: rgba(255, 255, 255, .32); color: var(--white); }
.stale-chip .mono { font-weight: 600; }
.stale-chip-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stale-chip-days {
  flex-shrink: 0; font-weight: 700; font-size: var(--fs-11);
  background: rgba(255, 255, 255, .22); border-radius: var(--radius-pill); padding: 1px 7px;
}
.stale-chip--more { font-weight: 600; }
.stale-banner-close {
  border: 0; background: none; color: var(--white); opacity: .8;
  padding: 6px; border-radius: var(--radius-md); cursor: pointer; flex-shrink: 0;
  align-self: flex-start;
}
.stale-banner-close:hover { opacity: 1; background: rgba(255, 255, 255, .15); }

@keyframes stale-pop {
  from { transform: translateY(-12px) scale(.98); opacity: 0; }
  60%  { transform: translateY(2px) scale(1.005); opacity: 1; }
  to   { transform: translateY(0) scale(1); }
}
@keyframes stale-wiggle {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .stale-banner { animation: none; }
  .stale-banner-mascot { animation: none; }
}
@media (max-width: 768px) {
  .stale-banner { margin: 10px 12px 0; padding: 10px 12px; gap: 10px; }
  .stale-chip { max-width: 100%; }
}

/* Nag-variant: visas när första bannern stängs inom 5 sekunder ("läste du verkligen?").
   Varmare/strängare gradient + skak-entré för komisk effekt. */
.stale-banner--nag {
  background: linear-gradient(90deg, var(--warning-500), #f97316 45%, var(--danger-500) 96%);
  animation: stale-shake 480ms cubic-bezier(.36, .07, .19, .97);
}
.stale-banner--nag .stale-banner-mascot {
  animation: none; /* 🤨 ska stirra stilla — det är hela poängen */
  font-size: 28px;
}
@keyframes stale-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .stale-banner--nag { animation: none; }
}