/* ============================================================
   Ballour Admin Theme v2 — Order Details Page
   ------------------------------------------------------------
   Components:
     • bl-od-pagebar       — title + breadcrumb + prev/next nav
     • bl-od-hero          — main header card with status & KPIs
     • bl-od-hero__kpis    — Total / Discount / Shipping / Subtotal cards
     • bl-od-card          — generic card style for status/customer/shipping/payment
     • bl-od-customer-*    — restyles user_info / user_info_data
     • bl-od-shipping-*    — restyles Shipping_company
     • bl-od-payment-*     — restyles payment / payment_data
     • bl-od-products-*    — restyles products table block (.all_div)
   ============================================================ */


/* ============================================================
   1. PAGE BAR  (title + breadcrumb + nav arrows)
   ============================================================ */
body.theme-v2 .bl-od-pagebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0 18px;
}

body.theme-v2 .bl-od-pagebar__titles { min-width: 0; }

body.theme-v2 .bl-od-pagebar__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--bl-heading);
    margin: 0;
    line-height: 1.2;
}

body.theme-v2 .bl-od-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--bl-text-muted);
    margin-top: 4px;
}
body.theme-v2 .bl-od-breadcrumb a {
    color: var(--bl-text-muted);
    text-decoration: none;
    transition: color .15s ease;
}
body.theme-v2 .bl-od-breadcrumb a:hover { color: var(--bl-brand); }
body.theme-v2 .bl-od-breadcrumb i { font-size: 16px; color: var(--bl-text-soft); }
body.theme-v2 .bl-od-breadcrumb span { color: var(--bl-text); font-weight: 600; }

body.theme-v2 .bl-od-pagebar__nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.theme-v2 .bl-od-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    color: var(--bl-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
}
body.theme-v2 .bl-od-nav-btn:hover {
    background: var(--bl-surface-2);
    color: var(--bl-brand);
    text-decoration: none;
}
body.theme-v2 .bl-od-nav-btn--disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}
body.theme-v2 .bl-od-nav-btn i { font-size: 20px; }


/* ============================================================
   2. HERO CARD  (order # + status + actions + KPI strip)
   ============================================================ */
body.theme-v2 .bl-od-hero {
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow-xs);
    padding: 20px 22px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "top actions"
        "kpis kpis";
    gap: 16px 24px;
}
@media (max-width: 767.98px) {
    body.theme-v2 .bl-od-hero {
        grid-template-columns: 1fr;
        grid-template-areas: "top" "actions" "kpis";
    }
}

body.theme-v2 .bl-od-hero__top { grid-area: top; min-width: 0; }
body.theme-v2 .bl-od-hero__actions {
    grid-area: actions;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
body.theme-v2 .bl-od-hero__inline-form {
    display: inline-block;
    margin: 0;
}
body.theme-v2 .bl-od-hero__kpis {
    grid-area: kpis;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed var(--bl-border);
}
@media (max-width: 991.98px) {
    body.theme-v2 .bl-od-hero__kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479.98px) {
    body.theme-v2 .bl-od-hero__kpis { grid-template-columns: 1fr; }
}

body.theme-v2 .bl-od-hero__title-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
body.theme-v2 .bl-od-hero__order-id {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: var(--bl-heading);
    line-height: 1;
}
body.theme-v2 .bl-od-hero__status {
    padding: 6px 10px !important;
    font-size: 12px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
body.theme-v2 .bl-od-hero__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}
body.theme-v2 .bl-od-hero__sub {
    font-size: 13px;
    color: var(--bl-text-muted);
    margin: 8px 0 0;
}


/* ============================================================
   3. HERO KPIs
   ============================================================ */
body.theme-v2 .bl-od-hero-kpi {
    background: var(--bl-surface-2);
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius-sm);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all .15s ease;
}
body.theme-v2 .bl-od-hero-kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--bl-shadow-xs);
}

body.theme-v2 .bl-od-hero-kpi__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
body.theme-v2 .bl-od-hero-kpi__body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
body.theme-v2 .bl-od-hero-kpi__label {
    font-size: 11px;
    color: var(--bl-text-muted);
    font-weight: 500;
    margin-bottom: 4px;
}
body.theme-v2 .bl-od-hero-kpi__value {
    font-size: 18px;
    font-weight: 800;
    color: var(--bl-heading);
    line-height: 1.1;
}
body.theme-v2 .bl-od-hero-kpi__value .currencySymbol {
    font-size: 12px;
    color: var(--bl-text-muted);
    font-weight: 600;
    margin-inline-start: 2px;
}

body.theme-v2 .bl-od-hero-kpi--blue   .bl-od-hero-kpi__icon { background: var(--bl-tint-blue-bg);   color: var(--bl-tint-blue-fg); }
body.theme-v2 .bl-od-hero-kpi--green  .bl-od-hero-kpi__icon { background: var(--bl-tint-green-bg);  color: var(--bl-tint-green-fg); }
body.theme-v2 .bl-od-hero-kpi--cyan   .bl-od-hero-kpi__icon { background: var(--bl-tint-cyan-bg);   color: var(--bl-tint-cyan-fg); }
body.theme-v2 .bl-od-hero-kpi--purple .bl-od-hero-kpi__icon { background: var(--bl-tint-purple-bg); color: var(--bl-tint-purple-fg); }
body.theme-v2 .bl-od-hero-kpi--orange .bl-od-hero-kpi__icon { background: var(--bl-tint-orange-bg); color: var(--bl-tint-orange-fg); }


/* ============================================================
   4. EXISTING SUB-HEADER (.recoust_info_data) — hide redundant
      info1/info2/info3 since we render order #, date, status in
      the new hero card. Their data is fully covered upstream.
      Keep the wrapping card in DOM (modals and #currency_id input
      are legacy JS hooks elsewhere); we just shrink it visually.
   ============================================================ */
body.theme-v2 .recoust_info_data {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden;
}
body.theme-v2 .recoust_info_data ~ * { display: revert; }

/* Hide the *visible* card chrome that wraps the info trio so the
   page doesn't show an empty white card above the customer row.
   We only target the very first .row.mt-3 > .col-12 in the page. */
body.theme-v2 .row.mt-3 > .col-12:first-child:has(> .card > .card-body > .recoust_info_data) {
    display: none !important;
}


/* ============================================================
   5. INFO CARDS — restyle the 3 cards (customer / shipping / payment)
   ============================================================ */
body.theme-v2 .requst_info_height {
    background: var(--bl-surface) !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius) !important;
    box-shadow: var(--bl-shadow-xs) !important;
    height: 100% !important;
    margin-bottom: 0 !important;
}
body.theme-v2 .requst_info_height .card-body {
    padding: 20px !important;
}


/* === Customer block ============================================ */
body.theme-v2 .user_info {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bl-border);
    margin-bottom: 16px;
}
body.theme-v2 .user_info img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 3px solid var(--bl-tint-blue-bg);
    background: var(--bl-surface-2);
    display: inline-block;
    margin-bottom: 8px;
}
body.theme-v2 .user_info .RQ_show_name {
    font-size: 16px;
    font-weight: 700;
    color: var(--bl-heading);
    margin: 0;
}
body.theme-v2 .user_info .RQ_show_name span { color: var(--bl-heading); }

body.theme-v2 .user_info_data {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.theme-v2 .user_info_data > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.theme-v2 .user_info_data > div > p:first-child {
    font-size: 11px;
    color: var(--bl-text-muted);
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .03em;
}
body.theme-v2 .user_info_data > div > p:last-child,
body.theme-v2 .user_info_data .Main_Color {
    font-size: 13px;
    color: var(--bl-text) !important;
    font-weight: 500;
    margin: 0;
}

/* WhatsApp quick-action footer in customer card */
body.theme-v2 .whatsAppLink {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--bl-border);
}
body.theme-v2 .whatsAppLink .head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
body.theme-v2 .whatsAppLink .head span {
    flex: 1;
    height: 1px;
    background: var(--bl-border);
}
body.theme-v2 .whatsAppLink .head p {
    font-size: 11px;
    font-weight: 600;
    color: var(--bl-text-muted);
    margin: 0;
}
body.theme-v2 .whatsAppLink .links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
body.theme-v2 .userWhatsAppLink {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #25d366;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform .15s ease;
}
body.theme-v2 .userWhatsAppLink:hover {
    transform: translateY(-2px);
    color: #fff !important;
    text-decoration: none;
}


/* === Shipping block ============================================ */
body.theme-v2 .Shipping_company > div,
body.theme-v2 .payment_data > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bl-border);
}
body.theme-v2 .Shipping_company > div:last-child,
body.theme-v2 .payment_data > div:last-child { border-bottom: none; }
body.theme-v2 .Shipping_company > div > p:first-child,
body.theme-v2 .payment_data > div > p:first-child {
    font-size: 12px;
    color: var(--bl-text-muted);
    font-weight: 500;
    margin: 0;
    flex-shrink: 0;
}
body.theme-v2 .Shipping_company > div > p:last-child,
body.theme-v2 .payment_data > div > p:last-child {
    font-size: 13px;
    color: var(--bl-text);
    font-weight: 600;
    margin: 0;
    text-align: end;
}
body.theme-v2 .payment .flex_paymentHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bl-border);
    margin-bottom: 4px;
}


/* === Payment block — emphasize Total ========================== */
body.theme-v2 .payment_data .bac_gray {
    background: var(--bl-tint-blue-bg) !important;
    border-radius: var(--bl-radius-sm) !important;
    padding: 12px !important;
    margin-top: 4px !important;
    border: 1px solid rgba(1, 82, 154, 0.18) !important;
}
body.theme-v2 .payment_data .bac_gray > p:first-child {
    color: var(--bl-tint-blue-fg) !important;
    font-weight: 700 !important;
}
body.theme-v2 .payment_data .bac_gray > p:last-child {
    color: var(--bl-tint-blue-fg) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}


/* === Inline-edit helper buttons ================================ */
body.theme-v2 .requst_edit_data {
    background: transparent !important;
    border: none !important;
    color: var(--bl-text-soft) !important;
    cursor: pointer;
    padding: 2px 4px !important;
    font-size: 12px !important;
    transition: color .15s ease;
}
body.theme-v2 .requst_edit_data:hover { color: var(--bl-brand) !important; }

body.theme-v2 .Save_requst_but {
    background: var(--bl-brand) !important;
    color: #fff !important;
    border: none !important;
    padding: 4px 12px !important;
    border-radius: var(--bl-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer;
}
body.theme-v2 .Save_requst_but:hover { background: var(--bl-brand-600) !important; }

body.theme-v2 .requst_edit_input {
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    background: var(--bl-surface) !important;
    height: 32px;
}


/* ============================================================
   6. PRODUCTS TABLE BLOCK (.all_div)
   ============================================================ */
body.theme-v2 .all_div .card {
    background: var(--bl-surface) !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius) !important;
    box-shadow: var(--bl-shadow-xs) !important;
    margin-top: 16px;
}
body.theme-v2 .all_div .card-body {
    padding: 20px !important;
}

/* Products header row */
body.theme-v2 .all_div .head_text .dl {
    display: inline-block;
    font-size: 16px !important;
    color: var(--bl-heading) !important;
    font-weight: 700 !important;
}
body.theme-v2 .all_div .head_text .text_text {
    background: var(--bl-tint-blue-bg) !important;
    color: var(--bl-tint-blue-fg) !important;
    border: none !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: var(--bl-radius-pill) !important;
    display: inline-block !important;
    margin: 0 4px !important;
}

/* Order partially-prepared warning */
body.theme-v2 .process_order .text-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bl-tint-red-bg) !important;
    color: var(--bl-tint-red-fg) !important;
    border: 1px solid rgba(220, 38, 38, 0.18);
    padding: 6px 12px;
    border-radius: var(--bl-radius-sm);
    font-size: 12px;
    font-weight: 600;
}
body.theme-v2 .process_order .text-danger::before {
    content: "\F0028"; /* mdi-alert-circle */
    font-family: "Material Design Icons";
    font-size: 14px;
}
body.theme-v2 .process_order .text-success {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bl-tint-green-bg) !important;
    color: var(--bl-tint-green-fg) !important;
    border: 1px solid rgba(22, 163, 74, 0.18);
    padding: 6px 12px;
    border-radius: var(--bl-radius-sm);
    font-size: 12px;
    font-weight: 600;
}
body.theme-v2 .process_order .text-success::before {
    content: "\F0E1E"; /* mdi-check-circle */
    font-family: "Material Design Icons";
    font-size: 14px;
}

/* Items table inside the order details */
body.theme-v2 #items_tbl thead tr th {
    background: var(--bl-surface) !important;
    color: var(--bl-text-muted) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border: none !important;
    border-bottom: 1px solid var(--bl-border) !important;
    padding: 12px 10px !important;
}
body.theme-v2 #items_tbl tbody tr td {
    border: none !important;
    border-bottom: 1px solid var(--bl-border) !important;
    padding: 12px 10px !important;
    color: var(--bl-text) !important;
    font-size: 13px !important;
    background: var(--bl-surface) !important;
    vertical-align: middle !important;
}
body.theme-v2 #items_tbl tbody tr:hover td { background: var(--bl-surface-2) !important; }
body.theme-v2 #items_tbl tbody tr.parent1 td.bac_gray,
body.theme-v2 #items_tbl tbody tr td.bac_gray {
    background: var(--bl-surface-2) !important;
    color: var(--bl-text-muted) !important;
    font-weight: 700 !important;
}
body.theme-v2 #items_tbl .tabel_img {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--bl-radius-sm) !important;
    object-fit: cover !important;
    border: 1px solid var(--bl-border) !important;
}

/* Barcode verification panel */
body.theme-v2 .check_barcode {
    background: var(--bl-tint-blue-bg);
    border: 1px solid rgba(1, 82, 154, 0.15);
    border-radius: var(--bl-radius);
    padding: 16px !important;
    margin-top: 16px !important;
}
body.theme-v2 .check_barcode .form-control {
    background: var(--bl-surface) !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
}
body.theme-v2 .check_barcode hr { display: none; }


/* ============================================================
   7. EDIT-HISTORY ICON BUTTON (in legacy first card — now hidden,
      but the modals still trigger via .edit_history)
   ============================================================ */
body.theme-v2 .recoed_edit,
body.theme-v2 .changeCurrency,
body.theme-v2 .receiptPhoto,
body.theme-v2 .add_nots {
    background: transparent !important;
    border: 1px solid var(--bl-border) !important;
    color: var(--bl-text-muted) !important;
    border-radius: var(--bl-radius-sm) !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    cursor: pointer;
    transition: all .15s ease;
}
body.theme-v2 .recoed_edit:hover,
body.theme-v2 .changeCurrency:hover,
body.theme-v2 .receiptPhoto:hover,
body.theme-v2 .add_nots:hover {
    background: var(--bl-surface-2) !important;
    color: var(--bl-brand) !important;
    border-color: var(--bl-brand) !important;
}


/* ============================================================
   8. ROW NUMBER (#) AND OTHER SECTIONS: scoped polish
   ============================================================ */
body.theme-v2 .Shipping_company_data .Main_Color {
    color: var(--bl-brand) !important;
    font-size: 13px;
    text-decoration: none !important;
}

/* Customer header padding tweak */
body.theme-v2 .user_info .RQ_show_name button.requst_edit_data {
    margin-inline-start: 4px;
}