:root {
    --ptms-primary: #ef5b2a;
    --ptms-primary-dark: #cc4319;
    --ptms-primary-soft: #fff0e9;
    --ptms-navy: #111827;
    --ptms-navy-2: #1f2937;
    --ptms-surface: #ffffff;
    --ptms-bg: #f4f6fa;
    --ptms-border: #e5e7eb;
    --ptms-muted: #6b7280;
    --ptms-success: #16a34a;
    --ptms-warning: #d97706;
    --ptms-danger: #dc2626;
    --ptms-radius: 18px;
    --ptms-shadow: 0 16px 45px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    margin: 0;
    background: var(--ptms-bg);
    color: #172033;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
.min-w-0 { min-width: 0; }

.app-shell { min-height: 100vh; }
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    width: 272px;
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    background:
        radial-gradient(circle at 15% 10%, rgba(239, 91, 42, .26), transparent 28%),
        linear-gradient(180deg, #151d2d 0%, #0b1220 100%);
    color: #fff;
    overflow-y: auto;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 24px;
}
.brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff7a45, var(--ptms-primary));
    box-shadow: 0 10px 24px rgba(239, 91, 42, .35);
    font-size: 22px;
}
.brand-title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.brand-subtitle { margin: 2px 0 0; color: #9ca3af; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.sidebar-label {
    padding: 0 12px;
    margin: 12px 0 8px;
    color: #6b7280;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sidebar-nav { display: grid; gap: 7px; }
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #aeb7c6 !important;
    font-size: 14px;
    font-weight: 650;
    transition: all .2s ease;
}
.sidebar-nav .nav-link i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    font-size: 15px;
}
.sidebar-nav .nav-link:hover {
    transform: translateX(2px);
    background: rgba(255, 255, 255, .07);
    color: #fff !important;
}
.sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, rgba(239, 91, 42, .23), rgba(239, 91, 42, .09));
    border-color: rgba(255, 140, 92, .25);
    color: #fff !important;
}
.sidebar-nav .nav-link.active i { background: var(--ptms-primary); color: #fff; }

.sidebar-footer { margin-top: auto; padding-top: 24px; }
.user-card {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.045);
}
.user-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #fff;
    color: var(--ptms-primary);
    font-weight: 800;
}
.user-name { color: #fff; font-size: 13px; font-weight: 750; }
.user-role { color: #8d98aa; font-size: 11px; }
.logout-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    color: #fca5a5;
    font-size: 13px;
    font-weight: 700;
}
.logout-link:hover { background: rgba(220,38,38,.12); color: #fecaca; }

.app-main { min-height: 100vh; margin-left: 272px; }
.mobile-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--ptms-border);
    backdrop-filter: blur(16px);
}
.app-content { width: 100%; max-width: 1540px; margin: 0 auto; padding: 30px 34px 52px; }

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: var(--ptms-primary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.page-title { margin: 0; color: #111827; font-size: clamp(26px, 3vw, 38px); font-weight: 850; letter-spacing: -.8px; }
.page-subtitle { max-width: 690px; margin: 7px 0 0; color: var(--ptms-muted); font-size: 14px; line-height: 1.65; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.btn {
    border-radius: 12px;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
    --bs-btn-bg: var(--ptms-primary);
    --bs-btn-border-color: var(--ptms-primary);
    --bs-btn-hover-bg: var(--ptms-primary-dark);
    --bs-btn-hover-border-color: var(--ptms-primary-dark);
    --bs-btn-active-bg: var(--ptms-primary-dark);
    --bs-btn-active-border-color: var(--ptms-primary-dark);
    box-shadow: 0 10px 20px rgba(239,91,42,.18);
}
.btn-light { border-color: var(--ptms-border); background: #fff; }
.btn-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 11px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stats-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 20px;
    border: 1px solid var(--ptms-border);
    border-radius: var(--ptms-radius);
    background: var(--ptms-surface);
    box-shadow: 0 8px 25px rgba(15,23,42,.045);
}
.stat-card::after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -50px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--accent-soft, #f3f4f6);
}
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stat-label { color: var(--ptms-muted); font-size: 12px; font-weight: 750; }
.stat-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--accent-soft, #f3f4f6);
    color: var(--accent, var(--ptms-primary));
    font-size: 20px;
}
.stat-value { position: relative; z-index: 1; margin-top: 18px; color: #111827; font-size: 33px; font-weight: 850; line-height: 1; }
.stat-note { position: relative; z-index: 1; margin-top: 8px; color: #8b95a7; font-size: 11px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .8fr); gap: 20px; }
.panel {
    border: 1px solid var(--ptms-border);
    border-radius: var(--ptms-radius);
    background: var(--ptms-surface);
    box-shadow: 0 8px 25px rgba(15,23,42,.045);
}
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid #edf0f4;
}
.panel-title { margin: 0; font-size: 16px; font-weight: 820; }
.panel-subtitle { margin: 4px 0 0; color: var(--ptms-muted); font-size: 12px; }
.panel-body { padding: 20px 22px; }

.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.module-card {
    display: flex;
    min-height: 188px;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--ptms-border);
    border-radius: 17px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    color: inherit;
    transition: all .2s ease;
}
.module-card:hover { transform: translateY(-3px); border-color: #fdc7b4; box-shadow: 0 14px 32px rgba(15,23,42,.08); }
.module-icon {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--soft, var(--ptms-primary-soft));
    color: var(--accent, var(--ptms-primary));
    font-size: 21px;
}
.module-title { margin: 17px 0 4px; font-size: 15px; font-weight: 820; }
.module-desc { color: var(--ptms-muted); font-size: 12px; line-height: 1.55; }
.module-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; color: var(--accent, var(--ptms-primary)); font-size: 12px; font-weight: 800; }

.activity-list { display: grid; gap: 4px; }
.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f5;
    color: inherit;
}
.activity-item:last-child { border-bottom: 0; }
.activity-dot {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #fff3ed;
    color: var(--ptms-primary);
}
.activity-main { min-width: 0; flex: 1; }
.activity-title { overflow: hidden; color: #1f2937; font-size: 13px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.activity-meta { margin-top: 3px; color: var(--ptms-muted); font-size: 11px; }
.activity-date { color: #9ca3af; font-size: 10px; white-space: nowrap; }

.empty-state { padding: 38px 20px; text-align: center; color: var(--ptms-muted); }
.empty-state i { display: block; margin-bottom: 10px; color: #d1d5db; font-size: 36px; }

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf0f4;
}
.search-box { position: relative; width: min(100%, 410px); }
.search-box i { position: absolute; top: 50%; left: 14px; z-index: 2; transform: translateY(-50%); color: #9ca3af; }
.search-box .form-control { height: 44px; padding-left: 41px; border-color: #e6e9ef; background: #f9fafb; }
.search-box .form-control:focus { border-color: #f7a285; background: #fff; box-shadow: 0 0 0 .2rem rgba(239,91,42,.12); }
.table-count { color: var(--ptms-muted); font-size: 12px; white-space: nowrap; }

.table-app { margin: 0; }
.table-app thead th {
    padding: 13px 16px;
    border: 0;
    background: #f8fafc;
    color: #667085;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table-app tbody td { padding: 16px; border-color: #eef1f5; vertical-align: middle; font-size: 13px; }
.table-app tbody tr { transition: background .15s ease; }
.table-app tbody tr:hover { background: #fffaf7; }
.wo-code { color: #111827; font-weight: 820; }
.cell-main { color: #1f2937; font-weight: 720; }
.cell-sub { margin-top: 3px; color: #8b95a7; font-size: 11px; }
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 750;
}
.action-group { display: flex; align-items: center; gap: 7px; }
.action-group .btn { box-shadow: none; }

.form-control, .form-select {
    min-height: 44px;
    border-color: #dfe4eb;
    border-radius: 11px;
    font-size: 13px;
}
textarea.form-control { min-height: auto; }
.form-control:focus, .form-select:focus { border-color: #f2a181; box-shadow: 0 0 0 .2rem rgba(239,91,42,.12); }
.form-label { margin-bottom: 7px; color: #374151; font-size: 12px; font-weight: 750; }
.form-hint { margin-top: 6px; color: #8b95a7; font-size: 10px; }

.modal-content { overflow: hidden; border: 0; border-radius: 22px; box-shadow: 0 30px 90px rgba(15,23,42,.25); }
.modal-header { padding: 19px 22px; border-color: #edf0f4; }
.modal-body { padding: 22px; background: #f7f8fb; }
.modal-footer { padding: 16px 22px; border-color: #edf0f4; }
.modal-xl { --bs-modal-width: 1180px; }

.form-section {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #e5e9ef;
    border-radius: 17px;
    background: #fff;
}
.form-section:last-child { margin-bottom: 0; }
.section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.section-number {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: var(--ptms-primary-soft);
    color: var(--ptms-primary);
    font-size: 13px;
    font-weight: 850;
}
.section-title { margin: 0; font-size: 14px; font-weight: 820; }
.section-desc { margin: 3px 0 0; color: var(--ptms-muted); font-size: 11px; }

.tire-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tire-card { padding: 15px; border: 1px solid #e8ebf0; border-radius: 14px; background: #fbfcfe; }
.tire-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #263244; font-size: 12px; font-weight: 820; }
.tire-title i { color: var(--ptms-primary); }

.upload-box { position: relative; height: 100%; min-height: 112px; padding: 14px; border: 1px dashed #cfd6df; border-radius: 13px; background: #fafbfc; }
.upload-box:hover { border-color: #f2a181; background: #fffaf7; }
.upload-box label { display: block; margin-bottom: 9px; color: #4b5563; font-size: 11px; font-weight: 750; }
.image-preview { display: none; width: 100%; height: 110px; margin-top: 10px; object-fit: cover; border-radius: 10px; }
.image-preview.show { display: block; }

.edit-preview { width: 100%; max-width: 260px; height: 170px; object-fit: cover; border-radius: 14px; border: 1px solid var(--ptms-border); }

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, .8fr);
    background: #fff;
}
.login-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 46px;
    background:
        linear-gradient(135deg, rgba(8,15,28,.92), rgba(17,24,39,.78)),
        radial-gradient(circle at 25% 20%, #ef5b2a 0, transparent 34%),
        #101827;
    color: #fff;
}
.login-visual::after {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -160px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02);
}
.login-copy { position: relative; z-index: 1; max-width: 650px; }
.login-copy h1 { margin: 0 0 18px; font-size: clamp(38px, 5.2vw, 72px); font-weight: 900; line-height: 1.02; letter-spacing: -2px; }
.login-copy h1 span { color: #ff7a45; }
.login-copy p { max-width: 560px; color: #c4cbd6; font-size: 15px; line-height: 1.75; }
.login-features { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.login-feature { padding: 9px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.06); color: #d9dee7; font-size: 11px; }
.login-form-wrap { display: grid; place-items: center; padding: 36px; background: #f7f8fa; }
.login-card { width: min(100%, 430px); padding: 34px; border: 1px solid #e6e9ef; border-radius: 24px; background: #fff; box-shadow: var(--ptms-shadow); }
.login-card h2 { margin: 20px 0 7px; font-size: 26px; font-weight: 850; }
.login-card p { margin-bottom: 26px; color: var(--ptms-muted); font-size: 13px; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; top: 50%; left: 14px; z-index: 1; transform: translateY(-50%); color: #98a2b3; }
.input-icon .form-control { height: 49px; padding-left: 42px; }
.password-toggle { position: absolute; top: 50%; right: 12px; z-index: 2; transform: translateY(-50%); border: 0; background: transparent; color: #98a2b3; }

@media (max-width: 1199.98px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .tire-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .app-sidebar { display: none; }
    .app-main { margin-left: 0; }
    .mobile-topbar { display: flex; }
    .app-content { padding: 24px 18px 44px; }
    .page-header { align-items: stretch; flex-direction: column; }
    .page-actions .btn { flex: 1; }
    .module-grid { grid-template-columns: 1fr; }
    .module-card { min-height: 150px; }
    .login-page { grid-template-columns: 1fr; }
    .login-visual { display: none; }
    .login-form-wrap { min-height: 100vh; }
}

@media (max-width: 767.98px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { min-height: 135px; padding: 16px; }
    .stat-value { font-size: 27px; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .search-box { width: 100%; }
    .tire-grid { grid-template-columns: 1fr; }
    .form-section { padding: 16px; }
    .panel-header, .panel-body { padding-left: 16px; padding-right: 16px; }
    .table-responsive { border-radius: 0 0 18px 18px; }
    .table-app { min-width: 760px; }
    .modal-dialog { margin: 0; min-height: 100%; }
    .modal-content { min-height: 100vh; border-radius: 0; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .login-form-wrap { padding: 18px; }
    .login-card { padding: 25px 21px; border-radius: 20px; }
}

@media (max-width: 1199.98px) {
    .stats-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .stats-grid-three { grid-template-columns: 1fr; }
}

/* PTMS v3: dropdown navigation, attendance, payroll, filters, and pagination */
.sidebar-dropdown { margin: 0; }
.sidebar-dropdown summary { list-style: none; cursor: pointer; }
.sidebar-dropdown summary::-webkit-details-marker { display: none; }
.sidebar-dropdown .dropdown-arrow { width: auto !important; height: auto !important; margin-left: auto; background: transparent !important; font-size: 11px; transition: transform .2s ease; }
.sidebar-dropdown[open] .dropdown-arrow { transform: rotate(180deg); }
.sidebar-dropdown .group-active { color: #fff !important; background: rgba(255,255,255,.055); }
.sidebar-submenu { display: grid; gap: 5px; margin: 5px 0 8px 18px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.1); }
.sidebar-nav .sub-link { min-height: 41px; padding: 8px 10px; border-radius: 11px; font-size: 12px; }
.sidebar-nav .sub-link i { width: 24px; height: 24px; border-radius: 8px; font-size: 13px; }
.access-card { padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: rgba(255,255,255,.045); color: #8590a2; font-size: 11px; line-height: 1.55; }
.mobile-brand { width: 36px !important; height: 36px !important; border-radius: 11px !important; font-size: 17px !important; }
.offcanvas { width: 300px !important; background: #0f1724 !important; }

.stats-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.module-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filter-panel { padding: 18px 20px; }
.form-canvas { background: #f7f8fb; border-radius: 0 0 var(--ptms-radius) var(--ptms-radius); }
.panel-footer { padding: 14px 20px; border-top: 1px solid #edf0f4; }
.toolbar-filter { justify-content: flex-start; flex-wrap: nowrap; }
.filter-select { width: min(260px, 100%); flex: 0 0 auto; }
.filter-date { width: 165px; flex: 0 0 auto; }
.pagination-wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pagination-summary { color: var(--ptms-muted); font-size: 12px; }
.pagination .page-link { min-width: 34px; height: 34px; display: grid; place-items: center; border-color: var(--ptms-border); color: #475569; border-radius: 9px !important; margin: 0 2px; font-size: 12px; font-weight: 700; }
.pagination .page-item.active .page-link { background: var(--ptms-primary); border-color: var(--ptms-primary); color: #fff; }
.badge-warning { background: #fff7e6; color: #b45309; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.status-pill.present { background: #eaf8ef; color: #15803d; }
.status-pill.late { background: #fff7e6; color: #b45309; }
.status-pill.admin { background: #f1ebff; color: #6d28d9; }
.status-pill.inactive { background: #f1f5f9; color: #64748b; }
.field-disabled { opacity: .45; pointer-events: none; }

.attendance-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 20px; }
.attendance-clock-card { overflow: hidden; }
.live-clock { padding: 30px 20px 24px; text-align: center; }
.live-clock-date { color: var(--ptms-muted); font-size: 13px; font-weight: 700; }
.live-clock-time { margin: 8px 0 4px; color: #111827; font-size: clamp(48px, 8vw, 86px); font-weight: 850; letter-spacing: -4px; line-height: 1; }
.live-clock-zone { color: #9ca3af; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.attendance-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.attendance-status-grid > div { padding: 14px; border: 1px solid var(--ptms-border); border-radius: 14px; background: #f9fafb; text-align: center; }
.attendance-status-grid span { display: block; color: var(--ptms-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.attendance-status-grid strong { display: block; margin-top: 4px; color: #111827; font-size: 15px; }
.btn-attendance { min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 17px; font-size: 16px; }
.geo-progress { color: var(--ptms-muted); font-size: 11px; text-align: center; }
.info-stack { display: grid; }
.info-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid #edf0f4; }
.info-row span { color: var(--ptms-muted); font-size: 11px; }
.info-row strong { max-width: 65%; color: #1f2937; font-size: 12px; text-align: right; }
.location-note, .formula-note { display: flex; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 14px; background: #eef8ff; color: #42627a; font-size: 11px; line-height: 1.55; }
.location-note i, .formula-note i { color: #0284c7; font-size: 18px; }

.day-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.day-picker input { position: absolute; opacity: 0; pointer-events: none; }
.day-picker span { display: grid; place-items: center; min-width: 48px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ptms-border); border-radius: 11px; background: #fff; color: #64748b; font-size: 11px; font-weight: 800; cursor: pointer; }
.day-picker input:checked + span { border-color: #f59e7b; background: var(--ptms-primary-soft); color: var(--ptms-primary-dark); }
.stat-money { font-size: clamp(20px, 2.2vw, 29px); }
.payroll-net { color: #15803d; font-size: 14px; font-weight: 850; white-space: nowrap; }
.formula-note { margin: 18px 0 0; background: #fff; border: 1px solid var(--ptms-border); }

@media (max-width: 1280px) {
    .stats-grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .module-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .attendance-layout { grid-template-columns: 1fr; }
    .toolbar-filter { flex-wrap: wrap; }
    .filter-select, .filter-date { width: 100%; flex: 1 1 180px; }
    .toolbar-filter .search-box { width: 100%; flex: 1 0 100%; }
}
@media (max-width: 767.98px) {
    .stats-grid-five { grid-template-columns: 1fr 1fr; }
    .module-grid-four { grid-template-columns: 1fr; }
    .pagination-wrap { align-items: flex-start; flex-direction: column; }
    .attendance-status-grid { grid-template-columns: 1fr; }
    .live-clock-time { letter-spacing: -2px; }
}
@media (max-width: 520px) {
    .stats-grid-five { grid-template-columns: 1fr; }
}

/* PTMS v4: unified work modules, employee recap, Engine Cleaning, and AC Service */
.work-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 720px;
}
.work-tab {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid var(--ptms-border);
    border-radius: 16px;
    background: #fff;
    color: #374151;
    box-shadow: 0 7px 20px rgba(15,23,42,.04);
}
.work-tab > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 19px;
}
.work-tab span { display: grid; gap: 2px; }
.work-tab strong { font-size: 14px; }
.work-tab small { color: #8b95a7; font-size: 11px; }
.work-tab.active { border-color: #b9d2ff; background: linear-gradient(135deg,#eef5ff,#fff); color: #1d4ed8; }
.work-tab.active > i { background: #2563eb; color: #fff; }

.service-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-height: 160px;
    padding: 26px 30px;
    border-radius: 22px;
    color: #fff;
    box-shadow: var(--ptms-shadow);
}
.service-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 250px;
    height: 250px;
    border: 45px solid rgba(255,255,255,.08);
    border-radius: 50%;
}
.service-hero-engine { background: linear-gradient(135deg,#d71920,#ff3b30); }
.service-hero-ac { background: linear-gradient(135deg,#173b69,#169bd5); }
.service-kicker { display: inline-block; margin-bottom: 8px; font-size: 10px; font-weight: 850; letter-spacing: .16em; opacity: .75; }
.service-hero h2 { max-width: 680px; margin: 0 0 7px; font-size: clamp(22px,3vw,32px); font-weight: 850; letter-spacing: -.5px; }
.service-hero p { max-width: 680px; margin: 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.6; }
.service-hero-icon { position: relative; z-index: 1; width: 82px; height: 82px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.2); border-radius: 26px; background: rgba(255,255,255,.12); font-size: 38px; backdrop-filter: blur(8px); }
.engine-accent { color: #e11d48; }
.ac-accent { color: #0891b2; }
.btn-ac { --bs-btn-bg:#0891b2; --bs-btn-border-color:#0891b2; --bs-btn-hover-bg:#0e7490; --bs-btn-hover-border-color:#0e7490; }

.table-form-metric { min-width: 650px; margin-bottom: 0; }
.table-form-metric th { padding: 10px 12px; background: #eff5fb; color: #334155; font-size: 12px; }
.table-form-metric td { padding: 10px 12px; vertical-align: middle; }
.table-form-metric td:first-child { font-weight: 750; }

.period-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--ptms-border);
    border-radius: 13px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 750;
}
.stat-text-value { padding-top: 4px; font-size: 23px; }
.work-type-pill { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 800; }
.status-pill.info { background: #e7f8fb; color: #0e7490; }

.spooring-focus {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.spooring-focus-card { padding: 18px; border: 1px solid var(--ptms-border); border-radius: 18px; background: #fff; }
.spooring-focus-card span { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; background: var(--ptms-primary-soft); color: var(--ptms-primary); }
.spooring-focus-card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 820; }
.spooring-focus-card p { margin: 0; color: var(--ptms-muted); font-size: 12px; }

@media (max-width: 767.98px) {
    .work-tabs, .spooring-focus { grid-template-columns: 1fr; }
    .service-hero { align-items: flex-start; min-height: auto; padding: 22px; }
    .service-hero-icon { width: 58px; height: 58px; border-radius: 18px; font-size: 27px; }
}

/* Spooring v4 - dedicated before/after workspace */
.spooring-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.spooring-overview-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 16px;
    border: 1px solid var(--ptms-border);
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #fafbfc);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}
.spooring-step {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    background: #fff0e9;
    color: #e65324;
    font-size: 12px;
    font-weight: 900;
}
.spooring-overview-card strong { display: block; color: #172033; font-size: 13px; }
.spooring-overview-card small { display: block; margin-top: 4px; color: #7b8494; font-size: 10px; line-height: 1.45; }
.before-after-mini { display: flex; align-items: center; gap: 7px; }
.before-after-mini > i { color: #f97316; }
.before-after-mini figure { width: 70px; margin: 0; }
.before-after-mini figure span { display: block; margin-bottom: 3px; color: #7b8494; font-size: 8px; font-weight: 800; text-align: center; text-transform: uppercase; }
.before-after-mini img,
.mini-placeholder { width: 70px; height: 48px; border: 1px solid #e3e7ed; border-radius: 8px; object-fit: cover; background: #f4f6f8; }
.mini-placeholder { display: grid; place-items: center; color: #a5adba; }
.upload-box-feature { min-height: 100%; padding: 16px; }
.upload-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.upload-heading small { color: #8992a1; font-size: 10px; }
.compare-label { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.compare-label.before { background: #334155; }
.compare-label.after { background: #ea580c; }

@media (max-width: 991.98px) {
    .spooring-overview { grid-template-columns: 1fr; }
}

/* =========================================================
   PTMS v4.1 — visual stability & access-scope improvements
   ========================================================= */
:root {
    --ptms-primary: #f05a28;
    --ptms-primary-dark: #d94717;
    --ptms-primary-soft: #fff1eb;
    --ptms-navy: #101827;
    --ptms-navy-2: #182235;
    --ptms-bg: #f5f7fb;
    --ptms-surface: #ffffff;
    --ptms-border: #e6eaf0;
    --ptms-muted: #6f7888;
    --ptms-radius: 20px;
    --ptms-shadow: 0 14px 36px rgba(19, 33, 68, .07);
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 82% -10%, rgba(240,90,40,.055), transparent 25%),
        var(--ptms-bg);
}

.app-sidebar {
    width: 264px;
    padding: 20px 16px;
    border-right: 1px solid rgba(255,255,255,.045);
    background:
        radial-gradient(circle at 10% 4%, rgba(240,90,40,.22), transparent 24%),
        linear-gradient(180deg, #182234 0%, #0d1421 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
}
.app-main { margin-left: 264px; }
.app-content { max-width: 1480px; padding: 28px 30px 54px; }
.brand-block { padding: 4px 8px 20px; }
.brand-mark { border-radius: 13px; }
.sidebar-label { margin-top: 15px; }
.sidebar-nav { gap: 5px; }
.sidebar-nav .nav-link { min-height: 45px; border-radius: 12px; }
.sidebar-nav .sub-link { min-height: 38px; }
.sidebar-submenu { margin-left: 17px; }
.sidebar-footer { padding-top: 18px; }
.access-card { background: rgba(255,255,255,.055); }

.page-header-card {
    position: relative;
    overflow: hidden;
    align-items: center;
    margin-bottom: 20px;
    padding: 24px 26px;
    border: 1px solid var(--ptms-border);
    border-radius: 22px;
    background: linear-gradient(135deg, #fff 0%, #fffaf7 100%);
    box-shadow: 0 10px 28px rgba(19,33,68,.055);
}
.page-header-card::after {
    content: "";
    position: absolute;
    right: -75px;
    top: -95px;
    width: 230px;
    height: 230px;
    border: 38px solid rgba(240,90,40,.055);
    border-radius: 50%;
    pointer-events: none;
}
.page-header-card > * { position: relative; z-index: 1; }
.page-title { font-size: clamp(25px, 2.7vw, 36px); letter-spacing: -.65px; }
.page-subtitle { max-width: 760px; font-size: 13px; }
.page-actions { align-items: center; }
.page-actions .btn { min-height: 44px; }

.panel {
    overflow: hidden;
    border-color: var(--ptms-border);
    box-shadow: var(--ptms-shadow);
}
.panel-form { overflow: visible; }
.panel-header { padding: 18px 20px; }
.panel-body { padding: 20px; }
.panel-title { font-size: 15px; }
.form-panel-header { background: linear-gradient(180deg,#fff,#fbfcfe); }
.section-kicker {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--ptms-primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.form-canvas { padding: 18px; background: #f6f8fb; }
.form-section-clean {
    padding: 20px;
    border-color: #e7ebf1;
    border-radius: 18px;
    box-shadow: 0 5px 18px rgba(16,24,39,.025);
}
.section-number { width: 36px; height: 36px; border-radius: 12px; }
.section-title { font-size: 15px; }
.section-desc { font-size: 11px; line-height: 1.5; }

.form-control, .form-select, .input-group-text {
    min-height: 45px;
    border-color: #dce2ea;
    border-radius: 12px;
}
.form-control, .form-select { padding-left: 13px; padding-right: 13px; background-color: #fff; }
.form-control::placeholder { color: #adb5c1; }
.form-select { background-position: right .85rem center; }
.input-group-app .input-group-text {
    min-width: 48px;
    justify-content: center;
    border-right: 0;
    border-radius: 12px 0 0 12px;
    background: #f7f8fb;
    color: #697386;
    font-size: 12px;
    font-weight: 800;
}
.input-group-app .form-control { border-radius: 0 12px 12px 0; }
.form-check-input:checked { border-color: var(--ptms-primary); background-color: var(--ptms-primary); }

.role-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.role-guide {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    background: #fbfcfe;
}
.role-guide > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--ptms-primary-soft);
    color: var(--ptms-primary);
}
.role-guide strong { display: block; color: #253044; font-size: 11px; }
.role-guide span { display: block; margin-top: 3px; color: #7c8798; font-size: 10px; line-height: 1.45; }

.scope-preview {
    min-height: 45px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border: 1px solid #dce2ea;
    border-radius: 12px;
    background: #f9fafc;
}
.scope-preview-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 9px;
    background: #edf2f7;
    color: #64748b;
}
.scope-preview small { display: block; color: #8a94a4; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.scope-preview strong { display: block; margin-top: 1px; color: #334155; font-size: 11px; }
.scope-preview.scope-all { border-color: #f5b79f; background: #fff7f3; }
.scope-preview.scope-all .scope-preview-icon { background: var(--ptms-primary); color: #fff; }
.field-disabled { opacity: 1; pointer-events: none; }
.field-disabled .form-select { background-color: #f1f4f8; color: #657083; }

.account-status-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 12px 14px;
    border: 1px solid #e1e6ed;
    border-radius: 15px;
    background: #fbfcfe;
    cursor: pointer;
}
.account-status-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 11px;
    background: #eaf8ef;
    color: #15803d;
}
.account-status-card strong { display: block; color: #273244; font-size: 12px; }
.account-status-card small { display: block; margin-top: 2px; color: #818b9b; font-size: 10px; }
.account-status-card .form-check { margin-bottom: 0; }
.form-actions-sticky {
    position: sticky;
    bottom: 12px;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid rgba(222,227,235,.95);
    border-radius: 15px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(15,23,42,.1);
    backdrop-filter: blur(10px);
}

.alert-app {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15,23,42,.04);
}
.alert-app > i { margin-top: 1px; font-size: 16px; }

.table-panel-heading { background: linear-gradient(180deg,#fff,#fcfdff); }
.data-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid #e3e7ed;
    border-radius: 999px;
    background: #f8fafc;
    color: #617086;
    font-size: 10px;
    font-weight: 800;
}
.toolbar-filter {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
}
.toolbar-grid .toolbar-search { flex: 1 1 320px; }
.toolbar-filter .filter-select { width: auto; min-width: 180px; flex: 0 1 220px; }
.toolbar-filter .filter-date { flex: 0 1 175px; }
.toolbar-filter .btn { min-height: 44px; }
.table-scroll-area { scrollbar-width: thin; scrollbar-color: #cbd3de transparent; }
.table-app { min-width: 900px; }
.table-app thead th { position: sticky; top: 0; z-index: 2; padding: 12px 14px; background: #f7f9fc; }
.table-app tbody td { padding: 14px; }
.table-app tbody tr:last-child td { border-bottom: 0; }
.table-number {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: #f1f4f8;
    color: #536174;
    font-size: 10px;
    font-weight: 850;
}
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-list-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 11px;
    background: linear-gradient(135deg,#fff0e9,#ffd8c8);
    color: var(--ptms-primary-dark);
    font-size: 12px;
    font-weight: 900;
}
.dealer-scope-cell { display: inline-flex; align-items: center; gap: 7px; color: #435066; font-size: 12px; font-weight: 650; }
.dealer-scope-cell i { color: var(--ptms-primary); }
.user-table .cell-main { font-size: 12px; }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { margin-top: 2px; color: #586476; font-size: 13px; }
.empty-state span { margin-top: 4px; font-size: 11px; }

.pagination-wrap { flex-wrap: wrap; }
.pagination .page-link { box-shadow: none; }
.panel-footer { background: #fff; }

/* Make service/report pages visually consistent without rewriting every view. */
.service-hero { min-height: 148px; border-radius: 20px; }
.spooring-overview-card, .stat-card, .module-card, .work-tab { border-color: #e6eaf0; box-shadow: 0 8px 22px rgba(19,33,68,.04); }
.stats-grid { gap: 13px; }
.stat-card { min-height: 136px; padding: 18px; }
.stat-value { margin-top: 14px; font-size: 30px; }
.upload-box { background: #fbfcfe; }
.upload-box input[type="file"] { font-size: 11px; }
.image-preview { height: 150px; }

@media (max-width: 1199.98px) {
    .role-guide-grid { grid-template-columns: 1fr; }
    .app-content { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 991.98px) {
    .app-main { margin-left: 0; }
    .app-content { padding: 20px 16px 42px; }
    .page-header-card { padding: 20px; }
    .page-header-card .page-actions { width: 100%; }
    .page-header-card .page-actions .btn { width: 100%; }
    .form-actions-sticky { bottom: 8px; }
}

@media (max-width: 767.98px) {
    .page-header-card { border-radius: 18px; }
    .page-title { font-size: 25px; }
    .page-subtitle { font-size: 12px; }
    .panel, .form-section-clean { border-radius: 16px; }
    .form-canvas { padding: 12px; }
    .form-section-clean { padding: 15px; }
    .toolbar-filter { align-items: stretch; flex-direction: row; }
    .toolbar-grid .toolbar-search,
    .toolbar-filter .filter-select,
    .toolbar-filter .filter-date { width: 100%; flex: 1 1 100%; }
    .toolbar-filter .btn { flex: 1 1 calc(50% - 5px); }
    .table-app { min-width: 860px; }
    .panel-footer { padding: 12px 14px; }
    .pagination-wrap { align-items: stretch; }
    .pagination-wrap nav { max-width: 100%; overflow-x: auto; padding-bottom: 3px; }
    .form-actions-sticky { padding: 10px; }
    .form-actions-sticky .btn { flex: 1; }
}

@media (max-width: 480px) {
    .app-content { padding-left: 12px; padding-right: 12px; }
    .page-header-card { padding: 17px; }
    .form-panel-header { align-items: flex-start; }
    .account-status-card { align-items: flex-start; }
    .account-status-card .form-check { margin-top: 5px; }
}

/* Unified page header across all modules */
.app-content > .page-header:not(.page-header-card) {
    position: relative;
    overflow: hidden;
    align-items: center;
    margin-bottom: 20px;
    padding: 22px 24px;
    border: 1px solid var(--ptms-border);
    border-radius: 20px;
    background: linear-gradient(135deg,#fff 0%,#fffaf7 100%);
    box-shadow: 0 10px 28px rgba(19,33,68,.05);
}
.app-content > .page-header:not(.page-header-card)::after {
    content: "";
    position: absolute;
    right: -62px;
    top: -92px;
    width: 205px;
    height: 205px;
    border: 34px solid rgba(240,90,40,.05);
    border-radius: 50%;
    pointer-events: none;
}
.app-content > .page-header:not(.page-header-card) > * { position: relative; z-index: 1; }
@media (max-width: 991.98px) {
    .app-content > .page-header:not(.page-header-card) { align-items: stretch; padding: 19px; }
}


/* =========================================================
   PTMS v4.2 — mobile action visibility & Rematching
   ========================================================= */
.stats-grid-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.module-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rematching-accent { color: #7c3aed; }
.service-hero-rematching {
    background:
        radial-gradient(circle at 82% 20%, rgba(255,255,255,.16), transparent 25%),
        linear-gradient(135deg, #4c1d95 0%, #7c3aed 58%, #9f67ff 100%);
}
.table-responsive {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}
.action-group {
    min-width: max-content;
    flex-wrap: nowrap;
}
.action-group .btn {
    flex: 0 0 auto;
    visibility: visible !important;
    opacity: 1 !important;
}
.mobile-scroll-hint { display: none; }

@media (max-width: 1280px) {
    .stats-grid-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .module-grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .module-grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-actions,
    .app-content > .page-header:not(.page-header-card) > .page-actions { width: 100%; }
    .app-content > .page-header:not(.page-header-card) > a.btn { width: 100%; min-height: 46px; }
}

@media (max-width: 767.98px) {
    .app-content {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
    .stats-grid-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .module-grid-five { grid-template-columns: 1fr; }
    .page-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .page-actions .btn,
    .page-header > a.btn { width: 100%; min-height: 48px; }
    .panel-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .panel-header > .btn,
    .panel-header > a.btn { min-height: 42px; }
    .toolbar-filter .table-count,
    .toolbar .table-count.ms-auto { width: 100%; margin-left: 0 !important; }
    .table-responsive {
        border-radius: 0 0 16px 16px;
        background: #fff;
        scrollbar-width: thin;
    }
    .table-app { min-width: 780px; }
    .table-app.has-sticky-actions thead th:last-child {
        position: sticky;
        right: 0;
        z-index: 6;
        background: #f7f9fc;
        box-shadow: -12px 0 18px -18px rgba(15,23,42,.65);
    }
    .table-app.has-sticky-actions tbody td:last-child {
        position: sticky;
        right: 0;
        z-index: 4;
        background: #fff;
        box-shadow: -12px 0 18px -18px rgba(15,23,42,.65);
    }
    .table-app.has-sticky-actions tbody tr:hover td:last-child { background: #fffaf7; }
    .action-group { gap: 8px; padding: 2px 0; }
    .action-group .btn-icon {
        width: 42px;
        height: 42px;
        border: 1px solid #dde3eb;
        background: #fff;
    }
    .form-actions-sticky,
    .form-canvas > .d-flex.justify-content-end,
    form > .d-flex.justify-content-end {
        position: sticky;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 20;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        width: 100%;
        padding: 10px;
        border: 1px solid rgba(220,226,235,.96);
        border-radius: 15px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 14px 34px rgba(15,23,42,.16);
        backdrop-filter: blur(12px);
    }
    .form-actions-sticky .btn,
    .form-canvas > .d-flex.justify-content-end .btn,
    form > .d-flex.justify-content-end .btn {
        min-width: 0;
        min-height: 48px;
        flex: 1 1 calc(50% - 5px);
    }
    .pagination-wrap { gap: 8px; }
    .pagination-summary { width: 100%; }
}

@media (max-width: 480px) {
    .stats-grid-six { grid-template-columns: 1fr; }
    .form-actions-sticky .btn,
    .form-canvas > .d-flex.justify-content-end .btn,
    form > .d-flex.justify-content-end .btn { flex-basis: 100%; }
    .toolbar-filter .btn { flex-basis: 100%; }
}


/* Vehicle brand picker */
/* Dealer brand picker — compact, clean, and logo-first. */
.brand-picker-toolbar { display:flex; gap:14px; align-items:center; justify-content:space-between; margin-bottom:18px; }
.brand-picker-toolbar .search-box { flex:1 1 360px; max-width:520px; }
.selected-brand-preview { display:flex; align-items:center; gap:11px; min-height:52px; padding:8px 15px 8px 9px; border:1px solid #dbe4ef; background:linear-gradient(180deg,#fff,#f8fafc); border-radius:16px; font-weight:850; color:#0f172a; box-shadow:0 10px 26px rgba(15,23,42,.06); }
.selected-brand-preview img { width:58px; height:36px; padding:4px; object-fit:contain; border-radius:10px; background:#fff; }
.brand-picker-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; max-height:500px; overflow:auto; padding:4px 6px 10px 2px; scrollbar-width:thin; }
.brand-option { display:block; cursor:pointer; margin:0; min-width:0; }
.brand-option[hidden] { display:none !important; }
.brand-option > input { position:absolute; opacity:0; pointer-events:none; }
.brand-option-card { position:relative; display:flex; min-height:104px; height:100%; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid #e2e8f0; background:linear-gradient(180deg,#fff 0%,#fbfdff 100%); border-radius:18px; padding:12px 9px 10px; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; overflow:hidden; }
.brand-option-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,#cbd5e1,transparent); opacity:.65; }
.brand-option:hover .brand-option-card { transform:translateY(-2px); border-color:#b8c5d6; box-shadow:0 14px 30px rgba(15,23,42,.09); }
.brand-option > input:checked + .brand-option-card { border-color:#2563eb; background:linear-gradient(180deg,#fff,#eff6ff); box-shadow:0 0 0 3px rgba(37,99,235,.11),0 14px 30px rgba(37,99,235,.11); }
.brand-option > input:checked + .brand-option-card::before { background:#2563eb; opacity:1; }
.brand-option > input:focus-visible + .brand-option-card { outline:3px solid rgba(37,99,235,.25); outline-offset:2px; }
.brand-logo-frame { display:flex; align-items:center; justify-content:center; width:92px; height:54px; border-radius:14px; background:#fff; }
.brand-logo-frame img { display:block; width:82px; height:46px; padding:4px; object-fit:contain; }
.brand-option-name { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:.77rem; font-weight:850; color:#334155; letter-spacing:-.1px; }
.brand-option-check { position:absolute; right:8px; top:8px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#fff; color:#2563eb; opacity:0; transform:scale(.75); transition:.18s ease; }
.brand-option > input:checked + .brand-option-card .brand-option-check { opacity:1; transform:scale(1); }
.dealer-brand-cell { display:flex; align-items:center; gap:12px; min-width:270px; }
.dealer-brand-logo { flex:0 0 auto; display:flex; width:72px; height:50px; align-items:center; justify-content:center; border:1px solid #e2e8f0; border-radius:14px; background:linear-gradient(180deg,#fff,#f8fafc); box-shadow:0 5px 14px rgba(15,23,42,.04); }
.dealer-brand-logo img { width:62px; height:40px; padding:3px; object-fit:contain; }
.brand-name-inline { color:#2563eb; font-weight:850; }
@media (max-width:1199px) { .brand-picker-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:991px) { .brand-picker-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:767px) {
    .brand-picker-toolbar { align-items:stretch; flex-direction:column; }
    .brand-picker-toolbar .search-box { max-width:none; width:100%; flex-basis:auto; }
    .selected-brand-preview { width:100%; }
    .brand-picker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:420px; gap:9px; }
    .brand-option-card { min-height:98px; padding:10px 6px; border-radius:15px; }
    .brand-logo-frame { width:76px; height:46px; }
    .brand-logo-frame img { width:70px; height:40px; }
    .dealer-brand-cell { min-width:230px; }
}
@media (max-width:420px) {
    .brand-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .brand-option-card { min-height:96px; }
}
.dealer-scope-logo { width:38px; height:26px; object-fit:contain; flex:0 0 auto; }
.dealer-scope-cell > span { display:flex; flex-direction:column; min-width:0; }
.dealer-scope-cell > span small { color:#2563eb; font-size:.66rem; font-weight:800; line-height:1.15; }


/* PTMS v4.5 — Tire Check navigation and compact dealer list */
.tire-choice-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(260px,.75fr) minmax(420px,1.25fr);gap:28px;align-items:center;padding:30px;border:1px solid #dfe7f1;border-radius:24px;background:linear-gradient(135deg,#0f172a 0%,#172554 58%,#1d4ed8 150%);box-shadow:0 22px 50px rgba(15,23,42,.14)}
.tire-choice-panel:after{content:"";position:absolute;right:-100px;top:-130px;width:360px;height:360px;border:58px solid rgba(255,255,255,.045);border-radius:50%;pointer-events:none}
.tire-choice-copy{position:relative;z-index:1;color:#fff}.tire-choice-kicker{display:block;margin-bottom:8px;color:#93c5fd;font-size:10px;font-weight:900;letter-spacing:.16em}.tire-choice-copy h2{margin:0 0 8px;font-size:clamp(25px,3vw,38px);font-weight:900;letter-spacing:-.7px}.tire-choice-copy p{max-width:480px;margin:0;color:#cbd5e1;font-size:13px;line-height:1.7}
.tire-choice-buttons{position:relative;z-index:1;display:grid;gap:13px}.tire-choice-button{display:grid;grid-template-columns:54px minmax(0,1fr) 34px;gap:14px;align-items:center;min-height:88px;padding:14px 16px;border:1px solid rgba(255,255,255,.28);border-radius:18px;text-align:left;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.13)}.tire-choice-button:hover,.tire-choice-button:focus{color:#fff;transform:translateY(-2px);box-shadow:0 18px 34px rgba(0,0,0,.18)}.tire-choice-pre{background:linear-gradient(135deg,#2563eb,#1d4ed8)}.tire-choice-post{background:linear-gradient(135deg,#16a34a,#15803d)}.tire-choice-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.16);font-size:24px}.tire-choice-button>span:nth-child(2){display:grid;gap:3px}.tire-choice-button strong{font-size:17px;font-weight:900}.tire-choice-button small{color:rgba(255,255,255,.78);font-size:11px;font-weight:650}.tire-choice-arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14)}
.tire-mode-switch{display:inline-flex;gap:8px;padding:6px;border:1px solid #dfe5ee;border-radius:15px;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.05)}.tire-mode-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:142px;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:11px;color:#64748b;background:#f8fafc;box-shadow:none}.tire-mode-btn:hover{color:#0f172a;background:#f1f5f9}.tire-mode-pre.active{color:#fff;background:#2563eb;border-color:#2563eb;box-shadow:0 8px 18px rgba(37,99,235,.2)}.tire-mode-post.active{color:#fff;background:#16a34a;border-color:#16a34a;box-shadow:0 8px 18px rgba(22,163,74,.2)}
.dealer-brand-cell{gap:10px;min-width:235px}.dealer-brand-logo{width:44px;height:34px;border-radius:9px;box-shadow:none}.dealer-brand-logo img{width:36px;height:26px;padding:2px}
@media(max-width:991.98px){.tire-choice-panel{grid-template-columns:1fr}}
@media(max-width:575.98px){.tire-choice-panel{padding:21px 17px;border-radius:19px}.tire-choice-button{grid-template-columns:48px minmax(0,1fr) 30px;min-height:80px;padding:12px;gap:11px}.tire-choice-icon{width:48px;height:48px;border-radius:14px;font-size:21px}.tire-choice-button strong{font-size:15px}.tire-mode-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}.tire-mode-btn{min-width:0;min-height:46px;padding:9px 8px}}


/* =========================================================
   PTMS v4.6 - one-page reports, compact dealer list,
   and reliable Tire Check form scrolling on mobile
   ========================================================= */
.dealer-list-table .dealer-brand-cell {
    min-width: 205px;
    gap: 8px;
}
.dealer-list-table .dealer-brand-logo {
    width: 30px;
    height: 24px;
    border-radius: 7px;
    border-color: #e7ebf0;
    background: #fff;
}
.dealer-list-table .dealer-brand-logo img {
    width: 24px;
    height: 18px;
    padding: 1px;
}

/* Bootstrap's scrollable modal expects .modal-body to be a direct flex child.
   Tire Check wraps it in a form, so make that form the flex scroll container. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex: 0 0 auto;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

@media (max-width: 767.98px) {
    .modal-dialog.modal-dialog-scrollable {
        width: 100%;
        max-width: none;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        margin: 0;
    }
    .modal-dialog-scrollable .modal-content {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .modal-dialog-scrollable .modal-content > form > .modal-header {
        padding: 14px 16px;
    }
    .modal-dialog-scrollable .modal-content > form > .modal-body {
        padding: 14px 12px calc(28px + env(safe-area-inset-bottom));
    }
    .modal-dialog-scrollable .modal-content > form > .modal-footer {
        position: relative;
        bottom: auto;
        z-index: 5;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -10px 28px rgba(15, 23, 42, .10);
    }
    .modal-dialog-scrollable .modal-content > form > .modal-footer .btn {
        width: 100%;
        min-height: 46px;
        margin: 0;
    }
    .modal-dialog-scrollable .form-section {
        padding: 14px;
        border-radius: 14px;
    }
    .modal-dialog-scrollable .tire-grid {
        display: block;
    }
    .modal-dialog-scrollable .tire-card {
        margin-bottom: 12px;
    }
    .dealer-list-table .dealer-brand-cell {
        min-width: 190px;
        gap: 7px;
    }
    .dealer-list-table .dealer-brand-logo {
        width: 27px;
        height: 22px;
    }
    .dealer-list-table .dealer-brand-logo img {
        width: 21px;
        height: 16px;
    }
}

@media (max-width: 420px) {
    .modal-dialog-scrollable .modal-content > form > .modal-footer {
        grid-template-columns: 1fr;
    }
}


/* PTMS v4.7 — Tire Check uses normal full pages, never a modal */
.tire-form-page {
    overflow: visible;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
}
.tire-full-form {
    overflow: visible;
}
.tire-full-form .form-canvas {
    overflow: visible;
}
.tire-form-actions {
    position: sticky;
    z-index: 20;
    bottom: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 18px 18px;
    padding: 12px;
    border: 1px solid rgba(226,232,240,.94);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 34px rgba(15,23,42,.14);
    backdrop-filter: blur(12px);
}
@media (max-width: 767.98px) {
    html, body {
        min-height: 100%;
        overflow-y: auto !important;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
    }
    .tire-form-page {
        min-height: 100dvh;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
    }
    .tire-full-form,
    .tire-full-form .panel-body,
    .tire-full-form .form-canvas,
    .tire-full-form .form-section {
        max-height: none !important;
        overflow: visible !important;
    }
    .tire-full-form .tire-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
    .tire-form-actions {
        bottom: calc(8px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0 10px 12px;
        padding: 10px;
    }
    .tire-form-actions .btn {
        width: 100%;
        min-height: 48px;
    }
}
@media (max-width: 420px) {
    .tire-form-actions { grid-template-columns: 1fr; }
}

/* v4.7 compact dealer identity in list */
.dealer-list-table .dealer-brand-cell {
    min-width: 190px;
    gap: 7px;
}
.dealer-list-table .dealer-brand-logo {
    width: 24px;
    height: 19px;
    min-width: 24px;
    border-radius: 5px;
}
.dealer-list-table .dealer-brand-logo img {
    width: 19px;
    height: 14px;
    padding: 0;
}
@media (max-width: 767.98px) {
    .dealer-list-table .dealer-brand-cell {
        min-width: 175px;
        gap: 6px;
    }
    .dealer-list-table .dealer-brand-logo {
        width: 22px;
        height: 18px;
        min-width: 22px;
    }
    .dealer-list-table .dealer-brand-logo img {
        width: 17px;
        height: 13px;
    }
}


/* =========================================================
   PTMS v4.8 — square Tire Check buttons and truly compact logos
   ========================================================= */
.tire-choice-simple {
    overflow: hidden;
}
.tire-choice-simple .panel-body {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 28px;
}
.tire-choice-simple-head h2 {
    margin: 4px 0 7px;
    color: #172033;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    letter-spacing: -.6px;
}
.tire-choice-simple-head p {
    margin: 0;
    color: var(--ptms-muted);
    font-size: 13px;
}
.tire-choice-simple .tire-choice-kicker {
    color: var(--ptms-primary);
}
.tire-square-actions {
    display: grid;
    grid-template-columns: repeat(2, 154px);
    gap: 14px;
}
.tire-square-btn {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--ptms-primary);
    border-radius: 16px;
    background: var(--ptms-primary);
    color: #fff;
    box-shadow: 0 12px 24px rgba(239,91,42,.20);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.tire-square-btn:hover,
.tire-square-btn:focus-visible {
    color: #fff;
    background: var(--ptms-primary-dark);
    border-color: var(--ptms-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(239,91,42,.28);
}
.tire-square-btn strong {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -.15px;
}
.tire-wheel-mark,
.tire-wheel-mini {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 50%;
    color: currentColor;
}
.tire-wheel-mark {
    width: 58px;
    height: 58px;
    border: 8px solid currentColor;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.2);
}
.tire-wheel-mark::before,
.tire-wheel-mini::before {
    content: "";
    position: absolute;
    inset: 21%;
    border: 3px solid currentColor;
    border-radius: 50%;
}
.tire-wheel-mark::after,
.tire-wheel-mini::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.tire-mode-switch {
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.tire-mode-btn {
    min-width: 126px;
    min-height: 46px;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid var(--ptms-primary);
    border-radius: 9px;
    color: var(--ptms-primary);
    background: #fff;
    font-weight: 850;
}
.tire-mode-btn:hover,
.tire-mode-btn.active,
.tire-mode-pre.active,
.tire-mode-post.active {
    color: #fff;
    background: var(--ptms-primary);
    border-color: var(--ptms-primary);
    box-shadow: 0 8px 16px rgba(239,91,42,.18);
}
.tire-wheel-mini {
    width: 21px;
    height: 21px;
    border: 4px solid currentColor;
}
.tire-wheel-mini::before {
    inset: 22%;
    border-width: 1.5px;
}
.tire-wheel-mini::after {
    width: 3px;
    height: 3px;
}

/* Dealer list: logo is only a small identifier, never the main content. */
.dealer-list-table .dealer-brand-cell {
    min-width: 180px;
    gap: 6px;
}
.dealer-list-table .dealer-brand-logo {
    width: 18px;
    height: 14px;
    min-width: 18px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    box-shadow: none;
}
.dealer-list-table .dealer-brand-logo img {
    width: 16px;
    height: 12px;
    padding: 0;
}

/* User list dealer logo. */
.user-table .dealer-scope-cell {
    gap: 6px;
}
.user-table .dealer-scope-logo {
    width: 18px;
    height: 13px;
    min-width: 18px;
    padding: 0;
    object-fit: contain;
}

/* Add/edit dealer: selected logo and picker cards stay compact. */
.selected-brand-preview {
    min-height: 38px;
    gap: 7px;
    padding: 5px 10px 5px 6px;
    border-radius: 10px;
    font-size: .8rem;
}
.selected-brand-preview img {
    width: 26px;
    height: 18px;
    padding: 0;
    border-radius: 4px;
}
.brand-option-card {
    min-height: 78px;
    gap: 5px;
    padding: 8px 6px;
    border-radius: 13px;
}
.brand-logo-frame {
    width: 48px;
    height: 32px;
    border-radius: 7px;
}
.brand-logo-frame img {
    width: 42px;
    height: 27px;
    padding: 1px;
}
.brand-option-name {
    font-size: .7rem;
}

/* Dealer preview in add/edit user. */
.dealer-select-preview {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}
.dealer-select-preview[hidden] {
    display: none !important;
}
.dealer-select-preview img {
    width: 22px;
    height: 16px;
    flex: 0 0 auto;
    object-fit: contain;
}
.dealer-select-preview > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.dealer-select-preview strong {
    font-size: .72rem;
    line-height: 1.15;
}
.dealer-select-preview span {
    overflow: hidden;
    color: var(--ptms-muted);
    font-size: .68rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .tire-choice-simple .panel-body {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 16px;
    }
    .tire-square-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    .tire-square-btn {
        width: 100%;
        min-width: 0;
        max-height: 150px;
        padding: 14px 8px;
        border-radius: 13px;
    }
    .tire-wheel-mark {
        width: 48px;
        height: 48px;
        border-width: 7px;
    }
    .tire-mode-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .tire-mode-btn {
        min-width: 0;
        min-height: 44px;
        padding: 9px 7px;
    }
    .dealer-list-table .dealer-brand-cell {
        min-width: 165px;
        gap: 5px;
    }
    .dealer-list-table .dealer-brand-logo {
        width: 16px;
        height: 12px;
        min-width: 16px;
    }
    .dealer-list-table .dealer-brand-logo img {
        width: 14px;
        height: 10px;
    }
    .user-table .dealer-scope-logo {
        width: 16px;
        height: 12px;
        min-width: 16px;
    }
    .brand-picker-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
    .brand-option-card {
        min-height: 72px;
    }
    .brand-logo-frame {
        width: 42px;
        height: 28px;
    }
    .brand-logo-frame img {
        width: 37px;
        height: 24px;
    }
}

@media (max-width: 420px) {
    .brand-picker-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

/* PTMS v4.10 — high-quality automatic photo compression */
.media-compress-note {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    margin-top: 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.35;
}
.media-compress-note .spinner-border { width: 11px; height: 11px; border-width: 1.5px; }
.media-compress-note.is-working { color: var(--primary, #f16722); }
.media-compress-note.is-success { color: #15803d; }
.media-compress-note.is-ready { color: #64748b; }
@media (max-width: 575.98px) {
    .media-compress-note { font-size: 9px; }
}

/* PTMS v4.11 — dealer billing & invoice */
.brand-table-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    min-width: 28px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #e6ebf2;
    border-radius: 6px;
    background: #fff;
}
.brand-table-logo img {
    display: block;
    width: 23px;
    height: 17px;
    object-fit: contain;
}
.stat-money-value {
    font-size: clamp(1.08rem, 2vw, 1.55rem) !important;
    line-height: 1.2;
    word-break: break-word;
}
.invoice-item-table { min-width: 690px; }
.invoice-item-table .invoice-price-input { min-width: 170px; max-width: 220px; margin-left: auto; }
.invoice-qty {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    background: #eaf2ff;
    color: #1d4ed8;
    font-weight: 850;
}
.invoice-total-card {
    width: min(100%, 520px);
    margin: 0 0 8px auto;
    padding: 18px;
    border: 1px solid #e4e9f0;
    border-radius: 18px;
    background: linear-gradient(180deg,#fff,#f8fafc);
}
.invoice-total-card > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 7px 0;
    color: #667085;
}
.invoice-total-card strong { color: #172033; }
.invoice-total-card .grand {
    margin-top: 6px;
    padding-top: 13px;
    border-top: 2px solid #172033;
    color: #172033;
    font-size: 1.03rem;
    font-weight: 850;
}
.invoice-total-card .grand strong { color: var(--primary,#f16722); font-size: 1.15rem; }
@media (max-width: 575.98px) {
    .brand-table-logo { width: 23px; height: 18px; min-width: 23px; border-radius: 5px; }
    .brand-table-logo img { width: 19px; height: 14px; }
    .invoice-total-card { padding: 14px; border-radius: 14px; }
    .invoice-total-card > div { font-size: .88rem; }
}

/* PTMS v4.12 — laporan harian berurutan */
.stats-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.daily-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #edf0f4;
}
.daily-report-stack {
    display: grid;
    gap: 16px;
}
.daily-day-card {
    overflow: hidden;
    padding: 0;
}
.daily-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #172033 0%, #24324b 100%);
    color: #fff;
}
.daily-day-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
}
.daily-day-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 11px;
    background: rgba(255,255,255,.09);
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}
.daily-day-heading h2 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}
.daily-day-heading p {
    margin: 3px 0 0;
    color: #cbd5e1;
    font-size: .76rem;
}
.daily-day-chips {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}
.daily-day-chips span {
    display: inline-flex;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #e2e8f0;
    font-size: .66rem;
    font-weight: 700;
}
.daily-day-chips strong { color: #fff; }
.daily-job-table { min-width: 850px; margin-bottom: 0; }
.daily-dealer-cell {
    display: flex;
    align-items: center;
    min-width: 180px;
    gap: 7px;
}
.daily-brand-logo {
    width: 23px;
    height: 18px;
    min-width: 23px;
}
.daily-brand-logo img { width: 19px; height: 14px; }
.daily-service-pill {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1d4ed8;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}
.daily-service-pill.service-tire_pre_check { background: #fff7ed; color: #c2410c; }
.daily-service-pill.service-tire_post_check { background: #ecfdf3; color: #15803d; }
.daily-service-pill.service-engine_cleaning { background: #fdf2f8; color: #be185d; }
.daily-service-pill.service-rematching { background: #f5f3ff; color: #6d28d9; }
.daily-service-pill.service-ac_service { background: #ecfeff; color: #0e7490; }
.daily-empty-day {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 72px;
    padding: 18px;
    color: #98a2b3;
    background: #fcfcfd;
    font-size: .82rem;
    font-weight: 700;
}
.daily-day-card.is-empty-day .daily-day-header {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%);
}
.daily-service-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 18px;
}
.daily-service-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e7ebf1;
    border-radius: 13px;
    background: #f8fafc;
}
.daily-service-total span {
    overflow: hidden;
    color: #667085;
    font-size: .72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.daily-service-total strong {
    color: #172033;
    font-size: 1rem;
}
@media (max-width: 1199.98px) {
    .stats-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .daily-service-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .page-header-actions { width: 100%; justify-content: stretch; }
    .page-header-actions > * { flex: 1 1 auto; }
    .page-header-actions .btn { min-height: 44px; }
    .daily-month-nav { flex-wrap: wrap; }
    .daily-month-nav strong { order: -1; width: 100%; text-align: center; }
    .daily-day-header { align-items: flex-start; flex-direction: column; padding: 14px; }
    .daily-day-heading { align-items: flex-start; }
    .daily-day-index { min-width: 62px; min-height: 34px; padding: 6px 8px; }
    .daily-day-heading h2 { font-size: .9rem; }
    .daily-day-chips { justify-content: flex-start; }
    .daily-service-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 14px 14px; }
}
@media (max-width: 575.98px) {
    .stats-grid-four { grid-template-columns: 1fr 1fr; }
    .daily-report-stats .stat-card { min-height: 124px; }
    .daily-report-stats .stat-value { font-size: 1.5rem; }
    .daily-day-heading { width: 100%; }
    .daily-day-index { font-size: .7rem; }
    .daily-day-heading p { font-size: .68rem; }
    .daily-service-summary { grid-template-columns: 1fr; }
    .daily-service-total { padding: 10px 11px; }
}

/* v4.13 — ringkasan pekerjaan & nominal per dealer */
.stat-value-money {
    font-size: clamp(1.05rem, 1.65vw, 1.72rem) !important;
    line-height: 1.2;
    word-break: break-word;
}
.dealer-financial-table {
    min-width: 980px;
    margin-bottom: 0;
}
.dealer-financial-table th {
    font-size: .68rem;
    line-height: 1.25;
    white-space: normal;
}
.dealer-financial-table td {
    white-space: nowrap;
}
.dealer-financial-table td:first-child,
.dealer-financial-table th:first-child {
    min-width: 220px;
    white-space: normal;
}
.dealer-financial-table tfoot th {
    background: #f1f5f9;
    border-top: 2px solid #d8dee8;
    color: #172033;
}
.dealer-financial-table-day {
    min-width: 900px;
}
@media (max-width: 767.98px) {
    .dealer-financial-table {
        min-width: 860px;
    }
    .dealer-financial-table th,
    .dealer-financial-table td {
        padding: .62rem .58rem;
    }
    .stat-value-money {
        font-size: 1rem !important;
    }
}


/* PTMS v4.14 — rekap total per dealer tanpa rincian harian */
.stats-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dealer-total-only-table { min-width: 860px; }
.dealer-total-only-table th:last-child,
.dealer-total-only-table td:last-child { min-width: 150px; }
@media (max-width: 991.98px) {
    .stats-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .stats-grid-three { grid-template-columns: 1fr; }
    .dealer-period-stats .stat-card { min-height: 112px; }
    .dealer-total-only-table { min-width: 790px; }
}