@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');

:root {
    /* Define the LTR font stack (e.g., for English) */
    --banking-font-body: 'Calibri', Arial, sans-serif;
    
    /* Define a specific font stack for Arabic/RTL contexts */
    --banking-font-arabic: 'Calibri', Arial, sans-serif;

    /* Primary Colors (Green Theme) */
    --banking-primary: #0A7F3F;               /* Main green */
    --banking-primary-light: #11A857;         /* Lighter green */
    --banking-primary-dark: #065A2B;          /* Dark green */
    --banking-primary-gradient: linear-gradient(135deg, #0A7F3F 0%, #11A857 100%);

    /* Secondary Colors (Natural earthy tones) */
    --banking-secondary: #A88F4F;             /* olive-gold */
    --banking-secondary-dark: #8A743C;
    --banking-accent: #6C5E3A;                /* warm earthy accent */

    /* Status Colors – harmonized with green theme */
    --banking-success: #0A7F3F;              /* success = primary green */
    --banking-success-light: #D4F2E3;
    --banking-danger: #DC2626;
    --banking-danger-light: #FEE2E2;
    --banking-warning: #D97706;
    --banking-warning-light: #FEF3C7;
    --banking-info: #0284C7;
    --banking-info-light: #DBEAFE;

    /* Backgrounds */
    --banking-bg-page: #F4FAF7;
    --banking-bg-card: #ffffff;
    --banking-bg-hover: #E6F4EB;              /* subtle green tint */
    --banking-bg-sidebar: #ffffff;

    /* Borders & Dividers */
    --banking-border: #D9E8DF;
    --banking-border-dark: #AAC8BA;
    --banking-divider: #E8F2EC;

    /* Text Colors */
    --banking-text-primary: #1e293b;
    --banking-text-secondary: #475569;
    --banking-text-muted: #94a3b8;
    --banking-text-inverse: #ffffff;
}

/* --- Global Base Styles --- */
body {
    color: var(--banking-text-primary);
    font-family: var(--banking-font-body);
    font-size: 16px !important;   
}

/* --- Page Background --- */
.page-container,
.layout-main-section,
#page-Workspaces {
    background-color: var(--banking-bg-page) !important;
}

/* --- Form Layout & Cards --- */
.form-layout,
.frappe-control,
.form-section,
.widget,
.dashboard-card,
.indicator-widget,
.page-card-container,
.page-card {
    background: var(--banking-bg-card);
    /* border: 1px solid var(--banking-border); */
}

/* --- Section Headers --- */
.form-section .section-head,
.form-column .section-head {
    background: var(--banking-primary-gradient);
    color: var(--banking-text-inverse);
}

.form-section .section-head .collapsed,
.form-column .section-head .collapsed {
    color: var(--banking-text-inverse);
}

/* Collapsible sections */
.form-section.collapsible .section-head:hover {
    background: linear-gradient(135deg, var(--banking-primary-light) 0%, #0088cc 100%);
}

/* --- Buttons --- */
.btn-primary,
.btn-primary-dark,
button.btn-primary,
.page-head .standard-actions .btn-primary {
    background: var(--banking-primary-gradient);
    color: var(--banking-text-inverse);
}

.btn-primary:hover,
.btn-primary-dark:hover,
button.btn-primary:hover {
    background: linear-gradient(135deg, var(--banking-primary-light) 0%, #0088cc 100%);
    color: var(--banking-text-inverse);
}

/* Secondary Button */
.btn-secondary,
.btn-default {
    background: var(--banking-bg-card);
    border: 1px solid var(--banking-border-dark);
    color: var(--banking-text-primary);
}

.btn-secondary:hover,
.btn-default:hover {
    background: var(--banking-bg-hover);
    border-color: var(--banking-primary-light);
    color: var(--banking-primary);
}

/* Status Buttons */
.btn-success {
    background: var(--banking-success);
    color: var(--banking-text-inverse);
}

.btn-success:hover {
    background: #0d9474;
}

.btn-danger {
    background: var(--banking-danger);
    color: var(--banking-text-inverse);
}

.btn-danger:hover {
    background: #c02a2a;
}

/* --- Form Controls & Inputs --- */
.form-control,
.input-with-feedback,
.frappe-control input[type="text"],
.frappe-control input[type="email"],
.frappe-control input[type="password"],
.frappe-control input[type="number"],
.frappe-control input[type="date"],
.frappe-control textarea,
.frappe-control select,
.frappe-control .control-input,
.frappe-control .control-value,
input.input-with-feedback {
    border-bottom: 2px solid var(--banking-border-dark);
    color: var(--banking-text-primary);
    background-color: transparent;
}

.form-control:focus,
.input-with-feedback:focus,
.frappe-control input:focus,
.frappe-control textarea:focus,
.frappe-control select:focus {
    border-color: var(--banking-primary);
    background-color: transparent;
}

.frappe-control .control-input {
    border: 0;
    background-color: var(--banking-bg-card);
}

.frappe-control .control-input:focus-within {
    border-color: var(--banking-primary);
}

/* Placeholder text */
.form-control::placeholder,
.frappe-control input::placeholder,
.frappe-control textarea::placeholder {
    color: var(--banking-text-muted);
}

/* Read-only textbox fields */
.form-control[readonly],
.form-control:disabled,
.frappe-control input[type="text"][readonly],
.frappe-control input[type="email"][readonly],
.frappe-control input[type="password"][readonly],
.frappe-control input[type="number"][readonly],
.frappe-control input[type="date"][readonly],
.frappe-control input[readonly],
.frappe-control textarea[readonly],
.frappe-control input[type="text"][disabled],
.frappe-control input[type="email"][disabled],
.frappe-control input[type="password"][disabled],
.frappe-control input[type="number"][disabled],
.frappe-control input[type="date"][disabled],
.frappe-control input[disabled],
.frappe-control textarea[disabled],
.control-value.like-disabled-input,
.frappe-control .control-value.like-disabled-input {
    background-color: #E0E0E0 !important;
    color: var(--banking-text-secondary);
    cursor: not-allowed;
}


/* --- Labels --- */
.frappe-control label,
.form-group label,
.control-label {
    color: var(--banking-text-primary);
}

.frappe-control .help-box,
.form-group .help-block {
    color: var(--banking-text-secondary);
}

/* --- Tables --- */
.table,
.datatable,
.grid-body .rows .data-row {
    border: 1px solid var(--banking-border);
}

.table thead,
.datatable .dt-header,
.grid-heading-row {
    background: var(--banking-primary-gradient);
    color: white;
}

.table tbody tr,
.datatable .dt-row,
.grid-body .rows .data-row {
    border-bottom: 1px solid var(--banking-divider);
}

.table tbody tr:hover,
.datatable .dt-row:hover,
.grid-body .rows .data-row:hover {
    background-color: var(--banking-bg-hover);
}

.table tbody td,
.datatable .dt-cell,
.grid-body .rows .data-row .col {
    border-bottom: 1px solid var(--banking-divider);
    color: var(--banking-text-primary);
}

/* --- Custom: White Text for Specific Elements --- */
.list-row-col,
.level-item,
.list-count {
    color: #ffffff !important;
}

.frappe-timestamp {
    color: black !important;
}

.ellipsis, .awesomplete > [role=listbox]>li, 
.awesomplete > [role=listbox] > [role=option], 
.widget.shortcut-widget-box .indicator-pill {
    color: black;
}

.datatable .dt-header .dt-cell--header .dt-cell__content {
    font-weight: 700;
    font-size: 12px !important;
    background-color:var(--banking-primary);
}

/* Make ONLY child table headers white */
.grid-heading-row .grid-row .static-area {
    color: #ffffff !important;
}

/* --- Child Tables / Grid --- */
.grid-body {
    border: 1px solid var(--banking-border);
}

.grid-footer {
    background: var(--banking-bg-hover);
    border-top: 1px solid var(--banking-border);
}

/* --- Page Header --- */
.page-head,
.page-title {
    background: var(--banking-primary-gradient);
    color: var(--banking-text-inverse);
}

.page-head .page-title,
.page-title h3 {
    color: var(--banking-text-inverse);
}

.page-head .page-title .title-text {
    color: var(--banking-text-inverse);
}

/* --- Sidebar --- */
.layout-side-section,
.desk-sidebar {
    background: var(--banking-bg-sidebar);
    border-right: 1px solid var(--banking-border);
}

.sidebar-menu .sidebar-label,
.desk-sidebar .standard-sidebar-label {
    color: var(--banking-text-primary);
}

.sidebar-menu .sidebar-label:hover,
.desk-sidebar .standard-sidebar-item:hover {
    background: var(--banking-bg-hover);
    color: var(--banking-primary);
}

.sidebar-menu .selected,
.desk-sidebar .selected {
    background: var(--banking-primary);
    color: var(--banking-text-inverse);
}

/* --- Indicators / Status Pills --- */
.indicator.green,
.indicator-pill.green,
.badge-success {
    background-color: var(--banking-success);
    color: var(--banking-text-inverse);
}

.indicator.red,
.indicator-pill.red,
.badge-danger {
    background-color: var(--banking-danger);
    color: var(--banking-text-inverse);
}

.indicator.orange,
.indicator-pill.orange,
.badge-warning {
    background-color: var(--banking-warning);
    color: var(--banking-text-inverse);
}

.indicator.blue,
.indicator-pill.blue,
.badge-info {
    background-color: var(--banking-info);
    color: var(--banking-text-inverse);
}

.indicator.gray,
.indicator-pill.gray,
.badge-secondary {
    background-color: var(--banking-text-muted);
    color: var(--banking-text-inverse);
}

/* --- Alerts / Messages --- */
.alert-info {
    background-color: var(--banking-info-light);
    color: #1e40af;
    border-left: 4px solid var(--banking-info);
}

.alert-success {
    background-color: var(--banking-success-light);
    color: #065f46;
    border-left: 4px solid var(--banking-success);
}

.alert-warning {
    background-color: var(--banking-warning-light);
    color: #92400e;
    border-left: 4px solid var(--banking-warning);
}

.alert-danger {
    background-color: var(--banking-danger-light);
    color: #991b1b;
    border-left: 4px solid var(--banking-danger);
}

/* --- Widgets & Dashboard Cards --- */
.widget .widget-head,
.dashboard-card .card-head {
    border-bottom: 1px solid var(--banking-divider);
    color: var(--banking-text-primary);
}

/* --- Links --- */
a,
.link-field,
.frappe-control a {
    color: var(--banking-primary);
}

a:hover,
.link-field:hover,
.frappe-control a:hover {
    color: var(--banking-primary-light);
}

/* --- Tabs --- */
.nav-tabs {
    border-bottom: 2px solid var(--banking-divider);
}

.nav-tabs .nav-link {
    color: var(--banking-text-secondary);
    border-bottom: 3px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--banking-primary-light);
    border-bottom-color: var(--banking-primary-light);
}

.nav-tabs .nav-link.active {
    color: var(--banking-primary);
    border-bottom-color: var(--banking-primary);
    background: transparent;
}

/* --- Modal / Dialog --- */
.modal-header {
    background: var(--banking-primary);
    color: var(--banking-text-inverse);
}

.modal-footer {
    background: var(--banking-bg-page);
    border-top: 1px solid var(--banking-border);
}

/* --- Dropdown Menu --- */
.dropdown-menu {
    border: 1px solid var(--banking-border);
}

.dropdown-item {
    color: var(--banking-text-primary);
}

.dropdown-item:hover {
    background: var(--banking-bg-hover);
    color: var(--banking-primary);
}

/* --- Form Tabs --- */
.form-tabs {
    border-bottom: 2px solid var(--banking-divider);
}

.form-tabs .nav-link {
    color: var(--banking-text-secondary);
    border-bottom: 3px solid transparent;
}

.form-tabs .nav-link.active {
    color: var(--banking-primary);
    border-bottom-color: var(--banking-primary);
}

/* --- List View --- */
.list-row {
    border-bottom: 1px solid var(--banking-divider);
}

.list-row:hover {
    background-color: var(--banking-bg-hover);
}

.list-row-head {
    background: var(--banking-primary);
    color: var(--banking-text-inverse);
}

/* --- Timeline --- */
.timeline-item {
    border-left: 2px solid var(--banking-divider);
}

.timeline-item::before {
    background: var(--banking-primary);
    border: 2px solid var(--banking-bg-card);
}

/* --- Attachments --- */
.attachment-row {
    border: 1px solid var(--banking-border);
}

.attachment-row:hover {
    background: var(--banking-bg-hover);
    border-color: var(--banking-primary-light);
}

/* =========================
   RTL (Arabic) Support
   ========================= */
[dir="rtl"] body {
    font-family: var(--banking-font-arabic) !important;
    font-size: 16px !important;   
}

[dir="rtl"] .form-control,
[dir="rtl"] .frappe-control,
[dir="rtl"] .frappe-control textarea,
[dir="rtl"] .frappe-control select,
[dir="rtl"] .frappe-control input,
[dir="rtl"] .page-title h3,
[dir="rtl"] .btn {
    font-family: var(--banking-font-arabic) !important;
    font-size: 12px !important;
}


[dir="rtl"] .layout-side-section,
html[dir="rtl"] .desk-sidebar {
    border-right: none;
    border-left: 1px solid var(--banking-border);
}

[dir="rtl"] .form-section .section-head,
html[dir="rtl"] .form-section .section-head,
[dir="rtl"] .page-head,
html[dir="rtl"] .page-head {
    background: linear-gradient(135deg, var(--banking-primary-light) 0%, var(--banking-primary) 100%);
}

[dir="rtl"] .alert-info,
html[dir="rtl"] .alert-info {
    border-left: none;
    border-right: 4px solid var(--banking-info);
}

[dir="rtl"] .alert-success,
html[dir="rtl"] .alert-success {
    border-left: none;
    border-right: 4px solid var(--banking-success);
}

[dir="rtl"] .alert-warning,
html[dir="rtl"] .alert-warning {
    border-left: none;
    border-right: 4px solid var(--banking-warning);
}

[dir="rtl"] .alert-danger,
html[dir="rtl"] .alert-danger {
    border-left: none;
    border-right: 4px solid var(--banking-danger);
}

[dir="rtl"] .timeline-item,
html[dir="rtl"] .timeline-item {
    border-left: none;
    border-right: 2px solid var(--banking-divider);
}

[dir="rtl"] .timeline-item::before,
html[dir="rtl"] .timeline-item::before {
    left: auto;
    right: -6px;
}

/* --- Print Styles --- */
@media print {
    .page-head,
    .form-section .section-head,
    .page-title {
        background: var(--banking-bg-card) !important;
        color: var(--banking-primary) !important;
        border: 2px solid var(--banking-primary) !important;
    }

    .form-layout,
    .table,
    .widget {
        border: 1px solid var(--banking-border-dark) !important;
    }

    body {
        background: white !important;
        font-size: 16px !important;   
    }
}

/* FORCE WHITE TABLE HEADER TEXT IN ERPNext */
.grid-heading-row .grid-row > div,
.dt-header .dt-cell__content,
.table thead th,
.table thead td,
.datatable thead th,
.datatable thead td,
.grid-heading-row,
.grid-heading-row .grid-static-col {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}