/* ============================================================
   DRD CHECKPOINT DASHBOARD — TRA Corporate Theme
   Yellow / Gold + Black, per official TRA branding.
   ============================================================ */
:root{
  --tra-yellow:        #F4C400;
  --tra-bright-yellow: #FFEA00;
  --tra-gold-hover:    #d9ae00;
  --tra-black:         #111111;
  --tra-dark:          #2B2B2B;
  --tra-dark-2:        #1a1a1a;
  --tra-grey:          #F5F6F8;
  --tra-white:         #FFFFFF;
  --tra-border:        #E5E7EB;
  --tra-muted:         #6b7280;

  /* legacy aliases kept so existing classes keep working */
  --tra-blue:   var(--tra-black);
  --tra-blue-2: var(--tra-dark);
  --tra-gold:   var(--tra-yellow);
  --bg:         var(--tra-grey);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--tra-grey);
  color:var(--tra-black);
  font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
code{color:var(--tra-dark); background:#fff7c2; padding:1px 4px; border-radius:3px}
a{color:var(--tra-dark)}
a:hover{color:var(--tra-black)}

/* ============================================================
   Login Page — Full-screen split layout (TRA / IDRAS style)
   ============================================================ */
.auth-split{
  display:flex; min-height:100vh; width:100%;
  background:#ffffff; overflow:hidden;
}

/* ---------- LEFT BRANDING ---------- */
.auth-left{
  position:relative;
  flex:1 1 50%;
  background:#f4f5f7;
  padding:32px 48px;
  display:flex; flex-direction:column;
  overflow:hidden;
  border-right:1px solid #ececec;
}
.auth-left-top{
  display:flex; align-items:center; gap:14px;
  position:relative; z-index:2;
}
.auth-brand-logo{
  height:54px; width:auto; flex:0 0 auto;
}
.auth-brand-text{ line-height:1.15; }
.auth-brand-title{
  font-weight:800; font-size:16px; letter-spacing:1px;
  color:var(--tra-black);
}
.auth-watermark{
  position:absolute; right:-80px; bottom:-80px;
  width:420px; height:420px;
  opacity:.05; pointer-events:none; z-index:1;
}
.auth-watermark img{ width:100%; height:100%; object-fit:contain; }

/* ---------- RIGHT FORM ---------- */
.auth-right{
  position:relative;
  flex:1 1 50%;
  background:#ffffff;
  display:flex; flex-direction:column;
  padding:24px 40px 40px;
}
.auth-right-top{
  display:flex; justify-content:flex-end; align-items:center;
}
.auth-lang-select{
  border:1px solid #d9d9d9; background:#fff;
  border-radius:6px; padding:6px 28px 6px 12px;
  font-size:13px; color:#333; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23555' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
}
.auth-form-wrap{
  flex:1; display:flex; align-items:center; justify-content:center;
}
.auth-form{
  width:100%; max-width:380px;
}
.auth-form-title{
  font-size:34px; font-weight:800; color:var(--tra-black);
  margin:0 0 6px;
}
.auth-form-sub{
  font-size:14px; color:#666; margin:0 0 28px;
}
.auth-field{ margin-bottom:14px; }
.auth-input.form-control{
  height:48px; border:1px solid #d9d9d9; border-radius:8px;
  padding:10px 14px; font-size:14px; background:#fafafa;
  box-shadow:none;
}
.auth-input.form-control:focus{
  background:#fff; border-color:var(--tra-yellow);
  box-shadow:0 0 0 .15rem rgba(244,196,0,.25);
}
.auth-row{
  display:flex; align-items:center; justify-content:space-between;
  margin:6px 0 22px; font-size:13px; color:#444;
}
.auth-check{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; margin:0; }
.auth-check input{ width:15px; height:15px; accent-color:var(--tra-black); }
.auth-link{ color:#555; text-decoration:none; }
.auth-link:hover{ color:var(--tra-black); text-decoration:underline; }
.auth-btn{
  display:block; width:100%; padding:13px 16px;
  background:var(--tra-black); color:#fff;
  border:none; border-radius:10px;
  font-weight:600; font-size:15px; letter-spacing:.3px;
  cursor:pointer; transition:background .15s ease, transform .05s ease;
}
.auth-btn:hover{ background:#000; }
.auth-btn:active{ transform:translateY(1px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .auth-split{ flex-direction:column; min-height:100vh; }
  .auth-left{
    flex:0 0 auto; padding:20px 24px 28px;
    border-right:none; border-bottom:1px solid #ececec;
  }
  .auth-watermark{ display:none; }
  .auth-right{ padding:20px 24px 32px; }
}
@media (max-width: 560px){
  .auth-left{ padding:16px 20px; }
  .auth-form-title{ font-size:28px; }
}


/* ============================================================
   Layout
   ============================================================ */
.layout{display:flex; min-height:100vh; position:relative}

/* ---- Sidebar overlay (mobile) ---- */
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:1040; opacity:0; transition:opacity .2s ease;
}
.layout.sidebar-open .sidebar-overlay{display:block; opacity:1}

/* ---- Sidebar ---- */
.sidebar{
  --sb-w: 280px;
  --sb-w-collapsed: 72px;
  width: var(--sb-w);
  background:var(--tra-black); color:#cfcfcf;
  padding:18px 12px; flex-shrink:0; position:sticky; top:0;
  height:100vh; overflow-y:auto; overflow-x:hidden;
  border-right:3px solid var(--tra-yellow);
  transition:width .25s ease, transform .25s ease;
  z-index:1045;
  display:flex; flex-direction:column;
}
.sidebar .nav.flex-column{flex:1 1 auto}
.sidebar-bottom{
  margin-top:auto; padding-top:10px;
  border-top:1px solid #ffffff22;
}
.sidebar-action-btn{
  width:100%; background:rgba(244,196,0,.08); border:1px solid rgba(244,196,0,.35);
  color:var(--tra-yellow) !important; font-weight:600;
}
.sidebar-action-btn:hover{
  background:var(--tra-yellow); color:var(--tra-black) !important;
  border-color:var(--tra-yellow);
}
.sidebar-action-btn:hover i{color:var(--tra-black) !important}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:0 4px 14px; border-bottom:1px solid #ffffff22; margin-bottom:10px;
  position:relative;
}
.brand-text{
  flex:1 1 auto; min-width:0; line-height:1.15;
  display:flex; flex-direction:column; justify-content:center;
}
.brand-mark{
  background:var(--tra-yellow); color:var(--tra-black); font-weight:800;
  width:44px; height:44px; display:grid; place-items:center; border-radius:8px;
  letter-spacing:.5px;
}
.brand-logo{
  height:40px; width:40px; object-fit:contain; flex-shrink:0;
  background:var(--tra-white); padding:3px; border-radius:6px;
}
.brand-name{
  font-weight:800; color:var(--tra-white); letter-spacing:.6px; font-size:12.5px;
  white-space:nowrap; overflow:visible; text-overflow:clip;
}
.brand-sub{
  font-size:11px; color:var(--tra-yellow); letter-spacing:1.5px; font-weight:700;
  white-space:nowrap;
}

/* Collapse toggle button (desktop) */
.sidebar-collapse-btn{
  background:transparent; border:1px solid #ffffff33; color:#cfcfcf;
  width:26px; height:26px; border-radius:6px; display:none;
  align-items:center; justify-content:center; flex-shrink:0;
  cursor:pointer; transition:all .15s ease; padding:0; font-size:11px;
  margin-left:6px;
}
.sidebar-collapse-btn:hover{
  background:var(--tra-yellow); color:var(--tra-black); border-color:var(--tra-yellow);
}
@media (min-width: 1024px){
  .sidebar-collapse-btn{display:inline-flex}
}

.sidebar .nav-link{
  color:#cfcfcf; padding:9px 12px; border-radius:6px;
  display:flex; align-items:center; gap:10px; font-size:14px;
  border-left:3px solid transparent; transition:all .15s ease;
  white-space:nowrap; overflow:hidden;
}
.sidebar .nav-link i{color:#a5a5a5; transition:color .15s ease; flex-shrink:0}
.sidebar .nav-link:hover{
  background:rgba(244,196,0,.12); color:var(--tra-white);
  border-left-color:var(--tra-yellow);
}
.sidebar .nav-link:hover i{color:var(--tra-yellow)}
.sidebar .nav-link.active{
  background:var(--tra-yellow); color:var(--tra-black); font-weight:600;
  border-left-color:var(--tra-bright-yellow);
}
.sidebar .nav-link.active i{color:var(--tra-black)}
.sidebar .nav-link.sub{padding-left:32px; font-size:13px}
.sidebar .nav-section{
  display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer;
  color:#cfcfcf; font-size:14px; user-select:none;
  border-left:3px solid transparent; white-space:nowrap; overflow:hidden;
}
.sidebar .nav-section i{flex-shrink:0}
.sidebar .nav-section:hover{color:var(--tra-yellow)}
.sidebar .nav-sub{display:none; margin:4px 0 6px; border-left:1px dashed #ffffff22; margin-left:18px}
.sidebar .nav-sub.open{display:block}

/* ---- Collapsed sidebar (desktop icons-only) ---- */
.layout.sidebar-collapsed .sidebar{width: var(--sb-w-collapsed)}
.layout.sidebar-collapsed .brand{justify-content:center; padding:0 0 14px}
.layout.sidebar-collapsed .brand-text,
.layout.sidebar-collapsed .sidebar-collapse-btn .bi-chevron-double-left{display:none}
.layout.sidebar-collapsed .sidebar-collapse-btn{
  position:absolute; right:-14px; top:8px; width:24px; height:24px;
  background:var(--tra-yellow); color:var(--tra-black); border-color:var(--tra-yellow);
  display:inline-flex;
}
.layout.sidebar-collapsed .sidebar-collapse-btn::after{
  content:"\F285"; /* bi-chevron-double-right glyph */
  font-family:"bootstrap-icons"; font-size:12px;
}
.layout.sidebar-collapsed .nav-label,
.layout.sidebar-collapsed .nav-caret{display:none}
.layout.sidebar-collapsed .sidebar .nav-link,
.layout.sidebar-collapsed .sidebar .nav-section{
  justify-content:center; padding:10px 6px; gap:0;
}
.layout.sidebar-collapsed .sidebar .nav-link.sub{display:none}
.layout.sidebar-collapsed .sidebar .nav-sub{display:none !important}
.layout.sidebar-collapsed .sidebar .nav-link i,
.layout.sidebar-collapsed .sidebar .nav-section i{font-size:18px}
.layout.sidebar-collapsed .sidebar-action-btn{padding:10px 6px; gap:0}
.layout.sidebar-collapsed .sidebar-action-btn .nav-label{display:none}
/* Tooltip on hover (collapsed) */
.layout.sidebar-collapsed .sidebar .nav-link[data-label],
.layout.sidebar-collapsed .sidebar .nav-section[data-label],
.layout.sidebar-collapsed .sidebar .sidebar-action-btn[data-label]{position:relative}
.layout.sidebar-collapsed .sidebar .nav-link[data-label]:hover::after,
.layout.sidebar-collapsed .sidebar .nav-section[data-label]:hover::after,
.layout.sidebar-collapsed .sidebar .sidebar-action-btn[data-label]:hover::after{
  content: attr(data-label);
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--tra-black); color:var(--tra-yellow); padding:5px 10px;
  border-radius:4px; font-size:12px; white-space:nowrap;
  border:1px solid var(--tra-yellow); z-index:1050;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* ---- Hamburger toggle (mobile) ---- */
.sidebar-toggle-btn{
  background:transparent; border:1px solid var(--tra-border); color:var(--tra-black);
  width:38px; height:38px; border-radius:6px; display:none;
  align-items:center; justify-content:center; cursor:pointer;
  font-size:20px; margin-right:8px; padding:0;
}
.sidebar-toggle-btn:hover{background:var(--tra-yellow); border-color:var(--tra-yellow)}
@media (max-width: 1023px){
  .sidebar-toggle-btn{display:inline-flex}
}

/* ---- Topbar ---- */
.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{
  background:var(--tra-white); padding:10px 18px;
  display:flex; align-items:center; gap:10px;
  border-bottom:3px solid var(--tra-yellow);
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  position:sticky; top:0; z-index:1030;
}
.topbar-title{font-weight:700; color:var(--tra-black); font-size:17px; flex:1; min-width:0;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-actions{display:flex; align-items:center; gap:14px; flex-shrink:0}
.topbar-actions .btn-outline-primary{
  border-color:var(--tra-black); color:var(--tra-black);
}
.topbar-actions .btn-outline-primary:hover{
  background:var(--tra-yellow); border-color:var(--tra-yellow); color:var(--tra-black);
}
.topbar-user{
  display:flex; flex-direction:column; line-height:1.15; text-align:right;
  padding:0 4px; max-width:240px;
}
.topbar-user-name{
  font-weight:600; color:var(--tra-black); font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-user-role{
  font-size:11.5px; color:#6c757d; font-weight:500; letter-spacing:.3px;
}
.topbar-logout{padding:4px 10px}
.content{padding:20px 22px; flex:1; min-width:0}

/* ============================================================
   Responsive breakpoints
   ============================================================ */
/* Tablet/iPad (768–1023px): sidebar still in flex flow but can collapse */
@media (max-width: 1023px){
  .sidebar{
    position:fixed; top:0; left:0; height:100vh;
    transform:translateX(-100%);
  }
  .layout.sidebar-open .sidebar{transform:translateX(0)}
  /* On tablet/mobile, "collapsed" class doesn't apply visually */
  .layout.sidebar-collapsed .sidebar{width: var(--sb-w)}
  .layout.sidebar-collapsed .nav-label,
  .layout.sidebar-collapsed .nav-caret{display:inline}
  .layout.sidebar-collapsed .brand-text{display:block}
  .layout.sidebar-collapsed .sidebar .nav-link,
  .layout.sidebar-collapsed .sidebar .nav-section{justify-content:flex-start; padding:9px 12px; gap:10px}
  .layout.sidebar-collapsed .sidebar .nav-link.sub{display:flex}
  .layout.sidebar-collapsed .sidebar .nav-sub.open{display:block !important}
}
/* Mobile (<768px): tighter padding */
@media (max-width: 767px){
  .content{padding:14px 12px}
  .topbar{padding:8px 12px}
  .topbar-title{font-size:15px}
  .topbar-actions{gap:8px}
}

/* ============================================================
   Buttons (Bootstrap overrides)
   ============================================================ */
.btn{font-weight:500; border-radius:6px; transition:all .15s ease}
.btn-primary{
  background:var(--tra-yellow); border-color:var(--tra-yellow); color:var(--tra-black); font-weight:600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background:var(--tra-gold-hover) !important; border-color:var(--tra-gold-hover) !important;
  color:var(--tra-black) !important;
}
.btn-secondary{
  background:var(--tra-dark); border-color:var(--tra-dark); color:var(--tra-white);
}
.btn-secondary:hover{background:var(--tra-black); border-color:var(--tra-black); color:var(--tra-white)}
.btn-success{background:#1f7a3a; border-color:#1f7a3a}
.btn-success:hover{background:#185f2c; border-color:#185f2c}
.btn-outline-primary{border-color:var(--tra-black); color:var(--tra-black)}
.btn-outline-primary:hover{background:var(--tra-yellow); border-color:var(--tra-yellow); color:var(--tra-black)}
.btn-outline-secondary{border-color:var(--tra-dark); color:var(--tra-dark)}
.btn-outline-secondary:hover{background:var(--tra-dark); color:var(--tra-white)}
.btn-outline-success{border-color:#1f7a3a; color:#1f7a3a}
.btn-outline-success:hover{background:#1f7a3a; color:#fff}
.btn-outline-dark{border-color:var(--tra-black); color:var(--tra-black)}
.btn-outline-dark:hover{background:var(--tra-black); color:var(--tra-white)}
.btn-outline-info{border-color:#0c5460; color:#0c5460}
.btn-outline-info:hover{background:#0c5460; color:#fff}
.btn-link{color:var(--tra-dark)}
.btn-link:hover{color:var(--tra-black)}

/* ============================================================
   KPI cards — interactive / animated
   ============================================================ */
@keyframes kpiIn {
  from { opacity:0; transform:translateY(14px) scale(.98); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes revealUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes rowIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes skelShimmer {
  0%   { background-position:-400px 0; }
  100% { background-position: 400px 0; }
}

.kpi-grid .kpi-col{
  animation: kpiIn .55s cubic-bezier(.2,.9,.25,1.1) both;
  animation-delay: calc(var(--kpi-i, 0) * 80ms);
}
.kpi{
  --kpi-color: var(--tra-yellow);
  --kpi-bg: #fffbea;
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  width:100%; min-height:105px; text-align:left;
  background:var(--kpi-bg);
  border:2px solid var(--kpi-color);
  padding:14px 16px; border-radius:16px;
  box-shadow:0 6px 16px rgba(15,23,42,.08);
  cursor:pointer;
  font: inherit; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.kpi:focus{ outline:none; }
.kpi:focus-visible{ box-shadow:0 0 0 3px rgba(244,196,0,.45); }
.kpi:hover{
  transform: translateY(-3px);
  box-shadow:0 10px 24px rgba(15,23,42,.14);
}
.kpi:active{ transform: translateY(-1px) scale(.995); }

.kpi-head{
  display:flex; align-items:center; justify-content:space-between;
}
.kpi-icon{ font-size:22px; color:var(--kpi-color); transition: transform .35s ease; }
.kpi-chev{ font-size:13px; color:var(--kpi-color); opacity:.7; transition: transform .35s ease; }
.kpi.is-open .kpi-chev{ transform: rotate(180deg); }
.kpi.is-open .kpi-icon{ transform: rotate(-10deg) scale(1.08); }

.kpi-val{font-size:26px; font-weight:800; color:var(--kpi-color); line-height:1; margin-top:6px}
.kpi-lbl{color:#475569; font-size:11px; text-transform:uppercase; letter-spacing:1.3px; font-weight:700; margin-top:6px}

.kpi-primary   { --kpi-color:#f4b400; --kpi-bg:#fffbea; }
.kpi-info      { --kpi-color:#0891b2; --kpi-bg:#ecfeff; }
.kpi-warning   { --kpi-color:#f97316; --kpi-bg:#fff7ed; }
.kpi-danger    { --kpi-color:#e11d48; --kpi-bg:#fff1f2; }
.kpi-success   { --kpi-color:#15803d; --kpi-bg:#f0fdf4; }
.kpi-secondary { --kpi-color:#334155; --kpi-bg:#f8fafc; }

/* Expandable details (max-height transition) */
.kpi-details{
  max-height:0; opacity:0; overflow:hidden;
  margin-top:0;
  transition: max-height .45s cubic-bezier(.2,.9,.25,1.1),
              opacity .25s ease,
              margin-top .35s ease;
  border-top:1px dashed transparent;
}
.kpi.is-open .kpi-details{
  max-height: 260px; opacity:1; margin-top:12px;
  border-top-color: var(--kpi-color);
  padding-top:10px;
}
.kpi-details-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--tra-muted);
  padding:4px 0;
}
.kpi-details-row strong{ color:var(--tra-black); font-weight:700; }
.kpi-details-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; font-size:12px; font-weight:600;
  color:var(--tra-black); text-decoration:none;
  padding:6px 10px; border-radius:6px;
  background:var(--tra-yellow);
  transition: background .15s ease, transform .1s ease;
}
.kpi-details-link:hover{ background:var(--tra-gold-hover); transform: translateX(2px); }

/* ============================================================
   Dashboard panels / chart / table animation
   ============================================================ */
.dash-card{
  border-radius:12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dash-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.reveal{
  animation: revealUp .6s cubic-bezier(.2,.9,.25,1.05) both;
  animation-delay: calc(var(--rev-i, 0) * 120ms + 200ms);
}

/* Chart skeleton */
.chart-wrap{ position:relative; min-height:180px; }
.chart-skeleton{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; gap:10px;
  padding:8px 4px;
}
.chart-skeleton span{
  flex:1; border-radius:6px;
  background: linear-gradient(90deg,#eee 0%, #f7f7f7 50%, #eee 100%);
  background-size: 800px 100%;
  animation: skelShimmer 1.2s linear infinite;
}
.chart-skeleton span:nth-child(1){ height:55%; }
.chart-skeleton span:nth-child(2){ height:80%; }
.chart-skeleton span:nth-child(3){ height:40%; }
.chart-skeleton span:nth-child(4){ height:70%; }
.chart-skeleton span:nth-child(5){ height:50%; }
.chart-skeleton span:nth-child(6){ height:65%; }

/* Animated table rows */
.dash-table tbody tr{
  animation: rowIn .45s ease both;
  animation-delay: calc(var(--row-i, 0) * 60ms + 350ms);
  transition: background-color .15s ease;
}
.dash-table tbody tr:hover{
  background: rgba(244,196,0,.08);
}

/* Empty state */
.empty-state{
  text-align:center; padding:28px 12px; color:var(--tra-muted);
  animation: revealUp .5s ease both;
}
.empty-state-icon{
  font-size:42px; color:var(--tra-border);
  display:inline-block; animation: revealUp .6s ease .1s both;
}
.empty-state-title{ font-weight:600; color:var(--tra-dark); margin-top:6px; }
.empty-state-sub{ font-size:12px; margin-top:2px; }

/* Validate Receipt button polish */
.topbar-actions .btn-outline-primary{
  transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.topbar-actions .btn-outline-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .kpi-grid .kpi-col, .reveal, .dash-table tbody tr,
  .empty-state, .empty-state-icon, .chart-skeleton span{
    animation: none !important;
  }
  .kpi, .dash-card{ transition: none !important; }
}

/* ============================================================
   Cards
   ============================================================ */
.card{border:1px solid var(--tra-border); border-radius:10px; background:var(--tra-white)}
.card-header{
  background:var(--tra-black) !important; color:var(--tra-white) !important;
  border-bottom:2px solid var(--tra-yellow);
  font-weight:600;
}
.card-header.bg-primary, .card-header.bg-dark{
  background:var(--tra-black) !important; color:var(--tra-white) !important;
}
.alert-light{background:#fffbe6; border-color:#ffe79b}

/* ============================================================
   Tables
   ============================================================ */
.table{color:var(--tra-black)}
.table-sm td, .table-sm th{padding:6px 8px; font-size:13px}
.table thead th, .table-light, thead.table-light tr th{
  background:var(--tra-dark) !important; color:var(--tra-white) !important;
  font-weight:600; border-color:var(--tra-dark) !important;
}
.table tbody tr:hover{background:#fff8dc}
.table-striped > tbody > tr:nth-of-type(odd) > *{background-color:#fafafa}

/* totals row highlight inside excel-style segments */
.excel-grid tbody tr td.fw-semibold{background:#fff8dc}

/* ============================================================
   Forms
   ============================================================ */
.form-label{font-weight:600; color:var(--tra-dark); font-size:13px}
.form-control, .form-select{border-color:var(--tra-border)}
.form-control:focus, .form-select:focus{
  border-color:var(--tra-yellow);
  box-shadow:0 0 0 .2rem rgba(244,196,0,.20);
}

/* ============================================================
   Badges
   ============================================================ */
.badge.bg-warning{background:var(--tra-yellow) !important; color:var(--tra-black) !important}
.badge.bg-primary{background:var(--tra-black) !important; color:var(--tra-yellow) !important}
.badge.bg-success{background:#1f7a3a !important}

/* ============================================================
   Receipt validator feedback
   ============================================================ */
.rv-ok {color:#1f7a3a; font-weight:600}
.rv-dup{color:#c47a00; font-weight:600}
.rv-bad{color:#dc3545; font-weight:600}
#rv-scanner video{width:100%; max-width:480px; margin:0 auto; display:block}

/* ============================================================
   Excel-style segment grids in reports
   ============================================================ */
.excel-grid{border-collapse:collapse; font-size:12px}
.excel-grid th, .excel-grid td{border:1px solid #c8c8c8 !important; padding:5px 7px}
.excel-grid thead th{
  background:var(--tra-black) !important; color:var(--tra-yellow) !important;
  text-align:center; font-weight:600; letter-spacing:.3px;
}
.filter-bar{border:1px solid var(--tra-border)}
.filter-bar .card-body{background:#fffdf3; border-top:2px solid var(--tra-yellow)}

/* ============================================================
   Print
   ============================================================ */
@media print{
  .sidebar, .topbar, .no-print{display:none !important}
  .layout{display:block}
  .main{margin:0}
  .content{padding:0}
  .card{border:none; box-shadow:none}
  .card-header{
    background:var(--tra-black) !important; color:var(--tra-white) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .excel-grid thead th{
    background:var(--tra-black) !important; color:var(--tra-yellow) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  body{background:#fff}
  a{color:#000; text-decoration:none}
}

/* ============================================================
   Settings tiles
   ============================================================ */
.settings-tiles .settings-tile{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:var(--tra-white);
  border:1px solid var(--tra-border);
  border-left:4px solid var(--tra-yellow);
  border-radius:12px;
  text-decoration:none; color:inherit;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  height:100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.settings-tiles .settings-tile:hover{
  transform: translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  border-left-color:var(--tra-black);
}
.settings-tile-icon{
  flex:0 0 46px; height:46px; width:46px;
  display:flex; align-items:center; justify-content:center;
  background:var(--tra-grey); color:var(--tra-black);
  border-radius:10px; font-size:22px;
}
.settings-tile:hover .settings-tile-icon{
  background:var(--tra-yellow);
}
.settings-tile-body{ flex:1; min-width:0; }
.settings-tile-title{
  font-weight:700; color:var(--tra-black); font-size:15px;
  line-height:1.2;
}
.settings-tile-desc{
  font-size:12px; color:var(--tra-muted); margin-top:3px;
  white-space:normal;
}
.settings-tile-arrow{
  color:var(--tra-muted); font-size:18px;
  transition: transform .2s ease, color .2s ease;
}
.settings-tile:hover .settings-tile-arrow{
  color:var(--tra-black); transform: translateX(4px);
}

/* === Report export button (TRA yellow) === */
.btn-tra-yellow { background:#F4C400; color:#111; border:1px solid #d9ae00; font-weight:600; }
.btn-tra-yellow:hover, .btn-tra-yellow:focus { background:#e0b300; color:#111; border-color:#b89400; }
.btn-tra-yellow.dropdown-toggle::after { vertical-align: middle; }


/* ============================================================
   Receipt Error Notification (Transporter Inspection)
   ============================================================ */
.error-notification {
  max-width: 520px;
  padding: 8px 12px;
  border: 1px solid #f5c2c7;
  background: #fff5f5;
  color: #842029;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}
.error-notification i { font-size: 14px; line-height: 1.4; flex-shrink: 0; }
.error-notification-text { word-break: break-word; }


/* ============================================================
   Receipt Validation bar (Transporter Inspection form)
   ============================================================ */
.validation-bar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 720px;
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
}
.validation-bar .validation-label {
  font-weight: 600;
  color: #374151;
}
.validation-bar .validation-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2px;
  border: 1px solid transparent;
}
.validation-bar .validation-badge.is-valid {
  background: #e6f4ea;
  color: #137333;
  border-color: #b6e0c2;
}
.validation-bar .validation-badge.is-invalid {
  background: #fdecea;
  color: #a50e0e;
  border-color: #f5c2c7;
}
.validation-bar .validation-message {
  color: #374151;
}
.validation-bar .validation-message.is-warn {
  color: #842029;
}

/* ============================================================
   Form helpers — disabled dependent fields (e.g. Tax Arrears
   when Assessed = No) and blur-validation feedback.
   ============================================================ */
.is-disabled-dep,
.form-control.is-disabled-dep,
.form-select.is-disabled-dep {
  background-color: #f1f3f5 !important;
  color: #adb5bd !important;
  cursor: not-allowed !important;
  opacity: 0.65;
}
.field-error-message {
  color: #b02a37;
  font-size: 0.8rem;
  margin-top: 0.15rem;
}
.form-control.field-invalid,
.form-select.field-invalid {
  border-color: #b02a37 !important;
  box-shadow: 0 0 0 .15rem rgba(176, 42, 55, .15);
}