/* AbanRah UI V4 — final visual layer. Loaded after all legacy/page styles. */
:root {
  --ar4-primary: #0f5c67;
  --ar4-primary-700: #0b4650;
  --ar4-primary-50: #edf7f7;
  --ar4-accent: #d99a32;
  --ar4-accent-50: #fff7e8;
  --ar4-ink: #17343d;
  --ar4-muted: #667d85;
  --ar4-border: #d8e6e8;
  --ar4-surface: #ffffff;
  --ar4-surface-soft: #f5f9f9;
  --ar4-success: #198754;
  --ar4-danger: #c63f47;
  --ar4-warning: #d58b18;
  --ar4-blue: #2879a8;
  --ar4-radius: 18px;
  --ar4-radius-sm: 12px;
  --ar4-shadow: 0 18px 48px rgba(20, 53, 63, .11);
  --ar4-shadow-sm: 0 8px 24px rgba(20, 53, 63, .08);
}

/* ---------- Global repairs ---------- */
body.abanrah-ui {
  color: var(--ar4-ink);
  background: #f3f7f8;
}

body.abanrah-ui .abanrah-content { overflow: visible; }
body.abanrah-ui .abanrah-content > * { min-width: 0; }

body.abanrah-ui .btn,
body.abanrah-ui a.btn,
body.abanrah-ui button[type="submit"],
body.abanrah-ui input[type="submit"],
body.abanrah-ui input[type="button"] {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 11px !important;
  font-size: .8rem;
  font-weight: 800 !important;
  line-height: 1.35;
  text-decoration: none !important;
  opacity: 1;
  visibility: visible;
  -webkit-text-fill-color: currentColor;
}

body.abanrah-ui .btn > *,
body.abanrah-ui button[type="submit"] > *,
body.abanrah-ui input[type="submit"] > * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

body.abanrah-ui .btn-primary,
body.abanrah-ui button[type="submit"]:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.captcha-refresh-btn),
body.abanrah-ui input[type="submit"]:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--ar4-primary) !important;
  border-color: var(--ar4-primary) !important;
}
body.abanrah-ui .btn-success { color: #fff !important; -webkit-text-fill-color: #fff !important; background: var(--ar4-success) !important; border-color: var(--ar4-success) !important; }
body.abanrah-ui .btn-danger { color: #fff !important; -webkit-text-fill-color: #fff !important; background: var(--ar4-danger) !important; border-color: var(--ar4-danger) !important; }
body.abanrah-ui .btn-info { color: #fff !important; -webkit-text-fill-color: #fff !important; background: var(--ar4-blue) !important; border-color: var(--ar4-blue) !important; }
body.abanrah-ui .btn-secondary { color: #fff !important; -webkit-text-fill-color: #fff !important; background: #62777e !important; border-color: #62777e !important; }
body.abanrah-ui .btn-warning { color: #49300b !important; -webkit-text-fill-color: #49300b !important; background: #efc468 !important; border-color: #efc468 !important; }
body.abanrah-ui .btn-dark { color: #fff !important; -webkit-text-fill-color: #fff !important; background: #223f48 !important; border-color: #223f48 !important; }
body.abanrah-ui .btn-light { color: var(--ar4-ink) !important; -webkit-text-fill-color: var(--ar4-ink) !important; background: #fff !important; border-color: var(--ar4-border) !important; }
body.abanrah-ui .btn-outline-primary { color: var(--ar4-primary) !important; -webkit-text-fill-color: var(--ar4-primary) !important; background: #fff !important; border-color: #9fc4c9 !important; }
body.abanrah-ui .btn-outline-secondary { color: #50676f !important; -webkit-text-fill-color: #50676f !important; background: #fff !important; border-color: #c7d6d9 !important; }
body.abanrah-ui .btn-outline-danger { color: var(--ar4-danger) !important; -webkit-text-fill-color: var(--ar4-danger) !important; background: #fff !important; border-color: #e0afb3 !important; }
body.abanrah-ui .btn-outline-success { color: var(--ar4-success) !important; -webkit-text-fill-color: var(--ar4-success) !important; background: #fff !important; border-color: #a9d1bd !important; }
body.abanrah-ui .btn-outline-light { color: var(--ar4-primary) !important; -webkit-text-fill-color: var(--ar4-primary) !important; background: #fff !important; border-color: rgba(255,255,255,.75) !important; }
body.abanrah-ui .btn:hover:not(:disabled),
body.abanrah-ui button[type="submit"]:hover:not(:disabled),
body.abanrah-ui input[type="submit"]:hover:not(:disabled) { filter: brightness(.94); transform: translateY(-1px); }
body.abanrah-ui .btn:disabled,
body.abanrah-ui button:disabled,
body.abanrah-ui input:disabled { opacity: .58 !important; cursor: not-allowed; }

body.abanrah-ui .form-control,
body.abanrah-ui select,
body.abanrah-ui textarea,
body.abanrah-ui input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]) {
  min-width: 0;
  max-width: 100%;
}

body.abanrah-ui img { max-width: 100%; }
body.abanrah-ui .ar-page { width: 100%; min-width: 0; }
body.abanrah-ui .ar-eyebrow,
body.abanrah-ui .ar-section-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--ar4-accent);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .03em;
}

/* ---------- Shared page elements ---------- */
.ar-page-hero {
  min-height: 138px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: clamp(20px, 3vw, 34px);
  color: #fff;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, #0c4c56, #123a48 70%, #1a313d);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  box-shadow: var(--ar4-shadow);
  overflow: hidden;
}
.ar-page-hero-compact { min-height: 126px; }
.ar-page-hero-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  font-size: 1.65rem;
  box-shadow: inset 0 1px rgba(255,255,255,.15);
}
.ar-page-hero-copy { flex: 1; min-width: 0; }
.ar-page-hero-copy h2 { margin: 0 0 8px; color: #fff !important; font-size: clamp(1.2rem, 2.4vw, 1.72rem) !important; font-weight: 900 !important; }
.ar-page-hero-copy p { max-width: 790px; margin: 0; color: rgba(237,249,250,.76) !important; font-size: .82rem; line-height: 1.9; }
.ar-page-hero .ar-eyebrow { color: #efc36d; }
.ar-hero-action { flex: 0 0 auto; }

.ar-section-heading,
.ar-table-card-head,
.ar-public-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.ar-section-heading h3,
.ar-table-card-head h3 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--ar4-ink) !important; font-size: 1.02rem !important; font-weight: 900 !important; }
.ar-result-chip,
.ar-table-count {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  color: #426069;
  background: #f0f6f6;
  border: 1px solid #dce9ea;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 800;
}
.ar-empty-state { padding: 54px 24px; text-align: center; color: var(--ar4-muted); }
.ar-empty-state > i { display: block; margin-bottom: 13px; color: #9eb0b5; font-size: 2.6rem; }
.ar-empty-state h4 { margin: 0 0 7px; color: var(--ar4-ink) !important; font-size: 1rem !important; }
.ar-empty-state p { margin: 0; color: var(--ar4-muted) !important; }
.ar-empty-state-danger > i { color: var(--ar4-danger); }

/* ---------- Accounting ---------- */
.ar-filter-panel,
.ar-table-card {
  margin-bottom: 20px;
  padding: clamp(18px, 2.5vw, 25px);
  background: #fff;
  border: 1px solid var(--ar4-border);
  border-radius: var(--ar4-radius);
  box-shadow: var(--ar4-shadow-sm);
}
.ar-filter-form { margin-top: 18px; }
.ar-filter-grid { display: grid; gap: 13px; }
.ar-filter-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ar-field { min-width: 0; }
.ar-field label { display: block; margin-bottom: 7px; color: #425c64; font-size: .72rem; font-weight: 800; }
.ar-field .form-control { width: 100% !important; min-height: 44px !important; }
.ar-field.is-disabled { opacity: .55; }
.ar-filter-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e7eeee; }

.ar-finance-overview { display: grid; grid-template-columns: 1.22fr repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.ar-balance-card,
.ar-metric-card {
  min-width: 0;
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px;
  background: #fff;
  border: 1px solid var(--ar4-border);
  border-radius: 16px;
  box-shadow: var(--ar4-shadow-sm);
}
.ar-balance-card { color: #fff; background: linear-gradient(135deg, #176c61, #115149); border-color: transparent; }
.ar-balance-card.is-negative { background: linear-gradient(135deg, #bd414a, #913039); }
.ar-metric-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; font-size: 1.12rem; }
.ar-balance-card .ar-metric-icon { color: #fff; background: rgba(255,255,255,.13); }
.ar-metric-card .ar-metric-icon { color: var(--ar4-primary); background: var(--ar4-primary-50); }
.ar-metric-card.is-tire .ar-metric-icon { color: #b97613; background: #fff5df; }
.ar-metric-card.is-repair .ar-metric-icon { color: #b24148; background: #fff0f1; }
.ar-metric-card.is-deposit .ar-metric-icon { color: #187c4f; background: #eaf8f1; }
.ar-balance-card > div:last-child,
.ar-metric-card > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.ar-balance-card span,
.ar-metric-card span { color: inherit; font-size: .69rem; font-weight: 700; opacity: .78; }
.ar-balance-card strong,
.ar-metric-card strong { overflow: hidden; margin: 4px 0 1px; color: inherit; font-size: clamp(.92rem, 1.5vw, 1.22rem); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.ar-metric-card strong { color: var(--ar4-ink); }
.ar-balance-card small,
.ar-metric-card small { color: inherit; font-size: .64rem; opacity: .7; }

.ar-table-card { padding: 0; overflow: hidden; }
.ar-table-card-head { padding: 20px 22px; border-bottom: 1px solid var(--ar4-border); }
body.abanrah-ui .ar-wide-table-wrap { width: 100%; max-width: 100%; margin: 0 !important; overflow-x: auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.abanrah-ui .ar-wide-table { min-width: 1240px; table-layout: auto; }
body.abanrah-ui .ar-wide-table th { position: sticky; top: 0; z-index: 1; min-width: 96px; padding: 14px 12px !important; white-space: nowrap; }
body.abanrah-ui .ar-wide-table td { padding: 13px 12px !important; line-height: 1.75; }
body.abanrah-ui .ar-accounting-table th:nth-child(8),
body.abanrah-ui .ar-accounting-table td:nth-child(8) { min-width: 220px; max-width: 310px; }
.ar-description-cell { white-space: normal !important; overflow-wrap: anywhere; }
.ar-mono-value { color: var(--ar4-primary); font-variant-numeric: tabular-nums; }
.ar-date-cell strong,
.ar-date-cell small,
.ar-money-cell strong,
.ar-money-cell small { display: block; }
.ar-date-cell small,
.ar-money-cell small { color: var(--ar4-muted); font-size: .62rem; }
.ar-money-cell.is-debit strong { color: var(--ar4-danger); }
.ar-money-cell.is-credit strong { color: var(--ar4-success); }
.ar-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; font-size: .66rem; font-weight: 900; white-space: nowrap; }
.ar-status-badge.is-success { color: #176a45; background: #e9f7f0; }
.ar-status-badge.is-danger { color: #9e3038; background: #fff0f1; }
.ar-status-badge.is-warning { color: #946010; background: #fff5df; }
.ar-row-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ar-icon-action { width: 34px; height: 34px; display: inline-grid; place-items: center; color: var(--ar4-primary) !important; background: var(--ar4-primary-50); border: 1px solid #d1e5e7; border-radius: 9px; }
.ar-icon-action:hover { color: #fff !important; background: var(--ar4-primary); }
.ar-icon-action.is-edit { color: #95620e !important; background: #fff5df; border-color: #eed7a9; }
.ar-icon-action.is-edit:hover { color: #fff !important; background: #b67a18; }
.ar-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 20px 0 4px; }
.ar-pagination a,
.ar-pagination span { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; color: var(--ar4-primary); background: #fff; border: 1px solid var(--ar4-border); border-radius: 10px; font-size: .72rem; font-weight: 800; }
.ar-pagination .is-current { color: #fff; background: var(--ar4-primary); border-color: var(--ar4-primary); }

/* ---------- Management ---------- */
.ar-management-hero { background: radial-gradient(circle at 12% 20%, rgba(242,191,96,.24), transparent 24%), linear-gradient(135deg, #113b48, #0d5964 64%, #196d6e); }
.ar-management-hero-badge { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; color: #e6f8ef; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.ar-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #54dc94; box-shadow: 0 0 0 5px rgba(84,220,148,.13); }
.ar-management-notice { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 14px 17px; color: #31515b; background: #edf7f7; border: 1px solid #d5e9ea; border-radius: 14px; }
.ar-management-notice > i { color: var(--ar4-primary); font-size: 1.2rem; }
.ar-management-notice div { display: flex; flex-direction: column; gap: 2px; }
.ar-management-notice strong { font-size: .78rem; }
.ar-management-notice span { color: var(--ar4-muted); font-size: .68rem; }
.ar-management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ar-management-card { min-width: 0; background: #fff; border: 1px solid var(--ar4-border); border-radius: var(--ar4-radius); box-shadow: var(--ar4-shadow-sm); overflow: hidden; }
.ar-management-card > header { display: flex; align-items: center; gap: 12px; padding: 18px 19px; background: linear-gradient(180deg, #fff, #f8fbfb); border-bottom: 1px solid var(--ar4-border); }
.ar-management-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; color: var(--ar4-primary); background: var(--ar4-primary-50); border-radius: 14px; font-size: 1.16rem; }
.ar-management-card.is-bunker .ar-management-icon { color: #98620b; background: #fff4dc; }
.ar-management-card.is-people .ar-management-icon { color: #2873a0; background: #edf7fd; }
.ar-management-card.is-truck .ar-management-icon { color: #18774e; background: #eaf8f1; }
.ar-management-card.is-travel .ar-management-icon { color: #a63c45; background: #fff0f1; }
.ar-management-card header small { color: var(--ar4-muted); font-size: .62rem; }
.ar-management-card header h3 { margin: 2px 0 0; color: var(--ar4-ink) !important; font-size: .96rem !important; font-weight: 900 !important; }
.ar-management-links { padding: 10px; }
.ar-management-links a { min-height: 64px; display: grid; grid-template-columns: 35px minmax(0, 1fr) 18px; align-items: center; gap: 10px; margin-bottom: 5px; padding: 10px 11px; color: var(--ar4-ink); background: transparent; border: 1px solid transparent; border-radius: 12px; transition: .16s ease; }
.ar-management-links a:last-child { margin-bottom: 0; }
.ar-management-links a:hover { color: var(--ar4-primary); background: #f1f8f8; border-color: #d7e9ea; transform: translateX(-2px); }
.ar-management-links a > i:first-child { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ar4-primary); background: var(--ar4-primary-50); border-radius: 10px; }
.ar-management-links a > i:last-child { color: #9aabb0; font-size: .7rem; }
.ar-management-links span { min-width: 0; display: flex; flex-direction: column; }
.ar-management-links strong { font-size: .75rem; }
.ar-management-links small { margin-top: 3px; color: var(--ar4-muted); font-size: .62rem; line-height: 1.55; }
.ar-management-card-wide { grid-column: 1 / -1; }
.ar-management-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 14px; }
.ar-management-quick-grid a { min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 12px 9px; color: #3e5962; background: #f7fafa; border: 1px solid #e0eaec; border-radius: 13px; font-size: .7rem; font-weight: 800; text-align: center; }
.ar-management-quick-grid a i { color: var(--ar4-primary); font-size: 1.12rem; }
.ar-management-quick-grid a:hover { color: #fff; background: var(--ar4-primary); border-color: var(--ar4-primary); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,92,103,.16); }
.ar-management-quick-grid a:hover i { color: #fff; }

/* ---------- Login ---------- */
body.abanrah-public-body:has(.ar-login-page) .abanrah-public-header,
body.abanrah-public-body:has(.ar-login-page) .abanrah-public-footer { display: none; }
body.abanrah-public-body:has(.ar-login-page) .abanrah-public-content { max-width: none; padding: 0; }
.ar-login-page { min-height: 100vh; display: grid; place-items: center; padding: clamp(18px, 4vw, 52px); background: radial-gradient(circle at 12% 12%, rgba(217,154,50,.17), transparent 26%), radial-gradient(circle at 90% 90%, rgba(15,92,103,.14), transparent 28%), #edf4f5; }
.ar-login-shell { width: min(1080px, 100%); min-height: 650px; display: grid; grid-template-columns: minmax(330px, .95fr) minmax(400px, 1.05fr); background: #fff; border: 1px solid rgba(207,224,226,.9); border-radius: 28px; box-shadow: 0 30px 80px rgba(16,52,62,.18); overflow: hidden; }
.ar-login-story { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 4vw, 48px); color: #fff; background: radial-gradient(circle at 20% 12%, rgba(255,255,255,.16), transparent 22%), linear-gradient(145deg, #0b4650, #12323e 65%, #152d37); overflow: hidden; }
.ar-login-story::after { content: ""; position: absolute; width: 280px; height: 280px; left: -120px; bottom: -130px; border: 36px solid rgba(255,255,255,.045); border-radius: 50%; }
.ar-login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }
.ar-login-brand > span { width: 54px; height: 54px; display: grid; place-items: center; padding: 5px; background: #fff; border-radius: 15px; }
.ar-login-brand img { width: 100%; height: 100%; object-fit: contain; }
.ar-login-brand div { display: flex; flex-direction: column; }
.ar-login-brand strong { font-size: .95rem; }
.ar-login-brand small { margin-top: 2px; color: rgba(235,247,248,.68); font-size: .65rem; }
.ar-login-story-content { position: relative; z-index: 1; margin: auto 0; }
.ar-login-story-content .ar-eyebrow { color: #efc36d; }
.ar-login-story-content h2 { max-width: 470px; margin: 0 0 15px; color: #fff !important; font-size: clamp(1.48rem, 3vw, 2rem) !important; font-weight: 900 !important; line-height: 1.65; }
.ar-login-story-content > p { margin: 0 0 24px; color: rgba(233,246,247,.72) !important; font-size: .78rem; line-height: 2; }
.ar-login-story-content ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ar-login-story-content li { display: flex; align-items: center; gap: 10px; color: #eaf5f6; font-size: .72rem; }
.ar-login-story-content li i { width: 34px; height: 34px; display: grid; place-items: center; color: #efc36d; background: rgba(255,255,255,.08); border-radius: 10px; }
.ar-login-story-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: rgba(230,244,245,.58); font-size: .64rem; }
.ar-login-form-side { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 60px); }
.ar-login-form-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 26px; }
.ar-login-form-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; color: var(--ar4-primary); background: var(--ar4-primary-50); border-radius: 15px; font-size: 1.15rem; }
.ar-login-form-head h1 { margin: 0 0 5px; color: var(--ar4-ink) !important; font-size: 1.35rem !important; font-weight: 900 !important; }
.ar-login-form-head p { margin: 0; color: var(--ar4-muted) !important; font-size: .7rem; }
.ar-login-form { display: grid; gap: 17px; }
.ar-login-field label,
.ar-captcha-head label { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #38545d; font-size: .72rem; font-weight: 800; }
.ar-input-with-icon { position: relative; }
.ar-input-with-icon > i { position: absolute; z-index: 2; top: 50%; right: 14px; color: #86a0a7; transform: translateY(-50%); pointer-events: none; }
body.abanrah-ui .ar-input-with-icon .form-control { min-height: 49px !important; padding-right: 43px !important; padding-left: 47px !important; background: #f9fbfb !important; border-radius: 13px !important; }
.ar-password-toggle { position: absolute; z-index: 3; top: 50%; left: 8px; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; color: #60777e !important; -webkit-text-fill-color: #60777e !important; background: transparent !important; border: 0 !important; border-radius: 9px !important; box-shadow: none !important; transform: translateY(-50%) !important; }
.ar-password-toggle:hover { color: var(--ar4-primary) !important; background: var(--ar4-primary-50) !important; }
.ar-captcha-block { padding: 15px; background: #f6f9f9; border: 1px solid #e0eaeb; border-radius: 14px; }
.ar-captcha-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ar-captcha-head label { margin: 0; }
.ar-captcha-head span { color: var(--ar4-muted); font-size: .61rem; }
.ar-captcha-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.ar-captcha-fields { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(100px, auto) minmax(0, 1fr); align-items: center; gap: 8px; }
.ar-captcha-fields img.captcha { width: 142px; max-width: 100%; height: 48px; object-fit: cover; background: #fff; border: 1px solid var(--ar4-border); border-radius: 10px; }
.ar-captcha-fields input[type="text"] { width: 100% !important; min-height: 48px !important; background: #fff !important; border-radius: 10px !important; }
.ar-captcha-fields input[type="hidden"] { display: none; }
body.abanrah-ui .captcha-refresh-btn { width: 48px !important; min-width: 48px !important; min-height: 48px !important; padding: 0 !important; color: var(--ar4-primary) !important; -webkit-text-fill-color: var(--ar4-primary) !important; background: #fff !important; border: 1px solid var(--ar4-border) !important; border-radius: 10px !important; }
.ar-field-error { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: #9e3038; font-size: .65rem; font-weight: 700; }
body.abanrah-ui .ar-login-submit { width: 100% !important; min-height: 50px !important; justify-content: space-between; padding-inline: 20px !important; }
.ar-login-help { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ar4-muted); font-size: .64rem; }

/* ---------- Public pages ---------- */
body.abanrah-public-body .abanrah-public-content { width: 100%; max-width: none; padding: 0; }
.ar-public-page { width: 100%; overflow: hidden; }
.ar-public-hero { width: min(1240px, calc(100% - 32px)); min-height: 620px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); align-items: center; gap: clamp(30px, 6vw, 80px); margin: 24px auto 0; padding: clamp(38px, 6vw, 74px); color: #fff; background: radial-gradient(circle at 12% 18%, rgba(240,187,88,.24), transparent 24%), linear-gradient(135deg, #0a3f49, #0d5964 58%, #16404b); border-radius: 30px; box-shadow: 0 30px 70px rgba(15,65,76,.22); }
.ar-public-badge { width: fit-content; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; padding: 8px 12px; color: #f8dc9c; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: .68rem; font-weight: 800; }
.ar-public-hero h1 { max-width: 760px; margin: 0 0 19px; color: #fff !important; font-size: clamp(2rem, 4.8vw, 3.55rem) !important; font-weight: 950 !important; line-height: 1.48; }
.ar-public-hero h1 em { display: block; color: #efc36d; font-style: normal; }
.ar-public-hero-copy > p { max-width: 720px; margin: 0; color: rgba(234,247,248,.76) !important; font-size: clamp(.8rem, 1.2vw, .94rem); line-height: 2.1; }
.ar-public-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.ar-public-trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 31px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); }
.ar-public-trust-row > span { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; }
.ar-public-trust-row i { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; color: #efc36d; background: rgba(255,255,255,.08); border-radius: 9px; }
.ar-public-trust-row strong { color: #fff; font-size: .69rem; }
.ar-public-trust-row small { color: rgba(234,247,248,.57); font-size: .56rem; }
.ar-public-hero-visual { position: relative; min-height: 410px; display: grid; place-items: center; }
.ar-transport-orbit { position: absolute; border: 1px dashed rgba(255,255,255,.25); border-radius: 50%; }
.ar-orbit-one { width: 360px; height: 360px; }
.ar-orbit-two { width: 260px; height: 260px; border-style: solid; border-color: rgba(239,195,109,.19); }
.ar-transport-tank { position: relative; z-index: 2; width: 170px; height: 170px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07)); border: 1px solid rgba(255,255,255,.2); border-radius: 46px; box-shadow: 0 22px 50px rgba(3,30,35,.27); backdrop-filter: blur(8px); }
.ar-transport-tank i { font-size: 4rem; }
.ar-transport-tank span { position: absolute; bottom: 19px; padding: 4px 9px; color: #18333b; background: #efc36d; border-radius: 999px; font-size: .65rem; font-weight: 900; }
.ar-route-point { position: absolute; z-index: 3; width: 49px; height: 49px; display: grid; place-items: center; color: #f5d794; background: #173d47; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; box-shadow: 0 12px 26px rgba(3,27,32,.25); }
.ar-point-one { top: 34px; right: 24px; }
.ar-point-two { bottom: 40px; right: 58px; }
.ar-point-three { top: 90px; left: 18px; }

.ar-public-intro,
.ar-public-services,
.ar-operation-flow,
.ar-values-section,
.ar-capabilities-section,
.ar-leadership-strip,
.ar-contact-guidance,
.ar-artia-credit-card,
.ar-about-story { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.ar-public-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; padding: 90px 0; }
.ar-public-section-copy h2,
.ar-public-section-head h2,
.ar-capabilities-copy h2,
.ar-leadership-strip h2,
.ar-artia-credit-card h2 { margin: 0 0 13px; color: var(--ar4-ink) !important; font-size: clamp(1.35rem, 3vw, 2.05rem) !important; font-weight: 950 !important; line-height: 1.6; }
.ar-public-section-copy p,
.ar-public-section-head > p,
.ar-capabilities-copy p,
.ar-artia-credit-card p { margin: 0; color: var(--ar4-muted) !important; font-size: .78rem; line-height: 2.15; }
.ar-public-principles { display: grid; gap: 11px; }
.ar-public-principles article { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 13px; padding: 17px; background: #fff; border: 1px solid var(--ar4-border); border-radius: 15px; box-shadow: var(--ar4-shadow-sm); }
.ar-public-principles i { grid-row: 1 / 3; width: 48px; height: 48px; display: grid; place-items: center; color: var(--ar4-primary); background: var(--ar4-primary-50); border-radius: 13px; font-size: 1.1rem; }
.ar-public-principles h3 { margin: 1px 0 4px; color: var(--ar4-ink) !important; font-size: .82rem !important; font-weight: 900 !important; }
.ar-public-principles p { margin: 0; color: var(--ar4-muted) !important; font-size: .67rem; line-height: 1.8; }
.ar-public-services { padding: 80px 0; }
.ar-public-section-head { margin-bottom: 28px; }
.ar-public-section-head > p { max-width: 430px; }
.ar-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.ar-service-card { position: relative; min-height: 232px; padding: 24px; background: #fff; border: 1px solid var(--ar4-border); border-radius: 18px; box-shadow: var(--ar4-shadow-sm); overflow: hidden; transition: .18s ease; }
.ar-service-card::after { content: ""; position: absolute; width: 90px; height: 90px; left: -34px; bottom: -38px; background: currentColor; border-radius: 50%; opacity: .055; }
.ar-service-card:hover { transform: translateY(-5px); box-shadow: var(--ar4-shadow); }
.ar-service-card > span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--ar4-primary); background: var(--ar4-primary-50); border-radius: 15px; font-size: 1.18rem; }
.ar-service-card h3 { margin: 17px 0 8px; color: var(--ar4-ink) !important; font-size: .94rem !important; font-weight: 900 !important; }
.ar-service-card p { margin: 0; color: var(--ar4-muted) !important; font-size: .69rem; line-height: 2; }
.ar-service-card small { position: absolute; right: 24px; bottom: 18px; color: currentColor; font-size: .61rem; font-weight: 800; }
.ar-service-card.is-blue { color: var(--ar4-blue); }.ar-service-card.is-blue > span { color: var(--ar4-blue); background: #edf7fd; }
.ar-service-card.is-gold { color: #ad7418; }.ar-service-card.is-gold > span { color: #ad7418; background: #fff5df; }
.ar-service-card.is-green { color: var(--ar4-success); }.ar-service-card.is-green > span { color: var(--ar4-success); background: #eaf8f1; }
.ar-service-card.is-orange { color: #bd6721; }.ar-service-card.is-orange > span { color: #bd6721; background: #fff2e9; }
.ar-service-card.is-red { color: var(--ar4-danger); }.ar-service-card.is-red > span { color: var(--ar4-danger); background: #fff0f1; }
.ar-operation-flow { padding: 80px 0; }
.ar-flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.ar-flow-grid article { position: relative; min-height: 210px; padding: 23px; background: #123f49; border-radius: 18px; overflow: hidden; }
.ar-flow-grid b { position: absolute; left: 14px; top: 8px; color: rgba(255,255,255,.07); font-size: 3.1rem; font-weight: 950; }
.ar-flow-grid > article > span { width: 48px; height: 48px; display: grid; place-items: center; color: #efc36d; background: rgba(255,255,255,.08); border-radius: 14px; font-size: 1.1rem; }
.ar-flow-grid h3 { margin: 23px 0 8px; color: #fff !important; font-size: .86rem !important; font-weight: 900 !important; }
.ar-flow-grid p { margin: 0; color: rgba(232,246,247,.66) !important; font-size: .66rem; line-height: 1.9; }
.ar-public-cta { width: min(1180px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 10px auto 80px; padding: clamp(25px, 4vw, 42px); background: linear-gradient(135deg, #f3f8f8, #fff9ed); border: 1px solid #dce8e8; border-radius: 22px; }
.ar-public-cta h2 { margin: 0 0 7px; color: var(--ar4-ink) !important; font-size: clamp(1.1rem, 2.5vw, 1.6rem) !important; font-weight: 900 !important; }
.ar-public-cta p { margin: 0; color: var(--ar4-muted) !important; font-size: .72rem; }

/* Public inner pages */
.ar-inner-hero { width: min(1180px, calc(100% - 32px)); min-height: 360px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; margin: 24px auto 70px; padding: clamp(35px, 6vw, 66px); color: #fff; background: radial-gradient(circle at 12% 20%, rgba(239,195,109,.2), transparent 25%), linear-gradient(135deg, #0a4651, #153540); border-radius: 28px; box-shadow: var(--ar4-shadow); }
.ar-inner-hero h1 { max-width: 820px; margin: 0 0 15px; color: #fff !important; font-size: clamp(1.7rem, 4vw, 2.85rem) !important; font-weight: 950 !important; line-height: 1.55; }
.ar-inner-hero > div > p { max-width: 780px; margin: 0; color: rgba(233,247,248,.72) !important; font-size: .82rem; line-height: 2.1; }
.ar-inner-hero > aside { display: grid; gap: 10px; }
.ar-inner-hero > aside > span { min-width: 135px; padding: 14px 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
.ar-inner-hero aside strong,
.ar-inner-hero aside small { display: block; }
.ar-inner-hero aside strong { color: #efc36d; font-size: 1.05rem; }
.ar-inner-hero aside small { margin-top: 2px; color: rgba(236,248,249,.66); font-size: .58rem; }
.ar-about-story { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 55px; padding-bottom: 90px; }
.ar-about-story-visual { min-height: 330px; display: flex; flex-direction: column; justify-content: center; gap: 35px; padding: 36px; background: #f1f7f7; border: 1px solid var(--ar4-border); border-radius: 22px; }
.ar-about-logo { display: flex; align-items: center; justify-content: center; gap: 15px; color: var(--ar4-ink); font-size: 1.15rem; font-weight: 950; }
.ar-about-logo img { width: 82px; height: 82px; object-fit: contain; padding: 7px; background: #fff; border-radius: 20px; box-shadow: var(--ar4-shadow-sm); }
.ar-about-route { display: flex; align-items: center; justify-content: center; color: var(--ar4-primary); }
.ar-about-route i { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 1px solid var(--ar4-border); border-radius: 13px; }
.ar-about-route span { width: 56px; height: 1px; border-top: 2px dashed #9dbec2; }
.ar-values-section { padding: 80px 0; }
.ar-values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 26px; }
.ar-values-grid article { padding: 23px; background: #fff; border: 1px solid var(--ar4-border); border-radius: 17px; box-shadow: var(--ar4-shadow-sm); }
.ar-values-grid span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ar4-primary); background: var(--ar4-primary-50); border-radius: 14px; }
.ar-values-grid h3 { margin: 17px 0 7px; color: var(--ar4-ink) !important; font-size: .84rem !important; font-weight: 900 !important; }
.ar-values-grid p { margin: 0; color: var(--ar4-muted) !important; font-size: .65rem; line-height: 1.9; }
.ar-capabilities-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; padding: 80px 0; }
.ar-capabilities-list { display: grid; gap: 10px; }
.ar-capabilities-list > div { display: grid; grid-template-columns: 45px minmax(0, 1fr); align-items: center; gap: 12px; padding: 15px; background: #fff; border: 1px solid var(--ar4-border); border-radius: 14px; }
.ar-capabilities-list > div > i { width: 45px; height: 45px; display: grid; place-items: center; color: var(--ar4-primary); background: var(--ar4-primary-50); border-radius: 12px; }
.ar-capabilities-list span { display: flex; flex-direction: column; }
.ar-capabilities-list strong { color: var(--ar4-ink); font-size: .75rem; }
.ar-capabilities-list small { margin-top: 3px; color: var(--ar4-muted); font-size: .62rem; }
.ar-leadership-strip { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 30px; background: #123f49; border-radius: 20px; }
.ar-leadership-strip .ar-eyebrow { color: #efc36d; }
.ar-leadership-strip h2 { margin: 0; color: #fff !important; }
.ar-leader-cards { display: flex; gap: 10px; }
.ar-leader-cards article { min-width: 180px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; }
.ar-leader-cards i { color: #efc36d; }
.ar-leader-cards span { display: flex; flex-direction: column; }
.ar-leader-cards small { color: rgba(233,247,248,.6); font-size: .58rem; }
.ar-leader-cards strong { font-size: .76rem; }

/* Contact */
.ar-contact-hero-icon { width: 140px; height: 140px; display: grid !important; place-items: center; color: #efc36d; background: rgba(255,255,255,.09); border-radius: 40px !important; font-size: 3.5rem; }
.ar-contact-grid { width: min(1180px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 auto 80px; }
.ar-contact-card { min-width: 0; min-height: 210px; display: flex; align-items: flex-start; gap: 14px; padding: 24px; background: #fff; border: 1px solid var(--ar4-border); border-radius: 18px; box-shadow: var(--ar4-shadow-sm); }
.ar-contact-card-wide { grid-column: 1 / -1; min-height: auto; align-items: center; }
.ar-contact-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; color: var(--ar4-primary); background: var(--ar4-primary-50); border-radius: 15px; font-size: 1.18rem; }
.ar-contact-card small { color: var(--ar4-accent); font-size: .63rem; font-weight: 900; }
.ar-contact-card h2,
.ar-contact-card h3 { margin: 7px 0 5px; color: var(--ar4-ink) !important; font-size: .92rem !important; font-weight: 900 !important; line-height: 1.8; }
.ar-contact-card p { margin: 0; color: var(--ar4-muted) !important; font-size: .68rem; line-height: 1.9; }
.ar-contact-card a { color: var(--ar4-primary); }
.ar-postcode { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 10px; color: #506970; background: #f2f7f7; border-radius: 9px; font-size: .65rem; }
.ar-phone-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.ar-phone-list a { display: inline-flex; padding: 4px 8px; background: #f1f7f7; border-radius: 8px; font-size: .78rem; font-weight: 800; }
.ar-contact-guidance { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; padding: 70px 0; }
.ar-contact-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ar-contact-checklist span { min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 14px; color: #3b5861; background: #fff; border: 1px solid var(--ar4-border); border-radius: 13px; font-size: .7rem; font-weight: 800; }
.ar-contact-checklist i { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ar4-primary); background: var(--ar4-primary-50); border-radius: 10px; }
.ar-artia-credit-card { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 38px; margin-bottom: 80px; padding: 28px 32px; background: linear-gradient(135deg, #fff, #f4f9f9); border: 1px solid var(--ar4-border); border-radius: 20px; box-shadow: var(--ar4-shadow-sm); }
.ar-artia-logo-wrap { padding: 15px; background: #fff; border: 1px solid #e1ebec; border-radius: 16px; }
.ar-artia-logo-wrap img { width: 100%; height: auto; }

/* Footer V4 */
body.abanrah-ui .ar-public-footer-v4 { display: block; padding: 0; color: #cfe0e2; background: #0b3540; }
.ar-footer-main { width: min(1240px, calc(100% - 32px)); display: grid !important; grid-template-columns: 1.05fr 1.35fr .6fr; gap: 36px; margin: 0 auto; padding: 44px 0 34px; }
.ar-footer-brand { display: flex; flex-direction: row !important; align-items: center; gap: 12px; }
.ar-footer-brand .abanrah-brand-mark { width: 58px; height: 58px; flex: 0 0 58px; padding: 5px; background: #fff; border-radius: 15px; }
.ar-footer-brand > div { display: flex; flex-direction: column; gap: 4px; }
.ar-footer-brand strong { color: #fff; font-size: .8rem; }
.ar-footer-brand span { color: rgba(218,237,239,.62); font-size: .62rem; }
.ar-footer-contact { display: grid !important; gap: 8px !important; }
.ar-footer-contact span { display: flex; align-items: flex-start; gap: 8px; color: rgba(222,239,241,.72); font-size: .65rem; line-height: 1.8; }
.ar-footer-contact i { width: 18px; margin-top: 3px; color: #efc36d; text-align: center; }
.ar-footer-contact a { color: #fff; }
.ar-footer-links { display: grid; align-content: start; gap: 7px; }
.ar-footer-links a { color: rgba(226,242,243,.72) !important; font-size: .66rem; }
.ar-footer-links a:hover { color: #efc36d !important; }
.ar-footer-bottom { min-height: 62px; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 20px; padding: 10px max(16px, calc((100vw - 1240px) / 2)); background: rgba(0,0,0,.12); border-top: 1px solid rgba(255,255,255,.07); color: rgba(222,239,241,.55); font-size: .6rem; }
.ar-artia-footer { display: inline-flex; align-items: center; gap: 8px; color: #dcecee !important; }
.ar-artia-footer img { width: 86px; height: 30px; padding: 2px 5px; background: #fff; border-radius: 7px; object-fit: contain; }

/* ---------- Driver and truck detail refresh ---------- */
body.abanrah-ui .profile-header,
body.abanrah-ui .truck-header {
  position: relative;
  margin-bottom: 14px !important;
  color: #fff !important;
  background: radial-gradient(circle at 10% 15%, rgba(239,195,109,.22), transparent 25%), linear-gradient(135deg, #0c4b56, #153943) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
  box-shadow: var(--ar4-shadow) !important;
  overflow: hidden;
}
body.abanrah-ui .profile-header h1,
body.abanrah-ui .truck-header h1,
body.abanrah-ui .profile-header h5,
body.abanrah-ui .truck-header p { color: #fff !important; }
body.abanrah-ui .profile-img-container { display: inline-grid; place-items: center; padding: 7px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
body.abanrah-ui .profile-img { width: 138px !important; height: 138px !important; object-fit: cover !important; border: 5px solid #fff !important; box-shadow: 0 12px 28px rgba(2,29,34,.28) !important; }
body.abanrah-ui .contact-bar { margin-bottom: 17px !important; padding: 16px 19px !important; color: #34545d !important; background: #fff !important; border: 1px solid var(--ar4-border) !important; border-radius: 16px !important; box-shadow: var(--ar4-shadow-sm) !important; }
body.abanrah-ui .contact-bar a { color: var(--ar4-primary) !important; }
body.abanrah-ui .info-grid { gap: 13px !important; }
body.abanrah-ui .info-card,
body.abanrah-ui .section,
body.abanrah-ui .documents-section { background: #fff !important; border: 1px solid var(--ar4-border) !important; border-radius: 17px !important; box-shadow: var(--ar4-shadow-sm) !important; overflow: hidden; }
body.abanrah-ui .info-card .card-header { color: var(--ar4-ink) !important; background: linear-gradient(180deg, #f9fcfc, #f0f6f6) !important; border-bottom: 1px solid var(--ar4-border) !important; }
body.abanrah-ui .section-title { color: var(--ar4-ink) !important; border-bottom-color: var(--ar4-border) !important; }
body.abanrah-ui .documents-grid,
body.abanrah-ui .docs-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 11px !important; }
body.abanrah-ui .document-card,
body.abanrah-ui .doc-item { min-width: 0; background: #f8fbfb !important; border: 1px solid #dde9ea !important; border-radius: 13px !important; box-shadow: none !important; overflow: hidden; transition: .16s ease; }
body.abanrah-ui .document-card:hover,
body.abanrah-ui .doc-item:hover { border-color: #a9c9cd !important; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20,53,63,.1) !important; }
body.abanrah-ui .document-title,
body.abanrah-ui .doc-name { color: #3e5962 !important; background: #fff !important; border-color: var(--ar4-border) !important; font-size: .67rem !important; font-weight: 800 !important; }
body.abanrah-ui .document-body,
body.abanrah-ui .doc-preview { min-height: 118px !important; display: grid !important; place-items: center !important; padding: 8px !important; background: #eef4f4 !important; }
body.abanrah-ui .document-img,
body.abanrah-ui .doc-preview img { width: 100% !important; height: 105px !important; max-height: 105px !important; object-fit: cover !important; border: 1px solid #d4e1e3 !important; border-radius: 9px !important; box-shadow: 0 4px 12px rgba(20,53,63,.1); }
body.abanrah-ui .doc-preview video { width: 100%; height: 105px; max-height: 105px !important; object-fit: cover; border-radius: 9px; }
body.abanrah-ui .no-document,
body.abanrah-ui .no-doc { min-height: 100px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #9aabb0 !important; }
body.abanrah-ui .truck-container { width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; }
body.abanrah-ui .info-row { min-width: 0; background: #f8fbfb !important; border: 1px solid #e0eaeb; border-radius: 11px !important; }
body.abanrah-ui .travels-link { color: #fff !important; -webkit-text-fill-color: #fff !important; background: var(--ar4-primary) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 11px !important; }
body.abanrah-ui .whatsapp-btn,
body.abanrah-ui .whatsapp-link { color: #fff !important; -webkit-text-fill-color: #fff !important; background: #198754 !important; border-radius: 10px !important; }
body.abanrah-ui .whatsapp-btn img { width: 20px !important; height: 20px !important; object-fit: contain !important; }

/* Generic media thumbnails across authenticated pages */
body.abanrah-app-body .abanrah-content a[href*="/media/"] > img:not(.profile-img):not(.brand-logo):not(.captcha) {
  max-width: 170px;
  max-height: 120px;
  object-fit: cover;
  border: 1px solid var(--ar4-border);
  border-radius: 10px;
  box-shadow: 0 5px 14px rgba(20,53,63,.09);
  transition: transform .16s ease, box-shadow .16s ease;
}
body.abanrah-app-body .abanrah-content a[href*="/media/"] > img:hover { transform: scale(1.025); box-shadow: 0 10px 24px rgba(20,53,63,.16); }
body.abanrah-app-body .abanrah-content table a[href*="/media/"] > img { width: 76px !important; height: 58px !important; object-fit: cover !important; }

/* Image lightbox */
.ar-media-lightbox { position: fixed; z-index: 3000; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(4,24,29,.84); backdrop-filter: blur(8px); }
.ar-media-lightbox.is-open { display: flex; }
.ar-media-lightbox-card { position: relative; width: min(960px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.4); overflow: hidden; }
.ar-media-lightbox-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px 9px 16px; border-bottom: 1px solid var(--ar4-border); }
.ar-media-lightbox-title { min-width: 0; overflow: hidden; color: var(--ar4-ink); font-size: .75rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ar-media-lightbox-actions { display: flex; align-items: center; gap: 7px; }
.ar-media-lightbox-actions a,
.ar-media-lightbox-actions button { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; display: grid !important; place-items: center !important; padding: 0 !important; color: var(--ar4-primary) !important; -webkit-text-fill-color: var(--ar4-primary) !important; background: #f0f6f6 !important; border: 1px solid var(--ar4-border) !important; border-radius: 9px !important; box-shadow: none !important; }
.ar-media-lightbox-body { min-height: 240px; display: grid; place-items: center; overflow: auto; padding: 14px; background: #eef3f4; }
.ar-media-lightbox-body img { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 145px); object-fit: contain; border-radius: 8px; }
body.ar-lightbox-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .ar-filter-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ar-finance-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-management-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ar-public-hero { grid-template-columns: 1fr .72fr; }
  .ar-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .ar-page-hero { align-items: flex-start; flex-wrap: wrap; }
  .ar-page-hero-copy { flex-basis: calc(100% - 86px); }
  .ar-hero-action,
  .ar-management-hero-badge { margin-right: 82px; }
  .ar-management-grid { grid-template-columns: 1fr; }
  .ar-management-card-wide { grid-column: auto; }
  .ar-login-shell { grid-template-columns: 1fr; min-height: auto; }
  .ar-login-story { min-height: 360px; }
  .ar-public-hero { min-height: auto; grid-template-columns: 1fr; }
  .ar-public-hero-visual { min-height: 330px; }
  .ar-public-intro,
  .ar-about-story,
  .ar-capabilities-section,
  .ar-contact-guidance { grid-template-columns: 1fr; gap: 28px; }
  .ar-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-inner-hero { grid-template-columns: 1fr; }
  .ar-inner-hero > aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ar-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-contact-card-wide { grid-column: 1 / -1; }
  .ar-leadership-strip { align-items: flex-start; flex-direction: column; }
  .ar-artia-credit-card { grid-template-columns: 240px minmax(0, 1fr); }
  .ar-footer-main { grid-template-columns: 1fr 1fr; }
  .ar-footer-links { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); justify-content: start; }
}

@media (max-width: 767.98px) {
  .ar-page-hero { padding: 20px; border-radius: 17px; }
  .ar-page-hero-icon { width: 50px; height: 50px; flex-basis: 50px; border-radius: 14px; font-size: 1.25rem; }
  .ar-page-hero-copy { flex-basis: calc(100% - 68px); }
  .ar-page-hero-copy p { font-size: .7rem; }
  .ar-hero-action,
  .ar-management-hero-badge { width: 100%; margin-right: 0; }
  .ar-section-heading,
  .ar-table-card-head,
  .ar-public-section-head { align-items: flex-start; flex-direction: column; }
  .ar-filter-grid-5 { grid-template-columns: 1fr; }
  .ar-filter-actions .btn { width: 100%; }
  .ar-finance-overview { grid-template-columns: 1fr; }
  .ar-balance-card,
  .ar-metric-card { min-height: 104px; }
  .ar-management-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-management-notice { align-items: flex-start; }
  .ar-management-notice span { line-height: 1.8; }
  .ar-login-page { padding: 10px; }
  .ar-login-shell { border-radius: 18px; }
  .ar-login-story { min-height: 320px; padding: 24px; }
  .ar-login-form-side { padding: 26px 20px; }
  .ar-captcha-head { align-items: flex-start; flex-direction: column; }
  .ar-captcha-row { align-items: stretch; }
  .ar-captcha-fields { grid-template-columns: 1fr; }
  .ar-captcha-fields img.captcha { width: 100%; }
  .ar-public-hero { width: calc(100% - 18px); margin-top: 10px; padding: 30px 21px; border-radius: 20px; }
  .ar-public-hero h1 { font-size: 1.75rem !important; }
  .ar-public-hero-actions .btn { width: 100%; }
  .ar-public-trust-row { grid-template-columns: 1fr; }
  .ar-public-hero-visual { min-height: 280px; transform: scale(.82); margin: -20px 0; }
  .ar-public-intro,
  .ar-public-services,
  .ar-operation-flow,
  .ar-values-section,
  .ar-capabilities-section,
  .ar-leadership-strip,
  .ar-contact-guidance,
  .ar-artia-credit-card,
  .ar-about-story { width: calc(100% - 24px); }
  .ar-public-intro,
  .ar-public-services,
  .ar-operation-flow,
  .ar-values-section,
  .ar-capabilities-section,
  .ar-contact-guidance { padding: 55px 0; }
  .ar-service-grid,
  .ar-values-grid,
  .ar-flow-grid { grid-template-columns: 1fr; }
  .ar-public-cta { width: calc(100% - 24px); align-items: stretch; flex-direction: column; margin-bottom: 55px; }
  .ar-public-cta .btn { width: 100%; }
  .ar-inner-hero { width: calc(100% - 18px); margin-top: 10px; margin-bottom: 50px; padding: 28px 22px; border-radius: 20px; }
  .ar-inner-hero > aside { grid-template-columns: 1fr; }
  .ar-about-story-visual { min-height: 260px; padding: 24px; }
  .ar-leader-cards { width: 100%; flex-direction: column; }
  .ar-leader-cards article { width: 100%; }
  .ar-contact-grid { width: calc(100% - 24px); grid-template-columns: 1fr; margin-bottom: 55px; }
  .ar-contact-card-wide { grid-column: auto; }
  .ar-contact-checklist { grid-template-columns: 1fr; }
  .ar-artia-credit-card { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .ar-footer-main { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 26px; padding: 34px 0 28px; }
  .ar-footer-links { grid-column: auto; grid-template-columns: repeat(2, auto); }
  .ar-footer-bottom { align-items: flex-start; flex-direction: column !important; padding-block: 15px; }
  .ar-artia-footer { align-items: flex-start; flex-direction: column; }
  body.abanrah-ui .documents-grid,
  body.abanrah-ui .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.abanrah-ui .profile-img { width: 112px !important; height: 112px !important; }
  .ar-media-lightbox { padding: 8px; }
  .ar-media-lightbox-card { max-height: calc(100vh - 16px); border-radius: 13px; }
}

@media (max-width: 420px) {
  .ar-management-quick-grid { grid-template-columns: 1fr; }
  body.abanrah-ui .documents-grid,
  body.abanrah-ui .docs-grid { grid-template-columns: 1fr !important; }
  .ar-login-form-head { align-items: center; }
  .ar-login-form-icon { width: 44px; height: 44px; flex-basis: 44px; }
}

@media print {
  .ar-media-lightbox,
  .ar-password-toggle { display: none !important; }
}

/* ---------- Invoice image gallery ---------- */
.ar-document-panel { padding: clamp(18px, 2.5vw, 26px); background: #fff; border: 1px solid var(--ar4-border); border-radius: var(--ar4-radius); box-shadow: var(--ar4-shadow-sm); }
.ar-invoice-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.ar-document-tile { min-width: 0; overflow: hidden; background: #f8fbfb; border: 1px solid #e1ebec; border-radius: 15px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ar-document-tile.has-file:hover { transform: translateY(-3px); border-color: #a9cdd1; box-shadow: 0 14px 30px rgba(22,67,78,.1); }
.ar-document-tile-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; color: #35545d; border-bottom: 1px solid #e4eeee; font-size: .72rem; font-weight: 900; }
.ar-document-tile-head i { color: var(--ar4-accent); }
.ar-document-preview { position: relative; display: block; height: 165px; overflow: hidden; background: #eaf1f2; }
.ar-document-preview img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.ar-document-preview:hover img { transform: scale(1.035); }
.ar-document-preview > span { position: absolute; right: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #fff; background: rgba(13,57,67,.84); border-radius: 8px; font-size: .61rem; font-weight: 800; backdrop-filter: blur(5px); }
.ar-document-empty { height: 165px; display: grid; place-content: center; justify-items: center; gap: 8px; color: #90a3a8; font-size: .66rem; }
.ar-document-empty i { font-size: 1.75rem; }

/* ---------- Driver/truck detail final polish ---------- */
.ar-driver-detail,
.ar-truck-detail { width: 100% !important; max-width: 1380px !important; min-width: 0; margin-inline: auto !important; }
.ar-driver-detail .profile-header,
.ar-truck-detail .truck-header { overflow: hidden; }
.ar-driver-detail .section,
.ar-truck-detail .section { border-color: var(--ar4-border) !important; box-shadow: var(--ar4-shadow-sm) !important; }
.ar-driver-detail .document-img,
.ar-driver-detail .doc-preview img,
.ar-truck-detail .document-img,
.ar-truck-detail .doc-preview img { cursor: zoom-in; }

@media (max-width: 1199.98px) { .ar-invoice-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ar-invoice-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-document-preview, .ar-document-empty { height: 135px; } }
@media (max-width: 430px) { .ar-invoice-gallery { grid-template-columns: 1fr; } .ar-document-preview, .ar-document-empty { height: 180px; } }


/* ---------- Compact document previews (bunker and shared detail tables) ---------- */
.ar-mini-docs {
  min-width: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}
.ar-mini-document {
  position: relative;
  width: 72px;
  height: 58px;
  display: block;
  overflow: hidden;
  background: #edf4f5;
  border: 1px solid var(--ar4-border);
  border-radius: 10px;
  box-shadow: 0 5px 12px rgba(20,53,63,.08);
  cursor: zoom-in;
}
.ar-mini-document img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  object-fit: cover;
  transition: transform .18s ease;
}
.ar-mini-document span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  padding: 2px 5px;
  overflow: hidden;
  color: #fff;
  background: rgba(8,48,57,.82);
  border-radius: 5px;
  font-size: .5rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(3px);
}
.ar-mini-document:hover img { transform: scale(1.06); }
.ar-bunker-detail .table-responsive { max-width: 100%; }
.ar-bunker-detail table { min-width: 980px; }

@media (max-width: 767.98px) {
  .ar-mini-docs { min-width: 116px; }
  .ar-mini-document { width: 62px; height: 52px; }
}

/* Compatibility alias for the legacy project-only tyre icon name. */
.fa-tire { --fa: "\f70b"; }