/* ============================================================
   لوحة أزرار Clean Car — كحلي / عنابي / رمادي فاتح
   مطابقة لهوية الشركة (كحلي غامق + عنابي + رمادي محايد):
   تُحمّل بعد أنماط الصفحات وطبقة العمق، وتغيّر الألوان فقط:
   - إداري: كحلي غامق بنص أبيض.
   - مالي: عنابي غامق بنص أبيض.
   - مالي ثانوي: عنابي فاتح بنص عنابي غامق.
   - تتبع/ثانوي: رمادي فاتح بنص كحلي.
   الحالات: عادي، مرور، ضغط بظل ظاهر، تركيز، تعطيل.
   ============================================================ */

:root {
  --ccp-admin-top: #1d5577;
  --ccp-admin-bottom: #123a56;
  --ccp-admin-hover-top: #27648a;
  --ccp-admin-hover-bottom: #174767;
  --ccp-admin-active: #0e2f47;
  --ccp-admin-ink: #ffffff;
  --ccp-admin-line: #164866;
  --ccp-admin-icon: #ffffff;

  --ccp-fin-top: #9a3541;
  --ccp-fin-bottom: #6e1f28;
  --ccp-fin-hover-top: #a63b47;
  --ccp-fin-hover-bottom: #7e2530;
  --ccp-fin-active: #5e1720;
  --ccp-fin-ink: #ffffff;
  --ccp-fin-line: #6e1f28;

  --ccp-finsoft-top: #faf0f1;
  --ccp-finsoft-bottom: #f1dadd;
  --ccp-finsoft-hover-top: #fdf7f8;
  --ccp-finsoft-hover-bottom: #f6e5e7;
  --ccp-finsoft-active: #e9ced2;
  --ccp-finsoft-ink: #6e1f28;
  --ccp-finsoft-icon: #8c2f39;
  --ccp-finsoft-line: #e6c9cd;
  --ccp-finsoft-line-hover: #c98f97;

  --ccp-track-top: #f0f1f2;
  --ccp-track-bottom: #dee0e2;
  --ccp-track-hover-top: #f7f7f7;
  --ccp-track-hover-bottom: #e7e8e9;
  --ccp-track-active: #d1d4d6;
  --ccp-track-ink: #14324a;
  --ccp-track-line: #d1d4d6;

  --ccp-soft-top: #f8f9f9;
  --ccp-soft-bottom: #e7e8e9;
  --ccp-soft-hover-top: #fcfdfd;
  --ccp-soft-hover-bottom: #eff0f1;
  --ccp-soft-active: #dbdddf;
  --ccp-soft-ink: #123a56;
  --ccp-soft-icon: #1b5478;
  --ccp-soft-line: #d9dbdc;
  --ccp-soft-line-hover: #aeb9c3;

  --ccp-disabled-admin: #e1e2e3;
  --ccp-disabled-fin: #e3d3d6;
  --ccp-disabled-soft: #e7e8e9;
  --ccp-disabled-ink: #5e6b78;

  --ccp-focus-admin: #143f5c;
  --ccp-focus-fin: #6e1f28;
  --ccp-focus-finsoft: #8c2f39;
  --ccp-focus-track: #143f5c;
  --ccp-focus-soft: #143f5c;

  /* أسماء قديمة باقية للتوافق مع بقية الأنماط */
  --amber: #8c2f39;
  --amber-strong: #a63b47;
  --amber-deep: #6e1f28;
  --amber-bright: #b24550;
  --amber-soft: #f6e4e6;
  --star: #a5333f;
  --red: #b3261e;
  --red-clear: #b3261e;
}

/* ---------- الأساس الثانوي: أزرق فاتح ---------- */
:is(
  .btn-outline,
  .btn-glass,
  .acc-filter-chip,
  .category-pill,
  .search-summary-clear,
  .acc-preset,
  .acc-tab,
  .acc-link-btn,
  .acc-quick-btn,
  .adm-icon-btn,
  .adm-eye,
  :where(.adm-search button),
  .cc-account-btn,
  .copy-btn,
  .bookings-btn,
  .menu-toggle,
  .doc-tool-btn,
  .doc-btn,
  .footer-action
) {
  background: linear-gradient(180deg, var(--ccp-soft-top) 0%, var(--ccp-soft-bottom) 100%);
  border-color: var(--ccp-soft-line);
  color: var(--ccp-soft-ink);
  --ui3d-edge: rgba(20, 80, 111, 0.2);
  --ui3d-ambient: rgba(20, 80, 111, 0.16);
  --ui3d-gloss: rgba(255, 255, 255, 0.82);
  --ui3d-gloss-soft: rgba(255, 255, 255, 0.48);
  --ui3d-press: rgba(20, 80, 111, 0.18);
  --ui3d-focus: var(--ccp-focus-soft);
  box-shadow:
    0 2px 0 rgba(20, 80, 111, 0.14),
    0 7px 16px -8px rgba(20, 80, 111, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

:is(
  .btn-outline,
  .btn-glass,
  .acc-filter-chip,
  .category-pill,
  .search-summary-clear,
  .acc-preset,
  .acc-tab,
  .acc-link-btn,
  .acc-quick-btn,
  .adm-icon-btn,
  .adm-eye,
  :where(.adm-search button),
  .cc-account-btn,
  .copy-btn,
  .bookings-btn,
  .menu-toggle,
  .doc-tool-btn,
  .doc-btn,
  .footer-action
):not(:disabled):hover {
  background: linear-gradient(180deg, var(--ccp-soft-hover-top) 0%, var(--ccp-soft-hover-bottom) 100%);
  border-color: var(--ccp-soft-line-hover);
  color: var(--ccp-soft-ink);
}

:is(
  .btn-outline,
  .btn-glass,
  .acc-filter-chip,
  .category-pill,
  .search-summary-clear,
  .acc-preset,
  .acc-tab,
  .acc-link-btn,
  .acc-quick-btn,
  .adm-icon-btn,
  .adm-eye,
  :where(.adm-search button),
  .cc-account-btn,
  .copy-btn,
  .bookings-btn,
  .menu-toggle,
  .doc-tool-btn,
  .doc-btn,
  .footer-action
):not(:disabled):active,
:is(
  .btn-outline,
  .btn-glass,
  .acc-filter-chip,
  .category-pill,
  .search-summary-clear,
  .acc-preset,
  .acc-tab,
  .acc-link-btn,
  .acc-quick-btn,
  .adm-icon-btn,
  .adm-eye,
  :where(.adm-search button),
  .cc-account-btn,
  .copy-btn,
  .bookings-btn,
  .menu-toggle,
  .doc-tool-btn,
  .doc-btn,
  .footer-action
).is-pressed {
  background: var(--ccp-soft-active);
  color: var(--ccp-soft-ink);
  box-shadow:
    0 2px 8px rgba(20, 80, 111, 0.18),
    inset 0 2px 4px rgba(20, 70, 100, 0.14);
}

:is(
  .btn-outline,
  .btn-glass,
  .acc-filter-chip,
  .category-pill,
  .search-summary-clear,
  .acc-preset,
  .acc-tab,
  .acc-link-btn,
  .acc-quick-btn,
  .adm-icon-btn,
  .adm-eye,
  :where(.adm-search button),
  .cc-account-btn,
  .copy-btn,
  .bookings-btn,
  .menu-toggle,
  .doc-tool-btn,
  .doc-btn,
  .footer-action
):focus-visible {
  outline: 3px solid var(--ccp-focus-soft);
  outline-offset: 3px;
}

:is(
  .btn-outline,
  .btn-glass,
  .acc-filter-chip,
  .category-pill,
  .search-summary-clear,
  .acc-preset,
  .acc-tab,
  .acc-link-btn,
  .acc-quick-btn,
  .adm-icon-btn,
  .adm-eye,
  :where(.adm-search button),
  .cc-account-btn,
  .copy-btn,
  .bookings-btn,
  .menu-toggle,
  .doc-tool-btn,
  .doc-btn,
  .footer-action
):disabled,
:is(
  .btn-outline,
  .btn-glass,
  .acc-filter-chip,
  .category-pill,
  .search-summary-clear,
  .acc-preset,
  .acc-tab,
  .acc-link-btn,
  .acc-quick-btn,
  .adm-icon-btn,
  .adm-eye,
  :where(.adm-search button),
  .cc-account-btn,
  .copy-btn,
  .bookings-btn,
  .menu-toggle,
  .doc-tool-btn,
  .doc-btn,
  .footer-action
)[aria-disabled="true"] {
  background: linear-gradient(180deg, #f3f4f4 0%, var(--ccp-disabled-soft) 100%);
  border-color: #d6d8d9;
  color: var(--ccp-disabled-ink);
}

.acc-quick-btn .acc-quick-icon,
.acc-tab .acc-tab-icon {
  background: #e9ebec;
  color: var(--ccp-soft-icon);
}

.acc-quick-btn .acc-quick-text small {
  color: #5c7488;
}

.acc-tab .acc-tab-count,
.category-pill .pill-count {
  background: #e9ebec;
  color: var(--ccp-soft-icon);
}

.category-pill .pill-icon {
  color: var(--ccp-soft-icon);
}

.adm-icon-btn:not(.adm-icon-btn-danger),
.adm-eye,
.adm-search button {
  color: var(--ccp-soft-icon);
}

.acc-filter-chip.is-active {
  background: #dcdedf;
  border-color: #8fbcd9;
  color: #123a56;
}

.acc-preset:not(.is-active):hover {
  background: rgba(255,255,255,0.92);
  color: var(--ccp-soft-icon);
}

.acc-preset:focus-visible {
  outline: 3px solid var(--ccp-focus-soft);
  outline-offset: 2px;
}

/* ---------- الأزرار المالية: خمري متوسط ---------- */
:is(
  .document-btn,
  .invoice-btn,
  .receipt-btn,
  .doc-btn-primary,
  :where(
    #paymentSubmitBtn,
    #saveExpenseBtn,
    #invoiceSubmitBtn,
    #documentSubmitBtn,
    #supplierPaymentSubmitBtn,
    #receiptPrintBtn,
    #invoicePrintBtn,
    #documentPrintBtn,
    #addExpenseBtn,
    #newInvoiceBtn,
    #emptyNewInvoiceBtn,
    #donePrintBtn
  ),
  .btn-primary[data-new-handover],
  .btn[data-settle-contract],
  .btn[data-new-promissory],
  .btn[data-payment-receipt],
  .btn[data-payment-correct],
  .btn[data-invoice-preview],
  .btn[data-invoice-share]
) {
  background: linear-gradient(180deg, var(--ccp-fin-top) 0%, var(--ccp-fin-bottom) 100%);
  border-color: var(--ccp-fin-line);
  color: var(--ccp-fin-ink);
  --ui3d-edge: rgba(110,31,40,0.4);
  --ui3d-ambient: rgba(140,47,57,0.3);
  --ui3d-gloss: rgba(255, 255, 255, 0.26);
  --ui3d-gloss-soft: rgba(255, 255, 255, 0.12);
  --ui3d-press: rgba(80,20,28,0.36);
  --ui3d-focus: var(--ccp-focus-fin);
  box-shadow:
    0 2px 0 rgba(110,31,40,0.34),
    0 8px 18px -6px rgba(140,47,57,0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

:is(
  .document-btn,
  .invoice-btn,
  .receipt-btn,
  .doc-btn-primary,
  #paymentSubmitBtn,
  #saveExpenseBtn,
  #invoiceSubmitBtn,
  #documentSubmitBtn,
  #supplierPaymentSubmitBtn,
  #receiptPrintBtn,
  #invoicePrintBtn,
  #documentPrintBtn,
  #addExpenseBtn,
  #newInvoiceBtn,
  #emptyNewInvoiceBtn,
  #donePrintBtn,
  .btn-primary[data-new-handover],
  .btn[data-settle-contract],
  .btn[data-new-promissory],
  .btn[data-payment-receipt],
  .btn[data-payment-correct],
  .btn[data-invoice-preview],
  .btn[data-invoice-share]
):not(:disabled):hover {
  background: linear-gradient(180deg, var(--ccp-fin-hover-top) 0%, var(--ccp-fin-hover-bottom) 100%);
  border-color: #761c26;
  color: var(--ccp-fin-ink);
}

:is(
  .document-btn,
  .invoice-btn,
  .receipt-btn,
  .doc-btn-primary,
  #paymentSubmitBtn,
  #saveExpenseBtn,
  #invoiceSubmitBtn,
  #documentSubmitBtn,
  #supplierPaymentSubmitBtn,
  #receiptPrintBtn,
  #invoicePrintBtn,
  #documentPrintBtn,
  #addExpenseBtn,
  #newInvoiceBtn,
  #emptyNewInvoiceBtn,
  #donePrintBtn,
  .btn-primary[data-new-handover],
  .btn[data-settle-contract],
  .btn[data-new-promissory],
  .btn[data-payment-receipt],
  .btn[data-payment-correct],
  .btn[data-invoice-preview],
  .btn[data-invoice-share]
):not(:disabled):active {
  background: linear-gradient(180deg, var(--ccp-fin-bottom) 0%, var(--ccp-fin-active) 100%);
  color: var(--ccp-fin-ink);
  box-shadow:
    0 2px 9px rgba(110,31,40,0.34),
    inset 0 2px 6px rgba(80,20,28,0.4);
}
:is(
  .document-btn,
  .invoice-btn,
  .receipt-btn,
  .doc-btn-primary,
  .btn-primary[data-new-handover],
  .btn[data-settle-contract],
  .btn[data-new-promissory]
):focus-visible {
  outline: 3px solid var(--ccp-focus-fin);
  outline-offset: 3px;
}

:is(
  .document-btn,
  .invoice-btn,
  .receipt-btn,
  .doc-btn-primary,
  .btn-primary[data-new-handover],
  .btn[data-settle-contract],
  .btn[data-new-promissory]
):disabled,
:is(
  .document-btn,
  .invoice-btn,
  .receipt-btn,
  .doc-btn-primary,
  .btn-primary[data-new-handover],
  .btn[data-settle-contract],
  .btn[data-new-promissory]
)[aria-disabled="true"] {
  background: linear-gradient(180deg, #eee4e5 0%, var(--ccp-disabled-fin) 100%);
  border-color: #cdb9be;
  color: var(--ccp-disabled-ink);
}

/* ---------- الأزرار المالية الثانوية: قرميدي فاتح ---------- */
:is(
  .btn-outline[data-payment-renter],
  .btn-outline[data-payment-contract],
  .btn-outline[data-payment-receipt],
  .btn-outline[data-payment-correct],
  .btn-outline[data-car-expense],
  .btn-outline[data-cheque-collect],
  .btn-outline[data-invoice-preview],
  .btn-outline[data-invoice-share],
  .acc-link-btn[data-payment-renter],
  .acc-link-btn[data-payment-contract],
  .acc-link-btn[data-payment-receipt],
  .acc-link-btn[data-payment-correct],
  .acc-link-btn[data-car-expense],
  .acc-link-btn[data-cheque-collect],
  .acc-link-btn[data-invoice-preview],
  .acc-link-btn[data-invoice-share],
  :where(
    #renterPayBtn,
    #receiptShareBtn,
    #receiptPdfBtn,
    #receiptOrientationBtn,
    #invoiceShareBtn,
    #invoicePdfBtn,
    #invoiceOrientationBtn,
    #documentPdfBtn
  ),
  .doc-tool-btn
) {
  background: linear-gradient(180deg, var(--ccp-finsoft-top) 0%, var(--ccp-finsoft-bottom) 100%);
  border-color: var(--ccp-finsoft-line);
  color: var(--ccp-finsoft-ink);
  --ui3d-edge: rgba(140,47,57,0.24);
  --ui3d-ambient: rgba(140,47,57,0.18);
  --ui3d-gloss: rgba(255, 255, 255, 0.8);
  --ui3d-gloss-soft: rgba(255, 255, 255, 0.46);
  --ui3d-press: rgba(140,47,57,0.2);
  --ui3d-focus: var(--ccp-focus-finsoft);
  box-shadow:
    0 2px 0 rgba(140,47,57,0.16),
    0 7px 16px -8px rgba(140,47,57,0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

:is(
  .btn[data-payment-renter],
  .btn[data-payment-contract],
  .btn[data-payment-receipt],
  .btn[data-payment-correct],
  .btn[data-car-expense],
  .btn[data-cheque-collect],
  .btn[data-invoice-preview],
  .btn[data-invoice-share],
  .acc-link-btn[data-payment-renter],
  .acc-link-btn[data-payment-contract],
  .acc-link-btn[data-payment-receipt],
  .acc-link-btn[data-payment-correct],
  .acc-link-btn[data-car-expense],
  .acc-link-btn[data-cheque-collect],
  .acc-link-btn[data-invoice-preview],
  .acc-link-btn[data-invoice-share],
  #renterPayBtn,
  #receiptShareBtn,
  #receiptPdfBtn,
  #receiptOrientationBtn,
  #invoiceShareBtn,
  #invoicePdfBtn,
  #invoiceOrientationBtn,
  #documentPdfBtn,
  .doc-tool-btn
):not(:disabled):hover {
  background: linear-gradient(180deg, var(--ccp-finsoft-hover-top) 0%, var(--ccp-finsoft-hover-bottom) 100%);
  border-color: var(--ccp-finsoft-line-hover);
  color: var(--ccp-finsoft-ink);
}

:is(
  .btn[data-payment-renter],
  .btn[data-payment-contract],
  .btn[data-payment-receipt],
  .btn[data-payment-correct],
  .btn[data-car-expense],
  .btn[data-cheque-collect],
  .btn[data-invoice-preview],
  .btn[data-invoice-share],
  .acc-link-btn[data-payment-renter],
  .acc-link-btn[data-payment-contract],
  .acc-link-btn[data-payment-receipt],
  .acc-link-btn[data-payment-correct],
  .acc-link-btn[data-car-expense],
  .acc-link-btn[data-cheque-collect],
  .acc-link-btn[data-invoice-preview],
  .acc-link-btn[data-invoice-share],
  #renterPayBtn,
  #receiptShareBtn,
  #receiptPdfBtn,
  #receiptOrientationBtn,
  #invoiceShareBtn,
  #invoicePdfBtn,
  #invoiceOrientationBtn,
  #documentPdfBtn,
  .doc-tool-btn
):not(:disabled):active {
  background: var(--ccp-finsoft-active);
  color: var(--ccp-finsoft-ink);
  box-shadow:
    0 2px 8px rgba(140,47,57,0.22),
    inset 0 2px 5px rgba(110,31,40,0.2);
}

:is(.btn, .acc-link-btn):is(
  [data-payment-renter],
  [data-payment-contract],
  [data-payment-receipt],
  [data-payment-correct],
  [data-car-expense],
  [data-cheque-collect],
  [data-invoice-preview],
  [data-invoice-share]
):focus-visible,
:is(
  #renterPayBtn,
  #receiptShareBtn,
  #receiptPdfBtn,
  #receiptOrientationBtn,
  #invoiceShareBtn,
  #invoicePdfBtn,
  #invoiceOrientationBtn,
  #documentPdfBtn,
  .doc-tool-btn
):focus-visible {
  outline: 3px solid var(--ccp-focus-finsoft);
  outline-offset: 3px;
}

/* ---------- أزرار التتبع: أزرق فاتح ---------- */
:is(
  .trk-btn-primary,
  .trk-btn-dark,
  .trk-btn-soft,
  .trk-btn-outline,
  .trk-tool,
  .btn[data-track-car],
  .doc-btn[data-track-car],
  .acc-link-btn[data-track-car],
  .btn[data-track-fleet],
  .acc-link-btn[data-track-fleet]
) {
  background: linear-gradient(180deg, var(--ccp-track-top) 0%, var(--ccp-track-bottom) 100%);
  border-color: var(--ccp-track-line);
  color: var(--ccp-track-ink);
  --ui3d-edge: rgba(20, 70, 100, 0.26);
  --ui3d-ambient: rgba(20, 70, 100, 0.22);
  --ui3d-gloss: rgba(255, 255, 255, 0.62);
  --ui3d-gloss-soft: rgba(255, 255, 255, 0.36);
  --ui3d-press: rgba(20, 70, 100, 0.22);
  --ui3d-focus: var(--ccp-focus-track);
  box-shadow:
    0 2px 0 rgba(20, 70, 100, 0.2),
    0 7px 16px -8px rgba(20, 70, 100, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

:is(
  .trk-btn-primary,
  .trk-btn-dark,
  .trk-btn-soft,
  .trk-btn-outline,
  .trk-tool,
  .btn[data-track-car],
  .doc-btn[data-track-car],
  .acc-link-btn[data-track-car],
  .btn[data-track-fleet],
  .acc-link-btn[data-track-fleet]
):not(:disabled):hover {
  background: linear-gradient(180deg, var(--ccp-track-hover-top) 0%, var(--ccp-track-hover-bottom) 100%);
  border-color: #7fb2d4;
  color: var(--ccp-track-ink);
}

:is(
  .trk-btn-primary,
  .trk-btn-dark,
  .trk-btn-soft,
  .trk-btn-outline,
  .trk-tool,
  .btn[data-track-car],
  .doc-btn[data-track-car],
  .acc-link-btn[data-track-car],
  .btn[data-track-fleet],
  .acc-link-btn[data-track-fleet]
):not(:disabled):active,
:is(
  .trk-btn-primary,
  .trk-btn-dark,
  .trk-btn-soft,
  .trk-btn-outline,
  .trk-tool,
  .btn[data-track-car],
  .doc-btn[data-track-car],
  .acc-link-btn[data-track-car],
  .btn[data-track-fleet],
  .acc-link-btn[data-track-fleet]
).is-pressed {
  background: var(--ccp-track-active);
  color: var(--ccp-track-ink);
  box-shadow:
    0 2px 8px rgba(20, 70, 100, 0.24),
    inset 0 2px 5px rgba(12, 50, 75, 0.22);
}

:is(
  .trk-btn-primary,
  .trk-btn-dark,
  .trk-btn-soft,
  .trk-btn-outline,
  .trk-tool,
  .btn[data-track-car],
  .doc-btn[data-track-car],
  .acc-link-btn[data-track-car],
  .btn[data-track-fleet],
  .acc-link-btn[data-track-fleet]
):focus-visible {
  outline: 3px solid var(--ccp-focus-track);
  outline-offset: 3px;
}

:is(
  .trk-btn-primary,
  .trk-btn-dark,
  .trk-btn-soft,
  .trk-btn-outline,
  .trk-tool,
  .btn[data-track-car],
  .doc-btn[data-track-car],
  .acc-link-btn[data-track-car],
  .btn[data-track-fleet],
  .acc-link-btn[data-track-fleet]
):disabled,
:is(
  .trk-btn-primary,
  .trk-btn-dark,
  .trk-btn-soft,
  .trk-btn-outline,
  .trk-tool,
  .btn[data-track-car],
  .doc-btn[data-track-car],
  .acc-link-btn[data-track-car],
  .btn[data-track-fleet],
  .acc-link-btn[data-track-fleet]
)[aria-disabled="true"] {
  background: linear-gradient(180deg, #edeeef 0%, #e0e1e3 100%);
  border-color: #cbced0;
  color: var(--ccp-disabled-ink);
}

.trk-head-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #f4f5f5;
  --ui3d-edge: rgba(0, 0, 0, 0.22);
  --ui3d-ambient: rgba(0, 0, 0, 0.18);
  --ui3d-press: rgba(0, 0, 0, 0.26);
  --ui3d-focus: #e3e4e5;
}

.trk-head-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.44);
  color: #ffffff;
}

.trk-head-btn:focus-visible {
  outline: 3px solid #e3e4e5;
  outline-offset: 2px;
}

.trk-head-btn.is-close {
  background: linear-gradient(180deg, #1d5577 0%, #123a56 100%);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.trk-tab.is-active {
  background: linear-gradient(180deg, var(--ccp-track-top) 0%, var(--ccp-track-bottom) 100%);
  border-color: var(--ccp-track-line);
  color: var(--ccp-track-ink);
  --ui3d-edge: rgba(20, 70, 100, 0.24);
  --ui3d-ambient: rgba(20, 70, 100, 0.2);
  --ui3d-press: rgba(20, 70, 100, 0.2);
  --ui3d-focus: var(--ccp-focus-track);
  box-shadow:
    0 2px 0 rgba(20, 70, 100, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.trk-tab:not(.is-active):hover {
  background: var(--ccp-soft-top);
  color: var(--ccp-soft-icon);
}

.trk-tab.is-active .trk-tab-badge {
  background: #ffffff;
  color: var(--ccp-track-ink);
}

.trk-tab:focus-visible {
  outline: 3px solid var(--ccp-focus-track);
  outline-offset: 2px;
}

/* ---------- الأزرار الإدارية: كحلي ---------- */
:is(
  .admin-body .btn-primary,
  .acc-quick-btn.is-primary,
  .admin-fab,
  :where(
    #newContractBtn,
    #newContractBtn2,
    #emptyNewContractBtn,
    #newRenterBtn,
    #emptyNewRenterBtn,
    #saveContractBtn,
    #saveRenterBtn,
    #saveDriverBtn,
    #blSaveBtn,
    #partnerAddBtn,
    #userAddBtn,
    #openBookingsBtn,
    #addCarBtn,
    #settingsBtn,
    #reportShowBtn
  )
) {
  background: linear-gradient(180deg, var(--ccp-admin-top) 0%, var(--ccp-admin-bottom) 100%);
  border-color: var(--ccp-admin-line);
  color: var(--ccp-admin-ink);
  --ui3d-edge: rgba(9, 35, 53, 0.42);
  --ui3d-ambient: rgba(18, 58, 86, 0.32);
  --ui3d-gloss: rgba(255, 255, 255, 0.3);
  --ui3d-gloss-soft: rgba(255, 255, 255, 0.14);
  --ui3d-press: rgba(6, 25, 38, 0.42);
  --ui3d-focus: var(--ccp-focus-admin);
  box-shadow:
    0 2px 0 rgba(9, 35, 53, 0.36),
    0 8px 18px -6px rgba(18, 58, 86, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

:is(
  .admin-body .btn-primary,
  .acc-quick-btn.is-primary,
  .admin-fab,
  #newContractBtn,
  #newContractBtn2,
  #emptyNewContractBtn,
  #newRenterBtn,
  #emptyNewRenterBtn,
  #saveContractBtn,
  #saveRenterBtn,
  #saveDriverBtn,
  #blSaveBtn,
  #partnerAddBtn,
  #userAddBtn,
  #openBookingsBtn,
  #addCarBtn,
  #settingsBtn,
  #reportShowBtn
):not(:disabled):hover {
  background: linear-gradient(180deg, var(--ccp-admin-hover-top) 0%, var(--ccp-admin-hover-bottom) 100%);
  border-color: #1d5a7d;
  color: var(--ccp-admin-ink);
}

:is(
  .admin-body .btn-primary,
  .acc-quick-btn.is-primary,
  .admin-fab,
  #newContractBtn,
  #newContractBtn2,
  #emptyNewContractBtn,
  #newRenterBtn,
  #emptyNewRenterBtn,
  #saveContractBtn,
  #saveRenterBtn,
  #saveDriverBtn,
  #blSaveBtn,
  #partnerAddBtn,
  #userAddBtn,
  #openBookingsBtn,
  #addCarBtn,
  #settingsBtn,
  #reportShowBtn
):not(:disabled):active,
:is(
  .admin-body .btn-primary,
  .acc-quick-btn.is-primary,
  .admin-fab,
  #newContractBtn,
  #newContractBtn2,
  #emptyNewContractBtn,
  #newRenterBtn,
  #emptyNewRenterBtn,
  #saveContractBtn,
  #saveRenterBtn,
  #saveDriverBtn,
  #blSaveBtn,
  #partnerAddBtn,
  #userAddBtn,
  #openBookingsBtn,
  #addCarBtn,
  #settingsBtn,
  #reportShowBtn
).is-pressed {
  background: linear-gradient(180deg, var(--ccp-admin-bottom) 0%, var(--ccp-admin-active) 100%);
  color: var(--ccp-admin-ink);
  box-shadow:
    0 2px 9px rgba(9, 35, 53, 0.38),
    inset 0 2px 6px rgba(4, 18, 28, 0.46);
}

:is(
  .admin-body .btn-primary,
  .acc-quick-btn.is-primary,
  .admin-fab,
  #newContractBtn,
  #newContractBtn2,
  #emptyNewContractBtn,
  #newRenterBtn,
  #emptyNewRenterBtn,
  #saveContractBtn,
  #saveRenterBtn,
  #saveDriverBtn,
  #blSaveBtn,
  #partnerAddBtn,
  #userAddBtn,
  #openBookingsBtn,
  #addCarBtn,
  #settingsBtn,
  #reportShowBtn
):focus-visible {
  outline: 3px solid var(--ccp-focus-admin);
  outline-offset: 3px;
}

:is(
  .admin-body .btn-primary,
  .acc-quick-btn.is-primary,
  .admin-fab,
  #newContractBtn,
  #newContractBtn2,
  #emptyNewContractBtn,
  #newRenterBtn,
  #emptyNewRenterBtn,
  #saveContractBtn,
  #saveRenterBtn,
  #saveDriverBtn,
  #blSaveBtn,
  #partnerAddBtn,
  #userAddBtn,
  #openBookingsBtn,
  #addCarBtn,
  #settingsBtn,
  #reportShowBtn
):disabled,
:is(
  .admin-body .btn-primary,
  .acc-quick-btn.is-primary,
  .admin-fab,
  #newContractBtn,
  #newContractBtn2,
  #emptyNewContractBtn,
  #newRenterBtn,
  #emptyNewRenterBtn,
  #saveContractBtn,
  #saveRenterBtn,
  #saveDriverBtn,
  #blSaveBtn,
  #partnerAddBtn,
  #userAddBtn,
  #openBookingsBtn,
  #addCarBtn,
  #settingsBtn,
  #reportShowBtn
)[aria-disabled="true"] {
  background: linear-gradient(180deg, #eceded 0%, var(--ccp-disabled-admin) 100%);
  border-color: #cbcdd0;
  color: var(--ccp-disabled-ink);
}

/* .btn-dark is shared by administrative saves and public actions; financial
   buttons that use it are re-colored by the ID / data-attribute rules above. */
.btn-dark {
  background: linear-gradient(180deg, var(--ccp-admin-top) 0%, var(--ccp-admin-bottom) 100%);
  border-color: var(--ccp-admin-line);
  color: var(--ccp-admin-ink);
  --ui3d-edge: rgba(9, 35, 53, 0.42);
  --ui3d-ambient: rgba(18, 58, 86, 0.32);
  --ui3d-gloss: rgba(255, 255, 255, 0.3);
  --ui3d-gloss-soft: rgba(255, 255, 255, 0.14);
  --ui3d-press: rgba(6, 25, 38, 0.42);
  --ui3d-focus: var(--ccp-focus-admin);
  box-shadow:
    0 2px 0 rgba(9, 35, 53, 0.36),
    0 8px 18px -6px rgba(18, 58, 86, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn-dark:not(:disabled):hover {
  background: linear-gradient(180deg, var(--ccp-admin-hover-top) 0%, var(--ccp-admin-hover-bottom) 100%);
  border-color: #1d5a7d;
  color: var(--ccp-admin-ink);
}

.btn-dark:not(:disabled):active,
.btn-dark.is-pressed {
  background: linear-gradient(180deg, var(--ccp-admin-bottom) 0%, var(--ccp-admin-active) 100%);
  color: var(--ccp-admin-ink);
  box-shadow:
    0 2px 9px rgba(9, 35, 53, 0.38),
    inset 0 2px 6px rgba(4, 18, 28, 0.46);
}

.btn-dark:focus-visible {
  outline: 3px solid var(--ccp-focus-admin);
  outline-offset: 3px;
}

.btn-dark:disabled,
.btn-dark[aria-disabled="true"] {
  background: linear-gradient(180deg, #eceded 0%, var(--ccp-disabled-admin) 100%);
  border-color: #cbcdd0;
  color: var(--ccp-disabled-ink);
}

.acc-quick-btn.is-primary .acc-quick-icon {
  background: rgba(255, 255, 255, 0.55);
  color: var(--ccp-admin-icon);
}

.acc-quick-btn.is-primary .acc-quick-text small {
  color: rgba(255, 255, 255, 0.8);
}

.category-pill.is-active {
  background: linear-gradient(180deg, #1d5577 0%, #123a56 100%);
  border-color: #164866;
  color: #ffffff;
  --ui3d-focus: var(--ccp-focus-admin);
  box-shadow:
    0 2px 0 rgba(9, 35, 53, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.category-pill.is-active:not(:disabled):hover {
  background: linear-gradient(180deg, #27648a 0%, #174767 100%);
  border-color: #1d5a7d;
  color: #ffffff;
}

.category-pill.is-active .pill-icon,
.category-pill.is-active .pill-count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.acc-quick-btn:not(.is-primary):not(.acc-quick-btn-alert) .acc-quick-icon {
  background: #e9ebec;
  color: var(--ccp-soft-icon);
}

.acc-quick-btn:not(.is-primary):not(.acc-quick-btn-alert) .acc-quick-text small {
  color: #5c7488;
}

.acc-tab:not(.is-active) .acc-tab-icon {
  background: #e9ebec;
  color: var(--ccp-soft-icon);
}

.acc-tab:not(.is-active) .acc-tab-count {
  background: #e9ebec;
  color: var(--ccp-soft-icon);
}

.category-pill:not(.is-active) {
  color: var(--ccp-soft-ink);
}

.category-pill:not(.is-active) .pill-icon {
  color: var(--ccp-soft-icon);
}

.category-pill:not(.is-active) .pill-count {
  background: #e9ebec;
  color: var(--ccp-soft-icon);
}

.adm-icon-btn:not(.adm-icon-btn-danger),
.adm-eye,
.adm-search button {
  color: var(--ccp-soft-icon);
}

.acc-filter-chip.is-active {
  background: #dcdedf;
  border-color: #8fbcd9;
  color: #123a56;
}

.acc-preset:not(.is-active):hover {
  background: rgba(255,255,255,0.92);
  color: var(--ccp-soft-icon);
}

.acc-preset:focus-visible {
  outline: 3px solid var(--ccp-focus-soft);
  outline-offset: 2px;
}

/* ---------- استثناءات دلالية: الخطر والنجاح ---------- */
:is(.btn-danger-outline, .adm-delete-btn, .acc-doc-remove, .trk-btn-danger) {
  --ui3d-edge: rgba(140,47,57,0.26);
  --ui3d-ambient: rgba(140,47,57,0.2);
  --ui3d-press: rgba(140, 47, 57, 0.18);
  --ui3d-focus: #a63c3c;
}

.btn-danger-outline,
.acc-link-btn.is-danger,
.adm-delete-btn,
.acc-doc-remove {
  color: #a63c3c;
}

.btn-danger-outline {
  background: linear-gradient(180deg, #ffffff 0%, #fff6f6 100%);
  border-color: #e9c3c3;
}

.btn-danger-outline:not(:disabled):hover {
  background: linear-gradient(180deg, #fff7f7 0%, #fbe4e4 100%);
  border-color: #cf8f8f;
  color: #963434;
}

.btn-danger-outline:focus-visible,
.acc-link-btn.is-danger:focus-visible,
.adm-delete-btn:focus-visible,
.acc-doc-remove:focus-visible,
.trk-btn-danger:focus-visible {
  outline: 3px solid #a63c3c;
  outline-offset: 3px;
}

.adm-delete-btn {
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  border-color: #eed4d4;
}

.adm-delete-btn:hover {
  background: var(--red-soft);
  color: #963434;
}

.acc-doc-remove {
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  border-color: #f0c6c1;
}

.acc-doc-remove:hover {
  background: #fbe9e7;
  color: #963434;
}

.acc-link-btn.is-danger {
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  border-color: #f0cdcd;
}

.acc-link-btn.is-danger:hover {
  background: var(--red-soft);
  color: #963434;
}

.acc-link-btn.is-green {
  background: linear-gradient(180deg, #ffffff 0%, #f5fbf7 100%);
  border-color: #cfe6d9;
  color: #2f7d5b;
}

.acc-link-btn.is-green:hover {
  background: var(--green-soft);
  color: #256a4b;
}

.footer-action-wa {
  background: linear-gradient(180deg, #43b06a 0%, #2f8f52 100%);
  border-color: #2a7d48;
  color: #ffffff;
}

.footer-action-wa:hover {
  background: linear-gradient(180deg, #4cbc74 0%, #359a5b 100%);
  border-color: #2f8f52;
  color: #ffffff;
}

.acc-side-btn.acc-side-btn-alert {
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  border-color: rgba(189, 75, 75, 0.36);
  color: #8c2f39;
  box-shadow:
    0 2px 0 rgba(140,47,57,0.12),
    0 7px 16px -8px rgba(140,47,57,0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.acc-side-btn.acc-side-btn-alert:hover {
  background: linear-gradient(180deg, #fff1f1 0%, #fff7f7 100%);
  border-color: rgba(140,47,57,0.5);
  color: #963434;
}

.acc-side-btn.acc-side-btn-alert:focus-visible {
  outline: 3px solid #a5332b;
  outline-offset: 2px;
}

.acc-side-btn.acc-side-btn-alert .icon {
  color: #a5332b;
}

.adm-icon-btn.adm-icon-btn-danger {
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  border-color: #f0d4d4;
  color: #a63c3c;
}

.adm-icon-btn.adm-icon-btn-danger:hover {
  background: var(--red-soft);
  color: #963434;
}

.adm-search button:hover {
  background: linear-gradient(180deg, #fcfcfc 0%, #f0f1f1 100%);
  color: var(--ccp-soft-icon);
}

.adm-confirm-actions .btn-danger-outline.is-confirm {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.footer-action-wa,
.footer-action-wa:hover {
  color: #fff;
}

.trk-btn-danger {
  background: #fdf0f1;
  border-color: #f0cdd2;
  color: #8c2f39;
}

.trk-btn-danger:hover {
  background: #fbe4e6;
  color: #7c2932;
}

/* تمييز أحمر الخطر عن الخمري المالي */
:is(
  .btn-danger-outline,
  .acc-link-btn.is-danger,
  .adm-delete-btn,
  .acc-doc-remove,
  .adm-icon-btn.adm-icon-btn-danger,
  .trk-btn-danger
) {
  color: #a5332b;
}

:is(
  .btn-danger-outline,
  .acc-link-btn.is-danger,
  .adm-delete-btn,
  .acc-doc-remove,
  .adm-icon-btn.adm-icon-btn-danger,
  .trk-btn-danger
):hover {
  color: #8f2a24;
}

:is(
  .btn-danger-outline,
  .acc-link-btn.is-danger,
  .adm-delete-btn,
  .acc-doc-remove,
  .adm-icon-btn.adm-icon-btn-danger,
  .trk-btn-danger
):focus-visible {
  outline-color: #a5332b;
}

/* حالات الأزرار الإدارية ذات المعرّفات */
:is(
  #newContractBtn,
  #newContractBtn2,
  #emptyNewContractBtn,
  #newRenterBtn,
  #emptyNewRenterBtn,
  #saveContractBtn,
  #saveRenterBtn,
  #saveDriverBtn,
  #blSaveBtn,
  #partnerAddBtn,
  #userAddBtn,
  #openBookingsBtn,
  #addCarBtn,
  #settingsBtn,
  #reportShowBtn
):not(:disabled):hover {
  background: linear-gradient(180deg, var(--ccp-admin-hover-top) 0%, var(--ccp-admin-hover-bottom) 100%);
  border-color: #1d5a7d;
  color: var(--ccp-admin-ink);
}

:is(
  #newContractBtn,
  #newContractBtn2,
  #emptyNewContractBtn,
  #newRenterBtn,
  #emptyNewRenterBtn,
  #saveContractBtn,
  #saveRenterBtn,
  #saveDriverBtn,
  #blSaveBtn,
  #partnerAddBtn,
  #userAddBtn,
  #openBookingsBtn,
  #addCarBtn,
  #settingsBtn,
  #reportShowBtn
):not(:disabled):active {
  background: linear-gradient(180deg, var(--ccp-admin-bottom) 0%, var(--ccp-admin-active) 100%);
  color: var(--ccp-admin-ink);
  box-shadow:
    0 2px 9px rgba(9, 35, 53, 0.38),
    inset 0 2px 6px rgba(4, 18, 28, 0.46);
}

/* حالات الأزرار المالية الثانوية ذات المعرّفات */
:is(
  #renterPayBtn,
  #receiptShareBtn,
  #receiptPdfBtn,
  #receiptOrientationBtn,
  #invoiceShareBtn,
  #invoicePdfBtn,
  #invoiceOrientationBtn,
  #documentPdfBtn
):not(:disabled):hover {
  background: linear-gradient(180deg, var(--ccp-finsoft-hover-top) 0%, var(--ccp-finsoft-hover-bottom) 100%);
  border-color: var(--ccp-finsoft-line-hover);
  color: var(--ccp-finsoft-ink);
}

:is(
  #renterPayBtn,
  #receiptShareBtn,
  #receiptPdfBtn,
  #receiptOrientationBtn,
  #invoiceShareBtn,
  #invoicePdfBtn,
  #invoiceOrientationBtn,
  #documentPdfBtn
):not(:disabled):active {
  background: var(--ccp-finsoft-active);
  color: var(--ccp-finsoft-ink);
  box-shadow:
    0 2px 8px rgba(140,47,57,0.22),
    inset 0 2px 5px rgba(110,31,40,0.2);
}

/* حالات الأزرار المالية ذات المعرّفات */
:is(
  #paymentSubmitBtn,
  #saveExpenseBtn,
  #invoiceSubmitBtn,
  #documentSubmitBtn,
  #supplierPaymentSubmitBtn,
  #receiptPrintBtn,
  #invoicePrintBtn,
  #documentPrintBtn,
  #addExpenseBtn,
  #newInvoiceBtn,
  #emptyNewInvoiceBtn,
  #donePrintBtn
):not(:disabled):hover {
  background: linear-gradient(180deg, var(--ccp-fin-hover-top) 0%, var(--ccp-fin-hover-bottom) 100%);
  border-color: #761c26;
  color: var(--ccp-fin-ink);
}

:is(
  #paymentSubmitBtn,
  #saveExpenseBtn,
  #invoiceSubmitBtn,
  #documentSubmitBtn,
  #supplierPaymentSubmitBtn,
  #receiptPrintBtn,
  #invoicePrintBtn,
  #documentPrintBtn,
  #addExpenseBtn,
  #newInvoiceBtn,
  #emptyNewInvoiceBtn,
  #donePrintBtn
):not(:disabled):active {
  background: linear-gradient(180deg, var(--ccp-fin-bottom) 0%, var(--ccp-fin-active) 100%);
  color: var(--ccp-fin-ink);
  box-shadow:
    0 2px 9px rgba(110,31,40,0.34),
    inset 0 2px 6px rgba(80,20,28,0.4);
}

:is(
  #paymentSubmitBtn,
  #saveExpenseBtn,
  #invoiceSubmitBtn,
  #documentSubmitBtn,
  #supplierPaymentSubmitBtn,
  #receiptPrintBtn,
  #invoicePrintBtn,
  #documentPrintBtn,
  #addExpenseBtn,
  #newInvoiceBtn,
  #emptyNewInvoiceBtn,
  #donePrintBtn
):focus-visible {
  outline: 3px solid var(--ccp-focus-fin);
  outline-offset: 3px;
}

:is(
  #paymentSubmitBtn,
  #saveExpenseBtn,
  #invoiceSubmitBtn,
  #documentSubmitBtn,
  #supplierPaymentSubmitBtn,
  #receiptPrintBtn,
  #invoicePrintBtn,
  #documentPrintBtn,
  #addExpenseBtn,
  #newInvoiceBtn,
  #emptyNewInvoiceBtn,
  #donePrintBtn
):disabled,
:is(
  #paymentSubmitBtn,
  #saveExpenseBtn,
  #invoiceSubmitBtn,
  #documentSubmitBtn,
  #supplierPaymentSubmitBtn,
  #receiptPrintBtn,
  #invoicePrintBtn,
  #documentPrintBtn,
  #addExpenseBtn,
  #newInvoiceBtn,
  #emptyNewInvoiceBtn,
  #donePrintBtn
)[aria-disabled="true"] {
  background: linear-gradient(180deg, #eee4e5 0%, var(--ccp-disabled-fin) 100%);
  border-color: #cdb9be;
  color: var(--ccp-disabled-ink);
}

/* ---------- التنقل النشط يبقى كحليًا للهوية ---------- */
.acc-preset.is-active {
  background: #dcdedf;
  border-color: #8fbcd9;
  color: #123a56;
}

.acc-tab.is-active,
.owner-tabs button.is-active,
.owner-detail-tabs button.is-active,
.acc-bl-tabs button.is-active {
  background: var(--ink);
  color: #fff;
}

.acc-tab.is-active:not(:disabled):hover {
  background: var(--ink);
  color: #fff;
}

/* ---------- الطباعة: الأزرار غير ظاهرة في أوراق المستندات ---------- */
@media print {
  .document-btn,
  .doc-tool-btn {
    background: #fff;
    color: var(--ink);
    box-shadow: none;
  }
}

/* أيقونة الإعدادات تبقى واضحة فوق الخلفية الكحلية */
#settingsBtn.adm-icon-btn:not(.adm-icon-btn-danger),
#settingsBtn.adm-icon-btn:not(.adm-icon-btn-danger):hover,
#settingsBtn.adm-icon-btn:not(.adm-icon-btn-danger):active {
  color: var(--ccp-admin-ink);
}