/* =============================================================
   RedTrac Design System — Component Classes
   Requires redtrac-design-tokens.css loaded first.
   All classes use .rt-* prefix to avoid Bootstrap conflicts.
   ============================================================= */

/* ═══════════════════════════ Layout shell ═══════════════════════════ */

.rt-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w, 248px) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  transition: grid-template-columns 0.2s ease;
}
.rt-app.collapsed { --sidebar-w: 64px; }

/* ═══════════════════════════ Sidebar ═══════════════════════════ */

.rt-sidebar {
  grid-area: sidebar;
  background: #1c1f23;
  color: #d9dadc;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #000;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 40;
}

.rt-sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #2a2e33;
  min-height: 60px;
}
.rt-sidebar .brand img {
  height: 28px;
  width: auto;
}
.rt-sidebar .brand .ccare {
  font-size: 10px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.rt-sidebar .brand .brand-c { display: none; width: 28px; height: 28px; flex-shrink: 0; }
.rt-app.collapsed .rt-sidebar .brand .text { display: none; }
.rt-app.collapsed .rt-sidebar .brand .brand-full { display: none; }
.rt-app.collapsed .rt-sidebar .brand .brand-c { display: block; }

.rt-sidebar .toggle {
  position: absolute;
  top: 18px;
  right: 10px;
  background: transparent;
  border: 0;
  color: #999;
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
}
.rt-sidebar .toggle:hover { color: #fff; }
.rt-app.collapsed .rt-sidebar .brand { flex-direction: column; align-items: center; padding: 10px 8px; gap: 6px; }
.rt-app.collapsed .rt-sidebar .toggle { position: static; transform: none; }

.rt-sidebar .nav-search {
  position: relative;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #2a2e33;
}
.rt-sidebar .nav-search > i.fa-magnifying-glass {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #6a7079;
  font-size: 12px;
  pointer-events: none;
}
.rt-sidebar .nav-search input {
  width: 100%;
  background: #14171a;
  border: 1px solid #2a2e33;
  border-radius: var(--rt-radius-sm, 6px);
  color: #e6e7ea;
  font-size: 13px;
  padding: 7px 28px 7px 30px;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.rt-sidebar .nav-search input::placeholder { color: #6a7079; }
.rt-sidebar .nav-search input:focus {
  border-color: var(--rt-red);
  background: #1a1d21;
}
.rt-sidebar .nav-search-clear {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #6a7079;
  cursor: pointer;
  font-size: 12px;
  padding: 4px;
  display: none;
  line-height: 1;
}
.rt-sidebar .nav-search-clear:hover { color: #fff; }
.rt-sidebar.is-searching .nav-search-clear { display: block; }
.rt-app.collapsed .rt-sidebar .nav-search { display: none; }

.rt-sidebar .nav-search-empty {
  display: none;
  padding: 16px;
  color: #6a7079;
  font-size: 12px;
  text-align: center;
  font-style: italic;
}
.rt-sidebar.is-searching.no-matches .nav-search-empty { display: block; }
.rt-app.collapsed .rt-sidebar .nav-search-empty { display: none !important; }

.rt-sidebar .nav-section.hidden,
.rt-sidebar .nav-item.hidden,
.rt-sidebar .nav-parent.hidden { display: none !important; }

.rt-sidebar.is-searching .nav-parent .nav-submenu {
  max-height: 2000px;
}
.rt-sidebar.is-searching .submenu-chevron { opacity: 0.4; }

.rt-sidebar .nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: #2a2e33 transparent;
}
.rt-sidebar .nav-scroll::-webkit-scrollbar { width: 6px; }
.rt-sidebar .nav-scroll::-webkit-scrollbar-thumb { background: #2a2e33; border-radius: 3px; }

.rt-sidebar .section-label {
  padding: 14px 16px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a7079;
}
.rt-app.collapsed .rt-sidebar .section-label {
  display: none;
}

.rt-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  color: #c8c9cc;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.rt-sidebar .nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: #8a8f96;
}
.rt-sidebar .nav-item:hover { background: #25292e; color: #fff; }
.rt-sidebar .nav-item:hover i { color: #fff; }
.rt-sidebar .nav-item.active {
  background: rgba(228, 60, 57, 0.12);
  color: #fff;
  border-left-color: var(--rt-red);
  font-weight: 500;
}
.rt-sidebar .nav-item.active i { color: var(--rt-red); }
.rt-sidebar .nav-item .badge-count {
  margin-left: auto;
  font-size: 10px;
  background: var(--rt-red);
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.rt-app.collapsed .rt-sidebar .nav-item { padding: 10px 0; justify-content: center; }
.rt-app.collapsed .rt-sidebar .nav-item .label,
.rt-app.collapsed .rt-sidebar .nav-item .badge-count { display: none; }

/* ── Sidebar submenus ── */
.rt-sidebar .parent-toggle { user-select: none; }
.rt-sidebar .submenu-chevron {
  margin-left: auto;
  font-size: 10px;
  color: #6a7079;
  transition: transform 0.2s ease;
}
.rt-sidebar .nav-parent.open > .parent-toggle .submenu-chevron {
  transform: rotate(90deg);
}
.rt-sidebar .nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.rt-sidebar .nav-parent.open > .nav-submenu {
  max-height: 1200px;
}
.rt-sidebar .sub-item {
  padding-left: 44px !important;
  font-size: 13px;
}
.rt-sidebar .sub-item i {
  font-size: 12px;
}
.rt-app.collapsed .rt-sidebar .nav-submenu,
.rt-app.collapsed .rt-sidebar .submenu-chevron { display: none; }

.rt-sidebar .user-strip {
  padding: 10px 14px;
  border-top: 1px solid #2a2e33;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
}
.rt-sidebar .user-strip:hover { background: #25292e; }
.rt-sidebar .user-strip .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--rt-red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.rt-sidebar .user-strip .info { flex: 1; min-width: 0; line-height: 1.2; }
.rt-sidebar .user-strip .name { font-weight: 600; color: #fff; }
.rt-sidebar .user-strip .role { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.06em; }
.rt-app.collapsed .rt-sidebar .user-strip { padding: 10px 0; justify-content: center; }
.rt-app.collapsed .rt-sidebar .user-strip .info,
.rt-app.collapsed .rt-sidebar .user-strip .caret { display: none; }

/* ═══════════════════════════ Topbar ═══════════════════════════ */

.rt-topbar {
  grid-area: topbar;
  background: #fff;
  border-bottom: 1px solid #e2e4e7;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  min-height: 56px;
  position: sticky; top: 0; z-index: 30;
}
.rt-topbar.archived { background: #fff8e3; border-bottom-color: #ffe69c; }
.rt-topbar .job {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--rt-border);
  background: var(--rt-bg-surface);
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
}
.rt-topbar .job:hover { background: var(--rt-bg-surface-2); }
.rt-topbar .job .hardhat {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(228,60,57,0.1); color: var(--rt-red);
  display: flex; align-items: center; justify-content: center;
}
.rt-topbar .job .name { font-weight: 600; }
.rt-topbar .breadcrumb-rt {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--rt-fg-muted);
  margin: 0; padding: 0; background: none;
}
.rt-topbar .spacer { flex: 1; }
.rt-topbar .icon-btn {
  background: transparent; border: 0; padding: 8px;
  border-radius: 6px; cursor: pointer; color: var(--rt-fg-strong);
  font-size: 15px; position: relative;
  text-decoration: none;
}
.rt-topbar .icon-btn:hover { background: var(--rt-bg-surface-2); }
.rt-topbar .search-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--rt-bg-surface-2);
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--rt-fg-muted);
}
.rt-topbar .search-pill:hover { background: #eef0f3; }

/* Persistent Check Out / Check In quick actions (right side of the topbar) */
.rt-topbar .quick-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.rt-topbar .quick-action i { font-size: 13px; }
.rt-topbar .quick-action.out {
  background: var(--rt-red); color: #fff; border-color: var(--rt-red);
}
.rt-topbar .quick-action.out:hover {
  background: var(--rt-red-hover); border-color: var(--rt-red-hover); color: #fff;
}
.rt-topbar .quick-action.in {
  background: var(--rt-bg-surface); color: var(--rt-red); border-color: var(--rt-red);
}
.rt-topbar .quick-action.in:hover { background: var(--rt-danger-bg); color: var(--rt-red); }
/* Collapse to icon-only when horizontal room runs short */
@media (max-width: 720px) {
  .rt-topbar .quick-action .qa-label { display: none; }
  .rt-topbar .quick-action { padding: 8px; }
}

/* ═══════════════════════════ Main area ═══════════════════════════ */

.rt-main {
  grid-area: main;
  padding: 24px;
  overflow-x: hidden;
  background: var(--rt-bg-surface-2);
}
.rt-main .max {
  max-width: 100%;
}

/* Inside the sidebar layout, let Bootstrap containers use full width */
.rt-main .container {
  max-width: 100%;
}

/* Page header */
.rt-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.rt-page-head h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}
.rt-page-head .sub {
  font-size: 13px;
  color: var(--rt-fg-muted);
  margin-top: 2px;
}
.rt-page-head .actions { display: flex; gap: 8px; }

/* Page title (legacy dark bar) */
.rt-page-title {
  display: inline-block;
  background: var(--rt-bg-dark);
  color: var(--rt-fg-on-dark);
  border-radius: var(--rt-radius-sm);
  padding: 8px 18px;
  font-size: var(--rt-fs-xl);
  font-weight: var(--rt-fw-semi);
  text-align: center;
}

/* ═══════════════════════════ Buttons ═══════════════════════════ */

.rt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 8px 14px; border-radius: 6px;
  border: 1px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: var(--rt-fw-med);
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background 0.12s;
}
.rt-btn-primary { background: var(--rt-red); border-color: var(--rt-red); color: #fff; }
.rt-btn-primary:hover { background: var(--rt-red-hover); }
.rt-btn-primary:active { background: var(--rt-red-active); }
.rt-btn-outline-primary { background: transparent; border-color: var(--rt-red); color: var(--rt-red); }
.rt-btn-outline-primary:hover { background: var(--rt-red); color: #fff; }
.rt-btn-secondary { background: var(--rt-secondary); color: #000; border-color: #e2e4e7; }
.rt-btn-secondary:hover { background: var(--rt-secondary-hover); }
.rt-btn-dark { background: var(--rt-bg-dark); color: #fff; }
.rt-btn-success { background: var(--rt-success); color: #fff; }
.rt-btn-warning { background: var(--rt-warning); color: #000; }
.rt-btn-danger { background: var(--rt-red); color: #fff; }
.rt-btn-ghost { background: transparent; color: var(--rt-fg); border-color: var(--rt-border); }
.rt-btn-ghost:hover { background: var(--rt-bg-surface-2); }
.rt-btn-link { background: transparent; border: 0; color: var(--rt-red); padding: 6px; }
.rt-btn-sm { padding: 5px 10px; font-size: 12px; }
.rt-btn-lg { padding: 12px 18px; font-size: 15px; }
.rt-btn-block { width: 100%; }
.rt-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════ Input group ═══════════════════════════ */

.rt-input-group { display: flex; align-items: stretch; }
.rt-input-group > input,
.rt-input-group > .form-control {
  flex: 1; padding: 8px 12px;
  border: 1px solid var(--rt-border);
  font-family: inherit; font-size: 14px;
  background: #fff; color: var(--rt-fg);
  min-width: 0;
}
.rt-input-group > input:first-child,
.rt-input-group > .form-control:first-child { border-radius: 6px 0 0 6px; }
.rt-input-group > input:last-child,
.rt-input-group > .form-control:last-child { border-radius: 0 6px 6px 0; }
.rt-input-group > input:only-child,
.rt-input-group > .form-control:only-child { border-radius: 6px; }
.rt-input-group > .addon {
  display: inline-flex; align-items: center;
  padding: 0 14px;
  background: var(--rt-secondary);
  border: 1px solid var(--rt-border);
  border-left: 0;
  font-size: 14px; color: var(--rt-fg);
}
.rt-input-group > .addon:first-child {
  border-left: 1px solid var(--rt-border); border-right: 0;
  border-radius: 6px 0 0 6px;
}
.rt-input-group > .addon:last-child { border-radius: 0 6px 6px 0; }
.rt-input-group > input + .addon { border-left: 0; }
.rt-input-group input::placeholder { color: #999; }
.rt-input-group input.invalid {
  border-color: var(--rt-red);
  box-shadow: 0 0 0 0.2rem rgba(255,0,0,0.25);
}

.rt-form-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.rt-form-row label.col-form-label {
  flex: 0 0 130px;
  font-weight: var(--rt-fw-semi);
  font-size: 14px;
}
.rt-form-row .rt-input-group { flex: 1; }

/* ═══════════════════════════ Card ═══════════════════════════ */

.rt-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e8eaed;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  padding: 18px;
}
.rt-card .head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.rt-card .head h3 {
  margin: 0; font-size: 15px; font-weight: 600;
}
.rt-card .head .sub {
  font-size: 12px; color: var(--rt-fg-muted);
}

/* ═══════════════════════════ Tile grids ═══════════════════════════ */

.rt-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.rt-icon-tile {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 16px 12px;
  border-radius: 10px;
  border: 1px solid #e8eaed;
  background: #fff;
  color: var(--rt-fg-strong);
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.rt-icon-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(16,24,40,0.08);
  border-color: #d6d9dd;
  color: var(--rt-fg-strong);
  text-decoration: none;
}
.rt-icon-tile i { font-size: 22px; color: var(--rt-fg-strong); }
.rt-icon-tile p { margin: 0; font-size: 13px; font-weight: 500; }
.rt-icon-tile.main-tile {
  background: var(--rt-red); color: #fff; border-color: transparent;
  box-shadow: 0 4px 8px rgba(228,60,57,0.25);
}
.rt-icon-tile.main-tile:hover {
  background: var(--rt-red-deep);
  box-shadow: 0 6px 14px rgba(228,60,57,0.35);
  color: #fff;
}
.rt-icon-tile.main-tile i { color: #fff; }

/* ═══════════════════════════ KPI ═══════════════════════════ */

.rt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.rt-kpi-card {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #e8eaed;
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.rt-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(16,24,40,0.08); }
.rt-kpi-card .label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--rt-fg-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.rt-kpi-card .label i { font-size: 12px; }
.rt-kpi-card .value {
  font-size: 28px; font-weight: 700;
  line-height: 1.1; color: var(--rt-fg-strong);
}
.rt-kpi-card.alert {
  border-left: 4px solid var(--rt-red);
  background: linear-gradient(90deg, #fff5f4 0%, #fff 30%);
}
.rt-kpi-card.alert .value { color: var(--rt-red-deep); }

/* ═══════════════════════════ List rows ═══════════════════════════ */

.rt-list-rows { display: flex; flex-direction: column; }
.rt-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid #f0f1f3;
  font-size: 14px;
}
.rt-list-row:last-child { border-bottom: 0; }
.rt-list-row .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #eef0f3; color: var(--rt-fg-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rt-list-row .avatar.red { background: rgba(228,60,57,0.12); color: var(--rt-red); }
.rt-list-row .avatar.green { background: #d1e7dd; color: #0a3622; }
.rt-list-row .avatar.amber { background: #fff3cd; color: #664d03; }
.rt-list-row .main { flex: 1; min-width: 0; }
.rt-list-row .main .t { font-weight: 500; }
.rt-list-row .main .s { font-size: 12px; color: var(--rt-fg-muted); }
.rt-list-row .right { font-size: 12px; color: var(--rt-fg-muted); text-align: right; flex-shrink: 0; }

/* ═══════════════════════════ Badge / alert ═══════════════════════════ */

.rt-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px; color: #fff;
  background: var(--rt-red);
}
.rt-badge.success { background: var(--rt-success); }
.rt-badge.warning { background: var(--rt-warning); color: #000; }
.rt-badge.dark { background: var(--rt-bg-dark); }
.rt-badge.info { background: var(--rt-info); color: #000; }
.rt-badge.soft-danger { background: rgba(228,60,57,0.1); color: var(--rt-red-deep); }
.rt-badge.soft-success { background: #d1e7dd; color: #0a3622; }
.rt-badge.soft-warning { background: #fff3cd; color: #664d03; }
.rt-badge.outline {
  background: transparent; color: var(--rt-fg-muted);
  border: 1px solid var(--rt-border);
}

.rt-alert {
  padding: 10px 14px; border-radius: 6px; font-size: 14px;
  border: 1px solid; display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.rt-alert.success { background: #d1e7dd; color: #0a3622; border-color: #a3cfbb; }
.rt-alert.warning { background: #fff3cd; color: #664d03; border-color: #ffe69c; }
.rt-alert.danger  { background: #f8d7da; color: #58151c; border-color: #f1aeb5; }
.rt-alert.info    { background: #cff4fc; color: #055160; border-color: #9eeaf9; }

/* ═══════════════════════════ Scan card ═══════════════════════════ */

.rt-scan-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e8eaed;
  padding: 18px;
}
.rt-scan-card .heading { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.rt-scan-card .status {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-bottom: 14px;
  color: var(--rt-success); font-weight: 600; font-size: 14px;
}

.rt-or {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 40px; align-self: stretch;
}
.rt-or .line { flex: 1; width: 1px; background: var(--rt-border); }
.rt-or .text {
  padding: 6px 0; font-size: 12px; color: #666;
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* ═══════════════════════════ Modal ═══════════════════════════ */

.rt-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(16,24,40,0.45);
  z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: rtFadeIn 0.15s ease;
}
@keyframes rtFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rt-modal {
  width: 100%; max-width: 560px;
  background: #fff; border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(16,24,40,0.2);
  display: flex; flex-direction: column;
  max-height: 90vh;
}
.rt-modal.modal-xl { max-width: 1100px; }
.rt-modal-header {
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600;
}
.rt-modal-header.danger { background: var(--rt-red); color: #fff; }
.rt-modal-header.warning { background: var(--rt-warning); color: #000; }
.rt-modal-header.plain { border-bottom: 1px solid var(--rt-border); }
.rt-modal-header button.close {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font-size: 22px; line-height: 1;
}
.rt-modal-body { padding: 16px; overflow: auto; }
.rt-modal-footer {
  padding: 12px 16px;
  display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--rt-border);
}

/* ═══════════════════════════ Warning banner ═══════════════════════════ */

.rt-warning-banner {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff3f3;
  border: 1px solid #f1aeb5;
  border-left: 5px solid #dc3545;
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(220,53,69,0.15);
  animation: rtPulse 2s ease-in-out 3;
  position: relative;
  margin-bottom: 18px;
}
.rt-warning-banner .icon { font-size: 28px; color: #dc3545; line-height: 1; }
.rt-warning-banner .title { font-size: 16px; font-weight: 700; color: #b02a37; }
.rt-warning-banner .detail { font-size: 14px; color: #333; margin-top: 2px; }
.rt-warning-banner .link { display: inline-block; margin-top: 6px; font-weight: 600; color: #dc3545; font-size: 14px; cursor: pointer; text-decoration: none; }
.rt-warning-banner .x { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; font-size: 20px; cursor: pointer; color: #999; }
@keyframes rtPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(220,53,69,0.15); }
  50% { box-shadow: 0 4px 22px rgba(220,53,69,0.4); }
}

/* ═══════════════════════════ Table ═══════════════════════════ */

.rt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}
.rt-table thead tr { background: #f8f9fa; border-bottom: 1px solid #e2e4e7; }
.rt-table th { padding: 10px 14px; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rt-fg-muted); }
.rt-table td { padding: 12px 14px; }
.rt-table tbody tr { border-bottom: 1px solid #f0f1f3; }
.rt-table tbody tr:last-child { border-bottom: 0; }
.rt-table tbody tr:hover { background: #fafbfc; }
.rt-table tbody tr.alert-row { background: #fff5f4; }
.rt-table tbody tr.alert-row:hover { background: #ffeae8; }
.rt-table.compact td, .rt-table.compact th { padding: 8px 10px; }

/* ═══════════════════════════ Progress ═══════════════════════════ */

.rt-progress {
  height: 8px; background: #eef0f3; border-radius: 999px; overflow: hidden;
}
.rt-progress .fill { height: 100%; background: var(--rt-red); transition: width 0.3s; border-radius: inherit; }
.rt-progress .fill.success { background: var(--rt-success); }
.rt-progress .fill.warning { background: var(--rt-warning); }

/* ═══════════════════════════ Filter bar ═══════════════════════════ */

.rt-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  margin-bottom: 14px;
}
.rt-filter-bar .search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  background: #fafbfc;
}
.rt-filter-bar .search input {
  flex: 1; background: transparent; border: 0; outline: none;
  font-family: inherit; font-size: 14px; color: var(--rt-fg);
}
.rt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--rt-border);
  background: #fff;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  color: var(--rt-fg);
}
.rt-chip:hover { background: var(--rt-bg-surface-2); }
.rt-chip.active { background: rgba(228,60,57,0.08); border-color: var(--rt-red); color: var(--rt-red-deep); }

/* ═══════════════════════════ Tabs ═══════════════════════════ */

.rt-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid #e8eaed;
  margin-bottom: 14px;
}
.rt-tabs button {
  background: transparent; border: 0;
  padding: 10px 14px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--rt-fg-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.rt-tabs button:hover { color: var(--rt-fg); }
.rt-tabs button.active { color: var(--rt-fg); border-bottom-color: var(--rt-red); font-weight: 600; }
.rt-tabs .count {
  display: inline-block; margin-left: 6px;
  font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: #eef0f3; color: var(--rt-fg-muted);
}
.rt-tabs button.active .count { background: rgba(228,60,57,0.12); color: var(--rt-red-deep); }

/* ═══════════════════════════ Drawer ═══════════════════════════ */

.rt-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(16,24,40,0.35);
  z-index: 1040;
  animation: rtFadeIn 0.15s;
}
.rt-drawer {
  position: fixed; top: 0; right: 0;
  width: 100%; max-width: 520px;
  height: 100vh;
  background: #fff;
  z-index: 1041;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(0,0,0,0.18);
  animation: rtSlide 0.2s ease;
}
@keyframes rtSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.rt-drawer .head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rt-border);
}
.rt-drawer .head .title { font-size: 16px; font-weight: 600; }
.rt-drawer .body { flex: 1; overflow: auto; padding: 18px; }
.rt-drawer .foot {
  border-top: 1px solid var(--rt-border);
  padding: 12px 18px;
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ═══════════════════════════ Login ═══════════════════════════ */

.rt-login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
  background: linear-gradient(135deg, #1c1f23 0%, #2a2e33 100%);
}
.rt-login-card {
  width: 100%; max-width: 420px;
  background: var(--rt-bg-surface);
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
  text-align: center;
}
.rt-login-card img { max-width: 180px; margin-bottom: 20px; }

/* ═══════════════════════════ Layout helpers ═══════════════════════════ */

.rt-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.rt-col-4 { grid-column: span 4; }
.rt-col-6 { grid-column: span 6; }
.rt-col-8 { grid-column: span 8; }
.rt-col-12 { grid-column: span 12; }
@media (max-width: 900px) {
  .rt-col-4, .rt-col-6, .rt-col-8 { grid-column: span 12; }
}
.rt-row { display: flex; gap: 14px; flex-wrap: wrap; }
.rt-col { flex: 1; min-width: 0; }
.rt-stack-y { display: flex; flex-direction: column; gap: 12px; }
.rt-mt-3 { margin-top: 12px; }
.rt-mt-4 { margin-top: 16px; }
.rt-mb-3 { margin-bottom: 12px; }
.rt-text-center { text-align: center; }
.rt-text-muted { color: var(--rt-fg-muted); }
.rt-text-danger { color: var(--rt-red); }
.rt-text-success { color: var(--rt-success); }
.rt-divider { border: 0; border-top: 1px solid var(--rt-border); margin: 16px 0; }
.rt-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rt-fg-muted); margin: 0 0 10px; }

/* ═══════════════════════════ Mobile responsive ═══════════════════════════ */

@media (max-width: 768px) {
  .rt-app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .rt-sidebar {
    position: fixed;
    left: -260px;
    width: 248px;
    transition: left 0.2s ease;
    z-index: 50;
  }
  .rt-sidebar.mobile-open {
    left: 0;
  }
  .rt-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 45;
  }
  .rt-sidebar-overlay.active { display: block; }
  .rt-topbar .hamburger { display: inline-flex; }
  .rt-main { padding: 16px; }
  .rt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .rt-tile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) {
  .rt-topbar .hamburger { display: none; }
  .rt-sidebar-overlay { display: none !important; }
}