/* Existing portal component styles, preserved in their original order. */

/* =====================================================
   INSPECTION REQUEST — SIDEBAR INTERNAL STAFF NOTES
   ===================================================== */
.ap-inspection-detail-grid{grid-template-columns:minmax(0,1fr) 310px}
.ap-inspection-detail-side .ap-inspection-notes-card{width:100%;box-sizing:border-box;overflow:hidden}
.ap-inspection-detail-side .ap-inspection-notes-card .ap-inspection-detail-card-head{min-height:56px;padding:0 16px}
.ap-inspection-detail-side .ap-inspection-notes-card .ap-inspection-detail-card-head span{font-size:8px}
.ap-inspection-detail-side .ap-inspection-notes-card .ap-inspection-detail-card-head strong{font-size:9px;letter-spacing:.10em}
.ap-inspection-detail-side .ap-inspection-notes-card .ap-inspection-detail-card-head small{font-size:7px}
.ap-inspection-detail-side .ap-inspection-note-success{margin:12px 14px 0;padding:9px 10px;font-size:7px;line-height:1.5}
.ap-inspection-detail-side .ap-inspection-note-form{padding:14px;background:#F8FAFB}
.ap-inspection-detail-side .ap-inspection-note-form label{font-size:7px;margin-bottom:7px}
.ap-inspection-detail-side .ap-inspection-note-form textarea{min-height:130px;padding:11px 12px;font-size:11px;line-height:1.55}
.ap-inspection-detail-side .ap-inspection-note-form-foot{display:block;margin-top:10px}
.ap-inspection-detail-side .ap-inspection-note-form-foot>span{display:block;font-size:8px;line-height:1.55}
.ap-inspection-detail-side .ap-inspection-note-form-foot button{width:100%;min-height:40px;margin-top:10px;padding:0 12px;font-size:8px;background:#6FEFFF!important;border:1px solid #6FEFFF!important;color:#061126!important;font-weight:900;letter-spacing:.12em;box-shadow:0 8px 22px rgba(111,239,255,.12);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.ap-inspection-detail-side .ap-inspection-note-form-foot button:hover{background:#8af3ff!important;box-shadow:0 10px 28px rgba(111,239,255,.20);transform:translateY(-1px)}
.ap-inspection-detail-side .ap-inspection-notes-list{padding:2px 14px 8px;max-height:360px;overflow-y:auto}
.ap-inspection-detail-side .ap-inspection-note{gap:9px;padding:13px 0}
.ap-inspection-detail-side .ap-inspection-note-avatar{width:28px;height:28px;flex:0 0 28px;font-size:8px}
.ap-inspection-detail-side .ap-inspection-note-meta{display:block;margin-bottom:5px}
.ap-inspection-detail-side .ap-inspection-note-meta strong{display:block;font-size:9px}
.ap-inspection-detail-side .ap-inspection-note-meta span{display:block;margin-top:3px;font-size:7px;white-space:normal}
.ap-inspection-detail-side .ap-inspection-note-body p{font-size:10px;line-height:1.6}
.ap-inspection-detail-side .ap-inspection-notes-empty{padding:16px 14px 18px;font-size:9px;line-height:1.6}
@media(max-width:1050px){
  .ap-inspection-detail-grid{grid-template-columns:1fr}
  .ap-inspection-detail-side .ap-inspection-notes-card{grid-column:1/-1}
  .ap-inspection-detail-side .ap-inspection-note-form-foot{display:flex;align-items:center;justify-content:space-between;gap:15px}
  .ap-inspection-detail-side .ap-inspection-note-form-foot button{width:auto;margin-top:0;flex:0 0 auto}
}
@media(max-width:760px){
  .ap-inspection-detail-side .ap-inspection-note-form-foot{align-items:flex-start;flex-direction:column}
  .ap-inspection-detail-side .ap-inspection-note-form-foot button{width:100%}
}
/* =====================================================
   SETTINGS — PREMIUM LIGHT ADMIN UI
   ===================================================== */
.ap-settings-page{max-width:100%;}
.ap-settings-form{display:grid;gap:18px;}
.ap-settings-section{background:#fff;border:1px solid #d8e1e7;box-shadow:0 12px 30px rgba(18,35,49,.045);}
.ap-settings-section-head{padding:22px 24px;border-bottom:1px solid #dfe7ec;background:#f7fafc;}
.ap-settings-section-head>div{display:flex;align-items:flex-start;gap:16px;}
.ap-settings-section-head>div>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid #b9eaf2;background:#effcff;color:#0098b4;font-size:11px;font-weight:800;letter-spacing:.08em;flex:none;}
.ap-settings-section-head h3{margin:0;color:#172a3d;font-size:14px;letter-spacing:.16em;font-weight:800;}
.ap-settings-section-head p{margin:6px 0 0;color:#63788c;font-size:13px;line-height:1.55;}
.ap-settings-grid{padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;}
.ap-settings-field{min-width:0;}
.ap-settings-field.ap-settings-wide{grid-column:1/-1;}
.ap-settings-field>label:first-child{display:block;margin:0 0 8px;color:#587087;font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.16em;}
.ap-settings-field input[type=text],.ap-settings-field input[type=email],.ap-settings-field input[type=number],.ap-settings-field textarea,.ap-settings-field select{width:100%;box-sizing:border-box;border:1px solid #cbd8e0;background:#fff;color:#172a3d;padding:12px 13px;font-size:14px;outline:none;box-shadow:none;border-radius:0;}
.ap-settings-field textarea{resize:vertical;min-height:76px;line-height:1.55;}
.ap-settings-field input:focus,.ap-settings-field textarea:focus,.ap-settings-field select:focus{border-color:#61d9eb;box-shadow:0 0 0 3px rgba(111,239,255,.12);}
.ap-settings-field small{display:block;margin-top:7px;color:#788b9b;font-size:11px;line-height:1.5;}
.ap-settings-check{display:flex;flex-direction:column;justify-content:flex-start;}
.ap-settings-toggle{min-height:43px;border:1px solid #cbd8e0;padding:10px 13px;display:flex;align-items:center;gap:10px;box-sizing:border-box;color:#344c62;font-size:13px;cursor:pointer;background:#fff;}
.ap-settings-toggle input,.ap-settings-notification input{accent-color:#18cfe7;}
.ap-settings-service-list{padding:0 24px 24px;}
.ap-settings-service-list>span{display:block;color:#587087;font-size:9px;font-weight:800;letter-spacing:.16em;margin-bottom:10px;}
.ap-settings-service-list>div{display:flex;flex-wrap:wrap;gap:8px;}
.ap-settings-service-list b{border:1px solid #cfe0e6;background:#f8fbfc;color:#264158;padding:8px 10px;font-size:11px;font-weight:700;}
.ap-settings-notification-grid{padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.ap-settings-notification{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:12px;border:1px solid #d5e0e6;padding:15px 16px;background:#fff;cursor:pointer;}
.ap-settings-notification:hover{border-color:#9edfea;background:#fbfeff;}
.ap-settings-notification span{display:flex;flex-direction:column;gap:4px;}
.ap-settings-notification strong{color:#1b3044;font-size:13px;}
.ap-settings-notification small{color:#718496;font-size:11px;line-height:1.45;}
.ap-settings-notification em{font-style:normal;color:#00a0bb;font-size:9px;font-weight:800;letter-spacing:.14em;}
.ap-settings-security-note,.ap-settings-system-note{margin:0 24px 24px;padding:13px 15px;border-left:3px solid #65deed;background:#f5fbfc;color:#5f7486;font-size:11px;line-height:1.6;display:flex;gap:8px;flex-wrap:wrap;}
.ap-settings-security-note strong{color:#173248;letter-spacing:.08em;text-transform:uppercase;font-size:9px;}
.ap-settings-security-note code{font-family:inherit;color:#008fa8;}
.ap-settings-system-note{justify-content:space-between;align-items:center;}
.ap-settings-system-note strong{color:#008fa8;font-size:10px;letter-spacing:.1em;}
.ap-settings-actions{display:flex;gap:10px;align-items:center;padding:4px 0 30px;}
.ap-settings-reset{cursor:pointer;}
@media(max-width:900px){.ap-settings-grid,.ap-settings-notification-grid{grid-template-columns:1fr}.ap-settings-field.ap-settings-wide{grid-column:auto}.ap-settings-section-head{padding:18px}.ap-settings-grid,.ap-settings-notification-grid{padding:18px}.ap-settings-service-list{padding:0 18px 18px}.ap-settings-security-note,.ap-settings-system-note{margin:0 18px 18px}}
@media(max-width:600px){.ap-settings-actions{flex-direction:column;align-items:stretch}.ap-settings-actions>*{width:100%;justify-content:center}.ap-settings-section-head>div{gap:11px}.ap-settings-section-head h3{font-size:12px}.ap-settings-section-head p{font-size:12px}}



/* =========================================================
   STAFF MANAGEMENT
   ========================================================= */

.ap-management {
    margin-top:40px;
}

.ap-management-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:28px;
}

.ap-management-kicker {
    color:#6FEFFF;
    font-size:9px;
    font-weight:700;
    letter-spacing:.18em;
    margin-bottom:9px;
}

.ap-management-title {
    margin:0;
    color:#f5f5f5;
    font-size:30px;
    font-weight:500;
}

.ap-management-description {
    margin:8px 0 0;
    color:#666;
    font-size:12px;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.ap-primary-button,
.ap-secondary-button,
.ap-danger-button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    padding:0 17px;
    border-radius:0;
    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
    text-decoration:none;
    cursor:pointer;
    transition:.2s ease;
}

.ap-primary-button {
    min-width:150px;
    border:1px solid #6FEFFF;
    background:#6FEFFF;
    color:#071012;
}

.ap-primary-button:hover {
    background:#fff;
    border-color:#fff;
}

.ap-secondary-button {
    border:1px solid #303030;
    background:#151515;
    color:#aaa;
}

.ap-secondary-button:hover {
    border-color:#6FEFFF;
    color:#6FEFFF;
}

.ap-danger-button {
    border:1px solid #3a2525;
    background:#171010;
    color:#d98a8a;
}

.ap-danger-button:hover {
    border-color:#e56b6b;
    color:#fff;
}


/* ---------------------------------------------------------
   REPORTS
   --------------------------------------------------------- */
.ap-reports-page{margin-top:40px;}
.ap-report-period{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;padding:18px;border:1px solid #242424;background:#0e0e0e;margin-bottom:22px;}
.ap-report-period-field{display:flex;flex-direction:column;gap:8px;}
.ap-report-period-field label{font-size:9px;font-weight:700;letter-spacing:.14em;color:#666;}
.ap-report-period-field input{height:48px;border:1px solid #303030;background:#151515;color:#eee;padding:0 14px;font:inherit;outline:none;}
.ap-report-period-field input:focus{border-color:#6FEFFF;}
.ap-report-period-actions{display:flex;align-items:flex-end;gap:8px;}
.ap-report-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #252525;background:#151515;margin-bottom:22px;}
.ap-report-card{min-height:135px;padding:22px 20px;border-right:1px solid #2b2b2b;display:flex;flex-direction:column;justify-content:space-between;}
.ap-report-card:last-child{border-right:0;}
.ap-report-card span{font-size:9px;letter-spacing:.16em;color:#6FEFFF;font-weight:700;}
.ap-report-card strong{font-size:27px;font-weight:500;color:#f4f4f4;line-height:1.1;}
.ap-report-card small{font-size:9px;letter-spacing:.13em;color:#666;}
.ap-report-secondary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#292929;border:1px solid #292929;margin-bottom:28px;}
.ap-report-secondary>div{background:#101010;padding:18px 20px;display:flex;flex-direction:column;gap:8px;}
.ap-report-secondary span{font-size:9px;letter-spacing:.13em;color:#666;}
.ap-report-secondary strong{font-size:20px;font-weight:500;color:#ddd;}
.ap-report-panels{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-bottom:28px;}
.ap-report-panel{border:1px solid #252525;background:#101010;}
.ap-report-panel-head{padding:18px 20px;border-bottom:1px solid #252525;display:flex;align-items:end;justify-content:space-between;gap:20px;}
.ap-report-panel-head h3{margin:0;color:#eee;font-size:15px;font-weight:500;}
.ap-report-panel-head span{font-size:8px;letter-spacing:.14em;color:#666;}
.ap-report-table{width:100%;border-collapse:collapse;}
.ap-report-table th{padding:12px 16px;text-align:left;font-size:8px;letter-spacing:.13em;color:#666;border-bottom:1px solid #252525;font-weight:700;}
.ap-report-table td{padding:13px 16px;color:#aaa;border-bottom:1px solid #1e1e1e;font-size:11px;}
.ap-report-table tr:last-child td{border-bottom:0;}
.ap-report-table td strong{color:#eee;font-weight:500;}
.ap-report-table .ap-report-number{text-align:right;white-space:nowrap;}
.ap-report-empty{padding:26px 20px;color:#666;font-size:11px;}
.ap-report-bars{padding:18px 20px 20px;}
.ap-report-bar-row{display:grid;grid-template-columns:70px 1fr 88px;align-items:center;gap:12px;margin:13px 0;}
.ap-report-bar-label{font-size:9px;color:#777;letter-spacing:.08em;white-space:nowrap;}
.ap-report-bar-track{height:8px;background:#202020;overflow:hidden;}
.ap-report-bar-fill{height:100%;background:#6FEFFF;min-width:2px;}
.ap-report-bar-value{text-align:right;font-size:10px;color:#ddd;}
.ap-report-note{margin-top:12px;color:#555;font-size:10px;line-height:1.6;}
@media(max-width:900px){
    .ap-report-grid{grid-template-columns:repeat(2,1fr);}
    .ap-report-card:nth-child(2){border-right:0;}
    .ap-report-card:nth-child(-n+2){border-bottom:1px solid #2b2b2b;}
    .ap-report-secondary{grid-template-columns:repeat(2,1fr);}
    .ap-report-panels{grid-template-columns:1fr;}
    .ap-report-period{grid-template-columns:1fr 1fr;}
    .ap-report-period-actions{grid-column:1/-1;}
}
@media(max-width:600px){
    .ap-report-grid{grid-template-columns:1fr;}
    .ap-report-card{border-right:0;border-bottom:1px solid #2b2b2b;min-height:110px;}
    .ap-report-card:last-child{border-bottom:0;}
    .ap-report-secondary{grid-template-columns:1fr;}
    .ap-report-period{grid-template-columns:1fr;}
    .ap-report-period-actions{grid-column:auto;}
    .ap-report-period-actions .ap-primary-button{width:100%;}
    .ap-report-table{min-width:560px;}
    .ap-report-panel{overflow:hidden;}
    .ap-report-panel .ap-report-table-wrap{overflow-x:auto;}
    .ap-report-bar-row{grid-template-columns:58px 1fr 78px;gap:8px;}
}


/* ---------------------------------------------------------
   STAFF TABLE
   --------------------------------------------------------- */

.ap-staff-table-wrap {
    overflow-x:auto;
    border:1px solid #292929;
    background:#121212;
}

.ap-staff-table {
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}

.ap-staff-table th {
    padding:15px 17px;
    border-bottom:1px solid #292929;
    color:#555;
    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
    text-align:left;
}

.ap-staff-table td {
    padding:18px 17px;
    border-bottom:1px solid #222;
    color:#aaa;
    font-size:11px;
    vertical-align:middle;
}

.ap-staff-table tr:last-child td {
    border-bottom:0;
}

.ap-staff-name {
    color:#f1f1f1;
    font-weight:600;
}

.ap-staff-email {
    margin-top:5px;
    color:#555;
    font-size:10px;
}

.ap-role {
    color:#6FEFFF;
    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.ap-status {
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#777;
    font-size:8px;
    font-weight:700;
    letter-spacing:.12em;
}

.ap-status span {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#555;
}

.ap-status.active {
    color:#6FEFFF;
}

.ap-status.active span {
    background:#6FEFFF;
    box-shadow:0 0 9px rgba(111,239,255,.7);
}

.ap-staff-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}


/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.ap-staff-form {
    max-width:760px;
    border:1px solid #292929;
    background:#121212;
    padding:30px;
}

.ap-form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 18px;
}

.ap-form-field {
    display:flex;
    flex-direction:column;
}

.ap-form-field.full {
    grid-column:1 / -1;
}

.ap-form-field label {
    margin-bottom:8px;
    color:#777;
    font-size:8px;
    font-weight:700;
    letter-spacing:.14em;
}

.ap-form-field input,
.ap-form-field select {
    width:100%;
    height:50px;
    padding:0 14px;
    border:1px solid #303030;
    border-radius:0;
    outline:none;
    background:#0d0d0d;
    color:#eee;
    font-size:12px;
    box-sizing:border-box;
}

.ap-form-field input:focus,
.ap-form-field select:focus {
    border-color:#6FEFFF;
}

.ap-form-note {
    margin-top:8px;
    color:#444;
    font-size:9px;
    line-height:1.6;
}

.ap-form-actions {
    display:flex;
    gap:10px;
    margin-top:28px;
}


/* ---------------------------------------------------------
   PERMISSION PREVIEW
   --------------------------------------------------------- */

.ap-permission-preview {
    margin-top:25px;
    padding-top:24px;
    border-top:1px solid #292929;
}

.ap-permission-preview-title {
    margin-bottom:15px;
    color:#777;
    font-size:8px;
    font-weight:700;
    letter-spacing:.15em;
}

.ap-permission-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.ap-permission-item {
    padding:10px 12px;
    border:1px solid #242424;
    background:#0e0e0e;
    color:#777;
    font-size:9px;
}

.ap-permission-item strong {
    color:#aaa;
    font-weight:600;
}


/* ---------------------------------------------------------
   EMPTY
   --------------------------------------------------------- */

.ap-empty {
    padding:60px 30px;
    border:1px solid #292929;
    color:#555;
    font-size:11px;
    text-align:center;
}



/* =========================================================
   APPOINTMENTS
   ========================================================= */

.ap-appointments {
    margin-top:40px;
}

.ap-appointment-stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:22px;
}

.ap-appointment-stat {
    min-height:105px;
    padding:20px;
    border:1px solid #292929;
    background:#121212;
    box-sizing:border-box;
}

.ap-appointment-stat span {
    display:block;
    color:#555;
    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
}

.ap-appointment-stat strong {
    display:block;
    margin-top:14px;
    color:#f5f5f5;
    font-size:30px;
    font-weight:500;
}

.ap-appointment-filters {
    display:grid;
    grid-template-columns:2fr 1.2fr 1.1fr 1fr auto;
    gap:10px;
    align-items:end;
    padding:18px;
    margin-bottom:22px;
    border:1px solid #292929;
    background:#121212;
}

.ap-filter-field {
    display:flex;
    flex-direction:column;
    min-width:0;
}

.ap-filter-field label {
    margin-bottom:8px;
    color:#666;
    font-size:8px;
    font-weight:700;
    letter-spacing:.14em;
}

.ap-filter-field input,
.ap-filter-field select,
.ap-appointment-status-form select,
.ap-detail-status-control select {
    width:100%;
    height:46px;
    padding:0 12px;
    border:1px solid #303030;
    border-radius:0;
    outline:none;
    background:#0d0d0d;
    color:#eee;
    font-size:11px;
    box-sizing:border-box;
}

.ap-filter-field input:focus,
.ap-filter-field select:focus,
.ap-appointment-status-form select:focus,
.ap-detail-status-control select:focus {
    border-color:#6FEFFF;
}

.ap-filter-actions {
    display:flex;
    gap:8px;
}

.ap-filter-actions .ap-primary-button,
.ap-filter-actions .ap-secondary-button {
    min-height:46px;
}

.ap-appointment-list {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.ap-appointment-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    border:1px solid #292929;
    background:#121212;
}

.ap-appointment-main {
    min-width:0;
    padding:22px;
}

.ap-appointment-top {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding-bottom:18px;
    border-bottom:1px solid #222;
}

.ap-appointment-booking {
    color:#6FEFFF;
    font-size:10px;
    font-weight:700;
    letter-spacing:.13em;
}

.ap-appointment-service {
    margin-top:7px;
    color:#f2f2f2;
    font-size:17px;
    font-weight:500;
}

.ap-appointment-status {
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding-top:3px;
    color:#777;
    font-size:8px;
    font-weight:700;
    letter-spacing:.13em;
}

.ap-appointment-status span {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#555;
}

.ap-status-pending {
    color:#d8b76a;
}

.ap-status-pending span {
    background:#d8b76a;
}

.ap-status-confirmed {
    color:#6FEFFF;
}

.ap-status-confirmed span {
    background:#6FEFFF;
    box-shadow:0 0 9px rgba(111,239,255,.65);
}

.ap-status-in-progress {
    color:#9bd8df;
}

.ap-status-in-progress span {
    background:#9bd8df;
    box-shadow:0 0 9px rgba(155,216,223,.45);
}

.ap-status-completed {
    color:#8fbe91;
}

.ap-status-completed span {
    background:#8fbe91;
}

.ap-status-cancelled {
    color:#b87979;
}

.ap-status-cancelled span {
    background:#b87979;
}

.ap-appointment-grid {
    display:grid;
    grid-template-columns:1.2fr 1.2fr 1fr;
    gap:18px;
    padding-top:18px;
}

.ap-appointment-grid > div {
    min-width:0;
}

.ap-appointment-grid span {
    display:block;
    margin-bottom:7px;
    color:#555;
    font-size:8px;
    font-weight:700;
    letter-spacing:.14em;
}

.ap-appointment-grid strong {
    display:block;
    color:#ddd;
    font-size:11px;
    font-weight:600;
    overflow-wrap:anywhere;
}

.ap-appointment-grid small {
    display:block;
    margin-top:5px;
    color:#666;
    font-size:9px;
    overflow-wrap:anywhere;
}

.ap-appointment-message {
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #222;
    color:#777;
    font-size:10px;
    line-height:1.7;
}

.ap-appointment-actions {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    min-width:185px;
    padding:18px;
    border-left:1px solid #292929;
    background:#101010;
    box-sizing:border-box;
}

.ap-appointment-status-form {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.ap-appointment-status-form select {
    min-width:0;
}

.ap-appointment-actions > .ap-secondary-button {
    justify-content:center;
}

/* =========================================================
   APPOINTMENT DETAIL
   ========================================================= */

.ap-appointment-detail {
    margin-top:40px;
}

.ap-detail-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;
    padding:25px;
    margin-bottom:12px;
    border:1px solid #292929;
    background:#121212;
}

.ap-detail-label {
    color:#555;
    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
}

.ap-detail-booking {
    margin-top:9px;
    color:#6FEFFF;
    font-size:20px;
    font-weight:600;
    letter-spacing:.06em;
}

.ap-detail-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.ap-detail-card {
    min-width:0;
    padding:24px;
    border:1px solid #292929;
    background:#121212;
    box-sizing:border-box;
}

.ap-detail-card-kicker {
    margin-bottom:12px;
    color:#6FEFFF;
    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
}

.ap-detail-card h3 {
    margin:0 0 20px;
    color:#f2f2f2;
    font-size:18px;
    font-weight:500;
    overflow-wrap:anywhere;
}

.ap-detail-line {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    padding:12px 0;
    border-top:1px solid #222;
    color:#555;
    font-size:8px;
    font-weight:700;
    letter-spacing:.12em;
}

.ap-detail-line strong {
    max-width:65%;
    color:#aaa;
    font-size:10px;
    font-weight:500;
    letter-spacing:0;
    text-align:right;
    overflow-wrap:anywhere;
}

.ap-detail-message {
    margin:0;
    color:#888;
    font-size:11px;
    line-height:1.8;
    overflow-wrap:anywhere;
}

.ap-detail-status-control {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-top:12px;
    padding:20px 24px;
    border:1px solid #292929;
    background:#101010;
}

.ap-detail-status-control .ap-detail-card-kicker {
    margin-bottom:6px;
}

.ap-detail-status-control p {
    margin:0;
    color:#555;
    font-size:10px;
}

.ap-detail-status-control form {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:330px;
}

.ap-detail-status-control form select {
    flex:1;
}

@media(max-width:900px) {

    .ap-appointment-stats {
        grid-template-columns:1fr 1fr;
    }

    .ap-appointment-filters {
        grid-template-columns:1fr 1fr;
    }

    .ap-filter-field:first-child {
        grid-column:1 / -1;
    }

    .ap-filter-actions {
        grid-column:1 / -1;
    }

    .ap-appointment-card {
        grid-template-columns:1fr;
    }

    .ap-appointment-actions {
        min-width:0;
        border-left:0;
        border-top:1px solid #292929;
        display:grid;
        grid-template-columns:1fr 120px;
    }

    .ap-appointment-status-form {
        display:grid;
        grid-template-columns:1fr 120px;
    }

    .ap-detail-status-control {
        align-items:flex-start;
        flex-direction:column;
    }

    .ap-detail-status-control form {
        width:100%;
        min-width:0;
    }
}

@media(max-width:700px) {

    .ap-appointment-stats {
        grid-template-columns:1fr 1fr;
    }

    .ap-appointment-filters {
        grid-template-columns:1fr;
    }

    .ap-filter-field:first-child,
    .ap-filter-actions {
        grid-column:auto;
    }

    .ap-appointment-top {
        flex-direction:column;
    }

    .ap-appointment-grid {
        grid-template-columns:1fr;
    }

    .ap-appointment-actions,
    .ap-appointment-status-form {
        grid-template-columns:1fr;
    }

    .ap-detail-grid {
        grid-template-columns:1fr;
    }

    .ap-detail-header {
        align-items:flex-start;
        flex-direction:column;
    }

    .ap-detail-status-control form {
        align-items:stretch;
        flex-direction:column;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:700px) {

    .ap-management-header {
        align-items:flex-start;
        flex-direction:column;
    }

    .ap-form-grid {
        grid-template-columns:1fr;
    }

    .ap-form-field.full {
        grid-column:auto;
    }

    .ap-staff-form {
        padding:20px;
    }

    .ap-permission-list {
        grid-template-columns:1fr;
    }

}




/* =========================================================
   MOTORCYCLE MANAGEMENT
   ========================================================= */
.ap-motorcycle-search{display:flex;align-items:flex-end;gap:12px;padding:18px;border:1px solid #1c1c1c;background:#0b0b0b;margin-bottom:16px}.ap-motorcycle-search-field{flex:1}.ap-motorcycle-search-field label{display:block;color:#666;font-size:9px;letter-spacing:.16em;font-weight:700;margin-bottom:8px}.ap-motorcycle-search input{width:100%;box-sizing:border-box;min-height:42px}.ap-motorcycle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ap-motorcycle-card{border:1px solid #1c1c1c;background:#090909;min-width:0;display:flex;flex-direction:column}.ap-motorcycle-card-media{height:190px;background:#070707;border-bottom:1px solid #1c1c1c;overflow:hidden}.ap-motorcycle-card-media img{width:100%;height:100%;object-fit:cover;display:block}.ap-motorcycle-photo-placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:#333;font-size:9px;letter-spacing:.2em}.ap-motorcycle-card-body{padding:18px}.ap-motorcycle-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.ap-motorcycle-card-title{color:#f1f1f1;font-size:18px;font-weight:500}.ap-motorcycle-registration{color:#6FEFFF;font-size:9px;letter-spacing:.15em;margin-top:7px}.ap-motorcycle-id{color:#444;font-size:9px;letter-spacing:.1em}.ap-motorcycle-customer{margin-top:18px;padding-top:14px;border-top:1px solid #171717;color:#555;font-size:8px;letter-spacing:.14em}.ap-motorcycle-customer strong{display:block;color:#bbb;font-size:11px;letter-spacing:0;margin-top:7px;font-weight:500}.ap-motorcycle-customer small{display:block;color:#555;font-size:9px;letter-spacing:0;margin-top:4px}.ap-motorcycle-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:15px;background:#171717;border:1px solid #171717}.ap-motorcycle-meta span{padding:10px;background:#0a0a0a;color:#666;font-size:8px;letter-spacing:.1em}.ap-motorcycle-card-actions{display:flex;gap:8px;margin-top:15px}.ap-motorcycle-card-actions .ap-primary-button{flex:1}.ap-motorcycle-card-actions .ap-secondary-button{min-width:65px}.ap-motorcycle-profile-head{display:grid;grid-template-columns:180px 1fr auto;gap:24px;align-items:center;padding:20px;border:1px solid #1c1c1c;background:#0b0b0b}.ap-motorcycle-profile-photo{width:180px;height:140px;border:1px solid #222;background:#070707;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#333;font-size:8px;letter-spacing:.15em}.ap-motorcycle-profile-photo img{width:100%;height:100%;object-fit:cover}.ap-motorcycle-profile-main h3{margin:0;color:#f4f4f4;font-size:25px;font-weight:500}.ap-motorcycle-profile-main>p{margin:7px 0 0;color:#6FEFFF;font-size:10px;letter-spacing:.15em}.ap-motorcycle-owner-line{margin-top:18px;color:#555;font-size:8px;letter-spacing:.15em}.ap-motorcycle-owner-line a{color:#aaa;text-decoration:none;margin-left:7px;font-size:11px;letter-spacing:0}.ap-motorcycle-profile-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px}.ap-motorcycle-profile-actions form{margin:0}.ap-motorcycle-profile-actions .ap-danger-button{width:100%}.ap-motorcycle-specs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border:1px solid #1c1c1c;background:#090909}.ap-motorcycle-specs>div{padding:17px;border-right:1px solid #1b1b1b}.ap-motorcycle-specs>div:last-child{border-right:0}.ap-motorcycle-specs span{display:block;color:#444;font-size:8px;letter-spacing:.13em}.ap-motorcycle-specs strong{display:block;color:#ddd;font-size:12px;font-weight:400;margin-top:8px}.ap-motorcycle-owner-panel{padding:18px}.ap-motorcycle-owner-panel strong{display:block;color:#ddd;font-size:14px;font-weight:500}.ap-motorcycle-owner-panel span{display:block;color:#666;font-size:10px;margin-top:6px}.ap-motorcycle-owner-panel .ap-secondary-button{margin-top:16px}.ap-motorcycle-empty{grid-column:1/-1}.ap-form-field-wide{grid-column:1/-1}.ap-current-photo-note{margin-top:9px;color:#555;font-size:9px}.ap-motorcycle-form-page .ap-form-note{line-height:1.6}

/* =========================================================
   CUSTOMER MANAGEMENT
   ========================================================= */
.ap-customer-search{display:flex;align-items:flex-end;gap:12px;padding:18px;border:1px solid #1c1c1c;background:#0b0b0b;margin-bottom:16px}.ap-customer-search-field{flex:1}.ap-customer-search-field label{display:block;color:#666;font-size:9px;letter-spacing:.16em;font-weight:700;margin-bottom:8px}.ap-customer-search input{width:100%;box-sizing:border-box;min-height:42px}.ap-customer-count{color:#555;font-size:9px;letter-spacing:.15em;font-weight:700;margin:20px 0 10px}.ap-customer-table-wrap{overflow-x:auto;border:1px solid #1c1c1c;background:#090909}.ap-customer-table{width:100%;min-width:880px;border-collapse:collapse}.ap-customer-table th{padding:14px 16px;text-align:left;color:#555;font-size:8px;letter-spacing:.15em;border-bottom:1px solid #1b1b1b}.ap-customer-table td{padding:16px;border-bottom:1px solid #151515;color:#aaa;font-size:12px;vertical-align:middle}.ap-customer-table tr:last-child td{border-bottom:0}.ap-customer-name{color:#f2f2f2;font-size:13px;font-weight:600}.ap-customer-meta,.ap-customer-phone,.ap-customer-table td small{display:block;color:#555;font-size:9px;margin-top:4px}.ap-customer-email{color:#aaa;font-size:11px}.ap-customer-profile-head{display:flex;align-items:center;gap:18px;padding:22px;border:1px solid #1c1c1c;background:#0b0b0b}.ap-customer-avatar{width:58px;height:58px;display:flex;align-items:center;justify-content:center;flex:0 0 58px;border:1px solid #2a2a2a;color:#6FEFFF;font-size:20px;font-weight:500}.ap-customer-profile-main{flex:1}.ap-customer-profile-main h3{margin:0;color:#f4f4f4;font-size:20px;font-weight:500}.ap-customer-profile-main p{margin:5px 0 0;color:#777;font-size:11px}.ap-customer-status{display:inline-flex;align-items:center;gap:7px;margin-top:9px;color:#6FEFFF;font-size:8px;font-weight:700;letter-spacing:.13em}.ap-customer-status span{width:6px;height:6px;border-radius:50%;background:#6FEFFF}.ap-customer-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border:1px solid #1c1c1c;background:#090909}.ap-customer-stats>div{padding:18px;border-right:1px solid #1b1b1b}.ap-customer-stats>div:last-child{border-right:0}.ap-customer-stats span{display:block;color:#444;font-size:8px;letter-spacing:.12em}.ap-customer-stats strong{display:block;color:#f3f3f3;font-size:25px;font-weight:400;margin-top:8px}.ap-customer-stats small{display:block;color:#666;font-size:8px;letter-spacing:.13em;margin-top:4px}.ap-customer-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.ap-customer-panel{border:1px solid #1c1c1c;background:#090909;min-width:0}.ap-customer-panel-wide{grid-column:1/-1}.ap-customer-panel-head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid #1a1a1a}.ap-customer-panel-head h3{margin:0;color:#777;font-size:9px;letter-spacing:.16em}.ap-customer-panel-head span{color:#6FEFFF;font-size:8px;letter-spacing:.12em}.ap-customer-bike-row,.ap-customer-record-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 17px;border-bottom:1px solid #151515}.ap-customer-bike-row:last-child,.ap-customer-record-row:last-child{border-bottom:0}.ap-customer-bike-row img,.ap-customer-bike-placeholder{width:58px;height:42px;object-fit:cover;flex:0 0 58px;border:1px solid #222}.ap-customer-bike-placeholder{display:flex;align-items:center;justify-content:center;color:#444;font-size:7px;letter-spacing:.12em}.ap-customer-bike-row>div:last-child{flex:1}.ap-customer-bike-row strong,.ap-customer-record-row strong{color:#ddd;font-size:11px;font-weight:500}.ap-customer-bike-row p,.ap-customer-record-row p{margin:4px 0 0;color:#555;font-size:9px}.ap-customer-bike-row small,.ap-customer-record-row small{display:block;margin-top:4px;color:#666;font-size:8px}.ap-customer-mini-status{display:inline-flex;padding:6px 8px;border:1px solid #222;color:#777;font-size:7px;letter-spacing:.1em;white-space:nowrap}.ap-mini-completed,.ap-mini-in-progress{color:#6FEFFF;border-color:rgba(111,239,255,.22)}.ap-mini-confirmed{color:#bdbdbd}.ap-mini-pending{color:#999}.ap-mini-cancelled{color:#555}.ap-customer-service-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.ap-customer-service-right>strong{color:#ddd;font-size:11px;font-weight:500}.ap-customer-account-info{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:14px;border:1px solid #1c1c1c;background:#1c1c1c}.ap-customer-account-info>div{padding:15px;background:#090909}.ap-customer-account-info span{display:block;color:#555;font-size:8px;letter-spacing:.13em;margin-bottom:7px}.ap-customer-account-info strong{color:#aaa;font-size:10px;font-weight:400;word-break:break-word}
@media(max-width:800px){.ap-customer-search{align-items:stretch;flex-direction:column}.ap-customer-stats{grid-template-columns:repeat(2,1fr)}.ap-customer-stats>div:nth-child(2){border-right:0}.ap-customer-stats>div:nth-child(-n+2){border-bottom:1px solid #1b1b1b}.ap-customer-detail-grid{grid-template-columns:1fr}.ap-customer-panel-wide{grid-column:auto}.ap-customer-account-info{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ap-customer-profile-head{align-items:flex-start;flex-wrap:wrap}.ap-customer-profile-head .ap-secondary-button{width:100%;justify-content:center}.ap-customer-account-info{grid-template-columns:1fr}}



/* =========================================================
   SERVICE RECORDS — PREMIUM LIGHT / READABILITY FIX
   List page only. Keep all backend/functionality unchanged.
   ========================================================= */
.ap-service-records-page{
    background:transparent!important;
    color:#172532!important;
}
.ap-service-records-page .ap-management-title,
.ap-service-records-page .ap-management-description,
.ap-service-records-page h1,
.ap-service-records-page h2,
.ap-service-records-page h3,
.ap-service-records-page h4,
.ap-service-records-page p,
.ap-service-records-page span,
.ap-service-records-page small,
.ap-service-records-page strong,
.ap-service-records-page label{
    /* individual components below set the precise tones */
}

.ap-service-records-page .ap-service-stats{
    background:#d9e3e8!important;
    border:1px solid #d1dde2!important;
    box-shadow:0 10px 28px rgba(18,42,58,.055)!important;
}
.ap-service-records-page .ap-service-stats>div{
    background:#fff!important;
    color:#172532!important;
    min-height:105px;
}
.ap-service-records-page .ap-service-stats span{
    color:#087f95!important;
}
.ap-service-records-page .ap-service-stats strong{
    color:#172532!important;
    font-size:26px!important;
}
.ap-service-records-page .ap-service-stats small{
    color:#667783!important;
}

.ap-service-records-page .ap-service-search{
    background:#fff!important;
    border:1px solid #d5e0e5!important;
    padding:18px!important;
    box-shadow:0 10px 28px rgba(18,42,58,.045)!important;
}
.ap-service-records-page .ap-service-search-field label{
    color:#536978!important;
    font-weight:700!important;
}
.ap-service-records-page .ap-service-search input,
.ap-service-records-page .ap-service-search select{
    background:#fff!important;
    color:#1d2d3a!important;
    border:1px solid #cbd8de!important;
}
.ap-service-records-page .ap-service-search input::placeholder{
    color:#7b8b95!important;
    opacity:1!important;
}

.ap-service-records-page .ap-service-record-list{
    background:transparent!important;
}
.ap-service-records-page .ap-service-record-card{
    background:#fff!important;
    border:1px solid #d5e0e5!important;
    color:#172532!important;
    box-shadow:0 12px 30px rgba(18,42,58,.055)!important;
}
.ap-service-records-page .ap-service-record-kicker{
    color:#087f95!important;
    font-weight:700!important;
}
.ap-service-records-page .ap-service-record-card h3{
    color:#172532!important;
    font-weight:700!important;
}
.ap-service-records-page .ap-service-record-card p{
    color:#536674!important;
}
.ap-service-records-page .ap-service-record-meta{
    color:#667783!important;
}
.ap-service-records-page .ap-service-record-side small{
    color:#647783!important;
}
.ap-service-records-page .ap-service-record-side .ap-primary-button{
    color:#06242a!important;
}

/* Result count above the history cards */
.ap-service-records-page .ap-customer-count,
.ap-service-records-page .ap-service-count,
.ap-service-records-page .ap-record-count{
    color:#536978!important;
}

/* Empty state */
.ap-service-records-page .ap-empty{
    background:#fff!important;
    border:1px solid #d5e0e5!important;
    color:#536674!important;
}

@media(max-width:800px){
    .ap-service-records-page .ap-service-record-card{
        box-shadow:0 8px 22px rgba(18,42,58,.045)!important;
    }
}

/* SERVICE RECORDS */
.ap-service-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.10);margin:24px 0 20px;border:1px solid rgba(255,255,255,.10)}
.ap-service-stats>div{background:#0b0d0f;padding:22px 20px;min-height:105px}.ap-service-stats span{display:block;color:#6FEFFF;font-size:10px;letter-spacing:.18em;margin-bottom:8px}.ap-service-stats strong{display:block;font-size:24px;line-height:1.1}.ap-service-stats small{display:block;color:rgba(255,255,255,.48);font-size:9px;letter-spacing:.16em;margin-top:8px}
.ap-service-search{display:grid;grid-template-columns:minmax(0,1fr) 220px auto auto;gap:10px;align-items:end;margin-bottom:16px}.ap-service-search-field label{display:block;font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.5);margin:0 0 7px}.ap-service-search input,.ap-service-search select{width:100%;box-sizing:border-box}.ap-service-status-field{min-width:0}
.ap-service-record-list{display:grid;gap:10px}.ap-service-record-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.025);padding:22px}.ap-service-record-kicker{font-size:9px;letter-spacing:.16em;color:#6FEFFF;margin-bottom:8px}.ap-service-record-card h3{margin:0 0 7px;font-size:20px}.ap-service-record-card p{margin:0;color:rgba(255,255,255,.62)}.ap-service-record-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;color:rgba(255,255,255,.48);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.ap-service-record-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:180px}.ap-service-record-side small{color:rgba(255,255,255,.48);font-size:9px;letter-spacing:.12em;text-transform:uppercase}.ap-service-record-side>div{display:flex;gap:7px;margin-top:auto}.ap-service-record-side .ap-primary-button,.ap-service-record-side .ap-secondary-button{white-space:nowrap}
.ap-service-detail-hero{display:flex;justify-content:space-between;gap:20px;padding:28px;border:1px solid rgba(111,239,255,.18);background:linear-gradient(135deg,rgba(111,239,255,.07),rgba(255,255,255,.02));margin-bottom:12px}.ap-service-detail-hero>div:first-child>span{font-size:9px;letter-spacing:.16em;color:#6FEFFF}.ap-service-detail-hero h3{font-size:30px;margin:8px 0}.ap-service-detail-hero p{margin:0;color:rgba(255,255,255,.6)}.ap-service-detail-actions{display:flex;align-items:center;gap:8px}.ap-service-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ap-detail-lines{display:grid;grid-template-columns:1fr 1fr}.ap-detail-lines>div{padding:13px 0;border-top:1px solid rgba(255,255,255,.07)}.ap-detail-lines small{display:block;color:rgba(255,255,255,.42);font-size:8px;letter-spacing:.14em;margin-bottom:5px}.ap-detail-lines strong{font-size:12px}.ap-detail-lines a{color:#6FEFFF;text-decoration:none}.ap-service-detail-text{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.025);padding:22px;margin-top:10px}.ap-service-detail-text .ap-customer-panel-head{margin-bottom:15px}.ap-service-detail-text>div:last-child{color:rgba(255,255,255,.68);line-height:1.7;font-size:13px}.ap-muted{color:rgba(255,255,255,.35)}.ap-service-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.ap-service-photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.ap-service-photo-gallery a{display:block;aspect-ratio:4/3;overflow:hidden;background:#08090a}.ap-service-photo-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.ap-service-photo-gallery a:hover img{transform:scale(1.035)}.ap-optional{color:rgba(255,255,255,.35);font-size:8px;letter-spacing:.08em}
@media(max-width:800px){.ap-service-stats{grid-template-columns:1fr 1fr}.ap-service-search{grid-template-columns:1fr 1fr}.ap-service-search-field:first-child{grid-column:1/-1}.ap-service-record-card{grid-template-columns:1fr}.ap-service-record-side{align-items:flex-start;min-width:0}.ap-service-detail-hero{flex-direction:column}.ap-service-detail-actions{flex-wrap:wrap}.ap-service-detail-grid,.ap-service-photo-grid{grid-template-columns:1fr}.ap-detail-lines{grid-template-columns:1fr}.ap-service-photo-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ap-service-stats{grid-template-columns:1fr}.ap-service-search{grid-template-columns:1fr}.ap-service-search-field:first-child{grid-column:auto}.ap-service-record-card{padding:16px}.ap-service-detail-hero{padding:20px}.ap-service-detail-hero h3{font-size:24px}}

.ap-invoice-header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ap-invoice-sheet{background:#fff;color:#101419;border:1px solid rgba(16,20,25,.12);padding:42px;margin-top:25px;box-shadow:0 18px 60px rgba(0,0,0,.08)}.ap-invoice-brand{display:flex;justify-content:space-between;gap:30px;padding-bottom:30px;border-bottom:1px solid #d9dde1}.ap-invoice-eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:#111}.ap-invoice-brand h3{font-size:30px;letter-spacing:.08em;margin:8px 0}.ap-invoice-brand p,.ap-invoice-parties p{margin:0;color:#606871;font-size:13px;line-height:1.7}.ap-invoice-number{text-align:right}.ap-invoice-number span,.ap-invoice-parties span,.ap-invoice-totals span,.ap-invoice-notes span{display:block;font-size:10px;letter-spacing:.14em;font-weight:800;color:#68717a}.ap-invoice-number strong{display:block;font-size:20px;margin:7px 0}.ap-invoice-number small{color:#68717a}.ap-invoice-parties{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:30px 0}.ap-invoice-parties strong{display:block;font-size:15px;margin:8px 0}.ap-invoice-table{border:1px solid #d9dde1}.ap-invoice-table-head,.ap-invoice-table-row{display:grid;grid-template-columns:1fr 180px;gap:20px;padding:16px 18px}.ap-invoice-table-head{background:#f5f6f7;font-size:10px;letter-spacing:.14em;font-weight:800}.ap-invoice-table-row{align-items:start}.ap-invoice-table-row strong:last-child{text-align:right}.ap-invoice-table-row p{font-size:12px;line-height:1.6;color:#68717a;margin:6px 0 0}.ap-invoice-summary{display:grid;grid-template-columns:1fr 330px;gap:40px;padding-top:30px}.ap-invoice-notes p{font-size:12px;color:#68717a;margin-top:15px}.ap-invoice-totals>div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid #e1e4e7}.ap-invoice-totals strong{font-size:14px}.ap-invoice-totals .due{padding-top:16px;border-bottom:0}.ap-invoice-totals .due strong{font-size:20px}.ap-payment-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:25px}.ap-payment-row{align-items:center}.ap-payment-row form{margin:0}.ap-danger-button{border:1px solid rgba(255,80,80,.3);background:transparent;color:#d95353;padding:9px 12px;font-size:10px;letter-spacing:.1em;font-weight:800;cursor:pointer}.ap-payment-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);margin:25px 0}.ap-payment-stats>div{background:rgba(255,255,255,.03);padding:22px}.ap-payment-stats span{display:block;font-size:10px;color:#6fefff;letter-spacing:.12em}.ap-payment-stats strong{display:block;font-size:24px;margin:7px 0}.ap-payment-stats small{font-size:10px;letter-spacing:.12em;color:#8d98a1}.ap-payment-list{display:grid;gap:1px;background:rgba(255,255,255,.12);margin-top:10px}.ap-payment-list-row{display:flex;justify-content:space-between;gap:25px;padding:22px;background:rgba(255,255,255,.025);align-items:center}.ap-payment-list-row h3{margin:5px 0;font-size:20px}.ap-payment-list-row p{margin:0 0 5px;color:#c7cdd2}.ap-payment-list-row small{color:#7f8991}.ap-payment-list-row>div:last-child{flex-shrink:0}
.ap-billing-row{display:grid;grid-template-columns:minmax(260px,1.15fr) minmax(300px,1fr) auto;gap:28px;align-items:center}.ap-billing-main h3{margin:5px 0;font-size:20px}.ap-billing-main p{margin:0 0 5px;color:#c7cdd2}.ap-billing-main small{color:#7f8991}.ap-billing-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08)}.ap-billing-amounts>div{padding:13px 14px;background:rgba(255,255,255,.025)}.ap-billing-amounts span{display:block;font-size:9px;letter-spacing:.12em;color:#7f8991}.ap-billing-amounts strong{display:block;margin-top:5px;font-size:15px}.ap-billing-due strong{color:#6fefff}.ap-billing-status{display:flex;align-items:center;justify-content:flex-end;gap:12px}.ap-billing-badge{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.14);font-size:9px;letter-spacing:.12em;font-weight:800;white-space:nowrap}.ap-billing-paid{color:#6fefff;border-color:rgba(111,239,255,.3)}.ap-billing-partial{color:#fff;border-color:rgba(255,255,255,.25)}.ap-billing-pending{color:#aeb7bd;border-color:rgba(255,255,255,.16)}

@media(max-width:1050px){.ap-billing-row{grid-template-columns:1fr}.ap-billing-status{justify-content:flex-start}.ap-billing-amounts{max-width:650px}}@media(max-width:800px){.ap-billing-amounts{grid-template-columns:1fr 1fr 1fr}.ap-invoice-sheet{padding:24px}.ap-invoice-brand,.ap-payment-list-row{display:block}.ap-invoice-number{text-align:left;margin-top:20px}.ap-invoice-parties,.ap-invoice-summary,.ap-payment-layout{grid-template-columns:1fr}.ap-invoice-table-head,.ap-invoice-table-row{grid-template-columns:1fr 100px}.ap-payment-stats{grid-template-columns:repeat(2,1fr)}.ap-payment-list-row>div:last-child{margin-top:15px}.ap-invoice-header-actions{justify-content:flex-start}}
@page{size:A4 portrait;margin:12mm}
@media print{
    html,body{background:#fff!important;margin:0!important;padding:0!important}
    body.ap-print-invoice-page *{visibility:hidden!important}
    body.ap-print-invoice-page .ap-invoice-page,
    body.ap-print-invoice-page .ap-invoice-page *{visibility:visible!important}
    body.ap-print-invoice-page .ap-dashboard-header,
    body.ap-print-invoice-page .ap-dashboard-content,
    body.ap-print-invoice-page .ap-dashboard-footer,
    body.ap-print-invoice-page .ap-management-header,
    body.ap-print-invoice-page .ap-payment-layout,
    body.ap-print-invoice-page .ap-invoice-header-actions{display:none!important}
    body.ap-print-invoice-page .ap-dashboard{display:block!important;min-height:0!important;padding:0!important;margin:0!important}
    body.ap-print-invoice-page .ap-invoice-page{display:block!important;position:static!important;width:100%!important;margin:0!important;padding:0!important;background:#fff!important}
    body.ap-print-invoice-page .ap-invoice-sheet{display:block!important;margin:0!important;border:0!important;box-shadow:none!important;padding:0!important;width:100%!important;max-width:none!important}
    body.ap-print-invoice-page .ap-invoice-brand{padding-bottom:18px!important}
    body.ap-print-invoice-page .ap-invoice-parties{padding:18px 0!important;gap:18px!important}
    body.ap-print-invoice-page .ap-invoice-table-row{padding:12px 14px!important}
    body.ap-print-invoice-page .ap-invoice-summary{padding-top:18px!important}
    body.ap-print-invoice-page .ap-invoice-brand h3{font-size:24px!important}
    body.ap-print-invoice-page .ap-invoice-sheet,
    body.ap-print-invoice-page .ap-invoice-brand,
    body.ap-print-invoice-page .ap-invoice-parties,
    body.ap-print-invoice-page .ap-invoice-table,
    body.ap-print-invoice-page .ap-invoice-summary{break-inside:avoid!important;page-break-inside:avoid!important}
}

/* PRODUCT ORDERS */
.ap-order-filter-field{min-width:190px}.ap-order-filter-field select{width:100%;box-sizing:border-box;min-height:42px}.ap-order-filter-form{align-items:flex-end}.ap-order-list{display:grid;gap:12px}.ap-order-row{display:grid;grid-template-columns:minmax(0,1fr) 170px 210px;gap:24px;align-items:center;border:1px solid rgba(255,255,255,.10);background:#151515;padding:24px}.ap-order-main h3{margin:7px 0 6px;font-size:20px}.ap-order-main p,.ap-order-main small{margin:0;color:#8d8d8d;display:block;line-height:1.6}.ap-order-amount span,.ap-order-detail-fields span{display:block;font-size:10px;letter-spacing:.18em;color:#777;font-weight:700}.ap-order-amount strong{display:block;font-size:20px;margin-top:6px}.ap-order-status{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;flex-direction:column}.ap-order-status-badge{display:inline-flex;padding:8px 11px;border:1px solid rgba(111,239,255,.25);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6fefff}.ap-order-status-completed{color:#7dffb2;border-color:rgba(125,255,178,.25)}.ap-order-status-cancelled,.ap-order-status-refunded{color:#ff8f8f;border-color:rgba(255,143,143,.25)}.ap-order-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ap-order-items-panel{grid-column:1/-1}.ap-order-item,.ap-order-total-row{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08)}.ap-order-item:last-of-type{border-bottom:0}.ap-order-item small{display:block;color:#777;margin-top:4px}.ap-order-total-row{border-top:1px solid rgba(255,255,255,.12);border-bottom:0;margin-top:5px;padding-top:18px}.ap-order-address{color:#a3a3a3;line-height:1.8}.ap-order-detail-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:6px 0}.ap-order-detail-fields strong{display:block;margin-top:7px;line-height:1.45;word-break:break-word}.ap-order-current-status{padding:10px 0}.ap-orders-page .ap-payment-stats{grid-template-columns:repeat(2,1fr)}
@media(max-width:800px){.ap-order-row{grid-template-columns:1fr}.ap-order-status{align-items:flex-start}.ap-order-detail-grid{grid-template-columns:1fr}.ap-order-items-panel{grid-column:auto}.ap-order-detail-fields{grid-template-columns:1fr}.ap-orders-page .ap-payment-stats{grid-template-columns:1fr}.ap-order-filter-form{flex-wrap:wrap}.ap-order-filter-field{min-width:100%;}.ap-order-filter-form .ap-primary-button,.ap-order-filter-form .ap-secondary-button{flex:1}}

/* ACTIVITY LOG */
.ap-activity-table-wrap{overflow-x:auto;border:1px solid rgba(255,255,255,.10);background:#090909}
.ap-activity-table{width:100%;min-width:980px;border-collapse:collapse}
.ap-activity-table th{padding:14px 10px;text-align:left;color:#555;font-size:8px;letter-spacing:.15em;border-bottom:1px solid #262626;font-weight:700;white-space:nowrap}
.ap-activity-table td{padding:15px 10px;border-bottom:1px solid #202020;color:#aaa;font-size:11px;vertical-align:middle}
.ap-activity-table tr:last-child td{border-bottom:0}
.ap-activity-time{white-space:nowrap;color:#ddd!important;font-weight:600}
.ap-activity-staff{color:#eee;font-size:11px;font-weight:600;white-space:nowrap}
.ap-activity-action{color:#ddd;white-space:nowrap;font-size:10px;font-weight:600}
.ap-activity-module{color:#888;white-space:nowrap;font-size:9px;letter-spacing:.04em}
.ap-activity-identifier{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border:1px solid rgba(111,239,255,.22);color:#6FEFFF;font-size:9px;letter-spacing:.08em;white-space:nowrap}
.ap-activity-details{color:#777!important;min-width:230px;line-height:1.55}
.ap-activity-empty{padding:30px 20px;color:#555;text-align:center;font-size:10px;letter-spacing:.12em}
@media(max-width:800px){.ap-activity-table{min-width:900px}.ap-activity-table th,.ap-activity-table td{padding:12px 9px}}




/* ACTIVITY LOG — PREMIUM STAFF TIMELINE */
.ap-activity-page{color:#152337!important}
.ap-activity-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d7e0e7;border:1px solid #d7e0e7;margin:0 0 22px}
.ap-activity-stats>div{background:#fff;padding:22px 24px;min-height:88px}
.ap-activity-stats span{display:block;font-size:9px;letter-spacing:.16em;font-weight:800;color:#60758c}
.ap-activity-stats strong{display:block;font-size:25px;line-height:1.1;margin:8px 0 5px;color:#152337}
.ap-activity-stats small{display:block;font-size:10px;color:#8090a0}
.ap-activity-filter{display:grid;grid-template-columns:minmax(250px,1.5fr) minmax(170px,.8fr) minmax(170px,.8fr) minmax(145px,.65fr) auto auto;gap:10px;align-items:end;background:#fff;border:1px solid #d7e0e7;padding:16px;margin-bottom:22px;box-shadow:0 10px 35px rgba(20,42,60,.04)}
.ap-activity-filter-field label{display:block;font-size:9px;letter-spacing:.15em;font-weight:800;color:#60758c;margin:0 0 7px}
.ap-activity-filter-field input,.ap-activity-filter-field select{width:100%;height:42px;box-sizing:border-box;border:1px solid #cbd7df;background:#fff;color:#172638;padding:0 12px;font-size:12px;outline:none}
.ap-activity-filter-field input:focus,.ap-activity-filter-field select:focus{border-color:#6FEFFF;box-shadow:0 0 0 2px rgba(111,239,255,.14)}
.ap-activity-filter .ap-primary-button,.ap-activity-filter .ap-secondary-button{height:42px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.ap-activity-feed-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:4px 0 10px;padding:0 2px}
.ap-activity-feed-head>div{display:flex;align-items:baseline;gap:12px}
.ap-activity-feed-head span{font-size:9px;letter-spacing:.16em;color:#087f99;font-weight:800}
.ap-activity-feed-head strong{font-size:11px;letter-spacing:.08em;color:#203247}
.ap-activity-feed-head small{font-size:10px;color:#7c8d9d}
.ap-activity-table-wrap{overflow:auto;border:1px solid #d5e0e7;background:#fff;box-shadow:0 12px 40px rgba(20,42,60,.05)}
.ap-activity-premium-table{width:100%;min-width:1120px;border-collapse:collapse;background:#fff}
.ap-activity-premium-table th{padding:13px 14px;text-align:left;background:#f3f7f9;color:#5c7085;font-size:9px;letter-spacing:.15em;border-bottom:1px solid #d5e0e7;font-weight:800;white-space:nowrap}
.ap-activity-premium-table td{padding:14px;border-bottom:1px solid #e4ebef;color:#27384a;font-size:12px;vertical-align:middle;background:#fff}
.ap-activity-premium-table tbody tr:hover td{background:#f9fcfd}
.ap-activity-premium-table tr:last-child td{border-bottom:0}
.ap-activity-time{white-space:nowrap!important;color:#52677b!important;font-weight:700}
.ap-activity-time span{font-size:11px}
.ap-activity-staff-cell{display:flex;align-items:center;gap:10px;min-width:180px}
.ap-activity-avatar{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;border:1px solid #bfe9f0;background:#effcff;color:#0089a6;font-size:12px;font-weight:900}
.ap-activity-staff{display:block!important;color:#172638!important;font-size:12px!important;font-weight:800!important;white-space:nowrap}
.ap-activity-staff-cell small{display:block;margin-top:3px;color:#8393a1;font-size:9px;letter-spacing:.04em;text-transform:uppercase}
.ap-activity-action{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border:1px solid #d8e1e7;background:#f8fafb;color:#365066!important;white-space:nowrap;font-size:10px!important;font-weight:800!important;letter-spacing:.04em}
.ap-activity-action-created,.ap-activity-action-login,.ap-activity-action-payment-added{color:#00866d!important;border-color:#bde9df;background:#f1fbf8}
.ap-activity-action-deleted,.ap-activity-action-payment-removed{color:#c54d4d!important;border-color:#f1caca;background:#fff6f6}
.ap-activity-action-status-changed{color:#007d99!important;border-color:#bce8ef;background:#f0fcfe}
.ap-activity-module-badge{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border-left:2px solid #6FEFFF;background:#f5f8fa;color:#52677b;font-size:9px;font-weight:800;letter-spacing:.06em;white-space:nowrap}
.ap-activity-identifier{display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border:1px solid #b9e8ef;background:#f2fcfe;color:#007c98!important;font-size:9px;letter-spacing:.08em;white-space:nowrap}
.ap-activity-details{color:#455a6f!important;min-width:280px;line-height:1.55;font-size:11px!important}
.ap-activity-empty{padding:55px 20px!important;text-align:center!important;color:#6d8091!important}
.ap-activity-empty strong{display:block;color:#24384c;font-size:12px;letter-spacing:.15em;margin-bottom:7px}
.ap-activity-empty span{display:block;font-size:11px;color:#8a99a6}
@media(max-width:1050px){.ap-activity-filter{grid-template-columns:1fr 1fr 1fr}.ap-activity-search-field{grid-column:1/-1}.ap-activity-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.ap-activity-stats{grid-template-columns:1fr 1fr}.ap-activity-filter{grid-template-columns:1fr}.ap-activity-search-field{grid-column:auto}.ap-activity-feed-head{display:block}.ap-activity-feed-head small{display:block;margin-top:7px}.ap-activity-premium-table{min-width:1050px}.ap-activity-premium-table th,.ap-activity-premium-table td{padding:12px 10px}}

/* =========================================================
   DASHBOARD — PREMIUM VISUAL REDESIGN
   ========================================================= */
.ap-dashboard{
    width:min(1180px,calc(100% - 56px));
    margin:0 auto;
    padding:52px 0 34px;
    color:#f4f7f8;
}

.ap-dashboard-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    padding:0 0 30px;
    margin:0 0 26px;
    border-bottom:1px solid rgba(255,255,255,.11);
}

.ap-dashboard-header .ap-eyebrow{
    margin:0 0 11px;
    color:#6FEFFF;
    font-size:10px;
    font-weight:800;
    letter-spacing:.2em;
}

.ap-dashboard-header h1{
    margin:0;
    color:#f7f9fa;
    font-size:clamp(38px,4vw,58px);
    line-height:.98;
    font-weight:500;
    letter-spacing:-.035em;
}

.ap-dashboard-header p{
    margin:12px 0 0;
    color:#8b9295;
    font-size:13px;
    letter-spacing:.01em;
}

.ap-dashboard .ap-logout{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:108px;
    height:42px;
    padding:0 17px;
    border:1px solid rgba(111,239,255,.45);
    background:rgba(111,239,255,.045);
    color:#6FEFFF;
    text-decoration:none;
    font-size:9px;
    font-weight:800;
    letter-spacing:.16em;
    transition:all .22s ease;
}

.ap-dashboard .ap-logout:hover{
    background:#6FEFFF;
    border-color:#6FEFFF;
    color:#061012;
    transform:translateY(-1px);
}

.ap-dashboard .ap-access-card{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    min-height:142px;
    margin:0 0 44px;
    padding:28px 30px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 88% 30%,rgba(111,239,255,.09),transparent 34%),
        linear-gradient(135deg,#111719 0%,#0d1011 62%,#0b0d0e 100%);
    box-shadow:0 18px 50px rgba(0,0,0,.24);
}

.ap-dashboard .ap-access-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:#6FEFFF;
    box-shadow:0 0 24px rgba(111,239,255,.35);
}

.ap-dashboard .ap-access-card .ap-card-label{
    margin-bottom:9px;
    color:#6FEFFF;
    font-size:9px;
    font-weight:800;
    letter-spacing:.2em;
}

.ap-dashboard .ap-access-card h2{
    margin:0;
    color:#f4f7f8;
    font-size:26px;
    line-height:1;
    font-weight:600;
    letter-spacing:.04em;
}

.ap-dashboard .ap-access-card p{
    margin:9px 0 0;
    color:#70787b;
    font-size:12px;
}

.ap-dashboard .ap-active{
    display:flex;
    align-items:center;
    gap:9px;
    flex:none;
    color:#7cf3a9;
    font-size:9px;
    font-weight:800;
    letter-spacing:.16em;
}

.ap-dashboard .ap-active span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#6FEFFF;
    box-shadow:0 0 12px rgba(111,239,255,.8);
}

.ap-dashboard .ap-modules{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin:0;
}

.ap-dashboard .ap-module{
    position:relative;
    display:flex;
    min-height:184px;
    flex-direction:column;
    justify-content:space-between;
    padding:22px 22px 20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(145deg,#15191a 0%,#101313 100%);
    color:#f2f5f6 !important;
    text-decoration:none !important;
    box-shadow:0 10px 28px rgba(0,0,0,.14);
    transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;
}

.ap-dashboard .ap-module::after{
    content:"→";
    position:absolute;
    right:21px;
    bottom:18px;
    color:#495154;
    font-size:18px;
    font-weight:300;
    transition:color .24s ease,transform .24s ease;
}

.ap-dashboard .ap-module:hover{
    transform:translateY(-4px);
    border-color:rgba(111,239,255,.5);
    background:linear-gradient(145deg,#172022 0%,#111617 100%);
    box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 0 1px rgba(111,239,255,.04);
}

.ap-dashboard .ap-module:hover::after{
    color:#6FEFFF;
    transform:translateX(4px);
}

.ap-dashboard .ap-module > span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border:1px solid rgba(111,239,255,.25);
    background:rgba(111,239,255,.045);
    color:#6FEFFF;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
}

.ap-dashboard .ap-module strong{
    display:block;
    margin-top:auto;
    padding-top:32px;
    padding-right:30px;
    color:#f5f7f8 !important;
    font-size:15px;
    line-height:1.2;
    font-weight:650;
    letter-spacing:.075em;
}

.ap-dashboard .ap-module small{
    display:block;
    margin-top:9px;
    padding-right:30px;
    color:#737b7e !important;
    font-size:10px;
    line-height:1.45;
    letter-spacing:.02em;
}

.ap-dashboard .ap-module:nth-child(5){
    border-top-color:rgba(111,239,255,.24);
}

.ap-dashboard .ap-module:nth-child(6){
    border-top-color:rgba(111,239,255,.24);
}

.ap-dashboard .ap-module:nth-child(7){
    border-top-color:rgba(124,243,169,.24);
}

.ap-dashboard .ap-module:nth-child(8){
    border-top-color:rgba(255,255,255,.17);
}

.ap-dashboard .ap-dashboard-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:28px;
    padding-top:17px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#4f575a;
    font-size:9px;
    letter-spacing:.14em;
}

@media(max-width:900px){
    .ap-dashboard{width:min(100% - 36px,760px);padding-top:38px;}
    .ap-dashboard .ap-modules{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:620px){
    .ap-dashboard{width:calc(100% - 24px);padding:24px 0 24px;}
    .ap-dashboard-header{align-items:flex-start;flex-direction:column;padding-bottom:22px;}
    .ap-dashboard-header h1{font-size:39px;}
    .ap-dashboard .ap-logout{align-self:flex-start;}
    .ap-dashboard .ap-access-card{align-items:flex-start;flex-direction:column;min-height:0;margin-bottom:28px;padding:24px 22px;}
    .ap-dashboard .ap-active{align-self:flex-end;margin-top:-2px;}
    .ap-dashboard .ap-modules{grid-template-columns:1fr;gap:10px;}
    .ap-dashboard .ap-module{min-height:155px;padding:18px 18px 17px;}
    .ap-dashboard .ap-module strong{padding-top:24px;font-size:14px;}
    .ap-dashboard .ap-dashboard-footer{align-items:flex-start;flex-direction:column;gap:7px;}
}



/* =========================================================
   ARCHER PRASANTA — FULL STAFF PORTAL PREMIUM LIGHT THEME
   Visual-only layer. Backend/functionality intentionally untouched.
   ========================================================= */

:root{
    --ap-bg:#eef3f6;
    --ap-surface:#ffffff;
    --ap-surface-soft:#f7fafb;
    --ap-surface-tint:#f1f7f9;
    --ap-border:#d7e1e6;
    --ap-border-strong:#c4d1d8;
    --ap-text:#172532;
    --ap-text-2:#435463;
    --ap-muted:#71818d;
    --ap-faint:#8e9ba4;
    --ap-cyan:#08bfd9;
    --ap-cyan-dark:#087f95;
    --ap-navy:#0b1b2b;
    --ap-green:#11a879;
    --ap-red:#c64d55;
    --ap-shadow:0 12px 34px rgba(18,42,58,.07);
    --ap-shadow-hover:0 18px 44px rgba(18,42,58,.12);
}

html{
    background:var(--ap-bg)!important;
}

body{
    background:
        radial-gradient(circle at 82% 0%,rgba(8,191,217,.055),transparent 28%),
        linear-gradient(180deg,#f5f8fa 0%,var(--ap-bg) 55%,#eaf0f3 100%)!important;
    color:var(--ap-text)!important;
}

/* Main workspace / dashboard */
.ap-dashboard,
.ap-management,
.ap-reports-page,
.ap-appointments,
.ap-orders-page,
.ap-activity-page{
    color:var(--ap-text)!important;
}

.ap-dashboard{
    background:transparent!important;
}

/* Global headings and copy */
.ap-management-title,
.ap-dashboard-header h1{
    color:var(--ap-text)!important;
    font-weight:650!important;
}

.ap-management-description,
.ap-dashboard-header p{
    color:var(--ap-muted)!important;
}

.ap-management-kicker,
.ap-dashboard-header .ap-eyebrow{
    color:var(--ap-cyan-dark)!important;
}

/* Header dividers */
.ap-dashboard-header{
    border-bottom:1px solid var(--ap-border)!important;
}

.ap-dashboard-footer{
    border-top:1px solid var(--ap-border)!important;
    color:var(--ap-faint)!important;
}

/* Logout / secondary actions */
.ap-dashboard .ap-logout{
    background:#fff!important;
    border:1px solid #9edee8!important;
    color:#087f95!important;
    box-shadow:0 5px 18px rgba(18,42,58,.05)!important;
}
.ap-dashboard .ap-logout:hover{
    background:var(--ap-cyan)!important;
    border-color:var(--ap-cyan)!important;
    color:#08232a!important;
}

.ap-primary-button{
    background:var(--ap-cyan)!important;
    border-color:var(--ap-cyan)!important;
    color:#06242a!important;
    box-shadow:0 6px 18px rgba(8,191,217,.13)!important;
}
.ap-primary-button:hover{
    background:#fff!important;
    border-color:var(--ap-cyan)!important;
    color:#087f95!important;
}

.ap-secondary-button{
    background:#fff!important;
    border-color:var(--ap-border-strong)!important;
    color:var(--ap-text-2)!important;
    box-shadow:0 5px 16px rgba(18,42,58,.04)!important;
}
.ap-secondary-button:hover{
    background:var(--ap-surface-tint)!important;
    border-color:#8ed9e4!important;
    color:#087f95!important;
}

.ap-danger-button{
    background:#fff5f5!important;
    border-color:#ecc8cb!important;
    color:var(--ap-red)!important;
}
.ap-danger-button:hover{
    background:#fff!important;
    border-color:#d98a8f!important;
    color:#a83b44!important;
}

/* Access banner */
.ap-dashboard .ap-access-card{
    background:
        radial-gradient(circle at 88% 20%,rgba(8,191,217,.10),transparent 34%),
        linear-gradient(135deg,#ffffff 0%,#f2f9fb 100%)!important;
    border:1px solid #b9dfe6!important;
    box-shadow:var(--ap-shadow)!important;
}
.ap-dashboard .ap-access-card h2{
    color:var(--ap-text)!important;
}
.ap-dashboard .ap-access-card p{
    color:var(--ap-muted)!important;
}
.ap-dashboard .ap-access-card .ap-card-label{
    color:var(--ap-cyan-dark)!important;
}
.ap-dashboard .ap-active{
    color:var(--ap-green)!important;
}
.ap-dashboard .ap-active span{
    background:var(--ap-green)!important;
    box-shadow:0 0 12px rgba(17,168,121,.35)!important;
}

/* Dashboard module cards */
.ap-dashboard .ap-modules{
    gap:16px!important;
}
.ap-dashboard .ap-module{
    background:linear-gradient(145deg,#ffffff 0%,#f8fbfc 100%)!important;
    border:1px solid var(--ap-border)!important;
    color:var(--ap-text)!important;
    box-shadow:var(--ap-shadow)!important;
}
.ap-dashboard .ap-module:hover{
    transform:translateY(-4px)!important;
    background:#fff!important;
    border-color:#8ed9e4!important;
    box-shadow:var(--ap-shadow-hover),0 0 0 1px rgba(8,191,217,.04)!important;
}
.ap-dashboard .ap-module > span{
    background:#eaf9fb!important;
    border-color:#b7e5eb!important;
    color:#087f95!important;
}
.ap-dashboard .ap-module strong{
    color:var(--ap-text)!important;
}
.ap-dashboard .ap-module small{
    color:var(--ap-muted)!important;
}
.ap-dashboard .ap-module::after{
    color:#91a2ad!important;
}
.ap-dashboard .ap-module:hover::after{
    color:#087f95!important;
}

/* Generic content surfaces */
.ap-staff-table-wrap,
.ap-staff-form,
.ap-appointment-stat,
.ap-appointment-filters,
.ap-appointment-card,
.ap-detail-card,
.ap-detail-status-control,
.ap-customer-search,
.ap-customer-table-wrap,
.ap-motorcycle-search,
.ap-motorcycle-card,
.ap-motorcycle-profile-head,
.ap-report-period,
.ap-report-card,
.ap-report-secondary,
.ap-report-panel,
.ap-order-row,
.ap-activity-table-wrap,
.ap-payment-list-row,
.ap-invoice-sheet{
    background:#fff!important;
    border-color:var(--ap-border)!important;
    color:var(--ap-text)!important;
    box-shadow:var(--ap-shadow)!important;
}

/* Soft panels */
.ap-report-secondary>div,
.ap-report-card,
.ap-payment-stats>div,
.ap-payment-list-row,
.ap-billing-amounts>div{
    background:#f7fafb!important;
}
.ap-report-panel,
.ap-payment-list,
.ap-billing-amounts{
    background:var(--ap-border)!important;
}

/* Stats */
.ap-appointment-stat strong,
.ap-report-card strong,
.ap-report-secondary strong,
.ap-payment-stats strong{
    color:var(--ap-text)!important;
}
.ap-appointment-stat span,
.ap-report-card span,
.ap-payment-stats span{
    color:var(--ap-cyan-dark)!important;
}
.ap-appointment-stat,
.ap-report-card,
.ap-report-secondary>div{
    border-color:var(--ap-border)!important;
}
.ap-report-card small,
.ap-report-secondary span,
.ap-payment-stats small{
    color:var(--ap-muted)!important;
}

/* Search / filters / forms */
.ap-report-period,
.ap-appointment-filters,
.ap-customer-search,
.ap-motorcycle-search{
    background:#fff!important;
    border:1px solid var(--ap-border)!important;
}
.ap-report-period-field label,
.ap-filter-field label,
.ap-customer-search-field label,
.ap-motorcycle-search-field label,
.ap-form-field label{
    color:var(--ap-muted)!important;
}
.ap-report-period-field input,
.ap-filter-field input,
.ap-filter-field select,
.ap-appointment-status-form select,
.ap-detail-status-control select,
.ap-form-field input,
.ap-form-field select,
.ap-customer-search input,
.ap-motorcycle-search input,
.ap-order-filter-field select{
    background:#fff!important;
    color:var(--ap-text)!important;
    border:1px solid var(--ap-border-strong)!important;
}
.ap-report-period-field input:focus,
.ap-filter-field input:focus,
.ap-filter-field select:focus,
.ap-appointment-status-form select:focus,
.ap-detail-status-control select:focus,
.ap-form-field input:focus,
.ap-form-field select:focus{
    border-color:#72d8e4!important;
    box-shadow:0 0 0 3px rgba(8,191,217,.08)!important;
}

/* Staff table */
.ap-staff-table-wrap,
.ap-customer-table-wrap,
.ap-activity-table-wrap{
    overflow-x:auto;
}
.ap-staff-table th,
.ap-customer-table th,
.ap-activity-table th{
    color:#60717c!important;
    background:#f3f7f9!important;
    border-bottom:1px solid var(--ap-border)!important;
}
.ap-staff-table td,
.ap-customer-table td,
.ap-activity-table td{
    color:var(--ap-text-2)!important;
    border-bottom:1px solid #e4eaed!important;
}
.ap-staff-name,
.ap-activity-staff,
.ap-activity-time{
    color:var(--ap-text)!important;
}
.ap-staff-email,
.ap-activity-module{
    color:var(--ap-muted)!important;
}
.ap-role,
.ap-activity-action{
    color:#087f95!important;
}

/* Appointment cards */
.ap-appointment-top{
    border-bottom-color:#e2e9ed!important;
}
.ap-appointment-booking{
    color:#087f95!important;
}
.ap-appointment-service{
    color:var(--ap-text)!important;
}
.ap-appointment-main p,
.ap-appointment-main small{
    color:var(--ap-text-2)!important;
}
.ap-appointment-actions{
    border-color:var(--ap-border)!important;
}

/* Details */
.ap-detail-card h3{
    color:var(--ap-text)!important;
}
.ap-detail-card-kicker{
    color:#087f95!important;
}
.ap-detail-line{
    border-top-color:#e2e9ed!important;
    color:#60717c!important;
}
.ap-detail-line strong{
    color:var(--ap-text)!important;
}
.ap-detail-message{
    color:var(--ap-text-2)!important;
}
.ap-detail-status-control p{
    color:var(--ap-muted)!important;
}

/* Customers / motorcycles */
.ap-customer-count,
.ap-motorcycle-id{
    color:var(--ap-muted)!important;
}
.ap-customer-table td strong,
.ap-motorcycle-card-title,
.ap-motorcycle-profile-main h3{
    color:var(--ap-text)!important;
}
.ap-motorcycle-registration,
.ap-motorcycle-profile-main>p{
    color:#087f95!important;
}
.ap-motorcycle-card-media,
.ap-motorcycle-profile-photo{
    background:#edf3f6!important;
    border-color:var(--ap-border)!important;
}
.ap-motorcycle-photo-placeholder{
    color:#9aa8b1!important;
}
.ap-motorcycle-customer{
    border-top-color:#e2e9ed!important;
    color:var(--ap-muted)!important;
}
.ap-motorcycle-customer strong{
    color:var(--ap-text)!important;
}
.ap-motorcycle-customer small{
    color:var(--ap-muted)!important;
}
.ap-motorcycle-meta{
    background:var(--ap-border)!important;
    border-color:var(--ap-border)!important;
}
.ap-motorcycle-meta span{
    background:#f7fafb!important;
    color:var(--ap-text-2)!important;
}

/* Service records */
.ap-service-card,
.ap-service-record-card,
.ap-service-filters,
.ap-service-search,
.ap-service-table-wrap,
.ap-service-detail-card{
    background:#fff!important;
    border-color:var(--ap-border)!important;
    color:var(--ap-text)!important;
}

/* Reports */
.ap-report-panel-head{
    border-bottom-color:var(--ap-border)!important;
}
.ap-report-panel-head h3{
    color:var(--ap-text)!important;
}
.ap-report-panel-head span,
.ap-report-table th{
    color:#687984!important;
}
.ap-report-table td{
    color:var(--ap-text-2)!important;
    border-bottom-color:#e4eaed!important;
}
.ap-report-table td strong{
    color:var(--ap-text)!important;
}
.ap-report-bar-track{
    background:#dce7eb!important;
}
.ap-report-bar-fill{
    background:linear-gradient(90deg,#08bfd9,#59d8e6)!important;
}
.ap-report-bar-label,
.ap-report-note{
    color:var(--ap-muted)!important;
}
.ap-report-bar-value{
    color:var(--ap-text-2)!important;
}

/* Orders */
.ap-order-main h3,
.ap-order-detail-fields strong,
.ap-order-total-row strong{
    color:var(--ap-text)!important;
}
.ap-order-main p,
.ap-order-main small,
.ap-order-address,
.ap-order-item small{
    color:var(--ap-text-2)!important;
}
.ap-order-amount span,
.ap-order-detail-fields span{
    color:var(--ap-muted)!important;
}
.ap-order-amount strong{
    color:var(--ap-text)!important;
}
.ap-order-item,
.ap-order-total-row{
    border-bottom-color:#e2e9ed!important;
}
.ap-order-total-row{
    border-top-color:#d5e0e5!important;
}
.ap-order-status-badge{
    color:#087f95!important;
    border-color:#a9dfe7!important;
    background:#f0fbfc!important;
}
.ap-order-status-completed{
    color:#07845f!important;
    border-color:#a8decf!important;
    background:#effaf6!important;
}
.ap-order-status-cancelled,
.ap-order-status-refunded{
    color:#b0444c!important;
    border-color:#e6b9bd!important;
    background:#fff5f5!important;
}

/* Billing / payments */
.ap-billing-main h3,
.ap-payment-list-row h3{
    color:var(--ap-text)!important;
}
.ap-billing-main p,
.ap-payment-list-row p{
    color:var(--ap-text-2)!important;
}
.ap-billing-main small,
.ap-payment-list-row small,
.ap-billing-amounts span{
    color:var(--ap-muted)!important;
}
.ap-billing-amounts{
    background:var(--ap-border)!important;
}
.ap-billing-amounts>div{
    background:#f7fafb!important;
}
.ap-billing-due strong{
    color:#087f95!important;
}

/* Activity */
.ap-activity-table-wrap{
    background:#fff!important;
}
.ap-activity-table th{
    background:#f3f7f9!important;
}
.ap-activity-table td{
    background:#fff!important;
}
.ap-activity-identifier{
    color:#087f95!important;
    border-color:#b5e2e8!important;
    background:#f0fbfc!important;
}
.ap-activity-details{
    color:var(--ap-text-2)!important;
}

/* Permission cards */
.ap-permission-preview{
    border-top-color:var(--ap-border)!important;
}
.ap-permission-preview-title{
    color:var(--ap-muted)!important;
}
.ap-permission-item{
    background:#f7fafb!important;
    border-color:var(--ap-border)!important;
    color:var(--ap-text-2)!important;
}
.ap-permission-item strong{
    color:var(--ap-text)!important;
}

/* Empty states */
.ap-empty{
    background:#fff!important;
    border-color:var(--ap-border)!important;
    color:var(--ap-muted)!important;
}

/* Alerts */
.ap-alert.success{
    background:#effaf6!important;
    border-color:#b9e2d5!important;
    color:#087b5a!important;
}
.ap-alert.error{
    background:#fff5f5!important;
    border-color:#e7c0c4!important;
    color:#ad3e47!important;
}

/* Invoice screen stays clean/light */
.ap-invoice-page{
    background:#eef3f6!important;
}
.ap-invoice-sheet{
    background:#fff!important;
    border-color:var(--ap-border)!important;
    box-shadow:var(--ap-shadow)!important;
}
.ap-invoice-brand h3,
.ap-invoice-number strong,
.ap-invoice-parties strong,
.ap-invoice-totals strong{
    color:var(--ap-text)!important;
}
.ap-invoice-eyebrow,
.ap-invoice-number span,
.ap-invoice-parties span,
.ap-invoice-totals span,
.ap-invoice-notes span{
    color:#087f95!important;
}
.ap-invoice-brand p,
.ap-invoice-parties p,
.ap-invoice-number small,
.ap-invoice-notes p{
    color:var(--ap-text-2)!important;
}
.ap-invoice-table{
    border-color:var(--ap-border)!important;
}
.ap-invoice-table-head{
    background:#f3f7f9!important;
}
.ap-invoice-table-row{
    border-bottom-color:#e2e9ed!important;
}
.ap-invoice-summary{
    border-color:var(--ap-border)!important;
}

/* Responsive polish */
@media(max-width:900px){
    .ap-dashboard{
        width:min(100% - 36px,960px)!important;
    }
}
@media(max-width:620px){
    .ap-dashboard{
        width:calc(100% - 24px)!important;
    }
    .ap-management{
        margin-top:26px!important;
    }
}

/* Keep print styling authoritative */
@media print{
    html,body{
        background:#fff!important;
    }
}


/* PRODUCT ORDER — PRODUCT NAME NAVIGATION */
.ap-order-detail-page .ap-order-product-link{
    color:#172532!important;
    text-decoration:none!important;
    font-weight:700!important;
    transition:color .18s ease, opacity .18s ease;
}
.ap-order-detail-page .ap-order-product-link:hover{
    color:#008da5!important;
    text-decoration:underline!important;
    text-underline-offset:3px;
}

/* =====================================================
   STAFF LOGIN — PREMIUM LIGHT CARD
   ===================================================== */
body:not(.ap-print-invoice-page):has(main.ap-login){
    background:
        linear-gradient(90deg,rgba(4,12,20,.68) 0%,rgba(4,12,20,.48) 38%,rgba(4,12,20,.40) 62%,rgba(4,12,20,.62) 100%),
        url("https://archerprasanta.com/wp-content/uploads/2026/09/a_wide_cinematic_ultra_detailed_photo_cg_styled.webp") center center / cover no-repeat fixed !important;
    color:#172a3d !important;
    min-height:100vh !important;
}
main.ap-login{
    min-height:100vh !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:48px 24px !important;
    box-sizing:border-box !important;
    background:transparent !important;
}
main.ap-login .ap-login-inner{
    width:min(100%,560px) !important;
    box-sizing:border-box !important;
    padding:42px 42px 34px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid #d7e2e8 !important;
    border-radius:2px !important;
    box-shadow:0 28px 70px rgba(20,45,62,.13),0 4px 14px rgba(20,45,62,.06) !important;
    position:relative !important;
    overflow:hidden !important;
}
main.ap-login .ap-login-inner::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:3px !important;
    background:linear-gradient(90deg,#6fefff,#16cfe7,#6fefff) !important;
}
main.ap-login .ap-brand{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    padding-bottom:26px !important;
    border-bottom:1px solid #e2e9ed !important;
}
main.ap-login .ap-brand-mark{
    width:48px !important;
    height:48px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid #62ddec !important;
    background:#f1fcfe !important;
    color:#087d98 !important;
    font-size:15px !important;
    font-weight:900 !important;
    letter-spacing:.02em !important;
}
main.ap-login .ap-brand-name{
    color:#14283d !important;
    font-size:13px !important;
    font-weight:900 !important;
    letter-spacing:.19em !important;
}
main.ap-login .ap-brand-sub{
    margin-top:5px !important;
    color:#8092a1 !important;
    font-size:9px !important;
    font-weight:800 !important;
    letter-spacing:.20em !important;
}
main.ap-login .ap-login-heading{
    padding:34px 0 24px !important;
}
main.ap-login .ap-login-heading .ap-eyebrow{
    color:#009bb7 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.20em !important;
}
main.ap-login .ap-login-heading h1{
    margin:9px 0 7px !important;
    color:#152a40 !important;
    font-size:38px !important;
    line-height:1.05 !important;
    letter-spacing:-.035em !important;
    font-weight:800 !important;
}
main.ap-login .ap-login-heading p{
    margin:0 !important;
    color:#60758a !important;
    font-size:13px !important;
    line-height:1.6 !important;
}
main.ap-login .ap-tabs{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    border:1px solid #d5e0e6 !important;
    background:#f5f8fa !important;
}
main.ap-login .ap-tab{
    min-height:48px !important;
    border:0 !important;
    border-right:1px solid #d5e0e6 !important;
    background:transparent !important;
    color:#7a8c9c !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;
    cursor:pointer !important;
}
main.ap-login .ap-tab:last-child{border-right:0 !important;}
main.ap-login .ap-tab.active{
    background:#ffffff !important;
    color:#008eaa !important;
    box-shadow:inset 0 -2px 0 #6fefff !important;
}
main.ap-login .ap-alert{
    margin:16px 0 !important;
    border:1px solid #d7e2e8 !important;
    background:#f7fafb !important;
    color:#334b60 !important;
    padding:12px 14px !important;
}
main.ap-login .ap-login-panel label{
    color:#526a7e !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.15em !important;
}
main.ap-login .ap-login-panel input{
    width:100% !important;
    box-sizing:border-box !important;
    margin-top:7px !important;
    border:1px solid #cbd9e1 !important;
    background:#ffffff !important;
    color:#172a3d !important;
    border-radius:0 !important;
    box-shadow:none !important;
}
main.ap-login .ap-login-panel input::placeholder{color:#9aa9b5 !important;opacity:1 !important;}
main.ap-login .ap-login-panel input:focus{
    border-color:#5edbea !important;
    box-shadow:0 0 0 3px rgba(111,239,255,.14) !important;
    outline:none !important;
}
main.ap-login .ap-login-button{
    width:100% !important;
    min-height:48px !important;
    border:1px solid #55d9eb !important;
    background:#62e4f3 !important;
    color:#08283a !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;
    box-shadow:0 8px 20px rgba(30,177,201,.14) !important;
}
main.ap-login .ap-login-button:hover{background:#4ed7e9 !important;}
main.ap-login .ap-login-footer{
    margin-top:25px !important;
    padding-top:18px !important;
    border-top:1px solid #e2e9ed !important;
    color:#8b9aa6 !important;
    font-size:9px !important;
    letter-spacing:.16em !important;
}
@media (max-width:640px){
    main.ap-login{padding:24px 14px !important;}
    main.ap-login .ap-login-inner{padding:32px 24px 26px !important;}
    main.ap-login .ap-login-heading h1{font-size:32px !important;}
}




:root{--ap-cyan:#6FEFFF;--ap-cyan2:#00BFD8;--ap-navy:#111A3D;--ap-deep:#0A0F2C;--ap-page:#F4F8FA;--ap-ink:#111A3D;--ap-muted:#60718A;--ap-line:#DCE6ED;--ap-shadow:0 14px 36px rgba(17,26,61,.08)}
body{background:var(--ap-page)!important;color:var(--ap-ink)!important}.ap-staff-shell{min-height:100vh;display:flex;background:var(--ap-page)}
.ap-staff-sidebar{position:fixed;inset:0 auto 0 0;width:265px;z-index:1000;display:flex;flex-direction:column;background:linear-gradient(180deg,#111A3D,#0A0F2C);color:#fff;padding:28px 18px 22px;box-sizing:border-box;box-shadow:10px 0 30px rgba(10,15,44,.12)}
.ap-sidebar-brand{text-align:center;padding:0 8px 25px;border-bottom:1px solid rgba(111,239,255,.18)}.ap-sidebar-logo{font-size:52px;line-height:.9;font-weight:800;letter-spacing:-.08em;background:linear-gradient(135deg,#fff,#6FEFFF,#00BFD8);-webkit-background-clip:text;background-clip:text;color:transparent}.ap-sidebar-name{margin-top:12px;font-size:17px;font-weight:800;letter-spacing:.13em;color:#fff}.ap-sidebar-tag{margin-top:6px;font-size:7px;letter-spacing:.19em;color:rgba(255,255,255,.55);font-weight:700}
.ap-sidebar-nav{display:flex;flex-direction:column;gap:6px;padding-top:24px}.ap-sidebar-link{display:flex;align-items:center;gap:13px;min-height:47px;padding:0 14px;border:1px solid transparent;border-radius:7px;text-decoration:none!important;color:rgba(255,255,255,.78)!important;font-size:11px;font-weight:750;letter-spacing:.08em;transition:.2s ease;box-sizing:border-box}.ap-sidebar-link:hover{background:rgba(111,239,255,.08);color:#fff!important;border-color:rgba(111,239,255,.18)}.ap-sidebar-link.is-active{background:linear-gradient(90deg,rgba(0,191,216,.34),rgba(111,239,255,.10));color:#fff!important;border-color:rgba(111,239,255,.42);box-shadow:inset 3px 0 0 var(--ap-cyan)}.ap-side-icon{width:21px;text-align:center;color:var(--ap-cyan);font-size:18px}.ap-sidebar-footer{margin-top:auto;padding:20px 10px 0;border-top:1px solid rgba(111,239,255,.14);display:flex;flex-direction:column;gap:6px;color:rgba(255,255,255,.48);font-size:8px;letter-spacing:.13em;line-height:1.5}.ap-sidebar-footer strong{color:rgba(255,255,255,.8);font-size:9px;margin-top:7px}.ap-sidebar-footer span{letter-spacing:.04em}.ap-sidebar-footer em{margin-top:13px;padding-top:15px;border-top:1px solid rgba(111,239,255,.12);text-align:center;color:rgba(255,255,255,.75);font-size:11px;line-height:1.45;letter-spacing:.02em}
.ap-staff-workspace{width:calc(100% - 265px);margin-left:265px;min-width:0;background:var(--ap-page)}.ap-staff-topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid var(--ap-line);background:rgba(255,255,255,.94);box-sizing:border-box;position:sticky;top:0;z-index:900;backdrop-filter:blur(12px)}.ap-topbar-left,.ap-topbar-right{display:flex;align-items:center;gap:18px}.ap-sidebar-toggle{border:0;background:transparent;color:var(--ap-navy);font-size:22px;cursor:pointer;padding:6px;display:none}.ap-topbar-search{width:390px;height:40px;border:1px solid #D8E3EA;border-radius:22px;background:#fff;display:flex;align-items:center;gap:9px;padding:0 13px;color:#8A99A7;font-size:12px}.ap-topbar-search span:first-child{font-size:20px;color:var(--ap-navy)}.ap-topbar-search kbd{margin-left:auto;padding:4px 7px;border-radius:5px;background:#EDF3F7;color:#65768A;font-size:9px;border:1px solid #E0E8ED}.ap-notification{position:relative;border:0;background:transparent;color:var(--ap-navy);font-size:22px;cursor:pointer}.ap-notification i{position:absolute;width:7px;height:7px;right:1px;top:1px;border-radius:50%;background:#ef4050;border:2px solid #fff}.ap-user-chip{display:flex;align-items:center;gap:10px;min-width:140px}.ap-user-avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:var(--ap-navy);color:#fff;font-size:11px;font-weight:800}.ap-user-chip strong{display:block;font-size:11px;letter-spacing:.04em;color:var(--ap-navy)!important;white-space:nowrap}.ap-user-chip small{display:block;margin-top:3px;font-size:9px;color:#728197}.ap-topbar-logout{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 19px;border:1px solid var(--ap-cyan2);background:#fff;color:var(--ap-cyan2)!important;text-decoration:none!important;font-size:9px;font-weight:800;letter-spacing:.14em;border-radius:4px;transition:.2s ease}.ap-topbar-logout:hover{background:var(--ap-cyan2);color:#07172b!important}
.ap-view-dashboard .ap-dashboard{width:auto!important;max-width:none!important;margin:0!important;padding:38px 42px 34px!important;background:transparent!important;color:var(--ap-ink)!important}.ap-view-dashboard .ap-dashboard-header{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:0 0 27px!important;border-bottom:1px solid var(--ap-line)!important}.ap-view-dashboard .ap-dashboard-header:after{content:'Precision Today\A Better Rides Tomorrow';white-space:pre;position:absolute;right:6px;top:7px;font-size:21px;line-height:1.4;font-style:italic;font-weight:650;color:#A7B9C8;opacity:.48;text-align:right;pointer-events:none}.ap-view-dashboard .ap-dashboard-header h1{margin:9px 0 7px!important;font-size:48px!important;line-height:1!important;color:var(--ap-navy)!important;letter-spacing:-.04em!important;font-weight:760!important}.ap-view-dashboard .ap-dashboard-header p{margin:0!important;color:#63758A!important;font-size:13px!important}.ap-view-dashboard .ap-dashboard-header .ap-logout{display:none!important}.ap-view-dashboard .ap-dashboard-header .ap-eyebrow{font-size:9px;letter-spacing:.18em;color:var(--ap-cyan2)!important;font-weight:800}
.ap-view-dashboard .ap-access-card{margin:25px 0 20px!important;min-height:112px;display:flex;align-items:center;justify-content:space-between;padding:24px 26px!important;background:linear-gradient(135deg,#fff,#effafd)!important;border:1px solid #B9E6ED!important;border-left:3px solid var(--ap-cyan2)!important;border-radius:9px!important;box-shadow:var(--ap-shadow)!important;box-sizing:border-box}.ap-view-dashboard .ap-access-card .ap-card-label{font-size:9px!important;letter-spacing:.18em;color:var(--ap-cyan2)!important;font-weight:800!important}.ap-view-dashboard .ap-access-card h2{margin:7px 0 6px!important;color:var(--ap-navy)!important;font-size:27px!important}.ap-view-dashboard .ap-access-card p{margin:0!important;color:#667A8D!important;font-size:11px!important}.ap-view-dashboard .ap-active{display:flex!important;align-items:center;gap:9px;color:#0AA879!important;font-size:10px!important;font-weight:800!important;letter-spacing:.12em!important}.ap-view-dashboard .ap-active span{width:8px!important;height:8px!important;border-radius:50%!important;background:#0AA879!important;box-shadow:0 0 0 5px rgba(10,168,121,.08)!important}
.ap-view-dashboard .ap-modules{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:15px!important}.ap-view-dashboard .ap-module{position:relative;min-height:145px!important;padding:20px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;background:#fff!important;border:1px solid #D7E2E8!important;border-radius:9px!important;color:var(--ap-navy)!important;text-decoration:none!important;box-shadow:var(--ap-shadow)!important;overflow:hidden;transition:.22s ease!important}.ap-view-dashboard .ap-module:before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:transparent;transition:.2s ease}.ap-view-dashboard .ap-module:hover{transform:translateY(-4px)!important;border-color:#A8DCE5!important;box-shadow:0 18px 38px rgba(17,26,61,.11)!important}.ap-view-dashboard .ap-module:hover:before{background:var(--ap-cyan2)}.ap-view-dashboard .ap-module>span{align-self:flex-start;display:grid!important;place-items:center;width:42px;height:42px;border-radius:10px;background:#ECF9FB!important;border:1px solid #C5EAF0!important;color:#087F95!important;font-size:12px!important;font-weight:800!important}.ap-view-dashboard .ap-module strong{margin-top:9px!important;color:var(--ap-navy)!important;font-size:15px!important;letter-spacing:.04em!important;font-weight:800!important}.ap-view-dashboard .ap-module small{color:#6D7F91!important;font-size:10px!important;line-height:1.5!important;max-width:76%}.ap-view-dashboard .ap-module:after{content:'→';position:absolute;right:20px;bottom:21px;font-size:22px;color:#9AABB7;transition:.2s ease}.ap-view-dashboard .ap-module:hover:after{color:var(--ap-cyan2);transform:translateX(3px)}.ap-view-dashboard .ap-module:nth-child(1)>span{background:#E8F6FF!important;color:#0B88D1!important;border-color:#C7E8F8!important}.ap-view-dashboard .ap-module:nth-child(2)>span{background:#EAF9F4!important;color:#099B75!important;border-color:#CBEDE1!important}.ap-view-dashboard .ap-module:nth-child(3)>span{background:#F0EAFE!important;color:#7650C9!important;border-color:#DFD2FA!important}.ap-view-dashboard .ap-module:nth-child(4)>span{background:#FFF1E8!important;color:#E36B14!important;border-color:#F7DAC2!important}.ap-view-dashboard .ap-module:nth-child(5)>span{background:#FFF0F3!important;color:#D54B67!important;border-color:#F4D1DA!important}.ap-view-dashboard .ap-module:nth-child(6)>span{background:#F0EAFE!important;color:#6940C9!important;border-color:#DDD1F8!important}.ap-view-dashboard .ap-module:nth-child(7)>span{background:#FFF2E5!important;color:#E57B12!important;border-color:#F6D9BC!important}.ap-view-dashboard .ap-dashboard-footer{display:flex;justify-content:space-between;margin-top:20px!important;padding-top:16px!important;border-top:1px solid var(--ap-line)!important;color:#8494A2!important;font-size:8px!important;letter-spacing:.14em!important}
@media(max-width:1100px){.ap-staff-sidebar{width:230px}.ap-staff-workspace{width:calc(100% - 230px);margin-left:230px}.ap-view-dashboard .ap-dashboard{padding-left:28px!important;padding-right:28px!important}.ap-topbar-search{width:280px}.ap-user-chip{min-width:auto}.ap-user-chip>div:last-child{display:none}}@media(max-width:780px){.ap-staff-sidebar{transform:translateX(-100%);transition:.25s ease}.ap-staff-sidebar.is-open{transform:translateX(0)}.ap-staff-workspace{width:100%;margin-left:0}.ap-sidebar-toggle{display:block}.ap-staff-topbar{padding:0 18px}.ap-topbar-search{display:none}.ap-topbar-right{gap:10px}.ap-topbar-logout{padding:0 12px}.ap-view-dashboard .ap-dashboard{padding:28px 18px!important}.ap-view-dashboard .ap-dashboard-header h1{font-size:38px!important}.ap-view-dashboard .ap-dashboard-header:after{display:none}.ap-view-dashboard .ap-modules{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(max-width:520px){.ap-view-dashboard .ap-modules{grid-template-columns:1fr!important}.ap-view-dashboard .ap-access-card{align-items:flex-start!important;gap:18px;flex-direction:column}.ap-view-dashboard .ap-active{align-self:flex-end}.ap-user-chip{display:none}.ap-view-dashboard .ap-dashboard-header h1{font-size:34px!important}.ap-view-dashboard .ap-module{min-height:130px!important}}

/* FINAL DASHBOARD LAYOUT GUARD */
.ap-staff-shell{
    width:100%!important;
    min-height:100vh!important;
}
.ap-staff-workspace{
    box-sizing:border-box!important;
    min-width:0!important;
}
.ap-view-dashboard .ap-dashboard{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
}


/* CURRENT ACCESS BLOCK REMOVED — header identity is the single source of staff identity */
.ap-access-card,
.ap-current-access,
.ap-current-access-card,
.ap-access-status{
    display:none!important;
}


/* =========================================================
   UNIFIED STAFF PORTAL CONTENT WIDTH
   Dashboard and every management page share the same
   centered workspace width and horizontal alignment.
   ========================================================= */
.ap-staff-workspace > main,
.ap-staff-workspace > .ap-management,
.ap-staff-workspace > .ap-reports-page,
.ap-staff-workspace > .ap-appointments,
.ap-staff-workspace > .ap-orders-page,
.ap-staff-workspace > .ap-activity-page,
.ap-staff-workspace > .ap-invoice-page,
.ap-staff-workspace > .ap-payment-layout,
.ap-staff-workspace > .ap-customer-profile,
.ap-staff-workspace > .ap-motorcycle-profile{
    width:min(1180px,calc(100% - 56px))!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
}

/* Keep the dashboard's existing vertical rhythm; normalize the
   management pages to the same left/right edges. */
.ap-staff-workspace > .ap-management,
.ap-staff-workspace > .ap-reports-page,
.ap-staff-workspace > .ap-appointments,
.ap-staff-workspace > .ap-orders-page,
.ap-staff-workspace > .ap-activity-page{
    margin-top:40px!important;
}

@media(max-width:900px){
    .ap-staff-workspace > main,
    .ap-staff-workspace > .ap-management,
    .ap-staff-workspace > .ap-reports-page,
    .ap-staff-workspace > .ap-appointments,
    .ap-staff-workspace > .ap-orders-page,
    .ap-staff-workspace > .ap-activity-page,
    .ap-staff-workspace > .ap-invoice-page,
    .ap-staff-workspace > .ap-payment-layout,
    .ap-staff-workspace > .ap-customer-profile,
    .ap-staff-workspace > .ap-motorcycle-profile{
        width:calc(100% - 36px)!important;
    }
}

@media(max-width:620px){
    .ap-staff-workspace > main,
    .ap-staff-workspace > .ap-management,
    .ap-staff-workspace > .ap-reports-page,
    .ap-staff-workspace > .ap-appointments,
    .ap-staff-workspace > .ap-orders-page,
    .ap-staff-workspace > .ap-activity-page,
    .ap-staff-workspace > .ap-invoice-page,
    .ap-staff-workspace > .ap-payment-layout,
    .ap-staff-workspace > .ap-customer-profile,
    .ap-staff-workspace > .ap-motorcycle-profile{
        width:calc(100% - 24px)!important;
    }
}



/* =========================================================
   FINAL CONTENT GRID FIX
   IMPORTANT: management views are rendered INSIDE the
   .ap-dashboard main wrapper, not as direct workspace children.
   Therefore the previous workspace-child selector could not
   affect them.
   ========================================================= */

/* Every management view uses the exact same horizontal content
   boundary as the Dashboard inside the shared main workspace. */
.ap-dashboard > .ap-management,
.ap-dashboard > section.ap-management,
.ap-dashboard > .ap-reports-page,
.ap-dashboard > .ap-appointments,
.ap-dashboard > .ap-orders-page,
.ap-dashboard > .ap-activity-page{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
}

/* Keep the same content padding/edges as the premium dashboard. */
.ap-dashboard{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
}

/* The management header and all page content now span the same
   inner grid as the dashboard cards. */
.ap-dashboard > .ap-management .ap-management-header,
.ap-dashboard > .ap-management .ap-report-period,
.ap-dashboard > .ap-management .ap-report-grid,
.ap-dashboard > .ap-management .ap-report-secondary,
.ap-dashboard > .ap-management .ap-report-panels,
.ap-dashboard > .ap-management .ap-order-list,
.ap-dashboard > .ap-management .ap-order-detail-grid,
.ap-dashboard > .ap-management .ap-activity-table-wrap,
.ap-dashboard > .ap-management .ap-staff-table-wrap,
.ap-dashboard > .ap-management .ap-customer-table-wrap,
.ap-dashboard > .ap-management .ap-customer-search,
.ap-dashboard > .ap-management .ap-motorcycle-search{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
}

/* Forms are intentionally narrower for readability, but the
   page shell itself remains aligned with the dashboard. */
.ap-dashboard > .ap-management .ap-staff-form{
    box-sizing:border-box!important;
}

/* Mobile: preserve the same outer gutter. */
@media(max-width:780px){
    .ap-dashboard{
        padding-left:18px!important;
        padding-right:18px!important;
    }
}
@media(max-width:520px){
    .ap-dashboard{
        padding-left:12px!important;
        padding-right:12px!important;
    }
}



/* =========================================================
   V3 — EXACT DASHBOARD CONTENT EDGE
   The management sections are direct children of
   <main class="ap-dashboard">. External/legacy CSS can apply
   a narrower centered width to .ap-management, so this rule
   deliberately targets the real DOM path with stronger
   specificity and !important.
   ========================================================= */

/* All management/list/detail pages must occupy the full
   dashboard content column — no 1180px centered inner column. */
main.ap-dashboard > section.ap-management,
main.ap-dashboard > section.ap-management.ap-customers-page,
main.ap-dashboard > section.ap-management.ap-customer-detail-page,
main.ap-dashboard > section.ap-management.ap-customer-form-page,
main.ap-dashboard > section.ap-management.ap-service-records-page,
main.ap-dashboard > section.ap-management.ap-service-record-detail-page,
main.ap-dashboard > section.ap-management.ap-service-form-page,
main.ap-dashboard > section.ap-management.ap-orders-page,
main.ap-dashboard > section.ap-management.ap-order-detail-page{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
}

/* Same content edge for report/activity/appointment wrappers
   if those views use their own page class. */
main.ap-dashboard > section.ap-reports-page,
main.ap-dashboard > section.ap-appointments,
main.ap-dashboard > section.ap-orders-page,
main.ap-dashboard > section.ap-activity-page{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
}

/* Do not let any inner page wrapper recreate a centered 1180px
   layout. */
main.ap-dashboard > section.ap-management > .ap-management-header,
main.ap-dashboard > section.ap-management > form,
main.ap-dashboard > section.ap-management > .ap-customer-count,
main.ap-dashboard > section.ap-management > .ap-customer-table-wrap,
main.ap-dashboard > section.ap-management > .ap-order-list,
main.ap-dashboard > section.ap-management > .ap-order-detail-grid,
main.ap-dashboard > section.ap-management > .ap-service-record-list,
main.ap-dashboard > section.ap-management > .ap-service-detail-grid,
main.ap-dashboard > section.ap-management > .ap-service-photo-grid,
main.ap-dashboard > section.ap-management > .ap-customer-detail-grid,
main.ap-dashboard > section.ap-management > .ap-customer-account-info{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    margin-left:0!important;
    margin-right:0!important;
}

/* Preserve a sensible readable width only for individual
   forms/fields where the existing design intentionally uses it. */
main.ap-dashboard > section.ap-management .ap-staff-form{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
}

/* Match the dashboard's horizontal gutter on every desktop
   management page. */
main.ap-dashboard{
    box-sizing:border-box!important;
}

@media(max-width:1100px){
    main.ap-dashboard{
        padding-left:28px!important;
        padding-right:28px!important;
    }
}
@media(max-width:780px){
    main.ap-dashboard{
        padding-left:18px!important;
        padding-right:18px!important;
    }
}
@media(max-width:520px){
    main.ap-dashboard{
        padding-left:12px!important;
        padding-right:12px!important;
    }
}



/* =========================================================
   FINAL CONTENT EDGE FIX
   IMPORTANT:
   .ap-management pages are NOT inside <main class="ap-dashboard">.
   They are siblings after </main>, directly inside
   .ap-staff-workspace.

   Dashboard content edge:
       workspace + 42px  →  content  →  42px  ← workspace
   Therefore management pages use the EXACT same 42px gutter.
   ========================================================= */

.ap-staff-workspace > .ap-management,
.ap-staff-workspace > .ap-reports-page,
.ap-staff-workspace > .ap-appointments,
.ap-staff-workspace > .ap-orders-page,
.ap-staff-workspace > .ap-activity-page,
.ap-staff-workspace > .ap-invoice-page,
.ap-staff-workspace > .ap-payment-layout,
.ap-staff-workspace > .ap-customer-profile,
.ap-staff-workspace > .ap-motorcycle-profile{
    width:calc(100% - 84px)!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:42px!important;
    margin-right:42px!important;
    box-sizing:border-box!important;
}

/* The management class itself already has margin-top:40px.
   Do NOT change that vertical spacing here. */

/* Remove any accidental inner max-width/centering from the
   customer page's primary containers. */
.ap-staff-workspace > .ap-management .ap-management-header,
.ap-staff-workspace > .ap-management .ap-customer-search,
.ap-staff-workspace > .ap-management .ap-customer-table-wrap,
.ap-staff-workspace > .ap-management .ap-customer-count,
.ap-staff-workspace > .ap-management .ap-customer-detail-grid,
.ap-staff-workspace > .ap-management .ap-customer-account-info,
.ap-staff-workspace > .ap-management .ap-service-record-list,
.ap-staff-workspace > .ap-management .ap-service-detail-grid,
.ap-staff-workspace > .ap-management .ap-service-photo-grid,
.ap-staff-workspace > .ap-management .ap-order-list,
.ap-staff-workspace > .ap-management .ap-order-detail-grid,
.ap-staff-workspace > .ap-management .ap-report-period,
.ap-staff-workspace > .ap-management .ap-report-grid,
.ap-staff-workspace > .ap-management .ap-report-secondary,
.ap-staff-workspace > .ap-management .ap-report-panels,
.ap-staff-workspace > .ap-management .ap-activity-table-wrap,
.ap-staff-workspace > .ap-management .ap-staff-table-wrap{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
}

/* Search/table/form controls must fill the same content width. */
.ap-staff-workspace > .ap-management .ap-staff-form{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
}

/* Responsive: use exactly the same horizontal gutters as
   the Dashboard's own responsive padding. */
@media(max-width:1100px){
    .ap-staff-workspace > .ap-management,
    .ap-staff-workspace > .ap-reports-page,
    .ap-staff-workspace > .ap-appointments,
    .ap-staff-workspace > .ap-orders-page,
    .ap-staff-workspace > .ap-activity-page,
    .ap-staff-workspace > .ap-invoice-page,
    .ap-staff-workspace > .ap-payment-layout,
    .ap-staff-workspace > .ap-customer-profile,
    .ap-staff-workspace > .ap-motorcycle-profile{
        width:calc(100% - 56px)!important;
        margin-left:28px!important;
        margin-right:28px!important;
    }
}

@media(max-width:780px){
    .ap-staff-workspace > .ap-management,
    .ap-staff-workspace > .ap-reports-page,
    .ap-staff-workspace > .ap-appointments,
    .ap-staff-workspace > .ap-orders-page,
    .ap-staff-workspace > .ap-activity-page,
    .ap-staff-workspace > .ap-invoice-page,
    .ap-staff-workspace > .ap-payment-layout,
    .ap-staff-workspace > .ap-customer-profile,
    .ap-staff-workspace > .ap-motorcycle-profile{
        width:calc(100% - 36px)!important;
        margin-left:18px!important;
        margin-right:18px!important;
    }
}

@media(max-width:520px){
    .ap-staff-workspace > .ap-management,
    .ap-staff-workspace > .ap-reports-page,
    .ap-staff-workspace > .ap-appointments,
    .ap-staff-workspace > .ap-orders-page,
    .ap-staff-workspace > .ap-activity-page,
    .ap-staff-workspace > .ap-invoice-page,
    .ap-staff-workspace > .ap-payment-layout,
    .ap-staff-workspace > .ap-customer-profile,
    .ap-staff-workspace > .ap-motorcycle-profile{
        width:calc(100% - 24px)!important;
        margin-left:12px!important;
        margin-right:12px!important;
    }
}



/* =========================================================
   MOTORCYCLES — COMPACT PREMIUM GRID
   Based on the supplied premium motorcycle-management design.
   Functional markup/actions remain unchanged.
   ========================================================= */

/* Page header */
.ap-motorcycles-page .ap-management-header{
    margin-bottom:24px!important;
}

.ap-motorcycles-page .ap-management-title{
    font-size:32px!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
}

.ap-motorcycles-page .ap-management-description{
    margin-top:7px!important;
    max-width:760px!important;
}

/* Compact search strip */
.ap-motorcycles-page .ap-motorcycle-search{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:end!important;
    gap:10px!important;
    padding:12px!important;
    margin-bottom:16px!important;
    background:#ffffff!important;
    border:1px solid #d7e2e8!important;
    border-radius:8px!important;
    box-shadow:0 8px 24px rgba(13,31,48,.035)!important;
}

.ap-motorcycles-page .ap-motorcycle-search-field label{
    margin-bottom:6px!important;
    color:#587083!important;
}

.ap-motorcycles-page .ap-motorcycle-search input{
    min-height:40px!important;
    border:1px solid #cbd9e1!important;
    background:#fff!important;
    border-radius:5px!important;
}

.ap-motorcycles-page .ap-motorcycle-search .ap-primary-button,
.ap-motorcycles-page .ap-motorcycle-search .ap-secondary-button{
    min-height:40px!important;
    white-space:nowrap!important;
}

/* Results line */
.ap-motorcycles-page > .ap-customer-count{
    margin:0 0 10px!important;
    color:#557084!important;
}

/* Four compact cards on desktop */
.ap-motorcycles-page .ap-motorcycle-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:stretch!important;
}

/* Card */
.ap-motorcycles-page .ap-motorcycle-card{
    background:#ffffff!important;
    border:1px solid #d6e1e7!important;
    border-radius:8px!important;
    overflow:hidden!important;
    box-shadow:0 7px 22px rgba(13,31,48,.045)!important;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}

.ap-motorcycles-page .ap-motorcycle-card:hover{
    transform:translateY(-2px)!important;
    border-color:#b8dce5!important;
    box-shadow:0 12px 28px rgba(13,31,48,.08)!important;
}

/* Smaller, taller visual area — no stretched/cropped giant image */
.ap-motorcycles-page .ap-motorcycle-card-media{
    height:154px!important;
    background:#f2f6f8!important;
    border-bottom:1px solid #dfe8ed!important;
    padding:8px!important;
    box-sizing:border-box!important;
}

.ap-motorcycles-page .ap-motorcycle-card-media img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    display:block!important;
}

/* Compact body */
.ap-motorcycles-page .ap-motorcycle-card-body{
    padding:13px!important;
}

.ap-motorcycles-page .ap-motorcycle-card-top{
    gap:8px!important;
}

.ap-motorcycles-page .ap-motorcycle-card-title{
    font-size:15px!important;
    line-height:1.2!important;
    font-weight:700!important;
    letter-spacing:-.01em!important;
}

.ap-motorcycles-page .ap-motorcycle-registration{
    margin-top:5px!important;
    font-size:8px!important;
    letter-spacing:.13em!important;
}

.ap-motorcycles-page .ap-motorcycle-id{
    font-size:8px!important;
    white-space:nowrap!important;
}

/* Owner block */
.ap-motorcycles-page .ap-motorcycle-customer{
    margin-top:11px!important;
    padding-top:10px!important;
    font-size:7px!important;
    letter-spacing:.13em!important;
}

.ap-motorcycles-page .ap-motorcycle-customer strong{
    margin-top:5px!important;
    font-size:10px!important;
}

.ap-motorcycles-page .ap-motorcycle-customer small{
    margin-top:3px!important;
    font-size:8px!important;
}

/* Compact specs */
.ap-motorcycles-page .ap-motorcycle-meta{
    margin-top:10px!important;
    border-radius:4px!important;
}

.ap-motorcycles-page .ap-motorcycle-meta span{
    padding:8px!important;
    font-size:7px!important;
    letter-spacing:.07em!important;
}

/* Compact actions */
.ap-motorcycles-page .ap-motorcycle-card-actions{
    gap:6px!important;
    margin-top:10px!important;
}

.ap-motorcycles-page .ap-motorcycle-card-actions .ap-primary-button,
.ap-motorcycles-page .ap-motorcycle-card-actions .ap-secondary-button{
    min-height:38px!important;
    padding:0 10px!important;
    font-size:8px!important;
}

.ap-motorcycles-page .ap-motorcycle-card-actions .ap-secondary-button{
    min-width:52px!important;
}

/* Match premium cyan/navy palette */
.ap-motorcycles-page .ap-primary-button{
    background:#6FEFFF!important;
    border-color:#6FEFFF!important;
    color:#0A0F2C!important;
}

.ap-motorcycles-page .ap-primary-button:hover{
    background:#00BFD8!important;
    border-color:#00BFD8!important;
    color:#ffffff!important;
}

.ap-motorcycles-page .ap-secondary-button{
    background:#ffffff!important;
    border-color:#cbd9e1!important;
    color:#111A3D!important;
}

/* 3 columns */
@media(max-width:1250px){
    .ap-motorcycles-page .ap-motorcycle-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}

/* 2 columns */
@media(max-width:900px){
    .ap-motorcycles-page .ap-motorcycle-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .ap-motorcycles-page .ap-motorcycle-card-media{
        height:170px!important;
    }
}

/* Mobile */
@media(max-width:600px){
    .ap-motorcycles-page .ap-motorcycle-search{
        grid-template-columns:1fr!important;
    }

    .ap-motorcycles-page .ap-motorcycle-grid{
        grid-template-columns:1fr!important;
    }

    .ap-motorcycles-page .ap-motorcycle-card-media{
        height:190px!important;
    }
}



/* =========================================================
   MOTORCYCLES FINAL — RESTORE GLOBAL CONTENT EDGE
   The compact card redesign is kept. Only the page gutter is
   corrected so Motorcycles uses the exact same content edge
   as Dashboard and the other Staff Portal views.
   ========================================================= */

.ap-staff-workspace > main.ap-dashboard{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:38px 42px 34px!important;
    box-sizing:border-box!important;
}

.ap-staff-workspace > main.ap-dashboard > .ap-management,
.ap-staff-workspace > main.ap-dashboard > .ap-management.ap-motorcycles-page,
.ap-staff-workspace > main.ap-dashboard > .ap-motorcycles-page{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
}

/* Never let an old centered 1180px wrapper appear inside Motorcycles. */
.ap-staff-workspace > main.ap-dashboard .ap-motorcycles-page,
.ap-staff-workspace > main.ap-dashboard .ap-motorcycle-grid{
    max-width:none!important;
}

@media(max-width:1100px){
    .ap-staff-workspace > main.ap-dashboard{
        padding-left:28px!important;
        padding-right:28px!important;
    }
}

@media(max-width:780px){
    .ap-staff-workspace > main.ap-dashboard{
        padding:28px 18px 28px!important;
    }
}

@media(max-width:520px){
    .ap-staff-workspace > main.ap-dashboard{
        padding:24px 12px 24px!important;
    }
}



/* STAFF PORTAL — READABILITY PASS */
html{font-size:16px!important}
body{font-size:15px!important;line-height:1.55!important;color:#24364a!important}

/* Sidebar + top header */
.ap-staff-sidebar{font-size:14px!important}
.ap-staff-sidebar a{font-size:13px!important;line-height:1.35!important}
.ap-staff-sidebar .ap-sidebar-brand,
.ap-staff-sidebar .ap-sidebar-footer{font-size:12px!important}
.ap-staff-topbar{font-size:14px!important}
.ap-staff-topbar input,
.ap-staff-topbar button,
.ap-staff-topbar a{font-size:13px!important}
.ap-staff-topbar .ap-staff-name{font-size:13px!important;font-weight:700!important}
.ap-staff-topbar .ap-staff-role{font-size:11px!important}

/* Page typography */
.ap-management-title{font-size:34px!important;line-height:1.12!important}
.ap-management-description{font-size:14px!important;line-height:1.55!important}
.ap-management-eyebrow,
.ap-dashboard-eyebrow,
.ap-section-label{font-size:10px!important;letter-spacing:.16em!important}

/* Controls */
.ap-dashboard input,
.ap-dashboard select,
.ap-dashboard textarea{font-size:14px!important;line-height:1.4!important}
.ap-dashboard input::placeholder,
.ap-dashboard textarea::placeholder{font-size:13px!important}
.ap-dashboard label{font-size:11px!important;line-height:1.35!important}
.ap-dashboard button,
.ap-dashboard .ap-primary-button,
.ap-dashboard .ap-secondary-button,
.ap-dashboard .ap-logout,
.ap-dashboard input[type="submit"],
.ap-dashboard input[type="button"]{font-size:12px!important}

/* Tables / records */
.ap-dashboard table th{font-size:10px!important;line-height:1.35!important;letter-spacing:.10em!important}
.ap-dashboard table td{font-size:13px!important;line-height:1.45!important}
.ap-dashboard .ap-appointment-card,
.ap-dashboard .ap-service-record-card,
.ap-dashboard .ap-order-card{font-size:14px!important}
.ap-dashboard .ap-appointment-card p,
.ap-dashboard .ap-service-record-card p,
.ap-dashboard .ap-order-card p{font-size:13px!important;line-height:1.5!important}
.ap-dashboard .ap-appointment-card h3,
.ap-dashboard .ap-service-record-card h3,
.ap-dashboard .ap-order-card h3{font-size:18px!important;line-height:1.25!important}
.ap-dashboard .ap-appointment-card .ap-booking-id{font-size:11px!important}

/* Stats */
.ap-dashboard .ap-stat-label{font-size:10px!important;letter-spacing:.12em!important}
.ap-dashboard .ap-stat-value{font-size:30px!important;line-height:1.1!important}

/* Motorcycle cards: typography only, compact sizing preserved */
.ap-motorcycles-page .ap-motorcycle-card-title{font-size:16px!important}
.ap-motorcycles-page .ap-motorcycle-registration{font-size:10px!important}
.ap-motorcycles-page .ap-motorcycle-customer strong{font-size:11px!important}
.ap-motorcycles-page .ap-motorcycle-customer small{font-size:9px!important}
.ap-motorcycles-page .ap-motorcycle-meta span{font-size:8px!important}

/* Mobile */
@media(max-width:780px){
    .ap-management-title{font-size:30px!important}
    .ap-dashboard input,
    .ap-dashboard select,
    .ap-dashboard textarea{font-size:15px!important}
    .ap-dashboard table td{font-size:13px!important}
}



/* =========================================================
   APPOINTMENTS — ACTUAL CARD TYPOGRAPHY FIX
   These are the exact classes used by the appointment cards.
   Strong specificity + !important prevents the legacy dark-theme
   rules from shrinking the text again.
   ========================================================= */

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-card{
    font-size:14px!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-main{
    padding:24px!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-booking{
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:.14em!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-service{
    margin-top:8px!important;
    font-size:20px!important;
    line-height:1.25!important;
    font-weight:600!important;
    color:#111A3D!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-status{
    font-size:10px!important;
    line-height:1.35!important;
    letter-spacing:.12em!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-status span{
    width:6px!important;
    height:6px!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-grid{
    gap:24px!important;
    padding-top:22px!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-grid span{
    margin-bottom:8px!important;
    color:#506579!important;
    font-size:10px!important;
    line-height:1.35!important;
    letter-spacing:.13em!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-grid strong{
    color:#24364a!important;
    font-size:14px!important;
    line-height:1.4!important;
    font-weight:700!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-grid small{
    margin-top:5px!important;
    color:#52697d!important;
    font-size:11px!important;
    line-height:1.45!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-message{
    margin-top:20px!important;
    padding-top:18px!important;
    color:#52697d!important;
    font-size:12px!important;
    line-height:1.65!important;
}

/* Right-side status controls */
main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-actions{
    padding:16px!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-status-form select{
    font-size:13px!important;
    min-height:46px!important;
}

main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-actions .ap-primary-button,
main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-actions .ap-secondary-button{
    font-size:11px!important;
    min-height:48px!important;
}

/* Appointment detail page uses the same readable scale. */
main.ap-dashboard section.ap-management.ap-appointment-detail .ap-detail-lines small,
main.ap-dashboard section.ap-management.ap-appointment-detail .ap-detail-lines label{
    font-size:10px!important;
}

main.ap-dashboard section.ap-management.ap-appointment-detail .ap-detail-lines strong,
main.ap-dashboard section.ap-management.ap-appointment-detail .ap-detail-lines a{
    font-size:14px!important;
}

@media(max-width:780px){
    main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-service{
        font-size:18px!important;
    }

    main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-grid strong{
        font-size:14px!important;
    }

    main.ap-dashboard section.ap-management.ap-appointments .ap-appointment-grid small{
        font-size:11px!important;
    }
}



/* =========================================================
   CUSTOMERS — READABILITY PASS
   Increase the actual Customers table typography and make
   customer names clearly readable. Layout/content width is
   intentionally untouched.
   ========================================================= */

/* Customers table headings */
main.ap-dashboard .ap-customers-table thead th,
main.ap-dashboard .ap-customers-table th{
    font-size:12px!important;
    line-height:1.35!important;
    letter-spacing:.10em!important;
    font-weight:700!important;
    color:#506579!important;
    padding:15px 14px!important;
}

/* Customers table cells */
main.ap-dashboard .ap-customers-table tbody td,
main.ap-dashboard .ap-customers-table td{
    font-size:14px!important;
    line-height:1.5!important;
    color:#34495d!important;
    padding:17px 14px!important;
    vertical-align:middle!important;
}

/* Customer name — dark navy, clearly visible */
main.ap-dashboard .ap-customers-table .ap-customer-name,
main.ap-dashboard .ap-customers-table .ap-customer-name a,
main.ap-dashboard .ap-customers-table td:first-child strong,
main.ap-dashboard .ap-customers-table td:first-child a{
    color:#111A3D!important;
    font-size:16px!important;
    line-height:1.3!important;
    font-weight:700!important;
    opacity:1!important;
}

/* Customer secondary information */
main.ap-dashboard .ap-customers-table td:first-child small,
main.ap-dashboard .ap-customers-table td:first-child .ap-meta,
main.ap-dashboard .ap-customers-table td small{
    color:#5d7183!important;
    font-size:11px!important;
    line-height:1.45!important;
    opacity:1!important;
}

/* Contact information */
main.ap-dashboard .ap-customers-table td:nth-child(2){
    color:#3f566a!important;
    font-size:13px!important;
}

main.ap-dashboard .ap-customers-table td:nth-child(2) small{
    font-size:11px!important;
}

/* Numeric columns */
main.ap-dashboard .ap-customers-table td:nth-child(3),
main.ap-dashboard .ap-customers-table td:nth-child(4),
main.ap-dashboard .ap-customers-table td:nth-child(5){
    color:#111A3D!important;
    font-size:15px!important;
    font-weight:700!important;
}

/* Completed/service secondary count */
main.ap-dashboard .ap-customers-table td:nth-child(4) small,
main.ap-dashboard .ap-customers-table td:nth-child(5) small{
    color:#617587!important;
    font-size:11px!important;
    font-weight:500!important;
}

/* View action */
main.ap-dashboard .ap-customers-table td:last-child .ap-secondary-button,
main.ap-dashboard .ap-customers-table td:last-child button,
main.ap-dashboard .ap-customers-table td:last-child a{
    font-size:11px!important;
    font-weight:700!important;
    color:#111A3D!important;
}

/* Generic fallback for the exact visible table if a version
   of the markup does not carry the .ap-customers-table class. */
main.ap-dashboard .ap-management table thead th{
    font-size:12px!important;
    color:#506579!important;
}

main.ap-dashboard .ap-management table tbody td{
    font-size:14px!important;
    color:#34495d!important;
}

main.ap-dashboard .ap-management table tbody td:first-child strong,
main.ap-dashboard .ap-management table tbody td:first-child a{
    color:#111A3D!important;
    font-size:16px!important;
    font-weight:700!important;
    opacity:1!important;
}

@media(max-width:780px){
    main.ap-dashboard .ap-customers-table thead th,
    main.ap-dashboard .ap-customers-table th{
        font-size:11px!important;
    }

    main.ap-dashboard .ap-customers-table tbody td,
    main.ap-dashboard .ap-customers-table td{
        font-size:13px!important;
        padding:14px 10px!important;
    }

    main.ap-dashboard .ap-customers-table .ap-customer-name,
    main.ap-dashboard .ap-customers-table .ap-customer-name a,
    main.ap-dashboard .ap-customers-table td:first-child strong,
    main.ap-dashboard .ap-customers-table td:first-child a{
        font-size:15px!important;
    }
}



/* FINAL CUSTOMERS TABLE SELECTORS — exact current markup */
main.ap-dashboard .ap-customer-table-wrap{
    background:#ffffff!important;
    border-color:#d5e0e7!important;
}

main.ap-dashboard .ap-customer-table{
    background:#ffffff!important;
}

main.ap-dashboard .ap-customer-table th{
    padding:16px 16px!important;
    color:#506579!important;
    font-size:11px!important;
    line-height:1.4!important;
    letter-spacing:.12em!important;
    font-weight:700!important;
    border-bottom:1px solid #d5e0e7!important;
}

main.ap-dashboard .ap-customer-table td{
    padding:18px 16px!important;
    color:#34495d!important;
    font-size:14px!important;
    line-height:1.5!important;
    border-bottom:1px solid #e1e8ed!important;
    vertical-align:middle!important;
}

/* CUSTOMER NAME: strong dark navy instead of near-white/faded */
main.ap-dashboard .ap-customer-table .ap-customer-name{
    display:block!important;
    color:#111A3D!important;
    font-size:17px!important;
    line-height:1.3!important;
    font-weight:700!important;
    opacity:1!important;
}

main.ap-dashboard .ap-customer-table .ap-customer-meta,
main.ap-dashboard .ap-customer-table .ap-customer-phone,
main.ap-dashboard .ap-customer-table td small{
    display:block!important;
    color:#5b7184!important;
    font-size:11px!important;
    line-height:1.45!important;
    opacity:1!important;
}

main.ap-dashboard .ap-customer-table .ap-customer-email{
    color:#34495d!important;
    font-size:13px!important;
    line-height:1.45!important;
    opacity:1!important;
}

main.ap-dashboard .ap-customer-table td:nth-child(3),
main.ap-dashboard .ap-customer-table td:nth-child(4),
main.ap-dashboard .ap-customer-table td:nth-child(5){
    color:#111A3D!important;
    font-size:16px!important;
    font-weight:700!important;
}

main.ap-dashboard .ap-customer-table td:nth-child(4) small{
    color:#62778a!important;
    font-size:11px!important;
    font-weight:500!important;
}

main.ap-dashboard .ap-customer-table td:last-child .ap-secondary-button,
main.ap-dashboard .ap-customer-table td:last-child button,
main.ap-dashboard .ap-customer-table td:last-child a{
    color:#111A3D!important;
    font-size:11px!important;
    font-weight:700!important;
}

@media(max-width:780px){
    main.ap-dashboard .ap-customer-table th{
        font-size:10px!important;
    }

    main.ap-dashboard .ap-customer-table td{
        font-size:13px!important;
        padding:15px 12px!important;
    }

    main.ap-dashboard .ap-customer-table .ap-customer-name{
        font-size:15px!important;
    }
}



/* =========================================================
   CUSTOMER PROFILE — PREMIUM LIGHT UI
   Converts the legacy dark profile blocks into the same
   readable white/natural light system used by the portal.
   Content width/layout is untouched.
   ========================================================= */

main.ap-dashboard > section.ap-management.ap-customer-detail-page{
    color:#24364a!important;
}

/* Profile hero */
main.ap-dashboard .ap-customer-detail-page .ap-customer-profile-head{
    display:flex!important;
    align-items:center!important;
    gap:18px!important;
    padding:22px 24px!important;
    background:#ffffff!important;
    border:1px solid #d5e1e8!important;
    border-radius:8px!important;
    box-shadow:0 8px 24px rgba(13,31,48,.045)!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-avatar{
    width:62px!important;
    height:62px!important;
    flex:0 0 62px!important;
    border:1px solid #b9dce5!important;
    border-radius:8px!important;
    background:#eafaff!important;
    color:#00BFD8!important;
    font-size:22px!important;
    font-weight:700!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-profile-main h3{
    margin:0!important;
    color:#111A3D!important;
    font-size:24px!important;
    line-height:1.25!important;
    font-weight:700!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-profile-main p{
    margin:4px 0 0!important;
    color:#536a7d!important;
    font-size:13px!important;
    line-height:1.45!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-status{
    margin-top:9px!important;
    color:#009b78!important;
    font-size:10px!important;
    letter-spacing:.12em!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-status span{
    width:7px!important;
    height:7px!important;
    background:#00B889!important;
}

/* Edit button */
main.ap-dashboard .ap-customer-detail-page .ap-customer-profile-head .ap-secondary-button{
    margin-left:auto!important;
    color:#111A3D!important;
    background:#ffffff!important;
    border-color:#c8d8e1!important;
    font-size:11px!important;
    font-weight:700!important;
}

/* Stats strip */
main.ap-dashboard .ap-customer-detail-page .ap-customer-stats{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    margin-top:14px!important;
    background:#ffffff!important;
    border:1px solid #d5e1e8!important;
    border-radius:8px!important;
    box-shadow:0 7px 22px rgba(13,31,48,.035)!important;
    overflow:hidden!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-stats>div{
    padding:17px 19px!important;
    background:#ffffff!important;
    border-right:1px solid #e1e9ee!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-stats>div:last-child{
    border-right:0!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-stats span{
    color:#6a8091!important;
    font-size:10px!important;
    letter-spacing:.12em!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-stats strong{
    margin-top:7px!important;
    color:#111A3D!important;
    font-size:29px!important;
    line-height:1.1!important;
    font-weight:700!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-stats small{
    margin-top:5px!important;
    color:#657a8c!important;
    font-size:10px!important;
    letter-spacing:.10em!important;
}

/* Main profile panels */
main.ap-dashboard .ap-customer-detail-page .ap-customer-detail-grid{
    gap:14px!important;
    margin-top:14px!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-panel{
    background:#ffffff!important;
    border:1px solid #d5e1e8!important;
    border-radius:8px!important;
    box-shadow:0 7px 22px rgba(13,31,48,.035)!important;
    overflow:hidden!important;
}

/* Panel headings */
main.ap-dashboard .ap-customer-detail-page .ap-customer-panel-head{
    padding:14px 17px!important;
    background:#f7fafc!important;
    border-bottom:1px solid #dfe8ed!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-panel-head h3{
    color:#536a7d!important;
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:.13em!important;
    font-weight:700!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-panel-head span{
    color:#00A9C2!important;
    font-size:10px!important;
    letter-spacing:.10em!important;
    font-weight:700!important;
}

/* Motorcycle rows */
main.ap-dashboard .ap-customer-detail-page .ap-customer-bike-row{
    padding:15px 17px!important;
    background:#ffffff!important;
    border-bottom:1px solid #e6edf1!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-bike-row img,
main.ap-dashboard .ap-customer-detail-page .ap-customer-bike-placeholder{
    width:64px!important;
    height:48px!important;
    flex:0 0 64px!important;
    border:1px solid #d8e3e9!important;
    background:#f4f7f9!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-bike-row strong{
    color:#111A3D!important;
    font-size:14px!important;
    line-height:1.35!important;
    font-weight:700!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-bike-row p{
    margin-top:4px!important;
    color:#536a7d!important;
    font-size:11px!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-bike-row small{
    color:#6a8091!important;
    font-size:10px!important;
}

/* Appointment/service rows */
main.ap-dashboard .ap-customer-detail-page .ap-customer-record-row{
    padding:15px 17px!important;
    background:#ffffff!important;
    border-bottom:1px solid #e6edf1!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-record-row strong{
    color:#111A3D!important;
    font-size:14px!important;
    line-height:1.35!important;
    font-weight:700!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-record-row p{
    color:#536a7d!important;
    font-size:11px!important;
    line-height:1.45!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-record-row small{
    color:#6a8091!important;
    font-size:10px!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-service-right>strong{
    color:#111A3D!important;
    font-size:13px!important;
    font-weight:700!important;
}

/* Status badges */
main.ap-dashboard .ap-customer-detail-page .ap-customer-mini-status{
    padding:6px 9px!important;
    border-radius:4px!important;
    background:#f7fafc!important;
    font-size:9px!important;
    letter-spacing:.10em!important;
    font-weight:700!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-mini-completed,
main.ap-dashboard .ap-customer-detail-page .ap-mini-in-progress{
    color:#008d70!important;
    border-color:#bfe7dc!important;
    background:#effbf7!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-mini-confirmed{
    color:#1573a3!important;
    border-color:#c7e4f1!important;
    background:#f0f9fd!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-mini-pending{
    color:#a06b00!important;
    border-color:#ead9ae!important;
    background:#fffaf0!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-mini-cancelled{
    color:#a04747!important;
    border-color:#ebcaca!important;
    background:#fff6f6!important;
}

/* Account information */
main.ap-dashboard .ap-customer-detail-page .ap-customer-account-info{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:1px!important;
    margin-top:14px!important;
    background:#dbe5ea!important;
    border:1px solid #d5e1e8!important;
    border-radius:8px!important;
    overflow:hidden!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-account-info>div{
    padding:15px 16px!important;
    background:#ffffff!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-account-info span{
    margin-bottom:7px!important;
    color:#657b8d!important;
    font-size:10px!important;
    letter-spacing:.11em!important;
    font-weight:700!important;
}

main.ap-dashboard .ap-customer-detail-page .ap-customer-account-info strong{
    color:#24364a!important;
    font-size:13px!important;
    line-height:1.45!important;
    font-weight:600!important;
}

/* Empty states */
main.ap-dashboard .ap-customer-detail-page .ap-empty{
    color:#617587!important;
    background:#ffffff!important;
}

/* Mobile */
@media(max-width:800px){
    main.ap-dashboard .ap-customer-detail-page .ap-customer-stats{
        grid-template-columns:repeat(2,1fr)!important;
    }

    main.ap-dashboard .ap-customer-detail-page .ap-customer-stats>div:nth-child(2){
        border-right:0!important;
    }

    main.ap-dashboard .ap-customer-detail-page .ap-customer-stats>div:nth-child(-n+2){
        border-bottom:1px solid #e1e9ee!important;
    }

    main.ap-dashboard .ap-customer-detail-page .ap-customer-account-info{
        grid-template-columns:repeat(2,1fr)!important;
    }
}

@media(max-width:560px){
    main.ap-dashboard .ap-customer-detail-page .ap-customer-profile-head{
        align-items:flex-start!important;
        flex-wrap:wrap!important;
    }

    main.ap-dashboard .ap-customer-detail-page .ap-customer-profile-head .ap-secondary-button{
        width:100%!important;
        margin-left:0!important;
        justify-content:center!important;
    }

    main.ap-dashboard .ap-customer-detail-page .ap-customer-account-info{
        grid-template-columns:1fr!important;
    }
}



/* =========================================================
   CUSTOMER PROFILE — SCROLLABLE MOTORCYCLE COLLECTION
   Maximum 4 bikes visible; additional bikes scroll inside
   the motorcycle card. Each bike opens its full profile.
   ========================================================= */

.ap-customer-motorcycles-panel .ap-customer-bike-scroll{
    max-height:300px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:thin!important;
    scrollbar-color:#9fb3c0 #eef3f6!important;
    padding:6px!important;
    background:#ffffff!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-scroll::-webkit-scrollbar{
    width:8px!important;
}
.ap-customer-motorcycles-panel .ap-customer-bike-scroll::-webkit-scrollbar-track{
    background:#eef3f6!important;
    border-radius:8px!important;
}
.ap-customer-motorcycles-panel .ap-customer-bike-scroll::-webkit-scrollbar-thumb{
    background:#a8bac5!important;
    border-radius:8px!important;
    border:2px solid #eef3f6!important;
}
.ap-customer-motorcycles-panel .ap-customer-bike-scroll::-webkit-scrollbar-thumb:hover{
    background:#00BFD8!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-row{
    display:flex!important;
    align-items:center!important;
    gap:13px!important;
    min-height:58px!important;
    margin:0 0 7px 0!important;
    padding:8px 10px!important;
    box-sizing:border-box!important;
    background:#ffffff!important;
    border:1px solid #dfe8ed!important;
    border-radius:7px!important;
    text-decoration:none!important;
    color:inherit!important;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-row:last-child{
    margin-bottom:0!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-row:hover{
    transform:translateY(-1px)!important;
    border-color:#9edce6!important;
    background:#fbfeff!important;
    box-shadow:0 5px 16px rgba(17,26,61,.07)!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-row img,
.ap-customer-motorcycles-panel .ap-customer-bike-placeholder{
    width:72px!important;
    height:48px!important;
    flex:0 0 72px!important;
    object-fit:contain!important;
    border:1px solid #dce6eb!important;
    border-radius:5px!important;
    background:#f7fafc!important;
    box-sizing:border-box!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-placeholder{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#78909e!important;
    font-size:8px!important;
    letter-spacing:.12em!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-info{
    min-width:0!important;
    flex:1 1 auto!important;
    display:block!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-info strong{
    display:block!important;
    margin:0!important;
    color:#111A3D!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:700!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-info > span{
    display:block!important;
    margin-top:5px!important;
    color:#60788a!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:.02em!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-info b{
    color:#a6b5be!important;
    font-weight:600!important;
    margin:0 3px!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-arrow{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:#e9f9fc!important;
    color:#00A9C2!important;
    font-size:17px!important;
    line-height:1!important;
    transition:background .18s ease, color .18s ease, transform .18s ease!important;
}

.ap-customer-motorcycles-panel .ap-customer-bike-row:hover .ap-customer-bike-arrow{
    background:#00BFD8!important;
    color:#ffffff!important;
    transform:translateX(2px)!important;
}

@media(max-width:700px){
    .ap-customer-motorcycles-panel .ap-customer-bike-scroll{
        max-height:286px!important;
    }
    .ap-customer-motorcycles-panel .ap-customer-bike-row{
        min-height:55px!important;
        gap:10px!important;
    }
    .ap-customer-motorcycles-panel .ap-customer-bike-row img,
    .ap-customer-motorcycles-panel .ap-customer-bike-placeholder{
        width:62px!important;
        height:44px!important;
        flex-basis:62px!important;
    }
    .ap-customer-motorcycles-panel .ap-customer-bike-info strong{
        font-size:13px!important;
    }
}


/* MOTORCYCLE PROFILE — PREMIUM LIGHT / READABLE (SCOPED) */
.ap-motorcycle-detail-page{color:#111A3D!important}
.ap-motorcycle-detail-page .ap-management-title{color:#111A3D!important;font-size:32px!important;font-weight:800!important;letter-spacing:-.025em!important}
.ap-motorcycle-detail-page .ap-management-description{color:#5D7086!important;font-size:13px!important}

.ap-motorcycle-detail-page .ap-motorcycle-profile-head{
 display:grid!important;grid-template-columns:175px minmax(0,1fr) auto!important;gap:26px!important;align-items:center!important;
 padding:18px!important;background:#fff!important;border:1px solid #D5E1E8!important;border-radius:8px!important;
 box-shadow:0 12px 30px rgba(17,26,61,.06)!important
}
.ap-motorcycle-detail-page .ap-motorcycle-profile-photo{
 width:175px!important;height:138px!important;background:#F5F9FB!important;border:1px solid #D9E5EB!important;
 border-radius:4px!important;color:#718397!important;overflow:hidden!important
}
.ap-motorcycle-detail-page .ap-motorcycle-profile-photo img{width:100%!important;height:100%!important;object-fit:contain!important;background:#F5F9FB!important}
.ap-motorcycle-detail-page .ap-motorcycle-profile-main{min-width:0!important}
.ap-motorcycle-detail-page .ap-motorcycle-profile-main .ap-management-kicker{color:#00BFD8!important;font-size:9px!important;font-weight:800!important;letter-spacing:.18em!important;margin-bottom:9px!important}
.ap-motorcycle-detail-page .ap-motorcycle-profile-main h3{
 margin:0!important;color:#111A3D!important;font-size:31px!important;line-height:1.08!important;font-weight:850!important;letter-spacing:-.025em!important
}
.ap-motorcycle-detail-page .ap-motorcycle-profile-main>p{
 display:inline-flex!important;align-items:center!important;gap:10px!important;margin:13px 0 0!important;padding:8px 13px!important;
 background:#E9FAFD!important;border:1px solid #BCECF3!important;border-radius:5px!important;color:#008CA5!important;
 font-size:17px!important;line-height:1.1!important;font-weight:850!important;letter-spacing:.08em!important
}
.ap-motorcycle-detail-page .ap-motorcycle-profile-main>p:before{
 content:'REGISTRATION NUMBER'!important;color:#557187!important;font-size:8px!important;font-weight:800!important;letter-spacing:.12em!important
}
.ap-motorcycle-detail-page .ap-motorcycle-owner-line{margin-top:13px!important;color:#66798C!important;font-size:9px!important;font-weight:700!important;letter-spacing:.14em!important}
.ap-motorcycle-detail-page .ap-motorcycle-owner-line a{color:#111A3D!important;font-size:12px!important;font-weight:750!important;text-decoration:none!important;margin-left:8px!important}
.ap-motorcycle-detail-page .ap-motorcycle-profile-actions{gap:8px!important}
.ap-motorcycle-detail-page .ap-motorcycle-profile-actions .ap-secondary-button{
 min-height:42px!important;background:#fff!important;border:1px solid #C9D7DF!important;color:#31445A!important;font-size:9px!important
}
.ap-motorcycle-detail-page .ap-motorcycle-profile-actions .ap-secondary-button:hover{border-color:#00BFD8!important;color:#008CA5!important}
.ap-motorcycle-detail-page .ap-motorcycle-profile-actions .ap-danger-button{
 min-height:42px!important;background:#FFF7F7!important;border:1px solid #F0CACA!important;color:#C83D49!important;font-size:9px!important
}

.ap-motorcycle-detail-page .ap-motorcycle-specs{
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;margin-top:14px!important;
 background:#fff!important;border:1px solid #D5E1E8!important;border-radius:7px!important;overflow:hidden!important;
 box-shadow:0 8px 24px rgba(17,26,61,.04)!important
}
.ap-motorcycle-detail-page .ap-motorcycle-specs>div{
 min-width:0!important;padding:17px 18px!important;background:#fff!important;border-right:1px solid #DDE6EC!important
}
.ap-motorcycle-detail-page .ap-motorcycle-specs>div:last-child{border-right:0!important}
.ap-motorcycle-detail-page .ap-motorcycle-specs span{display:block!important;color:#60758A!important;font-size:9px!important;line-height:1.2!important;letter-spacing:.13em!important;font-weight:800!important}
.ap-motorcycle-detail-page .ap-motorcycle-specs strong{display:block!important;margin-top:8px!important;color:#111A3D!important;font-size:14px!important;line-height:1.25!important;font-weight:750!important}

.ap-motorcycle-detail-page .ap-customer-detail-grid{margin-top:14px!important;gap:14px!important}
.ap-motorcycle-detail-page .ap-customer-panel{
 background:#fff!important;border:1px solid #D5E1E8!important;border-radius:7px!important;
 box-shadow:0 8px 24px rgba(17,26,61,.04)!important;overflow:hidden!important
}
.ap-motorcycle-detail-page .ap-customer-panel-head{
 min-height:50px!important;padding:0 17px!important;background:#F7FAFC!important;border-bottom:1px solid #DDE6EC!important
}
.ap-motorcycle-detail-page .ap-customer-panel-head h3{color:#3E5268!important;font-size:10px!important;font-weight:850!important;letter-spacing:.15em!important}
.ap-motorcycle-detail-page .ap-customer-panel-head span{color:#00A6BF!important;font-size:9px!important;font-weight:850!important;letter-spacing:.1em!important}
.ap-motorcycle-detail-page .ap-motorcycle-owner-panel{padding:20px 17px!important}
.ap-motorcycle-detail-page .ap-motorcycle-owner-panel strong{color:#111A3D!important;font-size:17px!important;line-height:1.25!important;font-weight:800!important}
.ap-motorcycle-detail-page .ap-motorcycle-owner-panel span{color:#5E7185!important;font-size:12px!important;line-height:1.4!important;margin-top:7px!important}
.ap-motorcycle-detail-page .ap-motorcycle-owner-panel .ap-secondary-button{margin-top:17px!important;background:#fff!important;color:#31445A!important;border-color:#C9D7DF!important}
.ap-motorcycle-detail-page .ap-customer-record-row{
 min-height:74px!important;padding:14px 17px!important;background:#fff!important;border-bottom:1px solid #E4EBF0!important
}
.ap-motorcycle-detail-page .ap-customer-record-row:last-child{border-bottom:0!important}
.ap-motorcycle-detail-page .ap-customer-record-row strong{color:#111A3D!important;font-size:13px!important;line-height:1.35!important;font-weight:750!important}
.ap-motorcycle-detail-page .ap-customer-record-row p{margin:5px 0 0!important;color:#61758A!important;font-size:10px!important;line-height:1.4!important}
.ap-motorcycle-detail-page .ap-customer-record-row small{margin-top:4px!important;color:#718397!important;font-size:9px!important;line-height:1.4!important}
.ap-motorcycle-detail-page .ap-customer-service-right>strong{color:#111A3D!important;font-size:13px!important;font-weight:800!important}
.ap-motorcycle-detail-page .ap-customer-mini-status{
 padding:6px 9px!important;border-radius:4px!important;background:#fff!important;font-size:8px!important;font-weight:850!important;letter-spacing:.1em!important
}
.ap-motorcycle-detail-page .ap-mini-completed,.ap-motorcycle-detail-page .ap-mini-in-progress{color:#07986F!important;border-color:#BFE9DB!important;background:#F0FBF7!important}
.ap-motorcycle-detail-page .ap-mini-confirmed{color:#087F95!important;border-color:#BCECF3!important;background:#EFFBFD!important}
.ap-motorcycle-detail-page .ap-mini-pending{color:#A16A00!important;border-color:#F0D8A5!important;background:#FFFAEF!important}
.ap-motorcycle-detail-page .ap-mini-cancelled{color:#B83B46!important;border-color:#F0C9CD!important;background:#FFF5F6!important}

@media(max-width:800px){
 .ap-motorcycle-detail-page .ap-motorcycle-profile-head{grid-template-columns:120px minmax(0,1fr)!important;gap:18px!important}
 .ap-motorcycle-detail-page .ap-motorcycle-profile-photo{width:120px!important;height:100px!important}
 .ap-motorcycle-detail-page .ap-motorcycle-profile-main h3{font-size:24px!important}
 .ap-motorcycle-detail-page .ap-motorcycle-profile-main>p{font-size:14px!important;flex-wrap:wrap!important}
 .ap-motorcycle-detail-page .ap-motorcycle-profile-actions{grid-column:1/-1!important;flex-direction:row!important}
 .ap-motorcycle-detail-page .ap-motorcycle-specs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .ap-motorcycle-detail-page .ap-motorcycle-specs>div:nth-child(2){border-right:0!important}
 .ap-motorcycle-detail-page .ap-motorcycle-specs>div:nth-child(-n+2){border-bottom:1px solid #DDE6EC!important}
}
@media(max-width:520px){
 .ap-motorcycle-detail-page .ap-motorcycle-profile-head{grid-template-columns:1fr!important}
 .ap-motorcycle-detail-page .ap-motorcycle-profile-photo{width:100%!important;height:170px!important}
 .ap-motorcycle-detail-page .ap-motorcycle-profile-actions{grid-column:auto!important}
 .ap-motorcycle-detail-page .ap-motorcycle-profile-main>p{width:100%!important;box-sizing:border-box!important}
 .ap-motorcycle-detail-page .ap-motorcycle-specs{grid-template-columns:1fr!important}
 .ap-motorcycle-detail-page .ap-motorcycle-specs>div{border-right:0!important;border-bottom:1px solid #DDE6EC!important}
 .ap-motorcycle-detail-page .ap-motorcycle-specs>div:last-child{border-bottom:0!important}
}



/* =========================================================
   SERVICE RECORD DETAIL — FINAL LIGHT THEME
   Scoped only to the Service Record detail page.
   Must override legacy dark service-record rules.
   ========================================================= */
main.ap-dashboard > section.ap-management.ap-service-record-detail-page{
    color:#162536!important;
}

main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-management-header{
    color:#162536!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-management-title{
    color:#162536!important;
    font-size:32px!important;
    font-weight:800!important;
    letter-spacing:-.025em!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-management-description{
    color:#5d7186!important;
    font-size:13px!important;
}

/* Main record hero */
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-hero{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:24px!important;
    padding:28px!important;
    margin-bottom:12px!important;
    background:#ffffff!important;
    border:1px solid #d5e1e8!important;
    border-radius:7px!important;
    box-shadow:0 10px 28px rgba(17,26,61,.055)!important;
    color:#162536!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-hero h3{
    margin:8px 0!important;
    color:#162536!important;
    font-size:29px!important;
    line-height:1.12!important;
    font-weight:800!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-hero p{
    margin:0!important;
    color:#60758a!important;
    font-size:12px!important;
    line-height:1.5!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-hero > div:first-child > span{
    color:#00a6bf!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.16em!important;
}

/* Hero buttons/status */
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-actions{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-actions .ap-secondary-button{
    background:#ffffff!important;
    color:#31465b!important;
    border:1px solid #c8d6df!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-actions .ap-danger-button{
    background:#fff7f7!important;
    color:#c23d48!important;
    border:1px solid #efc8cc!important;
}

/* Overview + Billing cards */
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-grid .ap-customer-panel{
    min-width:0!important;
    background:#ffffff!important;
    border:1px solid #d5e1e8!important;
    border-radius:7px!important;
    color:#162536!important;
    box-shadow:0 8px 22px rgba(17,26,61,.04)!important;
    overflow:hidden!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-customer-panel-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:50px!important;
    padding:0 17px!important;
    background:#f7fafc!important;
    border-bottom:1px solid #dfe7ec!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-customer-panel-head h3{
    margin:0!important;
    color:#3e5268!important;
    font-size:10px!important;
    line-height:1.2!important;
    font-weight:850!important;
    letter-spacing:.15em!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-customer-panel-head span{
    color:#00a6bf!important;
    font-size:9px!important;
    font-weight:850!important;
    letter-spacing:.1em!important;
}

/* Detail fields */
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-detail-lines{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    background:#ffffff!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-detail-lines > div{
    min-width:0!important;
    padding:15px 17px!important;
    background:#ffffff!important;
    border-top:1px solid #e4ebef!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-detail-lines > div:nth-child(-n+2){
    border-top:0!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-detail-lines small{
    display:block!important;
    margin-bottom:6px!important;
    color:#708296!important;
    font-size:8px!important;
    line-height:1.3!important;
    font-weight:800!important;
    letter-spacing:.14em!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-detail-lines strong{
    display:block!important;
    color:#162536!important;
    font-size:13px!important;
    line-height:1.4!important;
    font-weight:700!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-detail-lines a{
    color:#008ca5!important;
    font-weight:800!important;
    text-decoration:none!important;
}

/* Work detail sections */
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-text{
    margin-top:10px!important;
    padding:0!important;
    background:#ffffff!important;
    border:1px solid #d5e1e8!important;
    border-radius:7px!important;
    color:#162536!important;
    box-shadow:0 8px 22px rgba(17,26,61,.035)!important;
    overflow:hidden!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-text .ap-customer-panel-head{
    margin:0!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-text > div:last-child{
    min-height:54px!important;
    padding:17px 20px!important;
    background:#ffffff!important;
    color:#43576b!important;
    font-size:13px!important;
    line-height:1.75!important;
    font-weight:400!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-text .ap-muted{
    color:#8797a5!important;
}

/* Photos */
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-photo-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    margin-top:10px!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-photo-grid .ap-customer-panel{
    background:#ffffff!important;
    border:1px solid #d5e1e8!important;
    color:#162536!important;
    border-radius:7px!important;
    overflow:hidden!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-photo-gallery{
    padding:12px!important;
    background:#ffffff!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-photo-gallery a{
    background:#f3f7f9!important;
    border:1px solid #d9e4ea!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-photo-gallery .ap-empty,
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-empty{
    color:#708296!important;
    background:#ffffff!important;
}

/* Status badges */
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-customer-mini-status{
    background:#ffffff!important;
    font-weight:850!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-mini-completed,
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-mini-in-progress{
    color:#078e69!important;
    border-color:#bfe8dc!important;
    background:#f0fbf7!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-mini-confirmed{
    color:#087f95!important;
    border-color:#bcecf3!important;
    background:#effbfd!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-mini-pending{
    color:#a16a00!important;
    border-color:#f0d8a5!important;
    background:#fffaef!important;
}
main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-mini-cancelled{
    color:#b83b46!important;
    border-color:#f0c9cd!important;
    background:#fff5f6!important;
}

@media(max-width:800px){
    main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-hero{
        flex-direction:column!important;
        align-items:flex-start!important;
    }
    main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-detail-grid,
    main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-service-photo-grid{
        grid-template-columns:1fr!important;
    }
    main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-detail-lines{
        grid-template-columns:1fr!important;
    }
    main.ap-dashboard > section.ap-management.ap-service-record-detail-page .ap-detail-lines > div:nth-child(2){
        border-top:1px solid #e4ebef!important;
    }
}




/* ============================================================
   STAFF PORTAL — STEP 3 ESTIMATE → BILLING v4.3.2
   ============================================================ */

.ap-sr-billing-builder-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}

.ap-sr-billing-builder-head > div {
    min-width: 0 !important;
}

.ap-sr-estimate-import-badge,
.ap-sr-final-billing-badge {
    min-height: 27px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
}

.ap-sr-estimate-import-badge {
    border: 1px solid #A9E1E9 !important;
    background: #EEFBFD !important;
    color: #087D91 !important;
}

.ap-sr-final-billing-badge {
    border: 1px solid #B7DDCF !important;
    background: #F0FAF6 !important;
    color: #17775F !important;
}

.ap-sr-estimate-import-note {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: start !important;
    margin: 0 0 14px !important;
    padding: 12px 13px !important;
    border: 1px solid #BFE7EC !important;
    border-left: 3px solid #2BCADF !important;
    border-radius: 8px !important;
    background:
        linear-gradient(
            135deg,
            #F2FCFD,
            #FFFFFF
        ) !important;
}

.ap-sr-estimate-import-note > i {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #BDE5EB !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #078DA3 !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

.ap-sr-estimate-import-note span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
}

.ap-sr-estimate-import-note strong {
    display: block !important;
    margin-top: 4px !important;
    color: #284457 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 850 !important;
}

.ap-sr-estimate-import-note p {
    margin: 4px 0 0 !important;
    color: #7C8E99 !important;
    font-size: 9px !important;
    line-height: 1.55 !important;
}

/*
 * Billing rows remain the existing editable builder:
 * category, description, qty and price can be edited in place;
 * × removes a row; + ADD BILLING ITEM adds another row.
 */
.ap-sr-billing-builder .ap-billing-row {
    background: #FFFFFF !important;
}

.ap-sr-billing-builder .ap-billing-row:focus-within {
    border-color: #34C9DC !important;
    box-shadow:
        0 0 0 2px rgba(52, 201, 220, .06) !important;
}

@media (max-width: 700px) {
    .ap-sr-billing-builder-head {
        flex-direction: column !important;
    }

    .ap-sr-estimate-import-badge,
    .ap-sr-final-billing-badge {
        align-self: flex-start !important;
    }
}



/* ============================================================
   STAFF PORTAL — STEP 1 ESTIMATE ACTIONS v4.3.1
   ============================================================ */

.ap-sr-estimate-action-bar {
    display: grid !important;
    grid-template-columns:
        auto
        minmax(260px, 1fr)
        auto !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 14px 15px !important;
    border: 1px solid #D6E4E9 !important;
    border-radius: 9px !important;
    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F4FBFC
        ) !important;
    box-shadow:
        0 8px 22px rgba(20, 55, 72, .045) !important;
}

.ap-sr-estimate-action-copy {
    min-width: 0 !important;
}

.ap-sr-estimate-action-copy > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .11em !important;
}

.ap-sr-estimate-action-copy > strong {
    display: block !important;
    margin-top: 4px !important;
    color: #284457 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 850 !important;
}

.ap-sr-estimate-action-copy > small {
    display: block !important;
    margin-top: 4px !important;
    color: #81929C !important;
    font-size: 9px !important;
    line-height: 1.55 !important;
}

.ap-sr-estimate-action-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.ap-sr-estimate-save-button,
.ap-sr-estimate-next {
    min-height: 42px !important;
    min-width: 148px !important;
    justify-content: center !important;
}

.ap-sr-estimate-next {
    border-color: #AFCBD4 !important;
    background: #FFFFFF !important;
    color: #31586A !important;
}

.ap-sr-estimate-next:not(.is-disabled):hover {
    border-color: #29C7DB !important;
    color: #087F95 !important;
}

.ap-sr-estimate-next.is-disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    border-color: #E0E7EA !important;
    background: #F4F7F8 !important;
    color: #A8B4BA !important;
    opacity: .72 !important;
}

.ap-sr-estimate-next.is-unsaved {
    cursor: not-allowed !important;
    pointer-events: none !important;
    border-color: #E7D5AA !important;
    background: #FFF9EC !important;
    color: #A37A27 !important;
}

.ap-sr-estimate-action-copy.is-unsaved > strong {
    color: #956A18 !important;
}

@media (max-width: 900px) {
    .ap-sr-estimate-action-bar {
        grid-template-columns:
            auto
            minmax(0, 1fr) !important;
    }

    .ap-sr-estimate-action-buttons {
        grid-column: 1 / -1 !important;
        justify-content: flex-end !important;
    }
}

@media (max-width: 620px) {
    .ap-sr-estimate-action-bar {
        grid-template-columns: 1fr !important;
    }

    .ap-sr-estimate-action-buttons {
        grid-column: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .ap-sr-estimate-save-button,
    .ap-sr-estimate-next,
    .ap-sr-estimate-action-bar > .ap-secondary-button {
        width: 100% !important;
        justify-content: center !important;
    }
}



/* ============================================================
   STAFF PORTAL — SERVICE RECORDS PREMIUM LIST v4.3.0
   List page only. No lifecycle/payment behavior changes.
   ============================================================ */

main.ap-dashboard
> section.ap-service-records-premium-v430 {
    color: #183044 !important;
}

/* ------------------------------------------------------------
   PAGE HEADER
   ------------------------------------------------------------ */

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-list-header {
    align-items: flex-end !important;
    margin-bottom: 22px !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-management-kicker {
    color: #078DA3 !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-management-title {
    color: #172C3F !important;
    font-size: 32px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: -.025em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-management-description {
    max-width: 720px !important;
    color: #687D8D !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-add-record {
    min-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid #25C7DB !important;
    background: #62E2F1 !important;
    color: #082A33 !important;
    box-shadow:
        0 10px 24px rgba(31, 191, 211, .14) !important;
}

/* ------------------------------------------------------------
   KPI CARDS
   ------------------------------------------------------------ */

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-kpi {
    position: relative !important;
    min-height: 128px !important;
    overflow: hidden !important;
    padding: 18px 18px 16px !important;
    border: 1px solid #D6E3E9 !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FBFC
        ) !important;
    box-shadow:
        0 9px 25px rgba(24, 52, 70, .05) !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-kpi::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 54px !important;
    height: 3px !important;
    background: #38D2E5 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-kpi > span {
    display: block !important;
    margin: 0 0 11px !important;
    color: #078DA3 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-kpi > strong {
    display: block !important;
    color: #142D40 !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    letter-spacing: -.025em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-kpi > small {
    display: block !important;
    margin-top: 9px !important;
    color: #506B7B !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-kpi > p {
    margin: 6px 0 0 !important;
    color: #8798A3 !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-kpi-running {
    border-color: #B8E8EE !important;
    background:
        linear-gradient(
            145deg,
            #F2FCFD,
            #FFFFFF
        ) !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-kpi-completed::after {
    background: #44B994 !important;
}

/* ------------------------------------------------------------
   SEARCH / FILTER
   ------------------------------------------------------------ */

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-search-panel {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        220px
        auto
        auto !important;
    gap: 10px !important;
    align-items: end !important;
    margin: 0 0 15px !important;
    padding: 15px !important;
    border: 1px solid #D7E3E9 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 8px 22px rgba(24, 52, 70, .04) !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-search-panel label {
    color: #536D7D !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-search-panel input,
main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-search-panel select {
    min-height: 42px !important;
    border: 1px solid #C9D8DF !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    color: #243D50 !important;
    font-size: 11px !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-search-panel input:focus,
main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-search-panel select:focus {
    outline: none !important;
    border-color: #36C7DA !important;
    box-shadow:
        0 0 0 3px rgba(54, 199, 218, .08) !important;
}

/* ------------------------------------------------------------
   RESULT HEADING
   ------------------------------------------------------------ */

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-results-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin: 0 0 10px !important;
    padding: 0 2px !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-results-head span {
    display: block !important;
    color: #81939E !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-results-head strong {
    display: block !important;
    margin-top: 3px !important;
    color: #284358 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-results-head small {
    color: #91A0A9 !important;
    font-size: 8px !important;
    font-weight: 700 !important;
}

/* ------------------------------------------------------------
   PREMIUM RECORD CARD
   ------------------------------------------------------------ */

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-premium-list {
    display: grid !important;
    gap: 12px !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-premium-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 410px) !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid #D5E2E8 !important;
    border-radius: 11px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 10px 28px rgba(23, 54, 72, .055) !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-premium-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 3px !important;
    background: #2BCADF !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-main {
    min-width: 0 !important;
    padding: 19px 22px 18px 24px !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-topline {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-service-record-kicker {
    margin: 0 !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    line-height: 1.5 !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-service-record-kicker > span {
    color: #A1B0B8 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-premium-card h3 {
    margin: 10px 0 5px !important;
    color: #172D40 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    letter-spacing: -.015em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-customer {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 0 !important;
    color: #5C7180 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-customer strong {
    color: #3B5466 !important;
    font-weight: 800 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-meta {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
    margin-top: 15px !important;
    border: 1px solid #E0E9ED !important;
    border-radius: 7px !important;
    background: #E0E9ED !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-meta > div {
    min-width: 0 !important;
    padding: 9px 11px !important;
    background: #FBFDFE !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-meta > div + div {
    border-left: 1px solid #E0E9ED !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-meta span {
    display: block !important;
    color: #8A9AA4 !important;
    font-size: 7px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-meta strong {
    display: block !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: #425C6D !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ------------------------------------------------------------
   LIFECYCLE BADGE — HIGH READABILITY
   ------------------------------------------------------------ */

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-lifecycle-badge {
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    padding: 0 10px !important;
    border: 1px solid #AFE1E8 !important;
    border-radius: 999px !important;
    background: #EFFBFD !important;
    color: #087F95 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    white-space: nowrap !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-lifecycle-badge > i {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow:
        0 0 0 4px rgba(8, 127, 149, .07) !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-state-estimate_created {
    border-color: #E9D49D !important;
    background: #FFF9E9 !important;
    color: #956616 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-state-estimate_approved {
    border-color: #BBDDEA !important;
    background: #F1F9FC !important;
    color: #28748F !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-state-advance_received {
    border-color: #AEE3D7 !important;
    background: #EEFBF7 !important;
    color: #11836B !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-state-work_running {
    min-height: 30px !important;
    border-color: #67D6E4 !important;
    background:
        linear-gradient(
            135deg,
            #E8FBFD,
            #F7FEFF
        ) !important;
    color: #006F82 !important;
    font-size: 10px !important;
    box-shadow:
        0 0 0 3px rgba(43, 202, 223, .07),
        0 6px 15px rgba(43, 202, 223, .08) !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-state-work_completed {
    border-color: #B5E3D3 !important;
    background: #F0FAF6 !important;
    color: #1C7D62 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-state-invoice_created {
    border-color: #C9D7ED !important;
    background: #F4F7FC !important;
    color: #4F6893 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-state-full_paid {
    border-color: #9EDBC6 !important;
    background: #EAF9F3 !important;
    color: #087A5A !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-state-delivered {
    border-color: #BCD2E6 !important;
    background: #F1F6FB !important;
    color: #365C7F !important;
}

/* ------------------------------------------------------------
   COMMERCIAL / PAYMENT SIDE
   ------------------------------------------------------------ */

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-commercial {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
    border-left: 1px solid #DFE8EC !important;
    background:
        linear-gradient(
            145deg,
            #F7FAFC,
            #FFFFFF
        ) !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-payment-head {
    display: flex !important;
    justify-content: flex-end !important;
    min-height: 27px !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-payment-badge {
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 9px !important;
    border: 1px solid #D8E2E7 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #687C89 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-payment-paid {
    border-color: #A6DFC9 !important;
    background: #EDFAF4 !important;
    color: #087A5A !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-payment-partial,
main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-payment-partially-paid {
    border-color: #E6CF9D !important;
    background: #FFF9EC !important;
    color: #916312 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-payment-pending,
main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-payment-unpaid {
    border-color: #D9E2E7 !important;
    background: #F9FBFC !important;
    color: #6E818D !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-money-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
    overflow: hidden !important;
    margin-top: 11px !important;
    border: 1px solid #DDE7EB !important;
    border-radius: 7px !important;
    background: #DDE7EB !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-money-grid > div {
    min-width: 0 !important;
    padding: 9px 10px !important;
    background: #FFFFFF !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-money-grid span {
    display: block !important;
    color: #899AA4 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-money-grid strong {
    display: block !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: #385267 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-due-cell strong {
    color: #078DA3 !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin-top: auto !important;
    padding-top: 13px !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-actions .ap-primary-button,
main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-actions .ap-secondary-button {
    min-height: 38px !important;
    padding: 0 13px !important;
    white-space: nowrap !important;
}

main.ap-dashboard
> section.ap-service-records-premium-v430
.ap-sr-card-actions .ap-secondary-button {
    border-color: #CFDCE2 !important;
    background: #FFFFFF !important;
    color: #415B6B !important;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1120px) {
    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-premium-card {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 360px) !important;
    }
}

@media (max-width: 900px) {
    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-search-panel {
        grid-template-columns: 1fr 1fr !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-search-panel
    .ap-service-search-field:first-of-type {
        grid-column: 1 / -1 !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-premium-card {
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-card-commercial {
        border-top: 1px solid #DFE8EC !important;
        border-left: 0 !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-payment-head {
        justify-content: flex-start !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-card-actions {
        justify-content: flex-start !important;
    }
}

@media (max-width: 620px) {
    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-list-header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-add-record {
        width: 100% !important;
        justify-content: center !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-kpi-grid,
    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-search-panel {
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-search-panel
    .ap-service-search-field:first-of-type {
        grid-column: auto !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-results-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-card-topline {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-card-meta,
    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-money-grid {
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-card-meta > div + div {
        border-top: 1px solid #E0E9ED !important;
        border-left: 0 !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-card-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-card-actions .ap-primary-button,
    main.ap-dashboard
    > section.ap-service-records-premium-v430
    .ap-sr-card-actions .ap-secondary-button {
        width: 100% !important;
        justify-content: center !important;
    }
}



/* ============================================================
   STAFF PORTAL v2.2.2
   FINAL APPOINTMENT UI OVERRIDE
   Must stay AFTER legacy Staff Portal appointment CSS.
   ============================================================ */

/* ------------------------------------------------------------
   APPOINTMENTS LIST
   ------------------------------------------------------------ */

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-list {
    display: grid !important;
    gap: 16px !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px !important;
    overflow: hidden !important;
    border: 1px solid #D7E3EA !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    color: #16263A !important;
    box-shadow:
        0 10px 28px rgba(22, 49, 70, .05) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 4px !important;
    background:
        linear-gradient(
            180deg,
            #55E7F5 0%,
            #10BBD2 100%
        ) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-main {
    min-width: 0 !important;
    padding: 24px 26px 24px 29px !important;
    background: #FFFFFF !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #E6EDF2 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-booking {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    color: #078DA4 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
    letter-spacing: .12em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-source {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border: 1px solid #BDEAF0 !important;
    border-radius: 999px !important;
    background: #EDFBFD !important;
    color: #07879B !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-service {
    margin-top: 9px !important;
    color: #12243A !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
    letter-spacing: -.02em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid #E2E9ED !important;
    border-radius: 999px !important;
    background: #F8FBFC !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: .10em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-status span {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-status-pending {
    border-color: #F0D9A7 !important;
    background: #FFF9ED !important;
    color: #A9781B !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-status-confirmed {
    border-color: #B9EAF1 !important;
    background: #ECFBFD !important;
    color: #078BA0 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-status-in-progress {
    border-color: #CAE2E8 !important;
    background: #F1F8FA !important;
    color: #37788A !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-status-completed {
    border-color: #C9E6D0 !important;
    background: #F1FAF3 !important;
    color: #4E8A5E !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-status-cancelled {
    border-color: #F0CCCC !important;
    background: #FFF5F5 !important;
    color: #A75555 !important;
}

/* Information row */

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-grid {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #E6EDF2 !important;
    border-radius: 8px !important;
    background: #FBFDFF !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-grid > div {
    min-width: 0 !important;
    padding: 15px 17px !important;
    border-right: 1px solid #E6EDF2 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-grid > div:last-child {
    border-right: 0 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-grid span {
    display: block !important;
    margin: 0 0 7px !important;
    color: #728496 !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
    letter-spacing: .12em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-grid strong {
    display: block !important;
    color: #20354A !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 750 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-grid small {
    display: block !important;
    margin-top: 5px !important;
    color: #718394 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
}

/* Customer Request — absolutely no black background */

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-message {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    margin-top: 16px !important;
    padding: 14px 15px !important;
    border: 1px solid #D4EAF0 !important;
    border-left: 3px solid #37D8EB !important;
    border-radius: 8px !important;
    background:
        linear-gradient(
            135deg,
            #F4FCFD 0%,
            #FAFDFE 100%
        ) !important;
    color: #425A6E !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-message-icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 7px !important;
    background: #E7F9FC !important;
    color: #0A9CB3 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-message-copy > span {
    display: block !important;
    margin: 1px 0 5px !important;
    color: #0A8FA5 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
    letter-spacing: .11em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-message-copy p {
    margin: 0 !important;
    color: #425A6E !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
}

/* Workflow panel — replaces black legacy action column */

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-actions {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 20px !important;
    border: 0 !important;
    border-left: 1px solid #DCE7ED !important;
    background:
        linear-gradient(
            180deg,
            #F8FCFD 0%,
            #F0F7F9 100%
        ) !important;
    color: #21374A !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-actions-head {
    padding: 0 0 12px !important;
    margin: 0 0 2px !important;
    border-bottom: 1px solid #DDE9EE !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-actions-head > span {
    display: block !important;
    color: #758696 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    letter-spacing: .12em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-actions-head > strong {
    display: block !important;
    margin-top: 5px !important;
    color: #1D3347 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-status-form {
    display: grid !important;
    gap: 8px !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-status-form select {
    width: 100% !important;
    min-height: 47px !important;
    padding: 0 12px !important;
    border: 1px solid #C8D8E1 !important;
    border-radius: 7px !important;
    outline: none !important;
    background: #FFFFFF !important;
    color: #1E3347 !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-actions
.ap-primary-button {
    width: 100% !important;
    min-height: 47px !important;
    justify-content: space-between !important;
    border: 1px solid #40D5E7 !important;
    border-radius: 7px !important;
    background:
        linear-gradient(
            135deg,
            #62EAF7,
            #43D9E9
        ) !important;
    color: #07303A !important;
    box-shadow:
        0 7px 18px rgba(39, 202, 220, .14) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-actions
.ap-secondary-button {
    width: 100% !important;
    min-height: 45px !important;
    justify-content: center !important;
    border: 1px solid #C8D8E1 !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #2F465A !important;
}

main.ap-dashboard
> section.ap-management.ap-appointments
.ap-appointment-actions
.ap-secondary-button:hover {
    border-color: #73DCE7 !important;
    color: #078DA1 !important;
}

/* ------------------------------------------------------------
   APPOINTMENT DETAIL / VIEW
   ------------------------------------------------------------ */

main.ap-dashboard
> section.ap-management.ap-appointment-detail {
    color: #172A3E !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    overflow: hidden !important;
    min-height: 120px !important;
    padding: 24px 27px 24px 30px !important;
    margin-bottom: 14px !important;
    border: 1px solid #D7E3EA !important;
    border-radius: 10px !important;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(68, 221, 238, .13),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F7FCFD 100%
        ) !important;
    color: #172A3E !important;
    box-shadow:
        0 10px 28px rgba(23, 49, 69, .05) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-header::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 4px !important;
    background:
        linear-gradient(
            180deg,
            #56E7F5,
            #0EB6CE
        ) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-label {
    color: #6E8294 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-source-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    margin-top: 7px !important;
    padding: 0 8px !important;
    border: 1px solid #BDE8EF !important;
    border-radius: 999px !important;
    background: #ECFBFD !important;
    color: #07899E !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-booking {
    margin-top: 9px !important;
    color: #078EA4 !important;
    font-size: 23px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-header
.ap-appointment-status {
    min-height: 29px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #FFF9ED !important;
    color: #A9781B !important;
}

/* Lifecycle rail — fixes raw unstyled numbers/text */

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step {
    position: relative !important;
    min-width: 0 !important;
    min-height: 70px !important;
    display: grid !important;
    grid-template-columns: 31px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 13px !important;
    border: 1px solid #DCE6EC !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #708394 !important;
    box-shadow:
        0 5px 16px rgba(27, 52, 72, .025) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step::before {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    bottom: -1px !important;
    left: -1px !important;
    width: 3px !important;
    border-radius: 8px 0 0 8px !important;
    background: #DCE6EC !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step > i {
    width: 31px !important;
    height: 31px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #D5E1E7 !important;
    border-radius: 6px !important;
    background: #F6F9FB !important;
    color: #8495A3 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    font-style: normal !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step > div > span {
    display: block !important;
    color: #95A3AE !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    letter-spacing: .11em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step > div > strong {
    display: block !important;
    margin-top: 4px !important;
    color: #728494 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step.is-complete {
    border-color: #BDE7EC !important;
    background:
        linear-gradient(
            135deg,
            #F1FBFC,
            #FFFFFF
        ) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step.is-complete::before {
    background: #39D7E9 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step.is-complete > i {
    border-color: #39D7E9 !important;
    background: #39D7E9 !important;
    color: #07313B !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step.is-complete
> div > strong {
    color: #304A5D !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step.is-current {
    border-color: #65D9E6 !important;
    background:
        linear-gradient(
            135deg,
            #EAFBFD,
            #FFFFFF
        ) !important;
    box-shadow:
        0 8px 20px rgba(37, 194, 211, .07) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step.is-current::before {
    background: #0EB6CD !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step.is-current > i {
    border-color: #0EB6CD !important;
    background: #E6FAFC !important;
    color: #07899E !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-step.is-current
> div > strong {
    color: #142D40 !important;
}

/* Cancelled lifecycle */

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress.is-cancelled {
    display: block !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-cancelled {
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 9px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border: 1px solid #EFCFD1 !important;
    border-left: 3px solid #D66C72 !important;
    border-radius: 8px !important;
    background: #FFF7F7 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-cancelled > span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #D66C72 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-cancelled strong {
    display: block !important;
    color: #A35157 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-progress-cancelled small {
    display: block !important;
    margin-top: 4px !important;
    color: #887477 !important;
    font-size: 10px !important;
}

/* Detail information cards */

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-grid {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-card {
    position: relative !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 23px 24px !important;
    border: 1px solid #D9E4EB !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #FCFEFF 100%
        ) !important;
    color: #172A3E !important;
    box-shadow:
        0 8px 23px rgba(24, 50, 70, .035) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 23px !important;
    right: 23px !important;
    height: 2px !important;
    background:
        linear-gradient(
            90deg,
            #4DDDEB,
            rgba(77, 221, 235, 0)
        ) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-card-kicker {
    margin: 0 0 10px !important;
    color: #078DA3 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
    letter-spacing: .12em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-card h3 {
    margin: 0 0 18px !important;
    color: #14283D !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -.015em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-line {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 12px 0 !important;
    border-top: 1px solid #E8EEF2 !important;
    color: #718396 !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-line strong {
    max-width: 68% !important;
    color: #334A5D !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
}

/* Customer message detail card — remove all black */

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-message {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 15px !important;
    border: 1px solid #D4EAF0 !important;
    border-left: 3px solid #39D7E9 !important;
    border-radius: 8px !important;
    background:
        linear-gradient(
            135deg,
            #F2FBFD,
            #FAFDFE
        ) !important;
    color: #425A6E !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-message-mark {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 7px !important;
    background: #E5F9FC !important;
    color: #0A9DB3 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-message p {
    margin: 0 !important;
    color: #425A6E !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}

/* Bottom status control — remove black */

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-status-control {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-top: 14px !important;
    padding: 18px 20px !important;
    border: 1px solid #D8E5EB !important;
    border-left: 3px solid #3DD8EA !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F5FBFC
        ) !important;
    color: #172A3E !important;
    box-shadow:
        0 8px 22px rgba(25, 49, 68, .035) !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-status-control p {
    margin: 0 !important;
    color: #667A8C !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-status-control form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-status-control select {
    min-width: 220px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    border: 1px solid #C9D9E2 !important;
    border-radius: 7px !important;
    outline: none !important;
    background: #FFFFFF !important;
    color: #1E3347 !important;
    font-size: 12px !important;
}

main.ap-dashboard
> section.ap-management.ap-appointment-detail
.ap-detail-status-control
.ap-primary-button {
    min-height: 48px !important;
    border: 1px solid #3DD5E7 !important;
    border-radius: 7px !important;
    background:
        linear-gradient(
            135deg,
            #60E8F5,
            #43D9E9
        ) !important;
    color: #07303A !important;
}

/* Responsive */

@media (max-width: 1100px) {
    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-card {
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-actions {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
        border-left: 0 !important;
        border-top: 1px solid #DCE7ED !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-actions-head {
        grid-column: 1 / -1 !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-status-form {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointment-detail
    .ap-detail-progress {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-grid {
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-grid > div {
        border-right: 0 !important;
        border-bottom: 1px solid #E6EDF2 !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-grid > div:last-child {
        border-bottom: 0 !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-actions {
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-actions-head {
        grid-column: auto !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointments
    .ap-appointment-status-form {
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointment-detail
    .ap-detail-progress,
    main.ap-dashboard
    > section.ap-management.ap-appointment-detail
    .ap-detail-grid {
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointment-detail
    .ap-detail-status-control {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointment-detail
    .ap-detail-status-control form {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    main.ap-dashboard
    > section.ap-management.ap-appointment-detail
    .ap-detail-status-control select {
        min-width: 0 !important;
        width: 100% !important;
    }
}



/* ============================================================
   STAFF PORTAL v2.3.0
   WORKSHOP JOB + MEDIA MANAGER
   ============================================================ */

.ap-workshop-job-manager,
.ap-workshop-media-manager {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #D8E4EA;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow:
        0 8px 24px rgba(24, 49, 69, .035);
}

.ap-workshop-job-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 21px;
    border-bottom: 1px solid #E6EDF2;
    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F6FCFD
        );
}

.ap-workshop-job-head > div > span,
.ap-workshop-subhead > span {
    display: block;
    color: #078FA5;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 850;
    letter-spacing: .12em;
}

.ap-workshop-job-head h3 {
    margin: 5px 0 0;
    color: #13283C;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 750;
}

.ap-workshop-job-head p {
    max-width: 720px;
    margin: 6px 0 0;
    color: #6B7F90;
    font-size: 11px;
    line-height: 1.6;
}

.ap-workshop-job-head > strong {
    flex: 0 0 auto;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #BEE9EF;
    border-radius: 999px;
    background: #ECFBFD;
    color: #07899E;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
}

.ap-workshop-progress-rail {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 7px;
    padding: 16px 18px;
    background: #FBFDFE;
}

.ap-workshop-progress-step {
    position: relative;
    min-width: 0;
    min-height: 57px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #DDE7EC;
    border-radius: 7px;
    background: #FFFFFF;
}

.ap-workshop-progress-step::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 3px;
    border-radius: 7px 0 0 7px;
    background: #DDE7EC;
}

.ap-workshop-progress-step i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #D4E1E7;
    border-radius: 5px;
    background: #F7FAFC;
    color: #899AA8;
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
}

.ap-workshop-progress-step span {
    min-width: 0;
    color: #748696;
    font-size: 9px;
    line-height: 1.25;
    font-weight: 750;
}

.ap-workshop-progress-step.is-complete {
    border-color: #BEE7ED;
    background: #F3FCFD;
}

.ap-workshop-progress-step.is-complete::before {
    background: #39D7E9;
}

.ap-workshop-progress-step.is-complete i {
    border-color: #39D7E9;
    background: #39D7E9;
    color: #07313B;
}

.ap-workshop-progress-step.is-current {
    border-color: #5FD7E5;
    background:
        linear-gradient(
            135deg,
            #E9FBFD,
            #FFFFFF
        );
    box-shadow:
        0 7px 18px rgba(35, 193, 211, .07);
}

.ap-workshop-progress-step.is-current::before {
    background: #0EB5CD;
}

.ap-workshop-progress-step.is-current i {
    border-color: #0EB5CD;
    background: #E5FAFC;
    color: #07899E;
}

.ap-workshop-progress-step.is-current span {
    color: #163247;
}

.ap-workshop-progress-form,
.ap-workshop-media-upload {
    display: grid;
    grid-template-columns:
        minmax(180px, .6fr)
        minmax(0, 1.4fr)
        auto;
    gap: 12px;
    align-items: end;
    padding: 17px 18px;
    border-top: 1px solid #E5EDF1;
}

.ap-workshop-progress-form .is-wide {
    min-width: 0;
}

.ap-workshop-progress-form label,
.ap-workshop-media-upload label {
    display: block;
    margin-bottom: 7px;
    color: #6E8293;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .09em;
}

.ap-workshop-progress-form select,
.ap-workshop-progress-form textarea,
.ap-workshop-media-upload select,
.ap-workshop-media-upload input[type="text"],
.ap-workshop-media-upload input[type="file"] {
    width: 100%;
    border: 1px solid #CBD9E2;
    border-radius: 7px;
    background: #FFFFFF;
    color: #20364A;
    font-size: 12px;
}

.ap-workshop-progress-form select,
.ap-workshop-media-upload select,
.ap-workshop-media-upload input[type="text"] {
    min-height: 46px;
    padding: 0 11px;
}

.ap-workshop-progress-form textarea {
    min-height: 78px;
    padding: 10px 11px;
    resize: vertical;
}

.ap-workshop-progress-form small,
.ap-workshop-media-upload small {
    display: block;
    margin-top: 5px;
    color: #8797A3;
    font-size: 9px;
    line-height: 1.45;
}

.ap-workshop-activity {
    display: grid;
    padding: 0 18px 18px;
}

.ap-workshop-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0 10px;
}

.ap-workshop-activity article {
    position: relative;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #EDF2F5;
}

.ap-workshop-activity article > i {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border: 2px solid #33D4E7;
    border-radius: 50%;
    background: #FFFFFF;
}

.ap-workshop-activity strong {
    color: #2C4357;
    font-size: 10px;
    font-weight: 800;
}

.ap-workshop-activity p {
    margin: 3px 0 0;
    color: #607586;
    font-size: 11px;
    line-height: 1.55;
}

.ap-workshop-activity small {
    display: block;
    margin-top: 4px;
    color: #91A0AB;
    font-size: 9px;
}

.ap-workshop-media-upload {
    grid-template-columns:
        minmax(150px, .45fr)
        minmax(220px, .8fr)
        minmax(220px, 1fr)
        minmax(190px, .7fr)
        auto;
}

.ap-workshop-media-upload input[type="file"] {
    min-height: 46px;
    padding: 8px;
}

.ap-workshop-visibility {
    min-height: 46px;
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 8px 10px;
    border: 1px solid #CFE1E7;
    border-radius: 7px;
    background: #F7FCFD;
    cursor: pointer;
}

.ap-workshop-visibility input {
    flex: 0 0 auto;
}

.ap-workshop-visibility > span {
    color: #07899F;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .05em;
}

.ap-workshop-visibility > span small {
    color: #7A8C9B;
    font-weight: 500;
    letter-spacing: 0;
}

.ap-workshop-media-groups {
    display: grid;
    gap: 12px;
    padding: 0 18px 18px;
}

.ap-workshop-media-groups > section {
    padding-top: 4px;
    border-top: 1px solid #E8EFF3;
}

.ap-workshop-subhead strong {
    color: #6C8292;
    font-size: 10px;
}

.ap-workshop-media-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ap-workshop-media-grid article {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #DCE6EC;
    border-radius: 8px;
    background: #FFFFFF;
}

.ap-workshop-media-preview {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #EAF0F3;
}

.ap-workshop-media-preview a {
    width: 100%;
    height: 100%;
    display: block;
}

.ap-workshop-media-preview img,
.ap-workshop-media-preview video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ap-workshop-media-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
}

.ap-workshop-visibility-badge {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .07em;
}

.ap-workshop-visibility-badge.is-visible {
    border: 1px solid #BDE7ED;
    background: #EDFBFD;
    color: #07899F;
}

.ap-workshop-visibility-badge.is-internal {
    border: 1px solid #E2D7BC;
    background: #FFF9EC;
    color: #9A782A;
}

.ap-workshop-media-meta p {
    margin: 7px 0 0;
    color: #4E6476;
    font-size: 10px;
    line-height: 1.5;
}

.ap-workshop-media-meta small {
    display: block;
    margin-top: 6px;
    color: #8C9CA8;
    font-size: 8px;
}

.ap-workshop-delete-media {
    border: 0;
    background: transparent;
    color: #B85F64;
    cursor: pointer;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .07em;
}

@media (max-width: 1180px) {
    .ap-workshop-progress-rail {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .ap-workshop-media-upload {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ap-workshop-media-upload
    > .ap-primary-button {
        width: 100%;
    }

    .ap-workshop-media-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .ap-workshop-progress-form {
        grid-template-columns: 1fr;
    }

    .ap-workshop-media-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .ap-workshop-progress-rail,
    .ap-workshop-media-upload,
    .ap-workshop-media-grid {
        grid-template-columns: 1fr;
    }

    .ap-workshop-job-head {
        flex-direction: column;
    }
}



/* ============================================================
   STAFF PORTAL — PREMIUM DIGITAL SERVICE DOSSIER v3.0.0
   ============================================================ */

.ap-dossier-form-section {
    grid-column: 1 / -1 !important;
    overflow: hidden;
    margin-top: 6px;
    border: 1px solid #D8E4EA;
    border-radius: 10px;
    background: linear-gradient(145deg, #FFFFFF, #FAFDFE);
    box-shadow: 0 8px 22px rgba(25, 50, 69, .035);
}

.ap-dossier-form-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px 20px;
    border-bottom: 1px solid #E6EDF2;
    background: linear-gradient(135deg, #FFFFFF, #F3FBFC);
}

.ap-dossier-form-head > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border: 1px solid #AEE6ED;
    border-radius: 7px;
    background: #ECFBFD;
    color: #078DA2;
    font-size: 9px;
    font-weight: 900;
}

.ap-dossier-form-head small {
    display: block;
    color: #078EA4;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}

.ap-dossier-form-head h3 {
    margin: 4px 0 0;
    color: #14293D;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 750;
}

.ap-dossier-form-head p {
    margin: 5px 0 0;
    color: #728596;
    font-size: 10px;
    line-height: 1.55;
}

.ap-dossier-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 18px 20px 20px;
}

.ap-dossier-field {
    min-width: 0;
}

.ap-dossier-field.is-wide {
    grid-column: 1 / -1;
}

.ap-dossier-field > label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 7px !important;
    color: #637888 !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .07em !important;
}

.ap-dossier-field > label > span {
    color: #A77822;
    font-size: 7px;
}

.ap-dossier-field input,
.ap-dossier-field select,
.ap-dossier-field textarea {
    width: 100% !important;
    border: 1px solid #C9D8E1 !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #20364A !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

.ap-dossier-field input,
.ap-dossier-field select {
    min-height: 46px !important;
    padding: 0 11px !important;
}

.ap-dossier-field textarea {
    min-height: 96px !important;
    padding: 11px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
}

.ap-dossier-check {
    min-height: 48px;
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 9px 11px;
    border: 1px solid #D2E1E7;
    border-radius: 7px;
    background: #F8FCFD;
    cursor: pointer;
}

.ap-dossier-check > span {
    color: #425B6D;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: .04em;
}

.ap-premium-dossier,
.ap-service-documents-manager {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #D8E4EA;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 10px 28px rgba(24, 49, 69, .04);
}

.ap-premium-dossier-head,
.ap-service-documents-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid #E5EDF2;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(62, 219, 236, .12),
            transparent 34%
        ),
        linear-gradient(135deg, #FFFFFF, #F7FCFD);
}

.ap-premium-dossier-head > div > span,
.ap-service-documents-head > div > span {
    display: block;
    color: #078DA2;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .13em;
}

.ap-premium-dossier-head h3,
.ap-service-documents-head h3 {
    margin: 5px 0 0;
    color: #13293D;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 750;
}

.ap-premium-dossier-head p,
.ap-service-documents-head p {
    max-width: 760px;
    margin: 6px 0 0;
    color: #6B7E8E;
    font-size: 11px;
    line-height: 1.6;
}

.ap-premium-dossier-head > strong {
    flex: 0 0 auto;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #BCE7ED;
    border-radius: 999px;
    background: #ECFBFD;
    color: #078B9F;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .07em;
}

.ap-premium-dossier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

.ap-premium-dossier-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E0E8ED;
    border-radius: 9px;
    background: linear-gradient(145deg, #FFFFFF, #FBFDFE);
}

.ap-premium-dossier-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border-bottom: 1px solid #E8EEF2;
}

.ap-premium-dossier-card-head > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 6px;
    background: #EAFBFD;
    color: #078EA3;
    font-size: 8px;
    font-weight: 900;
}

.ap-premium-dossier-card-head small {
    display: block;
    color: #82929F;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .10em;
}

.ap-premium-dossier-card-head h4 {
    margin: 3px 0 0;
    color: #263D50;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 750;
}

.ap-premium-dossier-rows {
    display: grid;
    padding: 2px 14px 12px;
}

.ap-premium-dossier-rows > div {
    padding: 10px 0;
    border-bottom: 1px solid #EDF2F5;
}

.ap-premium-dossier-rows > div:last-child {
    border-bottom: 0;
}

.ap-premium-dossier-rows > div > span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #748797;
    font-size: 8px;
    line-height: 1.4;
    font-weight: 850;
    letter-spacing: .07em;
}

.ap-premium-dossier-rows > div > span em {
    padding: 2px 5px;
    border-radius: 999px;
    background: #FFF7E8;
    color: #9A7424;
    font-size: 6px;
    font-style: normal;
}

.ap-premium-dossier-rows strong {
    display: block;
    margin-top: 5px;
    color: #31495C;
    font-size: 11px;
    line-height: 1.6;
    font-weight: 600;
}

.ap-premium-dossier-rows strong.is-check {
    color: #078EA2;
    font-weight: 800;
}

.ap-service-document-upload {
    display: grid;
    grid-template-columns:
        minmax(150px, .55fr)
        minmax(220px, 1fr)
        minmax(220px, 1fr)
        minmax(180px, .7fr)
        auto;
    gap: 10px;
    align-items: end;
    padding: 16px 18px;
    border-bottom: 1px solid #E6EDF2;
}

.ap-service-document-upload label {
    display: block;
    margin: 0 0 7px;
    color: #697D8D;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
}

.ap-service-document-upload input,
.ap-service-document-upload select {
    width: 100%;
    min-height: 45px;
    border: 1px solid #CAD9E1;
    border-radius: 7px;
    background: #FFFFFF;
    color: #20364A;
    font-size: 11px;
}

.ap-service-document-upload input[type="file"] {
    padding: 7px;
}

.ap-service-document-visible {
    min-height: 45px;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 8px 10px;
    border: 1px solid #D0E2E7;
    border-radius: 7px;
    background: #F7FCFD;
}

.ap-service-document-visible > span {
    color: #078EA2;
    font-size: 8px;
    font-weight: 850;
}

.ap-service-document-visible small {
    display: block;
    margin-top: 3px;
    color: #7D8E9B;
    font-size: 7px;
    font-weight: 500;
}

.ap-service-document-list {
    display: grid;
    padding: 5px 18px 16px;
}

.ap-service-document-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #E8EFF3;
}

.ap-service-document-list article:last-child {
    border-bottom: 0;
}

.ap-service-document-list article > div:first-child > span {
    display: block;
    color: #078FA4;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
}

.ap-service-document-list article > div:first-child > strong {
    display: block;
    margin-top: 4px;
    color: #30485A;
    font-size: 11px;
    font-weight: 750;
}

.ap-service-document-list article > div:first-child > small {
    display: block;
    margin-top: 4px;
    color: #8999A5;
    font-size: 8px;
}

.ap-service-document-list article > div:last-child {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Service Records page premium cleanup */

.ap-service-records-page .ap-service-record-card {
    border: 1px solid #D8E4EA !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #FFFFFF, #FBFDFE) !important;
    box-shadow: 0 10px 28px rgba(24, 49, 69, .04) !important;
}

.ap-service-records-page .ap-service-record-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, #55E7F5, #0EB7CF);
}

.ap-service-records-page .ap-service-record-card {
    position: relative !important;
    overflow: hidden !important;
}

.ap-service-records-page .ap-service-record-main {
    padding-left: 28px !important;
}

.ap-service-records-page .ap-service-record-kicker {
    color: #078EA3 !important;
}

.ap-service-records-page .ap-service-record-main h3 {
    color: #14293D !important;
}

.ap-service-records-page .ap-service-record-main p,
.ap-service-records-page .ap-service-record-meta {
    color: #687C8D !important;
}

.ap-service-records-page .ap-service-record-side {
    background: #F6FBFC !important;
    border-left: 1px solid #DDE8ED !important;
}

.ap-service-record-detail-page .ap-service-detail-hero {
    border: 1px solid #D8E4EA !important;
    border-radius: 10px !important;
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(62, 219, 236, .12),
            transparent 34%
        ),
        linear-gradient(135deg, #FFFFFF, #F7FCFD) !important;
    color: #14293D !important;
}

.ap-service-record-detail-page .ap-service-detail-hero h3 {
    color: #14293D !important;
}

.ap-service-record-detail-page .ap-service-detail-hero p {
    color: #667B8C !important;
}

@media (max-width: 1180px) {
    .ap-service-document-upload {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ap-premium-dossier-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .ap-dossier-form-grid,
    .ap-service-document-upload {
        grid-template-columns: 1fr;
    }

    .ap-dossier-field.is-wide {
        grid-column: auto;
    }

    .ap-service-document-list article {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* ============================================================
   STAFF PORTAL — EASY SERVICE RECORD FLOW v3.1.0
   ============================================================ */

.ap-service-form-page .ap-staff-form {
    max-width: 1240px;
}

.ap-service-form-page .ap-form-grid {
    gap: 14px 16px !important;
}

.ap-service-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 8px;
    padding: 17px 18px;
    border: 1px solid #D7E4EA;
    border-radius: 10px;
    background:
        radial-gradient(
            circle at 92% 14%,
            rgba(49, 223, 242, .10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #FFFFFF,
            #F6FCFD
        );
}

.ap-service-flow-step > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border: 1px solid #AFE5EC;
    border-radius: 7px;
    background: #EAFBFD;
    color: #078DA3;
    font-size: 9px;
    font-weight: 900;
}

.ap-service-flow-step small,
.ap-dossier-form-head small {
    display: block;
    color: #078EA4;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .12em;
}

.ap-service-flow-step h3 {
    margin: 4px 0 0;
    color: #14293D;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 780;
}

.ap-service-flow-step p {
    margin: 5px 0 0;
    color: #6D8191;
    font-size: 10px;
    line-height: 1.55;
}

.ap-core-service-select {
    min-height: 50px !important;
    border-color: #9FDDE6 !important;
    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F5FCFD
        ) !important;
    color: #143247 !important;
    font-weight: 700 !important;
}

.ap-core-service-hint {
    margin-top: 7px;
    color: #5D7687;
    font-size: 10px;
    line-height: 1.5;
}

.ap-dossier-form-section {
    margin-top: 8px !important;
    border-color: #D7E4EA !important;
}

.ap-dossier-form-head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    padding: 17px 18px !important;
}

.ap-dossier-form-head > span {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
}

.ap-dossier-form-head h3 {
    font-size: 17px !important;
}

.ap-dossier-form-head p {
    max-width: 720px;
    font-size: 10px !important;
}

.ap-dossier-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    padding: 17px 18px 19px !important;
}

.ap-dossier-field > label,
.ap-service-form-page .ap-form-field > label {
    margin-bottom: 7px !important;
    color: #5F7485 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
    letter-spacing: .055em !important;
}

.ap-service-form-page .ap-form-field input,
.ap-service-form-page .ap-form-field select,
.ap-dossier-field input,
.ap-dossier-field select {
    min-height: 50px !important;
}

.ap-service-form-page .ap-form-field textarea,
.ap-dossier-field textarea {
    min-height: 102px !important;
    line-height: 1.65 !important;
}

.ap-dossier-check {
    min-height: 54px !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-color: #D4E2E8 !important;
    background: #F9FCFD !important;
}

.ap-dossier-check input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.ap-dossier-check > span {
    color: #365064 !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
}

.ap-billing-builder {
    border: 1px solid #D7E4EA !important;
    border-radius: 10px !important;
    background: #FBFDFE !important;
}

@media (max-width: 820px) {
    .ap-dossier-form-grid {
        grid-template-columns: 1fr !important;
    }

    .ap-dossier-field.is-wide {
        grid-column: auto !important;
    }
}



/* ============================================================
   STAFF PORTAL — INLINE INVOICE + PAYMENTS v3.2.0
   ============================================================ */

.ap-invoice-auto-field {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid #B8E5EB;
    border-radius: 7px;
    background:
        linear-gradient(
            135deg,
            #F0FCFD,
            #FFFFFF
        );
    color: #078CA2;
    font-size: 11px;
    font-weight: 750;
}

.ap-invoice-live-summary {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #D4E2E8;
    border-radius: 10px;
    background: #FFFFFF;
}

.ap-invoice-live-summary > div {
    min-width: 0;
    padding: 14px;
    border-right: 1px solid #E5EDF1;
}

.ap-invoice-live-summary > div:last-child {
    border-right: 0;
}

.ap-invoice-live-summary > div.is-due {
    background:
        linear-gradient(
            135deg,
            #FFF9ED,
            #FFFFFF
        );
}

.ap-invoice-live-summary span {
    display: block;
    color: #788B9A;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-invoice-live-summary strong {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: #243E52;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-invoice-live-summary .is-due strong {
    color: #A66E13;
}

.ap-invoice-generate-action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.ap-invoice-generate-action .ap-primary-button {
    min-height: 50px;
    justify-content: center;
}

.ap-legacy-invoice-link {
    margin-top: 7px;
    color: #078DA2;
    font-size: 9px;
    font-weight: 750;
    text-decoration: none;
}

.ap-payment-entry-card {
    overflow: hidden;
    border: 1px solid #CFE1E7;
    border-radius: 10px;
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FCFD
        );
}

.ap-payment-entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 18px;
    border-bottom: 1px solid #E3ECF0;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(57, 215, 233, .10),
            transparent 34%
        );
}

.ap-payment-entry-head > div > span {
    display: block;
    color: #078DA3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .10em;
}

.ap-payment-entry-head h4 {
    margin: 5px 0 0;
    color: #183247;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
}

.ap-payment-entry-head p {
    max-width: 680px;
    margin: 5px 0 0;
    color: #718493;
    font-size: 10px;
    line-height: 1.55;
}

.ap-payment-entry-head > strong {
    flex: 0 0 auto;
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #B9E5EB;
    border-radius: 999px;
    background: #EBFBFD;
    color: #078DA2;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.ap-payment-entry-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 17px 18px 18px;
}

.ap-inline-payment-history {
    display: grid;
    padding: 0 18px 16px;
    border-top: 1px solid #E4ECF0;
}

.ap-inline-payment-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0 8px;
}

.ap-inline-payment-history-head span {
    color: #078DA2;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
}

.ap-inline-payment-history-head strong {
    color: #768A99;
    font-size: 8px;
    font-weight: 850;
}

.ap-inline-payment-history article {
    padding: 10px 0;
    border-top: 1px solid #EDF2F4;
}

.ap-inline-payment-history article > div > strong {
    color: #263F53;
    font-size: 12px;
    font-weight: 800;
}

.ap-inline-payment-history article span {
    display: block;
    margin-top: 3px;
    color: #748897;
    font-size: 9px;
    line-height: 1.5;
}

.ap-inline-payment-history article p {
    margin: 5px 0 0;
    color: #586F80;
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 1180px) {
    .ap-invoice-live-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .ap-invoice-live-summary > div:nth-child(3) {
        border-right: 0;
    }
}

@media (max-width: 760px) {
    .ap-invoice-live-summary,
    .ap-payment-entry-grid {
        grid-template-columns: 1fr;
    }

    .ap-invoice-live-summary > div {
        border-right: 0;
        border-bottom: 1px solid #E5EDF1;
    }

    .ap-invoice-live-summary > div:last-child {
        border-bottom: 0;
    }

    .ap-payment-entry-head {
        flex-direction: column;
    }
}



/* ============================================================
   STAFF PORTAL — 3-STEP SERVICE RECORD v4.0.0
   ============================================================ */

.ap-sr-wizard-page {
    max-width: 1320px;
}

.ap-sr-wizard-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ap-sr-wizard-step {
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid #D9E5EA;
    border-radius: 10px;
    background: #FFFFFF;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(26, 50, 67, .025);
}

.ap-sr-wizard-step > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #D1E0E6;
    border-radius: 8px;
    background: #F7FBFC;
    color: #82939F;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.ap-sr-wizard-step > span {
    min-width: 0;
}

.ap-sr-wizard-step strong {
    display: block;
    color: #284257;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 800;
}

.ap-sr-wizard-step small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #82929E;
    font-size: 8px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-sr-wizard-step.is-complete {
    border-color: #BFE4E9;
    background: linear-gradient(135deg, #FFFFFF, #F5FBFC);
}

.ap-sr-wizard-step.is-complete > i {
    border-color: #53D9E9;
    background: #E9FAFC;
    color: #078FA5;
}

.ap-sr-wizard-step.is-current {
    border-color: #6BDAE7;
    background:
        radial-gradient(circle at 88% 16%, rgba(57, 220, 238, .12), transparent 34%),
        linear-gradient(135deg, #FFFFFF, #F1FBFC);
    box-shadow: 0 10px 28px rgba(25, 164, 184, .07);
}

.ap-sr-wizard-step.is-current > i {
    border-color: #1BCADF;
    background: #0FC1D8;
    color: #FFFFFF;
}

.ap-sr-wizard-step.is-current strong {
    color: #0B7689;
}

.ap-sr-step-form {
    display: grid;
    gap: 12px;
}

.ap-sr-step-card,
.ap-sr-existing-media,
.ap-sr-payment-history {
    overflow: hidden;
    border: 1px solid #D7E3E9;
    border-radius: 11px;
    background: linear-gradient(145deg, #FFFFFF, #FBFDFE);
    box-shadow: 0 10px 28px rgba(28, 52, 70, .035);
}

.ap-sr-step-card-head,
.ap-sr-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid #E5EDF1;
    background:
        radial-gradient(circle at 91% 12%, rgba(48, 215, 234, .10), transparent 34%),
        linear-gradient(135deg, #FFFFFF, #F7FCFD);
}

.ap-sr-step-card-head > div > span,
.ap-sr-section-head > div > span {
    display: block;
    color: #078DA3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ap-sr-step-card-head h3,
.ap-sr-section-head h3 {
    margin: 5px 0 0;
    color: #173146;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
}

.ap-sr-step-card-head p {
    max-width: 760px;
    margin: 6px 0 0;
    color: #728594;
    font-size: 10px;
    line-height: 1.6;
}

.ap-sr-step-card-head > strong,
.ap-sr-section-head > strong {
    flex: 0 0 auto;
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #BCE4EA;
    border-radius: 999px;
    background: #EDFBFD;
    color: #078EA3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
}

.ap-sr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 18px 20px 20px;
}

.ap-sr-grid-tight {
    padding-top: 5px;
}

.ap-sr-field,
.ap-sr-core-service {
    min-width: 0;
}

.ap-sr-field.is-wide,
.ap-sr-bike-preview.is-wide {
    grid-column: 1 / -1;
}

.ap-sr-field > label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 7px;
    color: #627888;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: .07em;
}

.ap-sr-field > label > span {
    color: #A7B4BD;
    font-size: 7px;
}

.ap-sr-field input,
.ap-sr-field select,
.ap-sr-field textarea,
.ap-sr-step-card .ap-core-service-select {
    width: 100%;
    border: 1px solid #C9D9E1 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #203B50 !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

.ap-sr-field input,
.ap-sr-field select,
.ap-sr-step-card .ap-core-service-select {
    min-height: 50px !important;
    padding: 0 12px !important;
}

.ap-sr-field textarea {
    min-height: 92px;
    padding: 11px 12px;
    line-height: 1.6;
    resize: vertical;
}

.ap-sr-field textarea[readonly] {
    background: #F8FBFC !important;
    color: #607686 !important;
}

.ap-sr-bike-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #DDE7EB;
    border-radius: 8px;
    background: #F8FBFC;
}

.ap-sr-bike-preview > div {
    min-width: 0;
    padding: 11px 13px;
    border-right: 1px solid #E4ECEF;
}

.ap-sr-bike-preview > div:last-child {
    border-right: 0;
}

.ap-sr-bike-preview span {
    display: block;
    color: #81909A;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-sr-bike-preview strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #334D61;
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-sr-check {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid #D8E4E9;
    border-radius: 8px;
    background: #F9FCFD;
    cursor: pointer;
}

.ap-sr-check input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.ap-sr-check span {
    color: #415A6C;
    font-size: 9px;
    line-height: 1.45;
    font-weight: 800;
    letter-spacing: .04em;
}

.ap-sr-check.is-wide {
    grid-column: 1 / -1;
}

.ap-sr-qc-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    padding: 17px 20px 10px;
}

.ap-sr-media-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    padding: 18px 20px 12px;
}

.ap-sr-upload {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border: 1px dashed #AFCFD7;
    border-radius: 10px;
    background: linear-gradient(145deg, #FBFDFE, #F4FAFB);
    cursor: pointer;
}

.ap-sr-upload > span {
    color: #078EA3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-sr-upload > strong {
    margin-top: 5px;
    color: #334D60;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 750;
}

.ap-sr-upload input {
    margin-top: 14px;
}

.ap-sr-upload small {
    margin-top: 7px;
    color: #84949F;
    font-size: 8px;
}

.ap-sr-media-visible {
    margin: 0 20px 18px;
}

.ap-sr-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border: 1px solid #D6E2E7;
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 28px rgba(25, 49, 66, .05);
}

.ap-sr-actions > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ap-sr-existing-media-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
}

.ap-sr-existing-media-grid article {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #DEE7EB;
    border-radius: 9px;
    background: #FFFFFF;
}

.ap-sr-existing-media-preview {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0B1522;
}

.ap-sr-existing-media-preview img,
.ap-sr-existing-media-preview video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ap-sr-existing-media-copy {
    padding: 10px;
}

.ap-sr-existing-media-copy > span {
    display: block;
    color: #078EA3;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-sr-existing-media-copy > strong {
    display: block;
    margin-top: 4px;
    color: #425A6C;
    font-size: 9px;
    font-weight: 800;
}

.ap-sr-existing-media-copy > small {
    display: block;
    margin-top: 3px;
    color: #84939D;
    font-size: 7px;
}

.ap-sr-existing-media-copy form {
    margin-top: 9px;
}

.ap-sr-billing-builder {
    margin: 18px 20px 20px;
}

.ap-sr-money-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #D7E3E8;
    border-radius: 10px;
    background: #FFFFFF;
}

.ap-sr-money-summary > div {
    min-width: 0;
    padding: 14px;
    border-right: 1px solid #E5ECEF;
}

.ap-sr-money-summary > div:last-child {
    border-right: 0;
}

.ap-sr-money-summary span {
    display: block;
    color: #7B8D9A;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
}

.ap-sr-money-summary strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #284257;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-sr-money-summary .is-due {
    background: linear-gradient(135deg, #FFF9EC, #FFFFFF);
}

.ap-sr-money-summary .is-due strong {
    color: #A8731C;
}

.ap-sr-paid-state {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 18px 20px 20px;
    padding: 14px;
    border: 1px solid #BDE4E9;
    border-radius: 9px;
    background: #F2FBFC;
}

.ap-sr-paid-state > i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 50%;
    background: #11C4DA;
    color: #FFFFFF;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.ap-sr-paid-state span {
    display: block;
    color: #078EA3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-sr-paid-state strong {
    display: block;
    margin-top: 4px;
    color: #355065;
    font-size: 11px;
    font-weight: 750;
}

.ap-sr-payment-list {
    display: grid;
    padding: 4px 18px 16px;
}

.ap-sr-payment-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #E8EEF1;
}

.ap-sr-payment-list article:last-child {
    border-bottom: 0;
}

.ap-sr-payment-list article > div > span {
    display: block;
    color: #7D8E9A;
    font-size: 8px;
    font-weight: 800;
}

.ap-sr-payment-list article > div > strong {
    display: block;
    margin-top: 4px;
    color: #284257;
    font-size: 13px;
    font-weight: 850;
}

.ap-sr-payment-list article p {
    margin: 4px 0 0;
    color: #637989;
    font-size: 9px;
}

.ap-sr-payment-list article small {
    display: block;
    margin-top: 5px;
    color: #81909B;
    font-size: 8px;
}

.ap-sr-detail-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 14px;
}

.ap-sr-detail-flow > a {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 13px;
    border: 1px solid #D8E4E9;
    border-radius: 9px;
    background: linear-gradient(145deg, #FFFFFF, #F9FCFD);
    color: inherit;
    text-decoration: none;
}

.ap-sr-detail-flow > a > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #EAFBFD;
    color: #078EA3;
    font-size: 8px;
    font-weight: 900;
}

.ap-sr-detail-flow small {
    display: block;
    color: #078EA3;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-sr-detail-flow strong {
    display: block;
    margin-top: 4px;
    color: #304A5F;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
}

.ap-sr-detail-flow p {
    margin: 4px 0 0;
    overflow: hidden;
    color: #7C8D99;
    font-size: 8px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .ap-sr-qc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ap-sr-existing-media-grid,
    .ap-sr-media-upload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ap-sr-money-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .ap-sr-wizard-nav,
    .ap-sr-grid,
    .ap-sr-qc-grid,
    .ap-sr-existing-media-grid,
    .ap-sr-media-upload-grid,
    .ap-sr-money-summary,
    .ap-sr-detail-flow {
        grid-template-columns: 1fr;
    }

    .ap-sr-field.is-wide,
    .ap-sr-bike-preview.is-wide,
    .ap-sr-check.is-wide {
        grid-column: auto;
    }

    .ap-sr-bike-preview {
        grid-template-columns: 1fr;
    }

    .ap-sr-bike-preview > div {
        border-right: 0;
        border-bottom: 1px solid #E4ECEF;
    }

    .ap-sr-bike-preview > div:last-child {
        border-bottom: 0;
    }

    .ap-sr-actions,
    .ap-sr-actions > div {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .ap-sr-actions .ap-primary-button,
    .ap-sr-actions .ap-secondary-button {
        width: 100%;
        justify-content: center;
    }

    .ap-sr-money-summary > div {
        border-right: 0;
        border-bottom: 1px solid #E5ECEF;
    }

    .ap-sr-money-summary > div:last-child {
        border-bottom: 0;
    }

    .ap-sr-payment-list article {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* ============================================================
   STAFF PORTAL — ESTIMATE APPROVAL + READ-ONLY DETAIL v4.1.0
   ============================================================ */

.ap-sr-estimate-card {
    border-color: #BBDDE4;
}

.ap-sr-estimate-builder {
    margin: 18px 20px 4px;
}

.ap-sr-estimate-meta {
    padding-top: 10px;
}

.ap-sr-estimate-status {
    text-align: center;
}

.ap-sr-estimate-status.ap-estimate-approved {
    border-color: #A9DDD0;
    background: #F1FBF7;
    color: #168468;
}

.ap-sr-estimate-status.ap-estimate-awaiting_approval {
    border-color: #E7D3A3;
    background: #FFF9ED;
    color: #9A6A18;
}

.ap-sr-estimate-approved {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 20px 18px;
    padding: 12px 13px;
    border: 1px solid #BCE4D8;
    border-radius: 8px;
    background: #F3FCF8;
}

.ap-sr-estimate-approved > i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    border-radius: 50%;
    background: #20B48D;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 900;
}

.ap-sr-estimate-approved span,
.ap-sr-lock-body span {
    display: block;
    color: #168468;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-sr-estimate-approved strong {
    display: block;
    margin-top: 3px;
    color: #365A50;
    font-size: 10px;
}

.ap-sr-approval-lock {
    border-color: #E4D4AC;
}

.ap-sr-lock-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 20px;
}

.ap-sr-lock-body > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border: 1px solid #E7D6AD;
    border-radius: 10px;
    background: #FFF9ED;
    color: #A37221;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.ap-sr-lock-body strong {
    display: block;
    margin-top: 4px;
    color: #334C5F;
    font-size: 14px;
    font-weight: 800;
}

.ap-sr-lock-body p {
    max-width: 760px;
    margin: 5px 0 0;
    color: #788A96;
    font-size: 10px;
    line-height: 1.6;
}

.ap-sr-view-only .ap-management-description {
    max-width: 720px;
}

.ap-sr-readonly-steps {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.ap-sr-readonly-section {
    overflow: hidden;
    border: 1px solid #D7E3E8;
    border-radius: 11px;
    background: #FFFFFF;
    box-shadow: 0 10px 28px rgba(26, 50, 68, .035);
}

.ap-sr-readonly-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ap-sr-readonly-grid > div {
    min-width: 0;
    padding: 13px 14px;
    border-right: 1px solid #E7EDF0;
    border-bottom: 1px solid #E7EDF0;
}

.ap-sr-readonly-grid > div:nth-child(4n) {
    border-right: 0;
}

.ap-sr-readonly-grid span,
.ap-sr-readonly-estimate-head span,
.ap-sr-readonly-meta span,
.ap-sr-readonly-note > span {
    display: block;
    color: #7D8E9A;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
}

.ap-sr-readonly-grid strong,
.ap-sr-readonly-estimate-head strong,
.ap-sr-readonly-meta strong {
    display: block;
    margin-top: 5px;
    color: #304A5E;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 760;
}

.ap-sr-readonly-note {
    margin: 13px;
    padding: 12px 13px;
    border: 1px solid #E1E9ED;
    border-left: 3px solid #20BED3;
    border-radius: 8px;
    background: #FAFDFE;
}

.ap-sr-readonly-note p {
    margin: 6px 0 0;
    color: #566F81;
    font-size: 10px;
    line-height: 1.65;
}

.ap-sr-readonly-estimate {
    margin: 13px;
    overflow: hidden;
    border: 1px solid #D9E5EA;
    border-radius: 9px;
    background: #FBFDFE;
}

.ap-sr-readonly-estimate-head,
.ap-sr-readonly-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid #E5ECEF;
}

.ap-sr-readonly-estimate-head > div,
.ap-sr-readonly-meta > div {
    padding: 12px;
    border-right: 1px solid #E5ECEF;
}

.ap-sr-readonly-estimate-head > div:last-child,
.ap-sr-readonly-meta > div:last-child {
    border-right: 0;
}

.ap-sr-readonly-table {
    overflow-x: auto;
}

.ap-sr-readonly-table-head,
.ap-sr-readonly-table-row {
    min-width: 720px;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 80px 120px 120px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
}

.ap-sr-readonly-table-head {
    background: #F0F6F8;
    color: #718593;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.ap-sr-readonly-table-row {
    border-top: 1px solid #E8EEF1;
}

.ap-sr-readonly-table-row span {
    color: #6F8291;
    font-size: 9px;
}

.ap-sr-readonly-table-row strong {
    color: #334C60;
    font-size: 10px;
    font-weight: 760;
}

.ap-sr-readonly-qc {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 0 13px 13px;
}

.ap-sr-readonly-qc > div {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid #E0E9ED;
    border-radius: 8px;
    background: #FAFDFE;
}

.ap-sr-readonly-qc i {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    border-radius: 5px;
    background: #EEF4F6;
    color: #91A0A9;
    font-size: 7px;
    font-style: normal;
}

.ap-sr-readonly-qc span {
    color: #647A8A;
    font-size: 8px;
    line-height: 1.4;
    font-weight: 800;
}

.ap-sr-readonly-qc > div.is-pass {
    border-color: #BEE2E7;
    background: #F3FBFC;
}

.ap-sr-readonly-qc > div.is-pass i {
    background: #14C3D9;
    color: #FFFFFF;
}

.ap-sr-readonly-media {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding: 0 13px 13px;
}

.ap-sr-readonly-media article {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E0E8EC;
    border-radius: 8px;
    background: #FFFFFF;
}

.ap-sr-readonly-media article > div {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #071322;
}

.ap-sr-readonly-media img,
.ap-sr-readonly-media video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ap-sr-readonly-media article > span {
    display: block;
    padding: 8px 9px;
    color: #078DA2;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .06em;
}

.ap-sr-readonly-final-billing,
.ap-sr-readonly-payments,
.ap-sr-readonly-money {
    margin: 13px;
}

@media (max-width: 1000px) {
    .ap-sr-readonly-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ap-sr-readonly-qc,
    .ap-sr-readonly-media {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ap-sr-readonly-grid,
    .ap-sr-readonly-qc,
    .ap-sr-readonly-media,
    .ap-sr-readonly-estimate-head,
    .ap-sr-readonly-meta {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   STAFF PORTAL — BILLING GATE v4.1.1
   ============================================================ */

.ap-sr-wizard-step.is-locked {
    cursor: not-allowed;
    border-color: #E4E8EA;
    background:
        linear-gradient(
            135deg,
            #F7F9FA,
            #FFFFFF
        );
    opacity: .76;
    box-shadow: none;
}

.ap-sr-wizard-step.is-locked > i {
    border-color: #D7DEE2;
    background: #F0F3F5;
    color: #85939C;
    font-size: 12px;
}

.ap-sr-wizard-step.is-locked strong {
    color: #667986;
}

.ap-sr-wizard-step.is-locked small {
    color: #98A5AD;
}

.ap-sr-wizard-step.is-locked.is-current {
    border-color: #E5C98E;
    background:
        linear-gradient(
            135deg,
            #FFF9EC,
            #FFFFFF
        );
    opacity: 1;
}

.ap-sr-wizard-step.is-locked.is-current > i {
    border-color: #E2BE73;
    background: #FFF4DC;
    color: #A66F17;
}

.ap-sr-billing-lock {
    border-color: #E7D4A9;
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #FFFCF5
        );
}

.ap-sr-billing-lock .ap-sr-step-card-head {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(235, 180, 62, .10),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #FFFFFF,
            #FFFBF2
        );
}

.ap-sr-billing-lock .ap-sr-step-card-head > div > span {
    color: #A66F17;
}

.ap-sr-billing-lock .ap-sr-step-card-head > strong {
    border-color: #E8D19F;
    background: #FFF6E3;
    color: #986817;
}

.ap-sr-billing-lock-body > i {
    border-color: #E4C889 !important;
    background: #FFF7E8 !important;
    color: #A66F17 !important;
}

.ap-sr-billing-lock-body > div > span {
    color: #A66F17 !important;
}

.ap-sr-billing-lock-status {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 18px;
}

.ap-sr-billing-lock-status > div {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #E3E9EC;
    border-radius: 8px;
    background: #FFFFFF;
}

.ap-sr-billing-lock-status span {
    display: block;
    color: #7A8C98;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
}

.ap-sr-billing-lock-status strong {
    display: block;
    margin-top: 5px;
    color: #485F70;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 850;
}

.ap-sr-billing-lock-status strong.is-ready {
    color: #078EA3;
}

.ap-sr-billing-lock-status strong.is-waiting {
    color: #A66F17;
}

.ap-sr-billing-lock-status strong.is-locked {
    color: #B54545;
}

@media (max-width: 760px) {
    .ap-sr-billing-lock-status {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   STAFF PORTAL — WORK START GATE v4.1.2
   Estimate Approval -> Advance Payment -> Workshop Work
   ============================================================ */

.ap-sr-work-lock {
    border-color: #D7E5EA;
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F9FCFD
        );
}

.ap-sr-work-lock .ap-sr-step-card-head {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(36, 202, 223, .10),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #FFFFFF,
            #F5FCFD
        );
}

.ap-sr-work-lock-body > i {
    border-color: #9FDFE7 !important;
    background: #ECFBFD !important;
    color: #078EA3 !important;
}

.ap-sr-work-lock-body > div > span {
    color: #078EA3 !important;
}

.ap-sr-work-lock-status {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 18px;
}

.ap-sr-work-lock-status > div {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #E0E8EC;
    border-radius: 8px;
    background: #FFFFFF;
}

.ap-sr-work-lock-status span {
    display: block;
    color: #7A8D99;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
}

.ap-sr-work-lock-status strong {
    display: block;
    margin-top: 5px;
    color: #506676;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 850;
}

.ap-sr-work-lock-status strong.is-ready {
    color: #078EA3;
}

.ap-sr-work-lock-status strong.is-waiting {
    color: #A8731C;
}

.ap-sr-work-lock-status strong.is-locked {
    color: #B54545;
}

@media (max-width: 900px) {
    .ap-sr-work-lock-status {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .ap-sr-work-lock-status {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   STAFF PORTAL — AUTOMATIC SERVICE LIFECYCLE v4.2.0
   ============================================================ */

.ap-sr-auto-status {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #BCE1E7;
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            #F1FCFD,
            #FFFFFF
        );
}

.ap-sr-auto-status > i {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #12BDD3;
    box-shadow:
        0 0 0 5px rgba(18, 189, 211, .08);
}

.ap-sr-auto-status strong {
    display: block;
    color: #167E90;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 850;
}

.ap-sr-auto-status small {
    display: block;
    margin-top: 3px;
    color: #82939E;
    font-size: 8px;
    line-height: 1.45;
}

.ap-sr-delivery-card {
    margin-top: 12px;
}

.ap-sr-delivery-ready,
.ap-sr-delivery-complete,
.ap-sr-delivery-locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 20px 20px;
    padding: 14px;
    border: 1px solid #D8E5EA;
    border-radius: 9px;
    background: #FAFCFD;
}

.ap-sr-delivery-complete,
.ap-sr-delivery-locked {
    justify-content: flex-start;
}

.ap-sr-delivery-complete > i,
.ap-sr-delivery-locked > i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border-radius: 50%;
    font-style: normal;
    font-size: 10px;
    font-weight: 900;
}

.ap-sr-delivery-complete > i {
    background: #12C2D8;
    color: #FFFFFF;
}

.ap-sr-delivery-locked > i {
    border: 1px solid #E6D09D;
    background: #FFF7E6;
    color: #9E6C17;
}

.ap-sr-delivery-ready > div > span,
.ap-sr-delivery-complete span,
.ap-sr-delivery-locked span {
    display: block;
    color: #078DA3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-sr-delivery-ready strong,
.ap-sr-delivery-complete strong,
.ap-sr-delivery-locked strong {
    display: block;
    margin-top: 4px;
    color: #314C60;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 800;
}

.ap-sr-delivery-ready p,
.ap-sr-delivery-complete p,
.ap-sr-delivery-locked p {
    margin: 4px 0 0;
    color: #7A8C98;
    font-size: 9px;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .ap-sr-delivery-ready {
        align-items: stretch;
        flex-direction: column;
    }

    .ap-sr-delivery-ready .ap-primary-button {
        width: 100%;
        justify-content: center;
    }
}



/* ============================================================
   SERVICE RECORD v4.2.8 — INSPECTION BEFORE ESTIMATE
   ============================================================ */

.ap-sr-inspection-card {
    border-color: #CBE4E9;
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F7FCFD
        );
}

.ap-sr-inspection-card .ap-sr-step-card-head {
    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F0FBFD
        );
}

.ap-sr-work-execution-card {
    border-color: #BEE2E8;
}

.ap-sr-readonly-inspection {
    margin: 12px 14px 14px;
    padding: 14px;
    border: 1px solid #DCE8EC;
    border-radius: 9px;
    background: #FAFCFD;
}

.ap-sr-section-minihead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ap-sr-section-minihead span {
    color: #078EA3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-sr-section-minihead strong {
    color: #536B7B;
    font-size: 9px;
    font-weight: 850;
}



/* ============================================================
   STAFF PORTAL — AUTOMATIC WORKFLOW v4.2.9
   ============================================================ */

.ap-sr-auto-workflow-status {
    display: grid;
    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(150px, .7fr)
        minmax(150px, .7fr);
    gap: 10px;
    margin: 18px;
    padding: 12px;
    border: 1px solid #D8E7EB;
    border-radius: 9px;
    background:
        linear-gradient(
            135deg,
            #F5FCFD,
            #FFFFFF
        );
}

.ap-sr-auto-workflow-status > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #E3ECEF;
    border-radius: 8px;
    background: #FFFFFF;
}

.ap-sr-auto-workflow-status span {
    display: block;
    color: #73909C;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ap-sr-auto-workflow-status strong {
    display: block;
    margin-top: 5px;
    color: #0B8DA2;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 850;
}

.ap-sr-auto-workflow-status p {
    margin: 5px 0 0;
    color: #7B8D97;
    font-size: 9px;
    line-height: 1.55;
}

.ap-sr-auto-workflow-time strong {
    color: #405B6B;
    font-size: 10px;
}

.ap-sr-completion-callout {
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid #BDE4E9;
    border-left: 4px solid #12BDD3;
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            #F2FCFD,
            #FFFFFF
        );
}

.ap-sr-completion-callout span {
    display: block;
    color: #078DA3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
}

.ap-sr-completion-callout strong {
    display: block;
    margin-top: 5px;
    color: #203A4B;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 850;
}

.ap-sr-completion-callout p {
    margin: 5px 0 0;
    color: #758995;
    font-size: 9px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .ap-sr-auto-workflow-status {
        grid-template-columns: 1fr 1fr;
    }

    .ap-sr-auto-workflow-status > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .ap-sr-auto-workflow-status {
        grid-template-columns: 1fr;
        margin: 12px;
    }

    .ap-sr-auto-workflow-status > div:first-child {
        grid-column: auto;
    }

    .ap-sr-actions > div {
        width: 100%;
        display: grid;
        gap: 8px;
    }

    .ap-sr-actions > div .ap-primary-button,
    .ap-sr-actions > div .ap-secondary-button {
        width: 100%;
        justify-content: center;
    }
}



.ap-module-inspection{position:relative}
.ap-module-inspection .ap-module-arrow{position:absolute;right:22px;bottom:20px;color:#718398;font-size:18px;transition:.25s}
.ap-module-inspection:hover .ap-module-arrow{color:#6FEFFF;transform:translateX(4px)}
.ap-module-badge{position:absolute;right:20px;top:18px;padding:5px 8px;border:1px solid #BFEAF0;background:#EAFBFD;color:#007F96;font-size:7px;font-style:normal;font-weight:900;letter-spacing:.1em}
.ap-inspection-requests-page,.ap-inspection-detail-page{width:100%;max-width:none;margin-top:34px;color:#17283A}
.ap-inspection-requests-head,.ap-inspection-detail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-bottom:25px;border-bottom:1px solid #DCE6ED}
.ap-inspection-requests-title,.ap-inspection-detail-title{margin:0;color:#16253A;font-size:42px;line-height:1.04;font-weight:800;letter-spacing:-.045em}
.ap-inspection-requests-subtitle,.ap-inspection-detail-subtitle{margin:9px 0 0;color:#64778C;font-size:13px;line-height:1.6}
.ap-inspection-back{display:inline-flex;align-items:center;gap:10px;min-height:43px;padding:0 16px;border:1px solid #CAD8E2;background:#fff;color:#33485E;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.12em}
.ap-inspection-back:hover{color:#007E94;border-color:#6FEFFF;background:#F4FDFF}
.ap-inspection-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0}
.ap-inspection-summary-card{min-height:112px;display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid #D9E3EA;background:#fff;box-shadow:0 8px 24px rgba(25,48,70,.045)}
.ap-inspection-summary-card.is-accent{border-color:#B9EAF1;background:linear-gradient(135deg,#F7FEFF,#fff)}
.ap-inspection-summary-icon{flex:0 0 43px;width:43px;height:43px;display:grid;place-items:center;border:1px solid #C8EAF0;background:#F1FCFE;color:#008AA2;font-size:12px;font-weight:900}
.ap-inspection-summary-card.is-accent .ap-inspection-summary-icon{background:#6FEFFF;border-color:#6FEFFF;color:#071A2B;font-size:18px}
.ap-inspection-summary-card span{display:block;color:#728397;font-size:9px;font-weight:800;letter-spacing:.16em}
.ap-inspection-summary-card strong{display:block;margin:4px 0 2px;color:#14263B;font-size:27px;line-height:1;font-weight:800}
.ap-inspection-summary-card small{color:#8190A0;font-size:10px}
.ap-inspection-panel{border:1px solid #D8E2E9;background:#fff;box-shadow:0 12px 34px rgba(20,40,55,.055)}
.ap-inspection-panel-head{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 22px;border-bottom:1px solid #E2E9EE;background:#F8FAFB}
.ap-inspection-panel-head span{display:block;margin-bottom:5px;color:#00869D;font-size:8px;font-weight:900;letter-spacing:.18em}
.ap-inspection-panel-head strong{display:block;color:#1A2A3C;font-size:14px;font-weight:800}
.ap-inspection-panel-head small{color:#7B8998;font-size:10px}
.ap-inspection-list{display:flex;flex-direction:column}
.ap-inspection-row{display:grid;grid-template-columns:48px minmax(190px,1.25fr) minmax(160px,1fr) minmax(170px,.95fr) auto;align-items:center;gap:18px;min-height:120px;padding:20px 22px;border-bottom:1px solid #E7EDF1;background:#fff;transition:background .2s ease}
.ap-inspection-row:last-child{border-bottom:0}
.ap-inspection-row:hover{background:#FBFDFE}
.ap-inspection-row.is-new{background:linear-gradient(90deg,#F9FEFF,#fff 55%)}
.ap-inspection-avatar{width:45px;height:45px;display:grid;place-items:center;border:1px solid #B9E8EF;border-radius:50%;background:#EEF9FB;color:#007F96;font-size:10px;font-weight:900}
.ap-inspection-person,.ap-inspection-bike,.ap-inspection-slot{min-width:0}
.ap-inspection-id{display:flex;align-items:center;gap:8px;margin-bottom:5px;color:#8997A5;font-size:8px;font-weight:800;letter-spacing:.14em}
.ap-inspection-id span{padding:3px 6px;border-radius:3px;background:#E9FBFD;color:#00859C;font-size:7px}
.ap-inspection-person h3{margin:0 0 6px;color:#16283C;font-size:16px;line-height:1.2;font-weight:800}
.ap-inspection-person a{color:#167C91;text-decoration:none;font-size:11px;font-weight:700}
.ap-inspection-bike,.ap-inspection-slot{padding-left:18px;border-left:1px solid #E3EAEF}
.ap-inspection-bike span,.ap-inspection-slot span{display:block;margin-bottom:5px;color:#8A98A6;font-size:8px;font-weight:800;letter-spacing:.13em}
.ap-inspection-bike strong,.ap-inspection-slot strong{display:block;color:#43576B;font-size:11px;font-weight:800}
.ap-inspection-bike small,.ap-inspection-slot small{display:block;margin-top:4px;color:#8997A5;font-size:10px;white-space:normal}
.ap-inspection-row-actions{min-width:130px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.ap-inspection-status{display:inline-flex;align-items:center;gap:6px;min-height:23px;padding:0 8px;border-radius:999px;background:#F0F3F6;color:#728191;font-size:8px;font-weight:900;letter-spacing:.12em}
.ap-inspection-status i{width:5px;height:5px;border-radius:50%;background:#93A0AD}
.ap-inspection-status.is-new{color:#007E94;background:#E8FAFC}
.ap-inspection-status.is-new i{background:#00AFC8}
.ap-inspection-view{min-height:32px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #C9D6DF;background:#fff;color:#43576B;text-decoration:none;font-size:8px;font-weight:900;letter-spacing:.08em}
.ap-inspection-view span{color:#00A5BD;font-size:14px}
.ap-inspection-view:hover{border-color:#6FEFFF;background:#F2FDFF;color:#00798F}
.ap-inspection-photo-count{color:#82909D;font-size:8px;font-weight:800;letter-spacing:.08em}
.ap-inspection-empty{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.ap-inspection-empty div{width:46px;height:46px;display:grid;place-items:center;border:1px solid #BFEAF0;background:#F1FCFE;color:#00869D;border-radius:50%;font-size:18px}
.ap-inspection-empty strong{color:#26394D;font-size:14px}
.ap-inspection-empty span{color:#8997A5;font-size:11px}
.ap-inspection-empty a{margin-top:10px;color:#007E94;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:.12em}

/* Detail */
.ap-inspection-read-form{display:flex;justify-content:flex-end;margin:18px 0 -2px}
.ap-inspection-open-button{min-height:40px;padding:0 15px;border:1px solid #6FEFFF;background:#6FEFFF;color:#071A2B;cursor:pointer;font-size:9px;font-weight:900;letter-spacing:.12em}
.ap-inspection-open-button:hover{background:#fff;border-color:#00AFC8}
.ap-inspection-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;margin-top:22px}
.ap-inspection-detail-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.ap-inspection-detail-card{border:1px solid #D8E2E9;background:#fff;box-shadow:0 10px 28px rgba(20,40,55,.045)}
.ap-inspection-detail-card-head{min-height:62px;display:flex;align-items:center;gap:13px;padding:0 20px;border-bottom:1px solid #E2E9EE;background:#F8FAFB}
.ap-inspection-detail-card-head span{color:#00869D;font-size:9px;font-weight:900;letter-spacing:.14em}
.ap-inspection-detail-card-head strong{color:#1A2A3C;font-size:11px;font-weight:900;letter-spacing:.12em}
.ap-inspection-detail-card-head small{margin-left:auto;color:#82909D;font-size:9px;font-weight:700}
.ap-inspection-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ap-inspection-fields>div{min-width:0;padding:19px 20px;border-bottom:1px solid #E8EEF2;border-right:1px solid #E8EEF2}
.ap-inspection-fields>div:nth-child(even){border-right:0}
.ap-inspection-fields>div:nth-last-child(-n+2){border-bottom:0}
.ap-inspection-fields .is-wide{grid-column:1/-1;border-right:0}
.ap-inspection-fields small,.ap-inspection-project-row small,.ap-inspection-long-field small{display:block;margin-bottom:7px;color:#8795A3;font-size:8px;font-weight:900;letter-spacing:.14em}
.ap-inspection-fields strong,.ap-inspection-fields a{color:#26394D;font-size:13px;font-weight:800;text-decoration:none;word-break:break-word}
.ap-inspection-project-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #E8EEF2}
.ap-inspection-project-row>div{padding:19px 20px;border-right:1px solid #E8EEF2}
.ap-inspection-project-row>div:last-child{border-right:0}
.ap-inspection-project-row strong{color:#26394D;font-size:12px;font-weight:800}
.ap-inspection-long-field{padding:20px;border-bottom:1px solid #E8EEF2}
.ap-inspection-long-field:last-child{border-bottom:0}
.ap-inspection-long-field p{margin:0;color:#53677A;font-size:12px;line-height:1.75}
.ap-inspection-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px}
.ap-inspection-photo{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#EEF2F5;border:1px solid #D7E1E7}
.ap-inspection-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}
.ap-inspection-photo span{position:absolute;right:8px;bottom:8px;padding:5px 7px;background:rgba(4,15,30,.82);color:#6FEFFF;font-size:7px;font-weight:900;letter-spacing:.1em}
.ap-inspection-photo:hover img{transform:scale(1.045)}
.ap-inspection-no-photos{padding:40px 20px;text-align:center;color:#8997A5;font-size:11px}
.ap-inspection-detail-side{display:flex;flex-direction:column;gap:10px}
.ap-inspection-status-card{padding:22px;border:1px solid #D8E2E9;background:#fff}
.ap-inspection-status-card>span{display:block;color:#8795A3;font-size:8px;font-weight:900;letter-spacing:.14em}
.ap-inspection-status-card>strong{display:block;margin-top:9px;color:#657688;font-size:18px;font-weight:900;letter-spacing:.05em}
.ap-inspection-status-card>strong.is-new{color:#00869D}
.ap-inspection-status-card>small{display:block;margin-top:8px;color:#8997A5;font-size:9px;line-height:1.5}
.ap-inspection-call-button,.ap-inspection-email-button,.ap-inspection-secondary-button{min-height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:.1em}
.ap-inspection-call-button{background:#6FEFFF;color:#071A2B;border:1px solid #6FEFFF}
.ap-inspection-call-button:hover{background:#fff;color:#007E94}
.ap-inspection-email-button{background:#fff;color:#43576B;border:1px solid #C9D6DF}
.ap-inspection-email-button:hover,.ap-inspection-secondary-button:hover{border-color:#6FEFFF;color:#007E94;background:#F4FDFF}
.ap-inspection-secondary-button{background:#F8FAFB;color:#657688;border:1px solid #D8E2E9}
.ap-inspection-empty-detail{margin-top:34px}

@media(max-width:1050px){
.ap-inspection-row{grid-template-columns:48px minmax(180px,1fr) minmax(150px,.8fr) auto}
.ap-inspection-bike{display:none}
.ap-inspection-detail-grid{grid-template-columns:1fr}
.ap-inspection-detail-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
.ap-inspection-requests-head,.ap-inspection-detail-head{align-items:flex-start;flex-direction:column}
.ap-inspection-requests-title,.ap-inspection-detail-title{font-size:32px}
.ap-inspection-summary{grid-template-columns:1fr}
.ap-inspection-row{grid-template-columns:42px minmax(0,1fr);gap:13px;padding:18px}
.ap-inspection-avatar{width:42px;height:42px}
.ap-inspection-slot{grid-column:2;border-left:0;padding-left:0}
.ap-inspection-row-actions{grid-column:2;align-items:flex-start}
.ap-inspection-detail-side{grid-template-columns:1fr}
.ap-inspection-fields,.ap-inspection-project-row{grid-template-columns:1fr}
.ap-inspection-fields>div,.ap-inspection-project-row>div{border-right:0!important;border-bottom:1px solid #E8EEF2!important}
.ap-inspection-fields>div:last-child,.ap-inspection-project-row>div:last-child{border-bottom:0!important}
.ap-inspection-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){
.ap-inspection-photo-grid{grid-template-columns:1fr}
.ap-inspection-panel-head{padding:14px 16px}
}



.ap-sidebar-nav .ap-nav-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#6FEFFF;color:#07112A;font-size:9px;font-weight:900;letter-spacing:0}
.ap-module.ap-module-consultations{position:relative}
.ap-module.ap-module-consultations .ap-module-arrow{position:absolute;right:22px;bottom:20px;color:#718398;font-size:18px;transition:.25s}
.ap-module.ap-module-consultations:hover .ap-module-arrow{color:#6FEFFF;transform:translateX(4px)}
.ap-consultations-page{width:100%;max-width:none;margin-top:34px;color:#17283A}
.ap-consultations-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-bottom:25px;border-bottom:1px solid #DCE6ED}
.ap-consultations-title{margin:0;color:#16253A;font-size:42px;line-height:1.04;font-weight:800;letter-spacing:-.045em}
.ap-consultations-subtitle{margin:9px 0 0;color:#64778C;font-size:13px;line-height:1.6}
.ap-consultations-back{display:inline-flex;align-items:center;gap:10px;min-height:43px;padding:0 16px;border:1px solid #CAD8E2;background:#fff;color:#33485E;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.14em;transition:.22s}
.ap-consultations-back:hover{color:#007E94;border-color:#6FEFFF;background:#F4FDFF}
.ap-consultations-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0}
.ap-consultation-summary-card{min-height:112px;display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid #D9E3EA;background:#fff;box-shadow:0 8px 24px rgba(25,48,70,.045)}
.ap-consultation-summary-card.is-accent{border-color:#B9EAF1;background:linear-gradient(135deg,#F7FEFF,#fff)}
.ap-consultation-summary-icon{flex:0 0 43px;width:43px;height:43px;display:grid;place-items:center;border:1px solid #C8EAF0;background:#F1FCFE;color:#008AA2;font-size:11px;font-weight:900}
.ap-consultation-summary-card.is-accent .ap-consultation-summary-icon{background:#6FEFFF;border-color:#6FEFFF;color:#071A2B;font-size:18px}
.ap-consultation-summary-card span{display:block;color:#728397;font-size:9px;font-weight:800;letter-spacing:.16em}
.ap-consultation-summary-card strong{display:block;margin:4px 0 2px;color:#14263B;font-size:27px;line-height:1;font-weight:800}
.ap-consultation-summary-card small{color:#8190A0;font-size:10px}
.ap-consultations-panel{border:1px solid #D8E2E9;background:#fff;box-shadow:0 12px 34px rgba(20,40,55,.055)}
.ap-consultations-panel-head{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 22px;border-bottom:1px solid #E2E9EE;background:#F8FAFB}
.ap-consultations-panel-head span{display:block;margin-bottom:5px;color:#00869D;font-size:8px;font-weight:900;letter-spacing:.18em}
.ap-consultations-panel-head strong{display:block;color:#1A2A3C;font-size:14px;font-weight:800}
.ap-consultations-panel-head small{color:#7B8998;font-size:10px}
.ap-consultation-list{display:flex;flex-direction:column}
.ap-consultation-row{display:grid;grid-template-columns:48px minmax(250px,1.6fr) minmax(130px,.65fr) auto;align-items:center;gap:18px;min-height:108px;padding:19px 22px;border-bottom:1px solid #E7EDF1;background:#fff;transition:.22s}
.ap-consultation-row:last-child{border-bottom:0}
.ap-consultation-row:hover{background:#FBFDFE}
.ap-consultation-row.is-new{background:linear-gradient(90deg,#F9FEFF 0%,#fff 52%)}
.ap-consultation-avatar{width:45px;height:45px;display:grid;place-items:center;border:1px solid #B9E8EF;border-radius:50%;background:#EEF9FB;color:#007F96;font-size:10px;font-weight:900;letter-spacing:.08em}
.ap-consultation-person{min-width:0}
.ap-consultation-request-id{display:flex;align-items:center;gap:8px;margin-bottom:5px;color:#8997A5;font-size:8px;font-weight:800;letter-spacing:.14em}
.ap-consultation-request-id span{padding:3px 6px;border-radius:3px;background:#E9FBFD;color:#00859C;font-size:7px;letter-spacing:.12em}
.ap-consultation-person h3{margin:0 0 6px;color:#16283C;font-size:16px;line-height:1.2;font-weight:800}
.ap-consultation-mobile{display:inline-flex;align-items:center;gap:6px;color:#167C91;text-decoration:none;font-size:11px;font-weight:700}
.ap-consultation-mobile span{color:#8393A3;font-size:8px;font-weight:800}
.ap-consultation-time{min-width:0;padding-left:18px;border-left:1px solid #E3EAEF}
.ap-consultation-time span{display:block;margin-bottom:5px;color:#8A98A6;font-size:8px;font-weight:800;letter-spacing:.13em}
.ap-consultation-time strong{display:block;color:#43576B;font-size:11px;font-weight:800}
.ap-consultation-time small{display:block;margin-top:3px;color:#8997A5;font-size:10px}
.ap-consultation-actions{min-width:118px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.ap-consultation-status{display:inline-flex;align-items:center;gap:6px;min-height:23px;padding:0 8px;border-radius:999px;background:#F0F3F6;color:#728191;font-size:8px;font-weight:900;letter-spacing:.12em}
.ap-consultation-status i{width:5px;height:5px;border-radius:50%;background:#93A0AD}
.ap-consultation-status.is-new{color:#007E94;background:#E8FAFC}
.ap-consultation-status.is-new i{background:#00AFC8}
.ap-consultation-call,.ap-consultation-read{min-height:30px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #C9D6DF;background:#fff;color:#43576B;text-decoration:none;font:inherit;font-size:8px;font-weight:900;letter-spacing:.12em;cursor:pointer;transition:.2s}
.ap-consultation-call span{color:#00A5BD;font-size:13px}
.ap-consultation-call:hover,.ap-consultation-read:hover{border-color:#6FEFFF;background:#F2FDFF;color:#00798F}
.ap-consultation-mark-form{margin:0}
.ap-consultation-empty{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}
.ap-consultation-empty div{width:42px;height:42px;display:grid;place-items:center;margin-bottom:5px;border:1px solid #BFEAF0;background:#F1FCFE;color:#00869D;border-radius:50%}
.ap-consultation-empty strong{color:#26394D;font-size:14px}
.ap-consultation-empty span{color:#8997A5;font-size:11px}
@media(max-width:1000px){.ap-consultations-title{font-size:35px}.ap-consultation-row{grid-template-columns:48px minmax(0,1fr) auto}.ap-consultation-time{display:none}}
@media(max-width:700px){.ap-consultations-head{align-items:flex-start;flex-direction:column}.ap-consultations-title{font-size:31px}.ap-consultations-summary{grid-template-columns:1fr}.ap-consultation-row{grid-template-columns:42px minmax(0,1fr);gap:13px;padding:17px}.ap-consultation-avatar{width:40px;height:40px}.ap-consultation-actions{grid-column:1/-1;width:100%;align-items:flex-start;flex-direction:row;flex-wrap:wrap;padding-top:10px;border-top:1px solid #E7EDF1}}



/* ============================================================
   ARCHER PRASANTA STAFF PORTAL
   SUPPORT REQUESTS / SRN — PREMIUM LIGHT UI
   ============================================================ */

main.ap-dashboard > section.ap-management.ap-support-management,
main.ap-dashboard > section.ap-management.ap-support-detail-page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.ap-support-management,
.ap-support-detail-page {
    color: var(--ap-text, #172532) !important;
}

.ap-support-management .ap-management-header,
.ap-support-detail-page .ap-management-header {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Sidebar request count */
.ap-sidebar-nav .ap-sidebar-link .ap-nav-count {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(111, 239, 255, .30);
    border-radius: 999px;
    background: #6FEFFF;
    color: #07112A;
    box-sizing: border-box;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 0 0 3px rgba(111, 239, 255, .06);
}

.ap-sidebar-nav .ap-sidebar-link .ap-nav-count.is-zero {
    border-color: rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .44);
    box-shadow: none;
}

.ap-sidebar-nav .ap-sidebar-link.is-active .ap-nav-count.is-zero {
    border-color: rgba(111, 239, 255, .18);
    background: rgba(111, 239, 255, .08);
    color: #6FEFFF;
}

/* Summary */
.ap-support-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0 18px;
}

.ap-support-summary-card {
    position: relative;
    min-height: 122px;
    padding: 21px 22px;
    overflow: hidden;
    border: 1px solid var(--ap-border, #D7E1E6) !important;
    border-radius: 12px;
    background: #FFFFFF !important;
    box-shadow: 0 10px 28px rgba(18, 42, 58, .055);
}

.ap-support-summary-card::after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -46px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(8, 191, 217, .08);
    border-radius: 50%;
}

.ap-support-summary-card.is-accent {
    border-color: #B9E8EF !important;
    background:
        linear-gradient(
            135deg,
            #F5FDFF 0%,
            #FFFFFF 72%
        ) !important;
}

.ap-support-summary-card span {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--ap-cyan-dark, #087F95) !important;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: .14em;
}

.ap-support-summary-card strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--ap-text, #172532) !important;
    font-size: 32px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.035em;
}

.ap-support-summary-card small {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 9px;
    color: var(--ap-muted, #71818D) !important;
    font-size: 11px;
    line-height: 1.45;
}

/* Search / filters */
.ap-support-filterbar {
    display: grid !important;
    grid-template-columns:
        minmax(320px, 1.7fr)
        minmax(175px, .58fr)
        minmax(200px, .68fr)
        auto
        auto;
    gap: 11px;
    align-items: end;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    padding: 17px !important;
    border: 1px solid var(--ap-border, #D7E1E6) !important;
    border-radius: 12px;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 28px rgba(18, 42, 58, .04);
}

.ap-support-filter-field {
    min-width: 0;
}

.ap-support-filter-field label {
    display: block;
    margin: 0 0 8px;
    color: var(--ap-muted, #71818D) !important;
    font-size: 8px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: .11em;
}

.ap-support-filter-field input,
.ap-support-filter-field select {
    display: block;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border: 1px solid #CFDCE4 !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background: #F9FBFC !important;
    color: var(--ap-text, #172532) !important;
    box-sizing: border-box !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.ap-support-filter-field input:focus,
.ap-support-filter-field select:focus {
    border-color: #6FEFFF !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(8, 191, 217, .08) !important;
}

.ap-support-filter-field input::placeholder {
    color: #9AA8B3 !important;
}

.ap-support-filterbar .ap-primary-button,
.ap-support-filterbar .ap-secondary-button {
    min-width: 108px;
    min-height: 46px !important;
    height: 46px;
    box-sizing: border-box;
    border-radius: 8px !important;
}

/* Request list */
.ap-support-list {
    display: grid;
    gap: 10px;
    width: 100%;
}

.ap-support-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    min-height: 132px;
    padding: 19px 20px;
    border: 1px solid var(--ap-border, #D7E1E6) !important;
    border-radius: 12px;
    background: #FFFFFF !important;
    box-shadow: 0 9px 26px rgba(18, 42, 58, .035);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.ap-support-row:hover {
    transform: translateY(-2px);
    border-color: #A9DDE5 !important;
    box-shadow: 0 14px 34px rgba(18, 42, 58, .075);
}

.ap-support-row-main {
    min-width: 0;
}

.ap-support-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ap-support-srn {
    color: var(--ap-cyan-dark, #087F95) !important;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: .09em;
}

.ap-support-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #B8E7EE;
    border-radius: 999px;
    background: #ECFBFD;
    color: #007F95 !important;
    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ap-support-status-under-review {
    border-color: #E7D3A3;
    background: #FFF9EA;
    color: #9A6B00 !important;
}

.ap-support-status-in-progress {
    border-color: #BDD9F3;
    background: #F0F7FE;
    color: #2875A8 !important;
}

.ap-support-status-resolved {
    border-color: #BFE7D6;
    background: #EFFAF5;
    color: #137D59 !important;
}

.ap-support-status-closed {
    border-color: #D6DDE2;
    background: #F4F6F7;
    color: #66747F !important;
}

.ap-support-row h3 {
    margin: 9px 0 0;
    color: var(--ap-text, #172532) !important;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
}

.ap-support-row p {
    max-width: 900px;
    margin: 7px 0 0;
    color: var(--ap-text-2, #435463) !important;
    font-size: 12px;
    line-height: 1.65;
}

.ap-support-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 15px;
    margin-top: 11px;
    color: var(--ap-muted, #71818D) !important;
    font-size: 8px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: .045em;
}

.ap-support-row-action .ap-primary-button {
    min-width: 112px;
    border-radius: 8px !important;
}

.ap-support-list > .ap-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: 26px;
    border: 1px dashed #C9D8E1 !important;
    border-radius: 12px;
    background: #FFFFFF !important;
    color: var(--ap-muted, #71818D) !important;
    text-align: center;
    box-sizing: border-box;
}

/* Support detail */
.ap-support-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 14px;
    padding: 21px 22px;
    border: 1px solid #CFE0E7 !important;
    border-radius: 13px;
    background:
        radial-gradient(
            circle at 92% 20%,
            rgba(8, 191, 217, .08),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #FFFFFF,
            #F5FAFC
        ) !important;
    box-shadow: 0 10px 28px rgba(18, 42, 58, .05);
}

.ap-support-detail-hero > div > span {
    color: var(--ap-cyan-dark, #087F95) !important;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ap-support-detail-hero h3 {
    margin: 8px 0 0;
    color: var(--ap-text, #172532) !important;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -.025em;
}

.ap-support-detail-hero p {
    margin: 7px 0 0;
    color: var(--ap-muted, #71818D) !important;
    font-size: 12px;
}

.ap-support-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 14px;
}

.ap-support-detail-main,
.ap-support-update-card {
    padding: 20px;
    border: 1px solid var(--ap-border, #D7E1E6) !important;
    border-radius: 13px;
    background: #FFFFFF !important;
    box-shadow: 0 10px 28px rgba(18, 42, 58, .045);
}

.ap-support-update-card {
    position: sticky;
    top: 92px;
    align-self: start;
}

.ap-support-update-card > span {
    color: var(--ap-cyan-dark, #087F95) !important;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ap-support-update-card h3 {
    margin: 9px 0 0;
    color: var(--ap-text, #172532) !important;
    font-size: 19px;
    font-weight: 800;
}

.ap-support-update-card p {
    margin: 8px 0 17px;
    color: var(--ap-muted, #71818D) !important;
    font-size: 11px;
    line-height: 1.65;
}

.ap-support-update-card label {
    display: block;
    margin: 13px 0 7px;
    color: var(--ap-muted, #71818D) !important;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .10em;
}

.ap-support-update-card select,
.ap-support-update-card textarea {
    display: block;
    width: 100% !important;
    padding: 11px 12px !important;
    border: 1px solid #CFDCE4 !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background: #F9FBFC !important;
    color: var(--ap-text, #172532) !important;
    box-sizing: border-box !important;
    font: inherit !important;
    font-size: 12px !important;
}

.ap-support-update-card select {
    height: 45px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ap-support-update-card textarea {
    min-height: 126px;
    resize: vertical;
    line-height: 1.6;
}

.ap-support-update-card select:focus,
.ap-support-update-card textarea:focus {
    border-color: #6FEFFF !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(8, 191, 217, .08) !important;
}

.ap-support-update-card .ap-primary-button {
    width: 100%;
    margin-top: 14px;
    border-radius: 8px !important;
}

/* Progress tracker */
.ap-support-progress-staff {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 3px 0 27px;
}

.ap-support-progress-rail {
    position: absolute;
    top: 9px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #D8E5EA;
}

.ap-support-progress-node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 9px;
    text-align: center;
}

.ap-support-progress-node i {
    width: 18px;
    height: 18px;
    border: 2px solid #C8D8DF;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 5px #FFFFFF;
    box-sizing: border-box;
}

.ap-support-progress-node.is-complete i {
    border-color: #08BFD9;
    background: #08BFD9;
}

.ap-support-progress-node.is-current i {
    border-color: #08BFD9;
    background: #FFFFFF;
    box-shadow:
        0 0 0 5px #FFFFFF,
        0 0 0 7px rgba(8, 191, 217, .12);
}

.ap-support-progress-node strong {
    max-width: 108px;
    color: #98A6B0 !important;
    font-size: 7px;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.ap-support-progress-node.is-complete strong,
.ap-support-progress-node.is-current strong {
    color: var(--ap-text-2, #435463) !important;
}

/* Request details */
.ap-support-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.ap-support-info-grid > div,
.ap-support-message-box {
    padding: 14px;
    border: 1px solid #E0E8ED !important;
    border-radius: 9px;
    background: #F9FBFC !important;
}

.ap-support-info-grid span,
.ap-support-message-box > span,
.ap-support-history-title {
    display: block;
    color: var(--ap-cyan-dark, #087F95) !important;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .10em;
}

.ap-support-info-grid strong {
    display: block;
    margin-top: 7px;
    color: var(--ap-text-2, #435463) !important;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.ap-support-message-box {
    margin-top: 10px;
}

.ap-support-message-box p {
    margin: 8px 0 0;
    color: var(--ap-text-2, #435463) !important;
    font-size: 12px;
    line-height: 1.7;
}

/* Status history */
.ap-support-history-box {
    margin-top: 19px;
    padding-top: 18px;
    border-top: 1px solid #E0E8ED;
}

.ap-support-history-title {
    margin-bottom: 13px;
}

.ap-support-history-event {
    position: relative;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 12px;
    padding: 0 0 15px;
}

.ap-support-history-event:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 12px;
    bottom: 0;
    width: 1px;
    background: #D9E5EA;
}

.ap-support-history-event i {
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border: 2px solid #08BFD9;
    border-radius: 50%;
    background: #FFFFFF;
    box-sizing: border-box;
}

.ap-support-history-event strong {
    display: block;
    color: var(--ap-text, #172532) !important;
    font-size: 11px;
    font-weight: 800;
}

.ap-support-history-event p {
    margin: 4px 0 0;
    color: var(--ap-text-2, #435463) !important;
    font-size: 11px;
    line-height: 1.55;
}

.ap-support-history-event small {
    display: block;
    margin-top: 5px;
    color: var(--ap-muted, #71818D) !important;
    font-size: 9px;
}

/* Dashboard support module badge */
.ap-module .ap-module-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 7px;
    border: 1px solid #B9E8EF;
    border-radius: 999px;
    background: #ECFBFD;
    color: #007F95 !important;
    font-size: 7px;
    line-height: 1;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .06em;
}

@media (max-width: 1180px) {
    .ap-support-filterbar {
        grid-template-columns: 1fr 1fr !important;
    }

    .ap-support-filter-field.is-search {
        grid-column: 1 / -1;
    }

    .ap-support-filterbar .ap-primary-button,
    .ap-support-filterbar .ap-secondary-button {
        width: 100%;
    }

    .ap-support-detail-grid {
        grid-template-columns: 1fr;
    }

    .ap-support-update-card {
        position: static;
    }

    .ap-support-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .ap-support-summary,
    .ap-support-filterbar,
    .ap-support-info-grid {
        grid-template-columns: 1fr !important;
    }

    .ap-support-filter-field.is-search {
        grid-column: auto;
    }

    .ap-support-row,
    .ap-support-detail-hero {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ap-support-row-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .ap-support-row-action .ap-primary-button {
        width: 100%;
    }

    .ap-support-progress-staff {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ap-support-progress-rail {
        top: 9px;
        bottom: 9px;
        left: 8px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .ap-support-progress-node {
        grid-template-columns: 18px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        text-align: left;
    }

    .ap-support-progress-node strong {
        max-width: none;
    }
}



.ap-settings-page{display:block!important;width:100%!important;max-width:1180px!important;margin:40px auto 0!important;padding:0!important;background:transparent!important;color:#17283a!important;font-family:inherit!important}
.ap-settings-page .ap-management-header{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:28px!important;margin:0 0 28px!important;padding:0 0 26px!important;border-bottom:1px solid #dce6ed!important}
.ap-settings-page .ap-management-kicker{display:block!important;margin:0 0 9px!important;color:#00a9c2!important;font-size:10px!important;font-weight:800!important;letter-spacing:.18em!important}
.ap-settings-page .ap-management-title{display:block!important;margin:0!important;color:#17283a!important;font-size:42px!important;line-height:1.05!important;font-weight:800!important;letter-spacing:-.03em!important}
.ap-settings-page .ap-management-description{margin:8px 0 0!important;color:#60758a!important;font-size:14px!important;line-height:1.55!important}
.ap-settings-page .ap-settings-form{display:flex!important;flex-direction:column!important;gap:18px!important;margin:0!important}
.ap-settings-page .ap-settings-section{display:block!important;width:100%!important;background:#fff!important;border:1px solid #d7e2e8!important;box-shadow:0 12px 34px rgba(20,40,55,.06)!important;overflow:hidden!important;color:#17283a!important}
.ap-settings-page .ap-settings-section-head{display:block!important;padding:22px 24px!important;margin:0!important;background:#f5f9fb!important;border-bottom:1px solid #dce6ed!important}
.ap-settings-page .ap-settings-section-head>div{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:0 14px!important;align-items:start!important}
.ap-settings-page .ap-settings-section-head>div>span{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;margin:0!important;background:#effcff!important;border:1px solid #b8eaf2!important;color:#008fa8!important;font-size:11px!important;font-weight:800!important;letter-spacing:.08em!important}
.ap-settings-page .ap-settings-section-head h3{display:block!important;margin:2px 0 0!important;color:#172a3d!important;font-size:14px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:.16em!important}
.ap-settings-page .ap-settings-section-head p{display:block!important;grid-column:2!important;margin:7px 0 0!important;color:#687c8e!important;font-size:13px!important;line-height:1.55!important}
.ap-settings-page .ap-settings-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 18px!important;padding:24px!important;margin:0!important;background:#fff!important}
.ap-settings-page .ap-settings-field{display:block!important;min-width:0!important;margin:0!important;padding:0!important;color:#17283a!important}
.ap-settings-page .ap-settings-field.ap-settings-wide{grid-column:1/-1!important}
.ap-settings-page .ap-settings-field>label:first-child{display:block!important;margin:0 0 8px!important;color:#587087!important;font-size:10px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase!important}
.ap-settings-page .ap-settings-field input[type="text"],.ap-settings-page .ap-settings-field input[type="email"],.ap-settings-page .ap-settings-field input[type="number"],.ap-settings-page .ap-settings-field textarea,.ap-settings-page .ap-settings-field select{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:46px!important;margin:0!important;padding:12px 13px!important;box-sizing:border-box!important;border:1px solid #cbd8e0!important;border-radius:0!important;background:#fff!important;color:#172a3d!important;font-family:inherit!important;font-size:14px!important;line-height:1.35!important;outline:none!important;box-shadow:none!important;appearance:auto!important}
.ap-settings-page .ap-settings-field textarea{min-height:92px!important;height:auto!important;resize:vertical!important;line-height:1.55!important}
.ap-settings-page .ap-settings-field input:focus,.ap-settings-page .ap-settings-field textarea:focus,.ap-settings-page .ap-settings-field select:focus{border-color:#5bd9eb!important;box-shadow:0 0 0 3px rgba(111,239,255,.13)!important}
.ap-settings-page .ap-settings-field small{display:block!important;margin:8px 0 0!important;color:#788b9b!important;font-size:11px!important;line-height:1.5!important}
.ap-settings-page .ap-settings-check{display:flex!important;flex-direction:column!important}
.ap-settings-page .ap-settings-toggle{display:flex!important;align-items:center!important;gap:10px!important;min-height:46px!important;padding:10px 13px!important;border:1px solid #cbd8e0!important;background:#fff!important;color:#344c62!important;font-size:13px!important;cursor:pointer!important}
.ap-settings-page .ap-settings-toggle input,.ap-settings-page .ap-settings-notification input{accent-color:#18cfe7!important}
.ap-settings-page .ap-settings-service-list{display:block!important;margin:0!important;padding:0 24px 24px!important;background:#fff!important}
.ap-settings-page .ap-settings-service-list>span{display:block!important;margin:0 0 10px!important;color:#587087!important;font-size:9px!important;font-weight:800!important;letter-spacing:.16em!important}
.ap-settings-page .ap-settings-service-list>div{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.ap-settings-page .ap-settings-service-list b{display:block!important;margin:0!important;padding:9px 11px!important;border:1px solid #cfe0e6!important;background:#f8fbfc!important;color:#264158!important;font-size:11px!important;line-height:1.2!important;font-weight:700!important}
.ap-settings-page .ap-settings-notification-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:24px!important;margin:0!important;background:#fff!important}
.ap-settings-page .ap-settings-notification{display:grid!important;grid-template-columns:18px minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;margin:0!important;padding:15px 16px!important;border:1px solid #d5e0e6!important;background:#fff!important;color:#172a3d!important;cursor:pointer!important}
.ap-settings-page .ap-settings-notification strong{color:#1b3044!important;font-size:13px!important;line-height:1.3!important}
.ap-settings-page .ap-settings-notification small{color:#718496!important;font-size:11px!important;line-height:1.45!important}
.ap-settings-page .ap-settings-notification em{font-style:normal!important;color:#00a0bb!important;font-size:9px!important;font-weight:800!important;letter-spacing:.14em!important}
.ap-settings-page .ap-settings-security-note,.ap-settings-page .ap-settings-system-note{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;margin:0 24px 24px!important;padding:13px 15px!important;border-left:3px solid #65deed!important;background:#f5fbfc!important;color:#5f7486!important;font-size:11px!important;line-height:1.6!important}
.ap-settings-page .ap-settings-system-note{justify-content:space-between!important}
.ap-settings-page .ap-settings-actions{display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;padding:0 0 34px!important}
.ap-settings-page .ap-settings-actions button{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:48px!important;padding:0 20px!important;border-radius:0!important;font-family:inherit!important;font-size:10px!important;font-weight:800!important;letter-spacing:.14em!important;cursor:pointer!important}
.ap-settings-page .ap-settings-actions .ap-primary-button{background:#67e6f5!important;color:#102636!important;border:1px solid #67e6f5!important}
.ap-settings-page .ap-settings-actions .ap-secondary-button{background:#fff!important;color:#42586c!important;border:1px solid #cbd8e0!important}
@media(max-width:900px){.ap-settings-page{width:calc(100% - 36px)!important}.ap-settings-page .ap-settings-grid,.ap-settings-page .ap-settings-notification-grid{grid-template-columns:1fr!important}.ap-settings-page .ap-settings-field.ap-settings-wide{grid-column:auto!important}}
@media(max-width:600px){.ap-settings-page{width:calc(100% - 24px)!important;margin-top:26px!important}.ap-settings-page .ap-management-title{font-size:34px!important}.ap-settings-page .ap-settings-section-head{padding:18px!important}.ap-settings-page .ap-settings-grid,.ap-settings-page .ap-settings-notification-grid{padding:18px!important}.ap-settings-page .ap-settings-service-list{padding:0 18px 18px!important}.ap-settings-page .ap-settings-security-note,.ap-settings-page .ap-settings-system-note{margin:0 18px 18px!important}.ap-settings-page .ap-settings-actions{flex-direction:column!important;align-items:stretch!important}.ap-settings-page .ap-settings-actions button{width:100%!important}}



/* ============================================================
   ARCHER PRASANTA — STAFF PORTAL v4.4.1
   LATE CSS HOTFIX
   - Four wizard steps always stay on one row
   - Compact premium media gallery wins over legacy CSS
   ============================================================ */

/* ------------------------------------------------------------
   4-STEP WIZARD — ONE LINE
   ------------------------------------------------------------ */

main.ap-dashboard
section.ap-management
.ap-sr-wizard-nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 10px !important;
    overflow: visible !important;
    margin-bottom: 14px !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-wizard-step {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns:
        38px
        minmax(0, 1fr) !important;
    align-items: center !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-wizard-step > span {
    min-width: 0 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-wizard-step strong,
main.ap-dashboard
section.ap-management
.ap-sr-wizard-step small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-wizard-step small {
    white-space: nowrap !important;
}

/* ------------------------------------------------------------
   MEDIA LIBRARY WRAPPER
   ------------------------------------------------------------ */

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-library {
    overflow: hidden !important;
    border: 1px solid #D6E4E9 !important;
    border-radius: 11px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 10px 28px rgba(23, 51, 69, .045) !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-library
.ap-sr-section-head {
    margin: 0 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #E3ECEF !important;
    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(58, 217, 233, .11),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #FFFFFF,
            #F6FCFD
        ) !important;
}

/* ------------------------------------------------------------
   PHASE BLOCKS
   ------------------------------------------------------------ */

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-phase {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px 16px !important;
    border-top: 1px solid #E5ECEF !important;
    background: #FFFFFF !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-phase:first-of-type {
    border-top: 0 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-phase-head {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
        34px
        minmax(0, 1fr)
        auto !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-phase-head > i {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #BDE3E9 !important;
    border-radius: 8px !important;
    background: #EFFBFC !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-phase-head > div {
    min-width: 0 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-phase-head > div > span {
    display: block !important;
    color: #26465A !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-phase-head > div > p {
    margin: 3px 0 0 !important;
    color: #8798A2 !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-phase-head > strong {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid #D8E6EA !important;
    border-radius: 999px !important;
    background: #F8FBFC !important;
    color: #708792 !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
}

/* ------------------------------------------------------------
   COMPACT THUMBNAIL GRID
   ------------------------------------------------------------ */

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 0 !important;
    margin: 0 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-card {
    min-width: 0 !important;
    width: auto !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #D9E4E8 !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 6px 16px rgba(20, 49, 67, .045) !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-preview {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #E9F0F3 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-preview img,
main.ap-dashboard
section.ap-management
.ap-sr-staff-media-preview video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    object-fit: cover !important;
    border: 0 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-preview > small {
    position: absolute !important;
    right: 7px !important;
    bottom: 7px !important;
    z-index: 3 !important;
    min-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 6px !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: 999px !important;
    background: rgba(7, 24, 39, .80) !important;
    color: #FFFFFF !important;
    font-size: 6px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-preview > i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 4 !important;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 50% !important;
    background: rgba(7, 24, 39, .78) !important;
    color: #66E3F1 !important;
    font-size: 11px !important;
    font-style: normal !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-meta {
    display: block !important;
    padding: 8px 9px 9px !important;
    background: #FFFFFF !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-meta > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 7px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-meta > strong {
    display: block !important;
    margin-top: 3px !important;
    color: #2C4A5E !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-meta > small {
    display: block !important;
    margin-top: 3px !important;
    color: #84959E !important;
    font-size: 7px !important;
    line-height: 1.35 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-meta form {
    margin: 7px 0 0 !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-staff-media-meta
.ap-danger-button {
    min-height: 29px !important;
    padding: 0 9px !important;
    font-size: 7px !important;
}

/* ------------------------------------------------------------
   FINAL HANDOVER STEP
   ------------------------------------------------------------ */

main.ap-dashboard
section.ap-management
.ap-sr-handover-status {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

main.ap-dashboard
section.ap-management
.ap-sr-delivery-upload
.ap-sr-upload {
    width: 100% !important;
}

/* ------------------------------------------------------------
   LIGHTBOX — force above all Staff Portal UI
   ------------------------------------------------------------ */

.ap-sr-staff-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
}

.ap-sr-staff-lightbox.is-open {
    display: flex !important;
}

.ap-sr-staff-lightbox-content img,
.ap-sr-staff-lightbox-content video {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* ------------------------------------------------------------
   RESPONSIVE — still keep 4 wizard steps in ONE LINE
   ------------------------------------------------------------ */

@media (max-width: 1180px) {
    main.ap-dashboard
    section.ap-management
    .ap-sr-staff-media-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }

    main.ap-dashboard
    section.ap-management
    .ap-sr-wizard-step {
        padding: 10px !important;
        gap: 8px !important;
    }

    main.ap-dashboard
    section.ap-management
    .ap-sr-wizard-step strong {
        font-size: 9px !important;
    }

    main.ap-dashboard
    section.ap-management
    .ap-sr-wizard-step small {
        font-size: 7px !important;
    }
}

@media (max-width: 900px) {
    main.ap-dashboard
    section.ap-management
    .ap-sr-wizard-nav {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(220px, 1fr) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 5px !important;
        scroll-snap-type: x proximity !important;
    }

    main.ap-dashboard
    section.ap-management
    .ap-sr-wizard-step {
        scroll-snap-align: start !important;
    }

    main.ap-dashboard
    section.ap-management
    .ap-sr-staff-media-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

    main.ap-dashboard
    section.ap-management
    .ap-sr-handover-status {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    main.ap-dashboard
    section.ap-management
    .ap-sr-wizard-nav {
        grid-auto-columns: minmax(205px, 82vw) !important;
    }

    main.ap-dashboard
    section.ap-management
    .ap-sr-staff-media-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    main.ap-dashboard
    section.ap-management
    .ap-sr-staff-media-phase-head {
        grid-template-columns:
            30px
            minmax(0, 1fr) !important;
    }

    main.ap-dashboard
    section.ap-management
    .ap-sr-staff-media-phase-head > strong {
        grid-column: 2 !important;
        justify-self: start !important;
    }
}



/* ============================================================
   STAFF PORTAL v4.4.2
   CUSTOMER-PORTAL-STYLE COMPACT MEDIA GALLERY
   ============================================================ */

/*
 * This stylesheet is intentionally loaded last.
 * It overrides every legacy workshop-media rule.
 */

/* Premium outer library */
body
.ap-sr-staff-media-library {
    overflow: hidden !important;
    margin-top: 12px !important;
    border: 1px solid #D5E3E8 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 10px 30px rgba(26, 52, 69, .045) !important;
}

body
.ap-sr-staff-media-library
.ap-sr-section-head {
    padding: 14px 16px !important;
    border-bottom: 1px solid #E4ECEF !important;
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(47, 210, 227, .11),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #FFFFFF,
            #F8FCFD
        ) !important;
}

/* Phase */
body
.ap-sr-staff-media-phase {
    width: 100% !important;
    display: block !important;
    padding: 13px 16px 15px !important;
    border-top: 1px solid #E7EEF0 !important;
}

body
.ap-sr-staff-media-phase:first-of-type {
    border-top: 0 !important;
}

body
.ap-sr-staff-media-phase-head {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
        32px
        minmax(0, 1fr)
        auto !important;
    gap: 9px !important;
    align-items: center !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
}

body
.ap-sr-staff-media-phase-head > i {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #BDE3E9 !important;
    border-radius: 8px !important;
    background: #EFFAFC !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

body
.ap-sr-staff-media-phase-head > div > span {
    display: block !important;
    color: #254457 !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
}

body
.ap-sr-staff-media-phase-head > div > p {
    margin: 2px 0 0 !important;
    color: #8A9AA3 !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
}

body
.ap-sr-staff-media-phase-head > strong {
    min-height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 7px !important;
    border: 1px solid #DBE6EA !important;
    border-radius: 999px !important;
    background: #F8FBFC !important;
    color: #738994 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* Small thumbnail grid — deliberately smaller than v4.4.1 */
body
.ap-sr-staff-media-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body
.ap-sr442-media-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #DCE6E9 !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 4px 12px rgba(22, 50, 67, .035) !important;
}

body
.ap-sr442-media-preview {
    position: relative !important;
    width: 100% !important;
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #EDF2F4 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: zoom-in !important;
}

body
.ap-sr442-media-preview img,
body
.ap-sr442-media-preview video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 118px !important;
    min-width: 100% !important;
    max-width: none !important;
    min-height: 118px !important;
    max-height: 118px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
}

body
.ap-sr442-media-preview::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            to top,
            rgba(6, 20, 32, .20),
            transparent 48%
        ) !important;
}

body
.ap-sr442-media-badges {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
}

body
.ap-sr442-media-badges > small {
    position: static !important;
    min-height: 19px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 6px !important;
    border: 1px solid rgba(255, 255, 255, .38) !important;
    border-radius: 999px !important;
    background: rgba(8, 24, 39, .82) !important;
    color: #FFFFFF !important;
    font-size: 5.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}

body
.ap-sr442-media-badges > small.is-customer {
    border-color: rgba(97, 221, 234, .58) !important;
    color: #85F2FF !important;
}

body
.ap-sr442-media-badges > small.is-internal {
    border-color: rgba(255, 198, 85, .50) !important;
    color: #FFD778 !important;
}

body
.ap-sr442-play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 5 !important;
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(255, 255, 255, .58) !important;
    border-radius: 50% !important;
    background: rgba(7, 22, 37, .78) !important;
    color: #68E5F2 !important;
    font-size: 10px !important;
    font-style: normal !important;
}

body
.ap-sr442-media-info {
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        auto !important;
    gap: 7px !important;
    align-items: center !important;
    padding: 7px 8px 8px !important;
    background: #FFFFFF !important;
}

body
.ap-sr442-media-info > div {
    min-width: 0 !important;
}

body
.ap-sr442-media-info > div > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 6px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
}

body
.ap-sr442-media-info > div > strong {
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    color: #385364 !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body
.ap-sr442-media-info form {
    margin: 0 !important;
}

body
.ap-sr442-media-remove {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid #F0C9C9 !important;
    border-radius: 7px !important;
    background: #FFF7F7 !important;
    color: #C75252 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

/* Lightbox */
body
.ap-sr-staff-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(1, 7, 18, .90) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body
.ap-sr-staff-lightbox.is-open {
    display: flex !important;
}

body
.ap-sr-staff-lightbox-dialog {
    width: min(1120px, 100%) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(105, 226, 239, .22) !important;
    border-radius: 14px !important;
    background: #07152A !important;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .56) !important;
}

body
.ap-sr-staff-lightbox-content {
    height: min(78vh, 780px) !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px !important;
    background: #020817 !important;
}

body
.ap-sr-staff-lightbox-content img,
body
.ap-sr-staff-lightbox-content video {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

/* Responsive */
@media (max-width: 1380px) {
    body
    .ap-sr-staff-media-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1120px) {
    body
    .ap-sr-staff-media-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }

    body
    .ap-sr442-media-preview,
    body
    .ap-sr442-media-preview img,
    body
    .ap-sr442-media-preview video {
        height: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
    }
}

@media (max-width: 820px) {
    body
    .ap-sr-staff-media-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    body
    .ap-sr-staff-media-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body
    .ap-sr442-media-preview,
    body
    .ap-sr442-media-preview img,
    body
    .ap-sr442-media-preview video {
        height: 104px !important;
        min-height: 104px !important;
        max-height: 104px !important;
    }

    body
    .ap-sr-staff-media-phase-head {
        grid-template-columns:
            30px
            minmax(0, 1fr) !important;
    }

    body
    .ap-sr-staff-media-phase-head > strong {
        grid-column: 2 !important;
        justify-self: start !important;
    }
}



/* ============================================================
   STAFF PORTAL v4.4.3
   PROFESSIONAL MEDIA VIEWER
   ============================================================ */

body.ap-sr-staff-lightbox-open {
    overflow: hidden !important;
}

body
.ap-sr-staff-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(27, 70, 88, .22),
            transparent 34%
        ),
        rgba(3, 9, 16, .84) !important;
    backdrop-filter: blur(14px) saturate(.8) !important;
    -webkit-backdrop-filter: blur(14px) saturate(.8) !important;
}

body
.ap-sr-staff-lightbox.is-open {
    display: flex !important;
}

body
.ap-sr443-viewer {
    width: min(1180px, 96vw) !important;
    height: min(840px, calc(100vh - 56px)) !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto !important;
    border: 1px solid #BFD1D8 !important;
    border-radius: 16px !important;
    background: #F7FAFB !important;
    box-shadow:
        0 32px 100px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(255, 255, 255, .28) inset !important;
}

/* Header */
body
.ap-sr443-viewer-header {
    min-height: 66px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 12px 14px 12px 18px !important;
    border-bottom: 1px solid #D9E5E9 !important;
    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F1F8FA
        ) !important;
}

body
.ap-sr443-viewer-heading {
    min-width: 0 !important;
}

body
.ap-sr443-viewer-heading > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
}

body
.ap-sr443-viewer-heading > strong {
    display: block !important;
    max-width: 720px !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: #19384C !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body
.ap-sr443-viewer-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

body
.ap-sr443-viewer-counter {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 11px !important;
    border: 1px solid #D4E2E6 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #6D818D !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
}

body
.ap-sr443-viewer-close {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid #D3E0E5 !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    color: #456070 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    box-shadow:
        0 4px 12px rgba(25, 55, 73, .06) !important;
}

body
.ap-sr443-viewer-close:hover {
    border-color: #8EDBE5 !important;
    color: #087F94 !important;
}

/* Stage */
body
.ap-sr443-viewer-stage {
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns:
        58px
        minmax(0, 1fr)
        58px !important;
    align-items: center !important;
    background:
        radial-gradient(
            circle at 50% 44%,
            #25323B 0,
            #192229 42%,
            #11181D 76%,
            #0E1418 100%
        ) !important;
}

body
.ap-sr443-viewer-stage::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: .20 !important;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        ) !important;
    background-size:
        28px 28px !important;
}

body
.ap-sr443-viewer-media-shell {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
}

body
.ap-sr443-viewer-content {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: transparent !important;
}

body
.ap-sr443-viewer-content img,
body
.ap-sr443-viewer-content video {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    background: #0A0F12 !important;
    box-shadow:
        0 18px 54px rgba(0, 0, 0, .42) !important;
}

/* Navigation arrows */
body
.ap-sr443-viewer-nav {
    position: relative !important;
    z-index: 4 !important;
    width: 42px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #244052 !important;
    cursor: pointer !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .24) !important;
    transition:
        transform .15s ease,
        border-color .15s ease,
        color .15s ease !important;
}

body
.ap-sr443-viewer-nav:hover {
    transform: scale(1.04) !important;
    border-color: #71DCE8 !important;
    color: #078DA3 !important;
}

body
.ap-sr443-viewer-nav > span {
    display: block !important;
    transform: translateY(-1px) !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
}

body
.ap-sr443-viewer-nav.is-hidden {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Footer + thumbnails */
body
.ap-sr443-viewer-footer {
    min-height: 88px !important;
    display: grid !important;
    grid-template-columns:
        auto
        minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 10px 14px 11px !important;
    border-top: 1px solid #D8E4E8 !important;
    background: #FFFFFF !important;
}

body
.ap-sr443-viewer-help {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 6px !important;
}

body
.ap-sr443-viewer-help > span {
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border: 1px solid #D7E3E7 !important;
    border-radius: 6px !important;
    background: #F6FAFB !important;
    color: #58707E !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

body
.ap-sr443-viewer-help > p {
    margin: 0 !important;
    color: #8798A2 !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

body
.ap-sr443-viewer-thumbs {
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 2px 1px 4px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #B6C9CF transparent !important;
}

body
.ap-sr443-viewer-thumb {
    position: relative !important;
    width: 72px !important;
    height: 54px !important;
    flex: 0 0 72px !important;
    overflow: hidden !important;
    display: block !important;
    padding: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 7px !important;
    background: #DDE6E9 !important;
    cursor: pointer !important;
    opacity: .68 !important;
    transition:
        opacity .15s ease,
        border-color .15s ease,
        transform .15s ease !important;
}

body
.ap-sr443-viewer-thumb:hover {
    opacity: 1 !important;
}

body
.ap-sr443-viewer-thumb.is-active {
    transform: translateY(-1px) !important;
    border-color: #19BCD2 !important;
    opacity: 1 !important;
    box-shadow:
        0 0 0 2px rgba(25, 188, 210, .12) !important;
}

body
.ap-sr443-viewer-thumb img,
body
.ap-sr443-viewer-thumb video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

body
.ap-sr443-viewer-thumb::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .32),
            transparent 55%
        ) !important;
}

body
.ap-sr443-viewer-thumb > small {
    position: absolute !important;
    right: 4px !important;
    bottom: 3px !important;
    z-index: 3 !important;
    color: #FFFFFF !important;
    font-size: 6px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

body
.ap-sr443-thumb-play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 3 !important;
    width: 21px !important;
    height: 21px !important;
    display: grid !important;
    place-items: center !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: rgba(4, 16, 26, .76) !important;
    color: #70E4F0 !important;
    font-size: 7px !important;
}

/* Responsive */
@media (max-width: 780px) {
    body
    .ap-sr-staff-lightbox {
        padding: 0 !important;
    }

    body
    .ap-sr443-viewer {
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    body
    .ap-sr443-viewer-stage {
        grid-template-columns:
            46px
            minmax(0, 1fr)
            46px !important;
    }

    body
    .ap-sr443-viewer-media-shell {
        padding: 12px !important;
    }

    body
    .ap-sr443-viewer-nav {
        width: 34px !important;
        height: 48px !important;
        border-radius: 9px !important;
    }

    body
    .ap-sr443-viewer-footer {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    body
    .ap-sr443-viewer-help {
        display: none !important;
    }
}

@media (max-width: 520px) {
    body
    .ap-sr443-viewer-header {
        min-height: 58px !important;
        padding: 10px !important;
    }

    body
    .ap-sr443-viewer-heading > strong {
        max-width: 56vw !important;
        font-size: 12px !important;
    }

    body
    .ap-sr443-viewer-stage {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            38px !important;
    }

    body
    .ap-sr443-viewer-nav {
        width: 30px !important;
        height: 44px !important;
    }

    body
    .ap-sr443-viewer-thumb {
        width: 62px !important;
        height: 47px !important;
        flex-basis: 62px !important;
    }
}



/* ============================================================
   STAFF PORTAL v4.4.4
   PREMIUM FINAL HANDOVER WORKSPACE
   ============================================================ */

body
.ap-sr444-handover-form {
    width: 100% !important;
    display: grid !important;
    gap: 12px !important;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

body
.ap-sr444-handover-hero {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        auto !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 20px 22px !important;
    border: 1px solid #CCE4E9 !important;
    border-radius: 12px !important;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(73, 224, 239, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F6FCFD 58%,
            #EDF9FB 100%
        ) !important;
    box-shadow:
        0 10px 28px rgba(26, 55, 72, .045) !important;
}

body
.ap-sr444-hero-copy > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
}

body
.ap-sr444-hero-copy > h2 {
    margin: 6px 0 0 !important;
    color: #18384C !important;
    font-size: 23px !important;
    line-height: 1.12 !important;
    font-weight: 850 !important;
}

body
.ap-sr444-hero-copy > p {
    max-width: 760px !important;
    margin: 7px 0 0 !important;
    color: #718794 !important;
    font-size: 10px !important;
    line-height: 1.58 !important;
}

body
.ap-sr444-hero-badge {
    min-width: 190px !important;
    display: grid !important;
    gap: 5px !important;
    justify-items: end !important;
    padding: 13px 14px !important;
    border: 1px solid #B8E1E6 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .84) !important;
    box-shadow:
        0 8px 22px rgba(20, 70, 82, .05) !important;
}

body
.ap-sr444-hero-badge > small {
    color: #8397A1 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

body
.ap-sr444-hero-badge > strong {
    color: #11806B !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

body
.ap-sr444-hero-badge > span {
    color: #8B99A1 !important;
    font-size: 8px !important;
}

/* ------------------------------------------------------------
   STATUS CARDS
   ------------------------------------------------------------ */

body
.ap-sr444-status-grid {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body
.ap-sr444-status-card {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns:
        42px
        minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px !important;
    border: 1px solid #D8E5E9 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 6px 18px rgba(24, 50, 67, .035) !important;
}

body
.ap-sr444-status-icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #CAE1E5 !important;
    border-radius: 9px !important;
    background: #F3FAFB !important;
    color: #078DA3 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body
.ap-sr444-status-card.is-paid
.ap-sr444-status-icon,
body
.ap-sr444-status-card.is-delivered
.ap-sr444-status-icon {
    border-color: #A6DACB !important;
    background: #EEF9F5 !important;
    color: #108064 !important;
}

body
.ap-sr444-status-card > div:last-child > span {
    display: block !important;
    color: #8797A0 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

body
.ap-sr444-status-card > div:last-child > strong {
    display: block !important;
    margin-top: 4px !important;
    color: #29475A !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
}

body
.ap-sr444-status-card.is-paid > div:last-child > strong,
body
.ap-sr444-status-card.is-delivered > div:last-child > strong {
    color: #0D7C62 !important;
}

body
.ap-sr444-status-card > div:last-child > p {
    margin: 4px 0 0 !important;
    color: #8A99A2 !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
}

/* ------------------------------------------------------------
   PANELS
   ------------------------------------------------------------ */

body
.ap-sr444-panel {
    overflow: hidden !important;
    border: 1px solid #D6E3E8 !important;
    border-radius: 11px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 8px 24px rgba(24, 52, 69, .035) !important;
}

body
.ap-sr444-panel-head {
    display: grid !important;
    grid-template-columns:
        36px
        minmax(0, 1fr)
        auto !important;
    gap: 11px !important;
    align-items: center !important;
    padding: 13px 15px !important;
    border-bottom: 1px solid #E3ECEF !important;
    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F7FCFD
        ) !important;
}

body
.ap-sr444-panel-index {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #BFE3E9 !important;
    border-radius: 8px !important;
    background: #EFFAFC !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    font-weight: 900 !important;
}

body
.ap-sr444-panel-head > div:nth-child(2) > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

body
.ap-sr444-panel-head > div:nth-child(2) > h3 {
    margin: 3px 0 0 !important;
    color: #234257 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
}

body
.ap-sr444-panel-head > div:nth-child(2) > p {
    margin: 3px 0 0 !important;
    color: #8999A2 !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
}

body
.ap-sr444-panel-head > small {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border: 1px solid #D5E4E8 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #798E99 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}

/* Note */
body
.ap-sr444-note-wrap {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        260px !important;
    gap: 12px !important;
    padding: 14px !important;
}

body
.ap-sr444-note-wrap > textarea {
    width: 100% !important;
    min-height: 118px !important;
    resize: vertical !important;
    padding: 12px 13px !important;
    border: 1px solid #CBDDE3 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #2F4C5E !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
    box-shadow:
        0 0 0 3px transparent !important;
}

body
.ap-sr444-note-wrap > textarea:focus {
    outline: 0 !important;
    border-color: #65D3E0 !important;
    box-shadow:
        0 0 0 3px rgba(63, 201, 217, .10) !important;
}

body
.ap-sr444-note-help {
    padding: 12px !important;
    border: 1px solid #E0E8EB !important;
    border-radius: 8px !important;
    background: #F8FBFC !important;
}

body
.ap-sr444-note-help > span {
    display: block !important;
    color: #758B96 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
}

body
.ap-sr444-note-help > p {
    margin: 7px 0 0 !important;
    color: #8798A1 !important;
    font-size: 8px !important;
    line-height: 1.55 !important;
}

/* Upload */
body
.ap-sr444-upload-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 14px !important;
    padding: 14px !important;
    border: 1px dashed #A8D4DB !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            135deg,
            #FAFEFF,
            #F4FAFB
        ) !important;
    cursor: pointer !important;
}

body
.ap-sr444-upload-icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #BDE3E9 !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    color: #078DA3 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
}

body
.ap-sr444-upload-card > div > strong {
    display: block !important;
    color: #28485B !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
}

body
.ap-sr444-upload-card > div > span {
    display: block !important;
    margin-top: 3px !important;
    color: #69818E !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

body
.ap-sr444-upload-card > div > small {
    display: block !important;
    margin-top: 5px !important;
    color: #94A1A8 !important;
    font-size: 7px !important;
}

body
.ap-sr444-upload-card > em {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border: 1px solid #B9DCE2 !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #087F94 !important;
    font-size: 8px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}

body
.ap-sr444-upload-card > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Delivery media gallery */
body
.ap-sr444-delivery-gallery {
    display: grid !important;
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 14px 14px !important;
}

body
.ap-sr444-delivery-card {
    overflow: hidden !important;
    border: 1px solid #DCE6E9 !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
}

body
.ap-sr444-delivery-preview {
    position: relative !important;
    width: 100% !important;
    height: 110px !important;
    overflow: hidden !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: #EAF0F2 !important;
    cursor: zoom-in !important;
}

body
.ap-sr444-delivery-preview img,
body
.ap-sr444-delivery-preview video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

body
.ap-sr444-delivery-preview > i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 3 !important;
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: rgba(7, 23, 37, .78) !important;
    color: #69E2F0 !important;
    font-size: 9px !important;
    font-style: normal !important;
}

body
.ap-sr444-delivery-preview > span {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    z-index: 3 !important;
    min-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: rgba(8, 24, 39, .80) !important;
    color: #FFFFFF !important;
    font-size: 6px !important;
    font-weight: 900 !important;
}

body
.ap-sr444-delivery-meta {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        auto !important;
    gap: 6px !important;
    align-items: center !important;
    padding: 7px 8px 8px !important;
}

body
.ap-sr444-delivery-meta small {
    display: block !important;
    color: #078DA3 !important;
    font-size: 6px !important;
    font-weight: 900 !important;
}

body
.ap-sr444-delivery-meta strong {
    display: block !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    color: #3A5464 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body
.ap-sr444-delivery-meta span {
    display: block !important;
    margin-top: 2px !important;
    color: #92A0A7 !important;
    font-size: 6px !important;
}

body
.ap-sr444-remove-media {
    width: 27px !important;
    height: 27px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid #F0C7C7 !important;
    border-radius: 7px !important;
    background: #FFF7F7 !important;
    color: #C85050 !important;
    font-size: 13px !important;
    cursor: pointer !important;
}

/* ------------------------------------------------------------
   ACTION BAR
   ------------------------------------------------------------ */

body
.ap-sr444-action-bar {
    display: grid !important;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 12px !important;
    border: 1px solid #D5E3E7 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 8px 22px rgba(23, 51, 68, .04) !important;
}

body
.ap-sr444-back-button,
body
.ap-sr444-secondary-button,
body
.ap-sr444-primary-button {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border-radius: 5px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

body
.ap-sr444-back-button,
body
.ap-sr444-secondary-button {
    border: 1px solid #CBDCE2 !important;
    background: #FFFFFF !important;
    color: #405B6C !important;
}

body
.ap-sr444-primary-button {
    border: 1px solid #59D6E4 !important;
    background:
        linear-gradient(
            135deg,
            #70E6F1,
            #53D7E5
        ) !important;
    color: #073546 !important;
    box-shadow:
        0 7px 18px rgba(46, 197, 214, .16) !important;
}

body
.ap-sr444-action-copy {
    min-width: 0 !important;
}

body
.ap-sr444-action-copy > span {
    display: block !important;
    color: #7C909A !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
}

body
.ap-sr444-action-copy > strong {
    display: block !important;
    margin-top: 3px !important;
    color: #3A5667 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

body
.ap-sr444-action-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body
.ap-sr444-complete-badge {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 13px !important;
    border: 1px solid #A6D9CA !important;
    border-radius: 5px !important;
    background: #EEF9F5 !important;
    color: #0D7D62 !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}

/* Locked state */
body
.ap-sr444-handover-lock {
    display: grid !important;
    grid-template-columns:
        54px
        minmax(0, 1fr)
        auto !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 18px !important;
    border: 1px solid #E5D7B2 !important;
    border-radius: 11px !important;
    background:
        linear-gradient(
            135deg,
            #FFFDF8,
            #FFFAEC
        ) !important;
}

body
.ap-sr444-lock-icon {
    width: 54px !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #EAD8A8 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    color: #A47A1E !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

body
.ap-sr444-handover-lock > div:nth-child(2) > span {
    color: #A67C20 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

body
.ap-sr444-handover-lock > div:nth-child(2) > h3 {
    margin: 5px 0 0 !important;
    color: #433A28 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

body
.ap-sr444-handover-lock > div:nth-child(2) > p {
    margin: 5px 0 0 !important;
    color: #887E69 !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
}

body
.ap-sr444-lock-side {
    min-width: 170px !important;
    display: grid !important;
    justify-items: end !important;
    gap: 5px !important;
}

body
.ap-sr444-lock-side > small {
    color: #9B8C6A !important;
    font-size: 7px !important;
    font-weight: 900 !important;
}

body
.ap-sr444-lock-side > strong {
    color: #9E741A !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

/* Responsive */
@media (max-width: 1100px) {
    body
    .ap-sr444-status-grid {
        grid-template-columns: 1fr !important;
    }

    body
    .ap-sr444-note-wrap {
        grid-template-columns: 1fr !important;
    }

    body
    .ap-sr444-delivery-gallery {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body
    .ap-sr444-handover-hero,
    body
    .ap-sr444-action-bar,
    body
    .ap-sr444-handover-lock {
        grid-template-columns: 1fr !important;
    }

    body
    .ap-sr444-hero-badge {
        min-width: 0 !important;
        justify-items: start !important;
    }

    body
    .ap-sr444-panel-head {
        grid-template-columns:
            34px
            minmax(0, 1fr) !important;
    }

    body
    .ap-sr444-panel-head > small {
        grid-column: 2 !important;
        justify-self: start !important;
    }

    body
    .ap-sr444-upload-card {
        grid-template-columns:
            40px
            minmax(0, 1fr) !important;
    }

    body
    .ap-sr444-upload-card > em {
        grid-column: 2 !important;
        justify-self: start !important;
    }

    body
    .ap-sr444-delivery-gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    body
    .ap-sr444-action-buttons {
        flex-wrap: wrap !important;
    }

    body
    .ap-sr444-lock-side {
        justify-items: start !important;
    }
}



/* ============================================================
   STAFF PORTAL v4.4.5
   CLEAN FINAL HANDOVER — REDUNDANT STATUS UI REMOVED
   ============================================================ */

body
.ap-sr445-handover-hero {
    display: block !important;
    padding: 18px 20px !important;
    border: 1px solid #CCE3E8 !important;
    border-radius: 11px !important;
    background:
        radial-gradient(
            circle at 94% 10%,
            rgba(70, 220, 235, .13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F6FCFD 68%,
            #EFF9FB 100%
        ) !important;
    box-shadow:
        0 8px 24px rgba(25, 54, 71, .04) !important;
}

body
.ap-sr445-handover-hero > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
}

body
.ap-sr445-handover-hero > h2 {
    margin: 6px 0 0 !important;
    color: #18384C !important;
    font-size: 22px !important;
    line-height: 1.12 !important;
    font-weight: 850 !important;
}

body
.ap-sr445-handover-hero > p {
    max-width: 780px !important;
    margin: 7px 0 0 !important;
    color: #718794 !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
}

/* The legacy v4.4.4 status components are intentionally hidden
   as a safety fallback if cached markup is ever rendered. */

body
.ap-sr444-hero-badge,
body
.ap-sr444-status-grid {
    display: none !important;
}



/* ============================================================
   STAFF PORTAL v4.4.6
   PREMIUM WORKSHOP MEDIA UPLOAD
   ============================================================ */

body
.ap-sr446-media-panel {
    overflow: hidden !important;
    margin-top: 12px !important;
    border: 1px solid #D5E4E8 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow:
        0 8px 24px rgba(24, 52, 69, .035) !important;
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

body
.ap-sr446-media-head {
    display: grid !important;
    grid-template-columns:
        36px
        minmax(0, 1fr)
        auto !important;
    gap: 11px !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #E3ECEF !important;
    background:
        radial-gradient(
            circle at 93% 10%,
            rgba(71, 220, 235, .14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #FFFFFF,
            #F6FCFD
        ) !important;
}

body
.ap-sr446-media-head-index {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #BDE2E8 !important;
    border-radius: 8px !important;
    background: #EFFAFC !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

body
.ap-sr446-media-head > div:nth-child(2) > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
}

body
.ap-sr446-media-head > div:nth-child(2) > h3 {
    margin: 4px 0 0 !important;
    color: #213F53 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
}

body
.ap-sr446-media-head > div:nth-child(2) > p {
    max-width: 760px !important;
    margin: 4px 0 0 !important;
    color: #8798A2 !important;
    font-size: 8px !important;
    line-height: 1.48 !important;
}

body
.ap-sr446-media-head > small {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border: 1px solid #D6E4E8 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #798E99 !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}

/* ------------------------------------------------------------
   THREE PHASE UPLOAD CARDS
   ------------------------------------------------------------ */

body
.ap-sr446-media-upload-grid {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
}

body
.ap-sr446-upload-card {
    position: relative !important;
    min-width: 0 !important;
    min-height: 184px !important;
    display: grid !important;
    grid-template-columns:
        34px
        minmax(0, 1fr) !important;
    grid-template-rows:
        minmax(0, 1fr)
        auto !important;
    column-gap: 10px !important;
    row-gap: 12px !important;
    align-items: start !important;
    padding: 13px !important;
    overflow: hidden !important;
    border: 1px dashed #A7D3DB !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            145deg,
            #FBFEFF,
            #F5FAFB
        ) !important;
    cursor: pointer !important;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease !important;
}

body
.ap-sr446-upload-card:hover {
    transform: translateY(-1px) !important;
    border-color: #65CBD8 !important;
    box-shadow:
        0 8px 20px rgba(33, 116, 130, .07) !important;
}

body
.ap-sr446-upload-index {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #BCE2E8 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #078DA3 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    box-shadow:
        0 4px 12px rgba(17, 94, 108, .04) !important;
}

body
.ap-sr446-upload-copy {
    min-width: 0 !important;
}

body
.ap-sr446-upload-copy > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

body
.ap-sr446-upload-copy > strong {
    display: block !important;
    margin-top: 4px !important;
    color: #29485A !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
}

body
.ap-sr446-upload-copy > p {
    margin: 5px 0 0 !important;
    color: #8798A2 !important;
    font-size: 8px !important;
    line-height: 1.48 !important;
}

body
.ap-sr446-upload-copy > small {
    display: block !important;
    margin-top: 7px !important;
    color: #9AA7AD !important;
    font-size: 6.5px !important;
    line-height: 1.35 !important;
}

body
.ap-sr446-upload-action {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 9px !important;
    border: 1px solid #D5E4E8 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
}

body
.ap-sr446-upload-action > strong {
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 9px !important;
    border: 1px solid #B9DCE2 !important;
    border-radius: 6px !important;
    background: #F6FCFD !important;
    color: #087F94 !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
}

body
.ap-sr446-upload-action > span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #82949E !important;
    font-size: 7px !important;
    line-height: 1.25 !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body
.ap-sr446-upload-card.has-files
.ap-sr446-upload-action {
    border-color: #A7DDD3 !important;
    background: #F3FBF8 !important;
}

body
.ap-sr446-upload-card.has-files
.ap-sr446-upload-action > span {
    color: #137A64 !important;
    font-weight: 850 !important;
}

body
.ap-sr446-upload-card > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ------------------------------------------------------------
   CUSTOMER VISIBILITY CONTROL
   ------------------------------------------------------------ */

body
.ap-sr446-visibility-row {
    display: grid !important;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto !important;
    gap: 11px !important;
    align-items: center !important;
    margin: 0 14px 14px !important;
    padding: 11px 12px !important;
    border: 1px solid #D7E5E9 !important;
    border-radius: 9px !important;
    background:
        linear-gradient(
            135deg,
            #F9FCFD,
            #FFFFFF
        ) !important;
    cursor: pointer !important;
}

body
.ap-sr446-visibility-toggle {
    position: relative !important;
    width: 42px !important;
    height: 24px !important;
    display: block !important;
    flex: 0 0 42px !important;
}

body
.ap-sr446-visibility-toggle > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

body
.ap-sr446-visibility-toggle > i {
    position: absolute !important;
    inset: 0 !important;
    border: 1px solid #B9CDD4 !important;
    border-radius: 999px !important;
    background: #E8EFF1 !important;
    transition:
        background .16s ease,
        border-color .16s ease !important;
}

body
.ap-sr446-visibility-toggle > i::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    box-shadow:
        0 2px 7px rgba(31, 62, 79, .18) !important;
    transition:
        transform .16s ease !important;
}

body
.ap-sr446-visibility-toggle
> input:checked
+ i {
    border-color: #46C7D6 !important;
    background: #61DDEA !important;
}

body
.ap-sr446-visibility-toggle
> input:checked
+ i::after {
    transform: translateX(18px) !important;
}

body
.ap-sr446-visibility-copy {
    min-width: 0 !important;
}

body
.ap-sr446-visibility-copy > strong {
    display: block !important;
    color: #335064 !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: .045em !important;
}

body
.ap-sr446-visibility-copy > small {
    display: block !important;
    margin-top: 3px !important;
    color: #8A99A2 !important;
    font-size: 7px !important;
    line-height: 1.45 !important;
}

body
.ap-sr446-visibility-row > em {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border: 1px solid #BAE1E6 !important;
    border-radius: 999px !important;
    background: #EFFAFC !important;
    color: #07879B !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1050px) {
    body
    .ap-sr446-media-upload-grid {
        grid-template-columns: 1fr !important;
    }

    body
    .ap-sr446-upload-card {
        min-height: 0 !important;
    }
}

@media (max-width: 680px) {
    body
    .ap-sr446-media-head {
        grid-template-columns:
            34px
            minmax(0, 1fr) !important;
    }

    body
    .ap-sr446-media-head > small {
        grid-column: 2 !important;
        justify-self: start !important;
    }

    body
    .ap-sr446-visibility-row {
        grid-template-columns:
            auto
            minmax(0, 1fr) !important;
    }

    body
    .ap-sr446-visibility-row > em {
        grid-column: 2 !important;
        justify-self: start !important;
    }
}



/* ============================================================
   STAFF PORTAL v4.4.7
   DELIVERED SYNC + SERVICE RECORD PREVIEW STEP 4
   ============================================================ */

body
.ap-sr447-handover-preview {
    overflow: hidden !important;
}

body
.ap-sr447-delivered-banner {
    display: grid !important;
    grid-template-columns:
        44px
        minmax(0, 1fr)
        auto !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 14px !important;
    padding: 13px 14px !important;
    border: 1px solid #A8DDCA !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            135deg,
            #F0FAF6,
            #F9FDFC
        ) !important;
}

body
.ap-sr447-delivered-icon {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #9FD7C3 !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    color: #0C7E60 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

body
.ap-sr447-delivered-banner > div:nth-child(2) > span {
    display: block !important;
    color: #158068 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

body
.ap-sr447-delivered-banner > div:nth-child(2) > strong {
    display: block !important;
    margin-top: 3px !important;
    color: #254C3F !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
}

body
.ap-sr447-delivered-banner > div:nth-child(2) > p {
    margin: 4px 0 0 !important;
    color: #718B82 !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
}

body
.ap-sr447-delivered-banner > em {
    min-height: 27px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 9px !important;
    border: 1px solid #A7DAC8 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #0C7B5F !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
}

body
.ap-sr447-handover-ready {
    margin: 14px !important;
    padding: 13px 14px !important;
    border: 1px solid #C9DDE4 !important;
    border-radius: 10px !important;
    background: #F8FBFC !important;
}

body
.ap-sr447-handover-ready > span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

body
.ap-sr447-handover-ready > strong {
    display: block !important;
    margin-top: 4px !important;
    color: #335164 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

body
.ap-sr447-handover-ready > p {
    margin: 4px 0 0 !important;
    color: #84959F !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
}

body
.ap-sr447-handover-note {
    margin-top: 0 !important;
}

body
.ap-sr447-delivery-media {
    margin: 14px !important;
    overflow: hidden !important;
    border: 1px solid #D9E5E9 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
}

body
.ap-sr447-delivery-media-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #E6EDEF !important;
    background: #F8FBFC !important;
}

body
.ap-sr447-delivery-media-head span {
    display: block !important;
    color: #078DA3 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

body
.ap-sr447-delivery-media-head strong {
    display: block !important;
    margin-top: 3px !important;
    color: #355264 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
}

body
.ap-sr447-delivery-media-head > small {
    min-height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 7px !important;
    border: 1px solid #D6E3E7 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #758B96 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
}

body
.ap-sr447-delivery-media-grid {
    display: grid !important;
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
}

body
.ap-sr447-delivery-media-card {
    position: relative !important;
    width: 100% !important;
    height: 108px !important;
    overflow: hidden !important;
    display: block !important;
    padding: 0 !important;
    border: 1px solid #DCE6E9 !important;
    border-radius: 8px !important;
    background: #EAF0F2 !important;
    cursor: zoom-in !important;
}

body
.ap-sr447-delivery-media-card img,
body
.ap-sr447-delivery-media-card video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

body
.ap-sr447-delivery-media-card > i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 3 !important;
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: rgba(6, 22, 36, .78) !important;
    color: #68E4F1 !important;
    font-size: 8px !important;
    font-style: normal !important;
}

body
.ap-sr447-delivery-media-card > span {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    z-index: 3 !important;
    min-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: rgba(6, 22, 36, .80) !important;
    color: #FFFFFF !important;
    font-size: 6px !important;
    font-weight: 900 !important;
}

@media (max-width: 1100px) {
    body
    .ap-sr447-delivery-media-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    body
    .ap-sr447-delivered-banner {
        grid-template-columns:
            40px
            minmax(0, 1fr) !important;
    }

    body
    .ap-sr447-delivered-banner > em {
        grid-column: 2 !important;
        justify-self: start !important;
    }

    body
    .ap-sr447-delivery-media-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}



.ap-order50-progress-panel{overflow:hidden;margin:0 0 14px;border:1px solid #d5e3e8;border-radius:11px;background:#fff;box-shadow:0 8px 24px rgba(25,52,68,.035)}
.ap-order50-progress-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 15px;border-bottom:1px solid #e4ecef;background:linear-gradient(135deg,#fff,#f6fcfd)}
.ap-order50-progress-head span{display:block;color:#078da3;font-size:7px;font-weight:900;letter-spacing:.08em}.ap-order50-progress-head h3{margin:4px 0 0;color:#29485a;font-size:11px;font-weight:850}.ap-order50-progress-head>strong{color:#078da3;font-size:8px;font-weight:900}
.ap-order50-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:20px 12px 17px}.ap-order50-progress-step{display:grid;justify-items:center;text-align:center}.ap-order50-progress-step i{width:28px;height:28px;display:grid;place-items:center;border:2px solid #d7e4e8;border-radius:50%;background:#fff;color:#91a0a8;font-size:8px;font-style:normal;font-weight:900}.ap-order50-progress-step.is-complete i{border-color:#55d7e5;background:#64e2ed;color:#063342}.ap-order50-progress-step.is-current i{border-color:#32c7d8;color:#078da3;box-shadow:0 0 0 5px rgba(69,207,224,.10)}.ap-order50-progress-step strong{margin-top:7px;color:#8a99a1;font-size:7px;font-weight:850}.ap-order50-progress-step.is-complete strong,.ap-order50-progress-step.is-current strong{color:#365466}
.ap-order50-form{padding:14px!important}.ap-order50-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ap-order50-form-grid input,.ap-order50-form-grid select{width:100%;min-height:42px;box-sizing:border-box;border:1px solid #c9dce2;background:#fff;color:#263f50}.ap-order50-help{margin-top:10px;padding:9px 10px;border:1px solid #dde8eb;border-radius:7px;background:#f8fbfc;color:#7c8e98;font-size:8px;line-height:1.5}.ap-order50-exception{margin:0 0 14px;padding:13px 14px;border:1px solid #ecc8c8;border-radius:10px;background:#fff7f7}.ap-order50-exception span{display:block;color:#b75353;font-size:7px;font-weight:900;letter-spacing:.08em}.ap-order50-exception strong{display:block;margin-top:4px;color:#9d4444;font-size:13px}
.ap-order-status-badge.ap-order-status-ap-packed{color:#8a7225;border-color:#d9cf9f}.ap-order-status-badge.ap-order-status-ap-on-the-way,.ap-order-status-badge.ap-order-status-ap-on-the-way{color:#32709c;border-color:#b7d6ef}
@media(max-width:850px){.ap-order50-form-grid{grid-template-columns:1fr}.ap-order50-progress{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:145px;overflow-x:auto}}



/* ============================================================
   APPOINTMENTS v4.6.0
   APPROVE / CANCEL ONLY
   ============================================================ */

.ap-appointment-decision-actions,
.ap-appointment-detail-decision-actions {
    display: grid !important;
    gap: 8px !important;
}

.ap-appointment-decision-form {
    margin: 0 !important;
}

.ap-appointment-decision-actions .ap-primary-button,
.ap-appointment-decision-actions .ap-danger-button,
.ap-appointment-detail-decision-actions .ap-primary-button,
.ap-appointment-detail-decision-actions .ap-danger-button {
    width: 100% !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-radius: 5px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
}

.ap-appointment-approve-button {
    border-color: #57DCE8 !important;
    background: #61E1EC !important;
    color: #082534 !important;
}

.ap-appointment-cancel-button {
    border: 1px solid #E7B8B8 !important;
    background: #FFF8F8 !important;
    color: #B55353 !important;
}

.ap-appointment-cancel-button:hover {
    border-color: #D99292 !important;
    background: #FFF1F1 !important;
    color: #A43F3F !important;
}

.ap-appointment-actions {
    min-width: 220px !important;
}

.ap-appointment-status.ap-status-confirmed {
    border-color: #A9DCCB !important;
    background: #EFFAF6 !important;
    color: #16775F !important;
}

.ap-appointment-status.ap-status-confirmed span {
    background: #42B895 !important;
}

.ap-appointment-status.ap-status-pending {
    border-color: #E9D8A8 !important;
    background: #FFFBEF !important;
    color: #9A771D !important;
}

.ap-appointment-status.ap-status-cancelled {
    border-color: #EDC5C5 !important;
    background: #FFF6F6 !important;
    color: #B95050 !important;
}

@media (max-width: 760px) {
    .ap-appointment-detail-decision-actions {
        width: 100% !important;
    }
}



/* =========================================================
   INVOICE & PAYMENTS — FINAL LIGHT UI
   Keep the entire billing/invoice area white/light.
   ========================================================= */

.ap-staff-workspace > .ap-invoice-page,
.ap-staff-workspace > .ap-invoice-page,
.ap-invoice-page,
.ap-invoice-page .ap-payment-layout,
.ap-invoice-page .ap-customer-panel,
.ap-invoice-page .ap-payment-form-panel,
.ap-invoice-page .ap-invoice-sheet,
.ap-invoice-page .ap-payment-row,
.ap-invoice-page .ap-empty{
    background:#ffffff !important;
    color:#172532 !important;
    border-color:#d7e1e6 !important;
}

/* Main page surface */
.ap-staff-workspace > .ap-invoice-page{
    background:#f5f8fa !important;
    color:#172532 !important;
}

/* Invoice sheet */
.ap-invoice-page .ap-invoice-sheet{
    background:#ffffff !important;
    color:#172532 !important;
}

/* Payment history + record payment cards */
.ap-invoice-page .ap-payment-layout{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.ap-invoice-page .ap-customer-panel{
    background:#ffffff !important;
    border:1px solid #d7e1e6 !important;
    color:#172532 !important;
    box-shadow:0 10px 30px rgba(18,42,58,.06) !important;
}

.ap-invoice-page .ap-customer-panel-head{
    background:#f3f7f9 !important;
    border-bottom:1px solid #d7e1e6 !important;
}

.ap-invoice-page .ap-customer-panel-head h3{
    color:#435463 !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.15em !important;
}

.ap-invoice-page .ap-customer-panel-head span{
    color:#087f95 !important;
    font-size:8px !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
}

/* Payment history rows */
.ap-invoice-page .ap-customer-record-row,
.ap-invoice-page .ap-payment-row{
    background:#ffffff !important;
    color:#172532 !important;
    border-bottom:1px solid #e2e9ed !important;
}

.ap-invoice-page .ap-customer-record-row:last-child,
.ap-invoice-page .ap-payment-row:last-child{
    border-bottom:0 !important;
}

.ap-invoice-page .ap-payment-row strong{
    color:#172532 !important;
    font-size:13px !important;
    font-weight:700 !important;
}

.ap-invoice-page .ap-payment-row p{
    color:#435463 !important;
    font-size:10px !important;
}

.ap-invoice-page .ap-payment-row small{
    color:#71818d !important;
    font-size:9px !important;
}

/* Payment form */
.ap-invoice-page .ap-payment-form-panel,
.ap-invoice-page .ap-payment-form-panel .ap-staff-form,
.ap-invoice-page .ap-payment-form-panel .ap-form-grid,
.ap-invoice-page .ap-payment-form-panel .ap-form-field{
    background:#ffffff !important;
    color:#172532 !important;
}

.ap-invoice-page .ap-payment-form-panel .ap-form-field label{
    color:#60717c !important;
}

.ap-invoice-page .ap-payment-form-panel input,
.ap-invoice-page .ap-payment-form-panel select,
.ap-invoice-page .ap-payment-form-panel textarea{
    background:#ffffff !important;
    color:#172532 !important;
    border:1px solid #c4d1d8 !important;
}

.ap-invoice-page .ap-payment-form-panel input::placeholder,
.ap-invoice-page .ap-payment-form-panel textarea::placeholder{
    color:#8e9ba4 !important;
    opacity:1 !important;
}

/* Invoice content text */
.ap-invoice-page .ap-invoice-brand h3,
.ap-invoice-page .ap-invoice-number strong,
.ap-invoice-page .ap-invoice-parties strong,
.ap-invoice-page .ap-invoice-totals strong,
.ap-invoice-page .ap-invoice-table-row strong{
    color:#172532 !important;
}

.ap-invoice-page .ap-invoice-brand p,
.ap-invoice-page .ap-invoice-parties p,
.ap-invoice-page .ap-invoice-number small,
.ap-invoice-page .ap-invoice-notes p,
.ap-invoice-page .ap-invoice-table-row p{
    color:#435463 !important;
}

.ap-invoice-page .ap-invoice-eyebrow,
.ap-invoice-page .ap-invoice-number span,
.ap-invoice-page .ap-invoice-parties span,
.ap-invoice-page .ap-invoice-totals span,
.ap-invoice-page .ap-invoice-notes span{
    color:#087f95 !important;
}

.ap-invoice-page .ap-invoice-table-head{
    background:#f3f7f9 !important;
    color:#435463 !important;
    border-color:#d7e1e6 !important;
}

.ap-invoice-page .ap-invoice-table-row{
    background:#ffffff !important;
    color:#172532 !important;
    border-color:#e2e9ed !important;
}

/* Remove any legacy dark surface from billing children */
.ap-invoice-page .ap-payment-layout .ap-customer-panel,
.ap-invoice-page .ap-payment-layout .ap-customer-panel > *,
.ap-invoice-page .ap-payment-layout .ap-payment-row > div{
    background-color:#ffffff !important;
}

/* Keep the cyan action and danger buttons intact */
.ap-invoice-page .ap-primary-button{
    background:#08bfd9 !important;
    color:#06242a !important;
    border-color:#08bfd9 !important;
}

.ap-invoice-page .ap-secondary-button{
    background:#ffffff !important;
    color:#435463 !important;
    border-color:#c4d1d8 !important;
}

.ap-invoice-page .ap-danger-button{
    background:#fff5f5 !important;
    color:#c64d55 !important;
    border-color:#ecc8cb !important;
}

/* Page-wide light background around invoice */
html:has(.ap-invoice-page),
body:has(.ap-invoice-page),
.ap-staff-workspace:has(.ap-invoice-page){
    background:#f5f8fa !important;
}

@media(max-width:800px){
    .ap-invoice-page .ap-payment-layout{
        background:transparent !important;
    }
}




.ap-service-billing-detail{margin-top:22px}.ap-service-billing-table{border:1px solid #d7e1e6;margin-top:12px;background:#fff}.ap-service-billing-head,.ap-service-billing-row{display:grid;grid-template-columns:150px minmax(220px,1fr) 55px 120px 125px;gap:12px;align-items:center;padding:14px 16px}.ap-service-billing-head{background:#f5f7f8;font-size:9px;font-weight:800;letter-spacing:.13em;color:#60717c}.ap-service-billing-row{border-top:1px solid #e2e7ea;font-size:11px;color:#435463}.ap-service-billing-row strong{font-size:12px;color:#172532}.ap-service-billing-row>span:nth-child(3),.ap-service-billing-row>span:nth-child(4),.ap-service-billing-row>strong:last-child{text-align:right}.ap-service-billing-totals{display:flex;justify-content:flex-end;gap:24px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid #d7e1e6}.ap-service-billing-totals div{display:flex;gap:8px;align-items:center}.ap-service-billing-totals span{font-size:8px;font-weight:800;letter-spacing:.12em;color:#60717c}.ap-service-billing-totals strong{font-size:12px;color:#172532}.ap-service-billing-totals .grand{padding-left:18px;border-left:1px solid #d7e1e6}.ap-service-billing-totals .grand strong{font-size:16px}@media(max-width:700px){.ap-service-billing-table{overflow-x:auto}.ap-service-billing-head,.ap-service-billing-row{min-width:650px}.ap-service-billing-totals{justify-content:flex-start}.ap-service-billing-totals .grand{padding-left:0;border-left:0}}
/* =========================================================
   ITEMIZED WORKSHOP BILLING / INVOICE
   ========================================================= */
.ap-billing-builder{grid-column:1/-1;background:#f7fafb;border:1px solid #d7e1e6;padding:22px;margin-top:4px}
.ap-billing-builder>label{display:block;color:#087f95!important;font-size:10px!important;font-weight:800!important;letter-spacing:.16em!important;margin-bottom:8px}
.ap-billing-note{color:#5f707b;font-size:11px;line-height:1.6;margin-bottom:16px}
.ap-billing-rows{display:flex;flex-direction:column;gap:8px}
.ap-billing-row{display:grid;grid-template-columns:190px minmax(180px,1fr) 85px 120px 120px 38px;gap:8px;align-items:center}
.ap-billing-row select,.ap-billing-row input{width:100%;height:42px;border:1px solid #c4d1d8!important;background:#fff!important;color:#172532!important;padding:0 11px;font-size:12px!important;box-sizing:border-box}
.ap-billing-row input::placeholder{color:#8b9aa3!important;opacity:1}
.ap-billing-row strong{font-size:12px;color:#172532!important;text-align:right;white-space:nowrap}
.ap-billing-remove{height:42px;width:38px;border:1px solid #ecc8cb;background:#fff5f5;color:#c64d55;font-size:20px;cursor:pointer}
.ap-billing-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.ap-billing-actions .ap-secondary-button{padding:11px 15px!important;font-size:10px!important}
.ap-billing-total{display:flex;align-items:baseline;gap:12px}.ap-billing-total span{font-size:9px;font-weight:800;letter-spacing:.14em;color:#60717c}.ap-billing-total strong{font-size:18px;color:#172532}
.ap-invoice-table-head-detailed,.ap-invoice-detailed-row{display:grid!important;grid-template-columns:150px minmax(220px,1fr) 55px 120px 125px;align-items:center;gap:12px}
.ap-invoice-table-head-detailed span:nth-child(3),.ap-invoice-table-head-detailed span:nth-child(4),.ap-invoice-table-head-detailed span:nth-child(5),.ap-invoice-detailed-row>span:nth-child(3),.ap-invoice-detailed-row>span:nth-child(4),.ap-invoice-detailed-row>strong{text-align:right}
.ap-invoice-item-category{font-size:9px!important;text-transform:uppercase;color:#087f95!important;font-weight:800;letter-spacing:.08em}
.ap-invoice-detailed-row>div strong{font-size:12px!important;color:#172532!important}
.ap-invoice-detailed-row>span{font-size:11px;color:#435463}
.ap-invoice-detailed-row>strong{font-size:12px!important;color:#172532!important}
.ap-invoice-breakdown-summary{border-top:1px solid #d7e1e6;margin-top:12px;padding-top:10px;display:flex;justify-content:flex-end;gap:28px;flex-wrap:wrap}
.ap-invoice-breakdown-summary div{display:flex;gap:9px;align-items:center}.ap-invoice-breakdown-summary span{font-size:8px;color:#60717c;font-weight:800;letter-spacing:.12em}.ap-invoice-breakdown-summary strong{font-size:11px;color:#172532}
.ap-invoice-work-notes{border-top:1px solid #d7e1e6;margin-top:22px;padding-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 30px}
.ap-invoice-work-notes div span{display:block;color:#087f95;font-size:8px;font-weight:800;letter-spacing:.13em;margin-bottom:6px}.ap-invoice-work-notes p{margin:0;color:#435463;font-size:10px;line-height:1.65}
@media(max-width:900px){.ap-billing-row{grid-template-columns:1fr 1fr 80px 110px 100px 38px}.ap-invoice-table-head-detailed,.ap-invoice-detailed-row{grid-template-columns:110px minmax(140px,1fr) 45px 100px 105px}.ap-invoice-work-notes{grid-template-columns:1fr}}
@media(max-width:650px){.ap-billing-row{grid-template-columns:1fr 1fr}.ap-billing-row strong{grid-column:1}.ap-billing-remove{grid-column:2;justify-self:end}.ap-billing-actions{align-items:flex-start;flex-direction:column}.ap-invoice-table{overflow-x:auto}.ap-invoice-table-head-detailed,.ap-invoice-detailed-row{min-width:600px}.ap-invoice-breakdown-summary{justify-content:flex-start}}


/* PRODUCT ORDER DETAIL — LIGHT / READABLE SURFACE */
.ap-order-detail-page{
    background:transparent!important;
    color:#172532!important;
}
.ap-order-detail-page .ap-customer-panel{
    background:#ffffff!important;
    border:1px solid #d7e1e6!important;
    color:#172532!important;
    box-shadow:0 12px 30px rgba(23,37,50,.05)!important;
}
.ap-order-detail-page .ap-customer-panel-head{
    background:#f4f8fa!important;
    border-bottom:1px solid #dce5e9!important;
    color:#172532!important;
}
.ap-order-detail-page .ap-customer-panel-head h3{
    color:#526579!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.16em!important;
}
.ap-order-detail-page .ap-customer-panel-head span{
    color:#008da5!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.10em!important;
}
.ap-order-detail-page .ap-order-detail-fields span{
    color:#718294!important;
}
.ap-order-detail-page .ap-order-detail-fields strong{
    color:#172532!important;
    font-weight:650!important;
}
.ap-order-detail-page .ap-order-item{
    background:#ffffff!important;
    color:#172532!important;
    border-bottom:1px solid #e2e9ed!important;
}
.ap-order-detail-page .ap-order-item strong{
    color:#172532!important;
}
.ap-order-detail-page .ap-order-item small{
    color:#718294!important;
}
.ap-order-detail-page .ap-order-total-row{
    background:#f7fafb!important;
    color:#526579!important;
    border-top:1px solid #d7e1e6!important;
    border-bottom:0!important;
}
.ap-order-detail-page .ap-order-total-row span{
    color:#526579!important;
    font-weight:750!important;
}
.ap-order-detail-page .ap-order-total-row strong{
    color:#172532!important;
}
.ap-order-detail-page .ap-order-address{
    background:#ffffff!important;
    color:#405467!important;
    line-height:1.8!important;
    padding:18px!important;
}
.ap-order-detail-page .ap-order-status-badge{
    background:#f0fbfc!important;
}
.ap-order-detail-page .ap-staff-form{
    background:#ffffff!important;
    color:#172532!important;
}
.ap-order-detail-page .ap-form-field label{
    color:#526579!important;
}
.ap-order-detail-page .ap-form-field select{
    background:#ffffff!important;
    color:#172532!important;
    border:1px solid #cbd8df!important;
}
.ap-order-detail-page .ap-form-field select option{
    background:#ffffff!important;
    color:#172532!important;
}
/* Ensure the entire order-detail content never inherits legacy dark text/surfaces */
.ap-order-detail-page .ap-customer-panel *{
    text-shadow:none!important;
}



/* PRODUCT ORDER DETAIL — INNER CARD SPACING */
.ap-order-detail-page .ap-customer-panel-head{
    padding:14px 18px!important;
    box-sizing:border-box!important;
}
.ap-order-detail-page .ap-order-detail-fields{
    padding:22px 24px 24px!important;
    gap:24px 30px!important;
    box-sizing:border-box!important;
}
.ap-order-detail-page .ap-order-item{
    padding:18px 24px!important;
    box-sizing:border-box!important;
}
.ap-order-detail-page .ap-order-total-row{
    margin:0!important;
    padding:18px 24px!important;
    box-sizing:border-box!important;
}
.ap-order-detail-page .ap-order-address{
    padding:22px 24px 24px!important;
    box-sizing:border-box!important;
}
.ap-order-detail-page .ap-order-current-status{
    padding:22px 24px 24px!important;
    box-sizing:border-box!important;
}
.ap-order-detail-page .ap-form-field{
    padding:0!important;
}
.ap-order-detail-page .ap-customer-panel > .ap-form-field{
    margin:0 24px 24px!important;
}
.ap-order-detail-page .ap-customer-panel > .ap-form-field:first-of-type{
    margin-top:24px!important;
}
@media(max-width:800px){
    .ap-order-detail-page .ap-order-detail-fields{
        padding:20px 18px 22px!important;
        gap:20px!important;
    }
    .ap-order-detail-page .ap-order-item{
        padding:16px 18px!important;
    }
    .ap-order-detail-page .ap-order-total-row,
    .ap-order-detail-page .ap-order-address,
    .ap-order-detail-page .ap-order-current-status{
        padding-left:18px!important;
        padding-right:18px!important;
    }
}

/* STAFF MANAGEMENT — PERMISSION EDITOR */
.ap-permission-editor{margin-top:28px;border:1px solid #d8e2e8;background:#fff;}
.ap-permission-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 24px;border-bottom:1px solid #d8e2e8;background:#f7fafb;}
.ap-permission-editor-head p{margin:7px 0 0;color:#62758a;font-size:13px;line-height:1.6;max-width:720px;}
.ap-permission-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.ap-permission-tool{appearance:none;border:1px solid #cbd8e0;background:#fff;color:#24364a;font:700 10px/1.2 inherit;letter-spacing:.12em;padding:11px 13px;cursor:pointer;}
.ap-permission-tool:hover{border-color:#65dff0;color:#007f98;}
.ap-permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:20px;}
.ap-permission-group{border:1px solid #dce5ea;background:#fff;padding:16px;}
.ap-permission-group-title{font-size:10px;font-weight:800;letter-spacing:.16em;color:#0088a4;text-transform:uppercase;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #e3eaee;}
.ap-permission-check{display:flex;align-items:flex-start;gap:10px;margin:10px 0;color:#26384b;font-size:13px;font-weight:600;line-height:1.35;cursor:pointer;}
.ap-permission-check input{width:16px;height:16px;min-width:16px;margin:0;accent-color:#54dff0;cursor:pointer;}
.ap-permission-check input:disabled{cursor:not-allowed;opacity:.65;}
@media(max-width:1050px){.ap-permission-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ap-permission-editor-head{flex-direction:column;}.ap-permission-tools{justify-content:flex-start;}}
@media(max-width:650px){.ap-permission-grid{grid-template-columns:1fr;padding:14px;}.ap-permission-editor-head{padding:18px;}.ap-permission-tools{width:100%;}.ap-permission-tool{flex:1;}}



/* =========================================================
   STAFF NOTIFICATIONS — OPERATIONAL DROPDOWN
   ========================================================= */
.ap-notification-wrap{position:relative;display:flex;align-items:center}
.ap-notification{position:relative;width:42px;height:42px;display:grid;place-items:center;border:1px solid transparent;background:transparent;color:#17233f;cursor:pointer;border-radius:7px;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.ap-notification:hover,.ap-notification[aria-expanded="true"]{background:#f1f9fb;border-color:#d7edf1;color:#0099b2}
.ap-notification:active{transform:translateY(1px)}
.ap-notification-bell{width:21px;height:21px;display:block;overflow:visible}
.ap-notification b{position:absolute;right:-2px;top:0;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;border-radius:10px;background:#ef4050;color:#fff;font:800 8px/1 Arial,sans-serif;border:2px solid #fff;box-sizing:border-box;letter-spacing:0}
.ap-notification b:empty{display:none}
.ap-notification-panel{position:absolute;right:-8px;top:52px;width:390px;max-width:calc(100vw - 28px);background:#fff;border:1px solid #d7e2e8;border-radius:9px;box-shadow:0 24px 60px rgba(7,15,35,.18);overflow:hidden;display:none;z-index:1200}
.ap-notification-panel.is-open{display:block;animation:apNotificationIn .16s ease-out}
@keyframes apNotificationIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.ap-notification-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:17px 18px 14px;border-bottom:1px solid #e1e9ee;background:#fbfdfe}
.ap-notification-head strong{display:block;color:#17233f;font-size:11px;letter-spacing:.14em}
.ap-notification-head small{display:block;margin-top:5px;color:#7b8b99;font-size:10px;line-height:1.4}
.ap-notification-head>span{flex:0 0 auto;color:#008da6;font-size:8px;font-weight:800;letter-spacing:.12em;padding-top:2px}
.ap-notification-list{max-height:430px;overflow:auto;padding:7px}
.ap-notification-item{position:relative;display:flex;align-items:flex-start;gap:11px;padding:12px 10px;border-radius:7px;text-decoration:none!important;color:#172532!important;transition:.16s ease;border:1px solid transparent}
.ap-notification-item:hover{background:#f5fafb;border-color:#d7e8ed}
.ap-notification-item.is-action .ap-notification-icon{border-color:#bfeaf0;background:#effcfd;color:#008ba4}
.ap-notification-icon{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border:1px solid #dbe5ea;background:#f7fafb;color:#718491;border-radius:6px;font-size:14px}
.ap-notification-copy{min-width:0;flex:1;display:block}
.ap-notification-copy strong{display:block;color:#1b2d40;font-size:11px;line-height:1.35}
.ap-notification-copy small{display:block;margin-top:3px;color:#667989;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-notification-copy em{display:block;margin-top:3px;color:#8a99a5;font-size:8px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-notification-arrow{margin-left:auto;padding-top:7px;color:#a2b0ba;font-size:15px;transition:.16s ease}
.ap-notification-item:hover .ap-notification-arrow{color:#00a6bf;transform:translateX(2px)}
.ap-notification-empty{padding:38px 20px;text-align:center}
.ap-notification-empty strong{display:block;color:#008da6;font-size:10px;letter-spacing:.16em}
.ap-notification-empty span{display:block;margin-top:7px;color:#7c8d99;font-size:10px}
.ap-notification-foot{border-top:1px solid #e1e9ee;padding:11px 16px;background:#f8fafb;text-align:right}
.ap-notification-foot a{color:#008da6!important;text-decoration:none!important;font-size:8px;font-weight:800;letter-spacing:.14em}
.ap-notification-foot a:hover{color:#17233f!important}
@media(max-width:700px){.ap-notification-panel{right:-55px;width:360px}.ap-notification-list{max-height:55vh}}
@media(max-width:460px){.ap-notification-panel{right:-80px;width:calc(100vw - 24px)}}



/* =========================================================
   GLOBAL STAFF PORTAL SEARCH — COMMAND PALETTE
   ========================================================= */
.ap-topbar-search{cursor:text!important;position:relative!important;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important}
.ap-topbar-search:hover,.ap-topbar-search:focus-within{border-color:#9ddfe9!important;box-shadow:0 8px 24px rgba(17,26,61,.08)!important}
.ap-topbar-search input{width:100%!important;min-width:0!important;height:38px!important;padding:0!important;margin:0!important;border:0!important;outline:0!important;background:transparent!important;color:#172532!important;font:600 12px/1.2 inherit!important;box-shadow:none!important}
.ap-topbar-search input::placeholder{color:#8a99a7!important;opacity:1!important}
.ap-topbar-search .ap-global-search-icon{font-size:20px!important;line-height:1!important;color:#111a3d!important;flex:0 0 auto!important}
.ap-global-search-overlay{position:fixed;inset:0;z-index:5000;background:rgba(7,15,35,.44);backdrop-filter:blur(7px);display:none;align-items:flex-start;justify-content:center;padding:92px 22px 30px;box-sizing:border-box}
.ap-global-search-overlay.is-open{display:flex}
.ap-global-search-panel{width:min(760px,100%);background:#fff;border:1px solid #d7e2e8;box-shadow:0 28px 80px rgba(7,15,35,.24);border-radius:10px;overflow:hidden}
.ap-global-search-head{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid #dce6ed;background:#fbfdfe}
.ap-global-search-head .ap-global-search-big-icon{font-size:22px;color:#111a3d;line-height:1}
.ap-global-search-head input{flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;color:#172532!important;font:700 16px/1.3 inherit!important;padding:0!important;box-shadow:none!important}
.ap-global-search-head kbd{font-size:9px;color:#667789;background:#eef3f6;border:1px solid #d8e2e8;border-radius:5px;padding:5px 7px;letter-spacing:.08em}
.ap-global-search-meta{display:flex;align-items:center;justify-content:space-between;padding:11px 18px 8px;color:#82919e;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ap-global-search-results{max-height:min(62vh,560px);overflow:auto;padding:0 10px 10px}
.ap-global-search-result{display:flex;align-items:center;gap:13px;width:100%;padding:13px 10px;border:1px solid transparent;border-radius:7px;background:#fff;text-decoration:none!important;color:#172532!important;box-sizing:border-box;transition:.16s ease}
.ap-global-search-result:hover,.ap-global-search-result.is-active{background:#f3f8fa;border-color:#cfe4e9}
.ap-global-search-result-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border:1px solid #cce9ee;background:#effbfc;color:#0087a0;font-size:16px;border-radius:7px}
.ap-global-search-result-copy{min-width:0;flex:1}
.ap-global-search-result-type{font-size:8px;font-weight:800;letter-spacing:.14em;color:#0087a0;text-transform:uppercase;margin-bottom:4px}
.ap-global-search-result-title{font-size:12px;font-weight:800;color:#172532;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-global-search-result-meta{margin-top:3px;font-size:10px;color:#71818e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-global-search-result-arrow{font-size:18px;color:#9aacb7;transition:.16s ease}
.ap-global-search-result:hover .ap-global-search-result-arrow,.ap-global-search-result.is-active .ap-global-search-result-arrow{color:#00a9c2;transform:translateX(2px)}
.ap-global-search-empty{padding:36px 18px;text-align:center;color:#738491;font-size:11px;line-height:1.7}
.ap-global-search-empty strong{display:block;color:#24384b;font-size:13px;margin-bottom:4px}
.ap-global-search-foot{display:flex;justify-content:flex-end;gap:14px;padding:10px 18px;border-top:1px solid #e0e8ed;background:#f8fafb;color:#81909c;font-size:9px;letter-spacing:.08em}
.ap-global-search-foot span{display:inline-flex;align-items:center;gap:5px}.ap-global-search-foot kbd{padding:2px 5px;background:#fff;border:1px solid #d5e0e6;border-radius:4px;font-size:8px}
@media(max-width:780px){.ap-global-search-overlay{padding:76px 12px 20px}.ap-global-search-panel{border-radius:8px}.ap-global-search-results{max-height:68vh}.ap-global-search-foot{display:none}}



/* FINAL STAFF LOGIN BACKGROUND — explicit page class for reliable rendering */
html, body.ap-login-page{
    min-height:100% !important;
}
body.ap-login-page{
    margin:0 !important;
    min-height:100vh !important;
    background-color:#071017 !important;
    background-image:
        linear-gradient(90deg,rgba(3,10,17,.60) 0%,rgba(3,10,17,.38) 42%,rgba(3,10,17,.34) 62%,rgba(3,10,17,.58) 100%),
        url("https://archerprasanta.com/wp-content/uploads/2026/09/a_wide_cinematic_ultra_detailed_photo_cg_styled.webp") !important;
    background-position:center center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-attachment:fixed !important;
}
body.ap-login-page .ap-staff-app{
    min-height:100vh !important;
    background:transparent !important;
}
body.ap-login-page main.ap-login{
    position:relative !important;
    z-index:2 !important;
    background:transparent !important;
}
@media(max-width:700px){
    body.ap-login-page{
        background-position:center center !important;
        background-attachment:scroll !important;
    }
}



/* =====================================================
   STAFF LOGIN — PREMIUM FROSTED GLASS CARD
   ===================================================== */
body.ap-login-page main.ap-login .ap-login-inner{
    width:min(100%,560px) !important;
    padding:42px 42px 34px !important;
    background:
        linear-gradient(145deg,rgba(18,38,53,.72),rgba(5,18,29,.60)) !important;
    border:1px solid rgba(111,239,255,.34) !important;
    border-radius:14px !important;
    box-shadow:
        0 34px 90px rgba(0,0,0,.38),
        0 10px 30px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.16) !important;
    backdrop-filter:blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
}
body.ap-login-page main.ap-login .ap-login-inner::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 86% 8%,rgba(111,239,255,.12),transparent 30%),
        linear-gradient(180deg,rgba(255,255,255,.055),transparent 25%) !important;
}
body.ap-login-page main.ap-login .ap-brand,
body.ap-login-page main.ap-login .ap-login-heading,
body.ap-login-page main.ap-login .ap-tabs,
body.ap-login-page main.ap-login .ap-login-panel,
body.ap-login-page main.ap-login .ap-login-footer{
    position:relative !important;
    z-index:2 !important;
}
body.ap-login-page main.ap-login .ap-brand{
    border-bottom:1px solid rgba(214,239,246,.16) !important;
}
body.ap-login-page main.ap-login .ap-brand-mark{
    border:1px solid rgba(111,239,255,.58) !important;
    background:rgba(111,239,255,.08) !important;
    color:#6fefff !important;
    box-shadow:inset 0 0 20px rgba(111,239,255,.05) !important;
}
body.ap-login-page main.ap-login .ap-brand-name{
    color:#f5fbfd !important;
    text-shadow:0 1px 12px rgba(0,0,0,.22) !important;
}
body.ap-login-page main.ap-login .ap-brand-sub{
    color:rgba(220,239,245,.58) !important;
}
body.ap-login-page main.ap-login .ap-login-heading .ap-eyebrow{
    color:#6fefff !important;
}
body.ap-login-page main.ap-login .ap-login-heading h1{
    color:#f7fcfe !important;
    text-shadow:0 2px 18px rgba(0,0,0,.24) !important;
}
body.ap-login-page main.ap-login .ap-login-heading p{
    color:rgba(220,235,241,.70) !important;
}
body.ap-login-page main.ap-login .ap-tabs{
    border:1px solid rgba(180,218,229,.22) !important;
    background:rgba(2,14,23,.32) !important;
    border-radius:8px !important;
    overflow:hidden !important;
}
body.ap-login-page main.ap-login .ap-tab{
    color:rgba(213,232,238,.56) !important;
    border-right:1px solid rgba(180,218,229,.16) !important;
}
body.ap-login-page main.ap-login .ap-tab.active{
    background:rgba(111,239,255,.10) !important;
    color:#6fefff !important;
    box-shadow:inset 0 -2px 0 #6fefff !important;
}
body.ap-login-page main.ap-login .ap-login-panel label{
    color:rgba(218,235,241,.72) !important;
}
body.ap-login-page main.ap-login .ap-login-panel input{
    border:1px solid rgba(191,220,228,.23) !important;
    background:rgba(2,15,25,.36) !important;
    color:#f4fbfd !important;
    border-radius:7px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease !important;
}
body.ap-login-page main.ap-login .ap-login-panel input::placeholder{
    color:rgba(207,225,232,.46) !important;
}
body.ap-login-page main.ap-login .ap-login-panel input:focus{
    border-color:rgba(111,239,255,.72) !important;
    background:rgba(2,19,31,.52) !important;
    box-shadow:0 0 0 3px rgba(111,239,255,.10),inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.ap-login-page main.ap-login .ap-login-button{
    min-height:50px !important;
    border:1px solid rgba(111,239,255,.82) !important;
    border-radius:7px !important;
    background:linear-gradient(135deg,#6fefff 0%,#25cde2 100%) !important;
    color:#062434 !important;
    box-shadow:0 12px 28px rgba(0,191,216,.20),inset 0 1px 0 rgba(255,255,255,.45) !important;
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease !important;
}
body.ap-login-page main.ap-login .ap-login-button:hover{
    background:linear-gradient(135deg,#82f3ff 0%,#36d8ea 100%) !important;
    transform:translateY(-1px) !important;
    box-shadow:0 16px 34px rgba(0,191,216,.28),inset 0 1px 0 rgba(255,255,255,.48) !important;
}
body.ap-login-page main.ap-login .ap-login-footer{
    border-top:1px solid rgba(214,239,246,.15) !important;
    color:rgba(210,229,235,.46) !important;
}
body.ap-login-page main.ap-login .ap-alert{
    border:1px solid rgba(111,239,255,.22) !important;
    background:rgba(3,18,29,.48) !important;
    color:#e6f5f8 !important;
    border-radius:7px !important;
}
@media(max-width:640px){
    body.ap-login-page main.ap-login .ap-login-inner{
        padding:34px 24px 28px !important;
        border-radius:12px !important;
    }
}