body { background:#f5f6f8; }
.navbar-brand i { vertical-align: -2px; }
.table td, .table th { vertical-align: middle; }
.bg-warning-subtle { background:#fff3cd; }
[dir="rtl"] .me-auto { margin-inline-end:auto; }
/* nav badge spacing */
.navbar-nav .nav-link .badge { margin-inline-start:.25rem; vertical-align:top; font-size:.7rem; }
/* RTL: open dropdowns toward the start edge */
[dir="rtl"] .dropdown-menu { text-align:right; }
/* keep the manage dropdown readable on the blue bar */
.navbar-dark .dropdown-menu { --bs-dropdown-link-color:#212529; }
/* clickable dashboard cards */
.stat-card { transition: transform .08s ease, box-shadow .08s ease; height: 100%; }
a:has(> .stat-card){ display:block; height:100%; }
a:hover > .stat-card { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1)!important; }
a .stat-card .h3, a .stat-card .h4, a .stat-card .h5 { color:#212529; }

/* ============================================================
   Shared admin page components (v2.1 professional redesign)
   ============================================================ */
.adm-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.adm-head h4 { margin:0; font-weight:700; letter-spacing:-.01em; }
.adm-head .sub { color:#94a3b8; font-size:.85rem; margin-top:2px; }
.adm-actions { display:flex; gap:8px; flex-wrap:wrap; }

.adm-card { border:1px solid #e9edf2; border-radius:16px; background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.04); }
.adm-card > .table-responsive { border-radius:16px; }
.adm-card .adm-card-body { padding:20px 22px; }
.adm-section-title { font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:#94a3b8; font-weight:700; margin-bottom:12px; }

/* search bar */
.adm-search { margin-bottom:16px; }
.adm-search .input-group-text { background:#fff; border-inline-end:0; color:#94a3b8; }
.adm-search .form-control { border-inline-start:0; }
.adm-search .form-control:focus { box-shadow:none; border-color:#e2e8f0; }

/* table */
.adm-table { width:100%; margin:0; border-collapse:separate; border-spacing:0; }
.adm-table thead th {
  background:#f8fafc; color:#64748b; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  font-weight:700; padding:12px 16px; border-bottom:1px solid #e9edf2; white-space:nowrap;
}
.adm-table thead th.sortable { cursor:pointer; user-select:none; }
.adm-table thead th.sortable:hover { color:var(--brand, #0d6efd); }
.adm-table tbody td { padding:13px 16px; border-bottom:1px solid #f1f5f9; font-size:.92rem; vertical-align:middle; }
.adm-table tbody tr:last-child td { border-bottom:0; }
.adm-table tbody tr { transition:background .12s ease; }
.adm-table tbody tr:hover { background:#f8fafc; }
.adm-empty { text-align:center; color:#94a3b8; padding:38px 16px; }
.adm-empty i { font-size:1.6rem; display:block; margin-bottom:8px; opacity:.5; }

/* small avatar / badge chips reused across pages */
.adm-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; background:#f1f5f9; color:#475569; }
.adm-chip.brand { background:color-mix(in srgb, var(--brand, #0d6efd) 14%, #fff); color:var(--brand, #0d6efd); }
.adm-avatar { width:34px; height:34px; border-radius:50%; background:color-mix(in srgb, var(--brand,#0d6efd) 14%, #fff); color:var(--brand,#0d6efd); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; }

/* modal polish */
.modal-content { border:0; border-radius:16px; overflow:hidden; }
.modal-header { border-bottom:1px solid #f1f5f9; }
.modal-footer { border-top:1px solid #f1f5f9; }

/* ============================================================
   Global card/table uplift — applies the professional look to
   every page that still uses Bootstrap .card / .table, so pages
   not individually restyled still match (dashboards, kb, etc.)
   ============================================================ */
.card { border:1px solid #e9edf2; border-radius:14px; }
.card.shadow-sm { box-shadow:0 1px 3px rgba(16,24,40,.04)!important; }
.stat-card { border-radius:14px; }
.card-body { padding:1.1rem 1.25rem; }

/* soften default tables app-wide */
.table { --bs-table-border-color:#f1f5f9; }
.table > :not(caption) > * > * { padding:.7rem .9rem; }
.table thead th { color:#64748b; font-size:.8rem; font-weight:700; }

/* page headings a touch tighter/darker */
h4 { font-weight:700; letter-spacing:-.01em; }

/* inputs & buttons: slightly rounder to match cards */
.form-control, .form-select, .input-group-text { border-radius:9px; }
.btn { border-radius:9px; }
.input-group > .form-control:not(:first-child),
.input-group > .btn:not(:first-child) { border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group > .form-control:not(:last-child),
.input-group > .input-group-text:not(:last-child) { border-top-right-radius:0; border-bottom-right-radius:0; }
[dir="rtl"] .input-group > .form-control:not(:first-child) { border-radius:9px; border-top-right-radius:0; border-bottom-right-radius:0; }

/* modal roundness already handled by .modal-content above */

/* ============================================================
   Shared ticket-detail styles (used by user + staff ticket views)
   ============================================================ */
.tk-wrap { max-width: 100%; margin: 0 auto; }
.tk-hero { border-radius: 16px 16px 0 0; padding: 22px 26px; color: var(--brand-text);
           background: linear-gradient(135deg, var(--brand), var(--brand-hover)); }
.tk-hero h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.tk-hero .meta { opacity:.9; font-size:.85rem; margin-top:6px; }
.tk-card { border:1px solid #e9edf2; border-radius:16px; background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.04); }
.tk-body { padding: 22px 26px; }
.tk-section-title { font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:#94a3b8; font-weight:700; margin-bottom:12px; }
.tk-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:600; }
.tk-pill-brand { background: rgba(255,255,255,.9); color: var(--brand); }
.tk-pill-onhero { background: rgba(255,255,255,.22); color: var(--brand-text); }
.tk-meta-row { display:flex; align-items:baseline; gap:16px; padding:9px 0; border-bottom:1px solid #f1f5f9; font-size:.9rem; }
.tk-meta-row:last-child { border-bottom:0; }
.tk-meta-row .k { color:#64748b; flex:0 0 42%; }
.tk-meta-row .v { font-weight:600; color:#0f172a; flex:1; text-align:left; }
[dir="rtl"] .tk-meta-row .v { text-align:right; }
.tk-thread { position:relative; }
.tk-msg { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid #f4f6f9; }
.tk-msg:last-child { border-bottom:0; }
.tk-avatar { flex:0 0 38px; width:38px; height:38px; border-radius:50%;
             background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand);
             display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.tk-msg-body { flex:1; min-width:0; }
.tk-msg-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
.tk-msg-head .who { font-weight:600; color:#0f172a; }
.tk-msg-head .when { color:#94a3b8; font-size:.8rem; }
.tk-msg-text { color:#334155; white-space:pre-wrap; word-wrap:break-word; }
.tk-msg.internal { background:#fffbeb; border-radius:10px; padding:12px 14px; border-bottom:0; }
.tk-msg.rfi { background:#ecfeff; border-radius:10px; padding:12px 14px; border-bottom:0; }
.tk-msg.cxl { background:#fef2f2; border-radius:10px; padding:12px 14px; border-bottom:0; }
.tk-msg.cmt { background:#f8fafc; border-radius:10px; padding:12px 14px; border-bottom:0; }
.tk-approval-step { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:.9rem; }
.tk-dot { width:10px; height:10px; border-radius:50%; flex:0 0 10px; }

/* Approvals inbox (My Approvals -> Pending) */
.appr-list { max-height: 70vh; overflow-y: auto; border-radius: 12px; }
.appr-list .appr-item { border: 0; border-bottom: 1px solid #f1f5f9; padding: 12px 14px; cursor: pointer; }
.appr-list .appr-item:last-child { border-bottom: 0; }
.appr-list .appr-item.active { background: #eef2ff; color: inherit; border-color: #e0e7ff; }
.appr-list .appr-item.active .text-muted { color: #4f46e5 !important; }
[dir="rtl"] .appr-list .appr-item { text-align: right; }

/* Vertical approval "train route" timeline (ticket sidebar) */
.tk-route { position: relative; padding: 4px 0; }
.tk-route-step { display: flex; gap: 12px; }
.tk-route-marker { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.tk-route-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; z-index: 1; flex: 0 0 auto; }
.tk-route-line { width: 2px; flex: 1 1 auto; min-height: 22px; margin: 2px 0; }
.tk-route-content { padding-bottom: 18px; padding-top: 0; line-height: 1.35; }
.tk-route-step:last-child .tk-route-content { padding-bottom: 0; }
[dir="rtl"] .tk-route-step { text-align: right; }

/* ============================================================
   Mobile readiness + iOS auto-zoom prevention
   ============================================================ */

/* Prevent iOS Safari from auto-zooming when a field gains focus.
   iOS zooms whenever a focused input's font-size is below 16px, so we
   force every form control to 16px on touch/phone widths. Desktop keeps
   the compact sizing. Applied to sm variants too, which are 14px by default. */
@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
    /* keep the compact height feel without shrinking the text */
    line-height: 1.4;
  }

  /* Stack the page header (title + action buttons) vertically and let
     the action buttons go full-ish width so they're tap-friendly. */
  .adm-head { align-items: flex-start; }
  .adm-actions { width: 100%; }
  .adm-actions .btn { flex: 1 1 auto; }

  /* Tighter table cells so wide tables need less horizontal scrolling. */
  .adm-table thead th,
  .adm-table tbody td { padding: 10px 10px; }
  .adm-table tbody td { font-size: .9rem; }

  /* Cards use a little less inner padding on small screens. */
  .adm-card-body { padding: 16px; }

  /* Modal dialogs get small side margins instead of touching the edges. */
  .modal-dialog { margin: .5rem; }

  /* The approvals inbox splits into a stacked list + preview on phones. */
  .appr-list { max-height: 40vh; }

  /* Ticket two-column layouts collapse naturally via Bootstrap's grid;
     ensure the train-route timeline and meta rows stay readable. */
  .tk-meta-row { gap: 10px; }
  .tk-meta-row .k { flex-basis: 45%; }
}

/* Make horizontal scroll on wide tables discoverable (subtle) and smooth
   on touch devices, at any width. */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Never let images/logos overflow their container on small screens. */
img { max-width: 100%; height: auto; }