:root {
  --pn-ink: #172033;
  --pn-muted: #68738a;
  --pn-subtle: #8b95a7;
  --pn-line: #e5eaf2;
  --pn-canvas: #f5f7fb;
  --pn-surface: #ffffff;
  --pn-brand: #0f172a;
  --pn-primary: #2563eb;
  --pn-primary-dark: #1d4ed8;
  --pn-primary-soft: #eff6ff;
  --pn-success: #14966f;
  --pn-success-soft: #ecfdf5;
  --pn-danger: #dc4660;
  --pn-danger-soft: #fff1f2;
  --pn-warning: #b7791f;
  --pn-warning-soft: #fff9e8;
  --pn-radius-sm: 10px;
  --pn-radius: 14px;
  --pn-radius-lg: 20px;
  --pn-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 5px 16px rgba(15, 23, 42, .04);
  --pn-shadow: 0 16px 45px rgba(30, 41, 59, .08);
}

html { color-scheme: light; }
body {
  color: var(--pn-ink);
  background: var(--pn-canvas);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pn-primary); }
a:hover { color: var(--pn-primary-dark); }

.app-body { padding-top: 72px !important; }
.app-navbar {
  min-height: 64px;
  padding: 8px 0;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 4px 18px rgba(15,23,42,.04);
  backdrop-filter: blur(14px);
}
.app-nav-container { max-width: 1360px; margin: 0 auto; padding-inline: 24px; }
.app-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--pn-ink) !important; }
.app-brand-mark {
  width: 36px; height: 36px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pn-brand);
  color: white; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 7px 18px rgba(15,23,42,.2);
}
.app-brand-name { font-weight: 750; letter-spacing: -.025em; }
.app-brand-tag {
  padding: 3px 8px; border-radius: 999px; background: #eef2ff;
  color: #4f46e5; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em;
}
.app-navbar .navbar-toggler { border: 1px solid var(--pn-line); padding: 6px 9px; box-shadow: none; }
.app-navbar .navbar-toggler-icon {
  width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23172033' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.app-nav-links { gap: 4px; align-items: center; }
.app-navbar .app-nav-link {
  color: #58647a !important; padding: 9px 12px !important; border-radius: 9px;
  font-size: 14px; font-weight: 600; line-height: 1.2; transition: .15s ease;
}
.app-navbar .app-nav-link:hover { color: var(--pn-ink) !important; background: #f2f5fa; }
.app-navbar .app-nav-link.active { color: var(--pn-primary) !important; background: var(--pn-primary-soft); }
.app-user-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding-left: 12px;
  border-left: 1px solid var(--pn-line); color: var(--pn-muted); font-size: 13px;
}
.app-user-avatar {
  width: 31px; height: 31px; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; background: #eef2f7; color: #344055; font-weight: 750;
}
.app-logout {
  border: 0; background: transparent; color: var(--pn-muted); font-size: 14px; font-weight: 600;
  padding: 9px 10px; border-radius: 9px;
}
.app-logout:hover { color: var(--pn-danger); background: var(--pn-danger-soft); }

.app-page { width: 100%; max-width: 1280px !important; margin: 0 auto; padding: 34px 24px 48px !important; }
.admin-page { max-width: 1360px !important; }
.page-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 24px; }
.page-title { margin: 0; color: var(--pn-ink); font-size: clamp(26px, 3vw, 34px); font-weight: 760; letter-spacing: -.035em; }
.page-subtitle { margin: 7px 0 0; color: var(--pn-muted); font-size: 15px; }

.card, .data-card, .surface-card {
  background: var(--pn-surface); border: 1px solid var(--pn-line) !important;
  border-radius: var(--pn-radius) !important; box-shadow: var(--pn-shadow-sm) !important;
}
.metric-grid { margin-bottom: 28px !important; }
.metric-card { position: relative; min-height: 132px; padding: 20px !important; overflow: hidden; text-align: left !important; }
.metric-card .metric-label { position: relative; z-index: 1; color: var(--pn-muted); font-size: 13px; font-weight: 650; }
.metric-card .metric-value { position: relative; z-index: 1; margin-top: 13px; color: var(--metric-color, var(--pn-ink)); font-size: 32px; line-height: 1; font-weight: 780; letter-spacing: -.04em; }
.metric-card .metric-help { position: relative; z-index: 1; display: block; margin-top: 8px; color: var(--pn-subtle); font-size: 12px; }
.metric-card.metric-online { --metric-color: var(--pn-success); --metric-soft: var(--pn-success-soft); }
.metric-card.metric-offline { --metric-color: var(--pn-danger); --metric-soft: var(--pn-danger-soft); }

.section-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 12px; }
.section-title { margin: 0; color: var(--pn-ink); font-size: 18px; font-weight: 720; letter-spacing: -.02em; }
.data-card { overflow: hidden; }
.data-card .table-responsive { margin: 0; }
.table { color: var(--pn-ink); }
.table > :not(caption) > * > * { padding: 15px 16px; border-color: #edf0f5; }
.table thead th {
  background: #fafbfc !important; color: #778196 !important; border-bottom: 1px solid var(--pn-line) !important;
  font-size: 11px !important; font-weight: 750 !important; text-transform: uppercase; letter-spacing: .055em;
}
.table tbody tr, .table tbody tr > * { background: white !important; }
.table tbody tr:hover > * { background: #fafcff !important; }
.table tbody tr.table-success > * { background: white !important; }
.table tbody tr.table-danger > * { background: white !important; }
.table tbody tr.table-success { box-shadow: inset 3px 0 0 #22b98a; }
.table tbody tr.table-danger { box-shadow: inset 3px 0 0 #ef5c72; }
.table code { color: #778196; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.status-badge {
  width: fit-content; padding: 5px 9px; border-radius: 999px; background: #f2f4f8;
  color: #667085; font-size: 11px; font-weight: 750; letter-spacing: .035em;
}
.table-success .status-badge { color: #08785a; background: var(--pn-success-soft); }
.table-danger .status-badge { color: #c72c47; background: var(--pn-danger-soft); }
.status-dot { width: 7px !important; height: 7px !important; }

.btn { border-radius: var(--pn-radius-sm) !important; font-weight: 650; letter-spacing: -.01em; }
.btn-primary { background: var(--pn-primary); border-color: var(--pn-primary); box-shadow: 0 5px 14px rgba(37,99,235,.17); }
.btn-primary:hover { background: var(--pn-primary-dark); border-color: var(--pn-primary-dark); }
.btn-outline-primary { color: var(--pn-primary); border-color: #b7cdfc; }
.btn-outline-primary:hover { background: var(--pn-primary-soft); color: var(--pn-primary-dark); border-color: #8db0fa; }
.btn-outline-secondary { color: #58647a; border-color: #d8dee9; }
.btn-outline-secondary:hover { color: var(--pn-ink); background: #f2f5f9; border-color: #cbd3df; }
.form-control, .form-select {
  min-height: 44px; border-color: #d8dee9; border-radius: var(--pn-radius-sm); color: var(--pn-ink);
  box-shadow: 0 1px 2px rgba(15,23,42,.02);
}
.form-control:focus, .form-select:focus { border-color: #7ca5f8; box-shadow: 0 0 0 4px rgba(37,99,235,.1); }
.form-label { color: #39455a; font-size: 13px; font-weight: 650; }
.alert { border: 1px solid var(--pn-line) !important; border-radius: 12px !important; box-shadow: none !important; }
.alert-info { color: #24548f; background: #eff7ff; border-color: #d7eaff !important; }
.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border: 1px solid rgba(13, 110, 253, .22);
  border-radius: 50%;
  background: rgba(13, 110, 253, .10);
  color: #0b5ed7;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  user-select: none;
}
.info-dot:hover,
.info-dot:focus-visible {
  background: rgba(13, 110, 253, .16);
  outline: 2px solid rgba(13, 110, 253, .22);
  outline-offset: 2px;
}
.alert-warning { color: #805d16; background: var(--pn-warning-soft); border-color: #f6e8b2 !important; }
.modal-content { border: 1px solid var(--pn-line); border-radius: 18px; box-shadow: var(--pn-shadow); }

.app-footer { border-top: 1px solid var(--pn-line); padding: 22px 16px 28px; color: var(--pn-subtle); font-size: 13px; }
.app-footer a { color: var(--pn-muted); }

.admin-dashboard > .row .card {
  min-height: 148px !important; padding: 18px !important; text-align: left !important;
  align-items: flex-start; position: relative; overflow: hidden;
}
.admin-dashboard > .row .card .h6 { color: var(--pn-muted) !important; font-size: 12px; font-weight: 700; }
.admin-dashboard > .row .card .display-6,
.admin-dashboard > .row .card .h3 { color: var(--pn-ink); font-size: 28px; font-weight: 780 !important; letter-spacing: -.035em; }
.admin-dashboard > .row .card small { font-size: 11px; }
.admin-dashboard > h5 { margin: 30px 0 12px !important; color: var(--pn-ink); font-size: 17px; font-weight: 720; }
.admin-dashboard > table {
  overflow: hidden; background: white; border: 1px solid var(--pn-line); border-radius: var(--pn-radius);
  box-shadow: var(--pn-shadow-sm);
}

/* Support tickets */
.ticket-status {
  display: inline-flex; align-items: center; width: fit-content; padding: 6px 10px;
  border-radius: 999px; background: #f2f4f8; color: #667085;
  font-size: 11px; font-weight: 750; line-height: 1; letter-spacing: .025em; white-space: nowrap;
}
.ticket-status::before {
  content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor;
}
.ticket-status-open { color: #245fc5; background: #edf4ff; }
.ticket-status-waiting_on_support { color: #b54708; background: #fff4e6; }
.ticket-status-waiting_on_customer { color: #6941c6; background: #f4f0ff; }
.ticket-status-resolved { color: #08785a; background: var(--pn-success-soft); }
.empty-state { padding: 64px 24px; text-align: center; }
.empty-state h2 { margin-bottom: 8px; color: var(--pn-ink); font-size: 20px; font-weight: 730; }
.empty-state p { max-width: 500px; margin: 0 auto 20px; color: var(--pn-muted); }
.empty-state .btn { align-self: center; }
.support-form-card, .support-side-card { padding: 24px; }
.ticket-thread { display: grid; gap: 14px; }
.ticket-message {
  width: min(88%, 760px); padding: 18px 20px; border: 1px solid var(--pn-line);
  border-radius: 15px; background: white; box-shadow: var(--pn-shadow-sm);
}
.ticket-message-customer { justify-self: start; border-top-left-radius: 5px; }
.ticket-message-support {
  justify-self: end; border-color: #ccdcff; border-top-right-radius: 5px; background: #f5f8ff;
}
.ticket-message-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 9px; }
.ticket-message-head strong { color: var(--pn-ink); font-size: 13px; }
.ticket-message-head time { color: var(--pn-subtle); font-size: 11px; white-space: nowrap; }
.ticket-message-body { color: #344055; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-event { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--pn-muted); font-size: 12px; }
.ticket-event span { padding: 6px 10px; border-radius: 999px; background: #e9edf3; }
.ticket-event small { color: var(--pn-subtle); }
.ticket-filter { min-width: 190px; }
.ticket-meta { display: grid; grid-template-columns: 84px 1fr; gap: 10px 12px; margin: 0; font-size: 13px; }
.ticket-meta dt { color: var(--pn-subtle); font-weight: 650; }
.ticket-meta dd { margin: 0; color: var(--pn-ink); overflow-wrap: anywhere; }
.ops-chart { height: 210px; display: flex; align-items: flex-end; gap: 5px; padding-top: 18px; border-bottom: 1px solid var(--pn-line); }
.ops-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.ops-bar { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--pn-primary); opacity: .82; }
.ops-bar-wrap:hover .ops-bar { opacity: 1; }
.ops-delivery-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #edf0f5; font-size: 13px; }
.ops-delivery-row:last-child { border-bottom: 0; }
.ops-big-number { color: var(--pn-ink); font-size: 32px; line-height: 1.1; font-weight: 780; letter-spacing: -.035em; }
.ops-big-number small { color: var(--pn-subtle); font-size: 16px; font-weight: 650; }

/* Authentication */
.auth-body { min-height: 100vh; padding: 0 !important; align-items: stretch !important; background: #f6f8fc !important; }
.auth-shell { width: 100%; min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr); }
.auth-aside {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  padding: 48px clamp(34px, 5vw, 72px); color: white;
  background: radial-gradient(circle at 18% 16%, rgba(96,165,250,.36), transparent 31%),
              radial-gradient(circle at 84% 75%, rgba(79,70,229,.38), transparent 34%),
              linear-gradient(145deg, #0f1f42, #152b59 60%, #1b3470);
}
.auth-aside::after {
  content: ""; position: absolute; width: 360px; height: 360px; right: -160px; bottom: -150px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
}
.auth-product-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 750; }
.auth-product-mark { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: white; color: #17336b; font-size: 13px; font-weight: 850; }
.auth-message { position: relative; z-index: 1; max-width: 520px; padding-block: 64px; }
.auth-message-kicker { color: #93c5fd; font-size: 12px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.auth-message h1 { margin: 14px 0 18px; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.04; font-weight: 760; letter-spacing: -.045em; }
.auth-message p { max-width: 470px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.65; }
.auth-points { display: grid; gap: 12px; margin-top: 28px; padding: 0; list-style: none; color: rgba(255,255,255,.86); font-size: 14px; }
.auth-points li::before { content: "✓"; display: inline-flex; margin-right: 10px; color: #7dd3fc; font-weight: 800; }
.auth-aside-foot { position: relative; z-index: 1; color: rgba(255,255,255,.48); font-size: 12px; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-wrap { max-width: 480px !important; }
.auth-wrap > .alert { margin-bottom: 16px; }
.auth-card { padding: 38px !important; border: 1px solid var(--pn-line) !important; border-radius: var(--pn-radius-lg) !important; box-shadow: var(--pn-shadow) !important; }
.auth-card > .text-center:first-child { display: none; }
.auth-card h3 { font-size: 28px; font-weight: 760; letter-spacing: -.035em; }
.auth-card .text-muted { color: var(--pn-muted) !important; }
.auth-card .btn { min-height: 46px; }

@media (max-width: 991.98px) {
  .app-body { padding-top: 64px !important; }
  .app-nav-container { padding-inline: 16px; }
  .app-navbar .navbar-collapse { padding: 12px 0 8px; border-top: 1px solid var(--pn-line); margin-top: 8px; }
  .app-nav-links { align-items: stretch; }
  .app-user-chip { border-left: 0; border-top: 1px solid var(--pn-line); margin: 8px 0 0; padding: 12px 8px 4px; }
  .app-logout { width: 100%; text-align: left; }
  .auth-shell { grid-template-columns: minmax(300px, .72fr) minmax(450px, 1fr); }
  .auth-aside { padding: 38px 32px; }
  .auth-message h1 { font-size: 38px; }
}

@media (max-width: 767.98px) {
  .app-page { padding: 24px 14px 36px !important; }
  .page-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .metric-card { min-height: 112px; }
  .table > :not(caption) > * > * { padding: 13px 14px; }
  .auth-shell { display: block; }
  .auth-aside { min-height: 220px; padding: 28px 24px; justify-content: flex-start; }
  .auth-message { padding: 34px 0 0; }
  .auth-message h1 { margin: 10px 0; font-size: 31px; }
  .auth-message p { margin: 0; font-size: 14px; line-height: 1.5; }
  .auth-points, .auth-aside-foot { display: none; }
  .auth-main { padding: 0 14px 32px; margin-top: -22px; position: relative; z-index: 2; }
  .auth-card { padding: 28px 22px !important; }
  .ticket-message { width: 100%; padding: 16px; }
  .ticket-message-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .ticket-event { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ticket-filter { width: 100%; }
  .ops-chart { height: 150px; gap: 3px; }
  .ops-delivery-row { grid-template-columns: 1fr; gap: 4px; }
}