/* =========================================================
   Fruit & Vegetable Commission Shop System
   Main CSS File
   Urdu / RTL / ERP / POS Design
   File: assets/css/style.css
========================================================= */

/* ================= URDU FONT ================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap');

/* ================= ROOT VARIABLES ================= */

:root{
    --primary:#16a34a;
    --primary-dark:#15803d;
    --primary-light:#dcfce7;

    --secondary:#2563eb;
    --secondary-dark:#1d4ed8;
    --secondary-light:#dbeafe;

    --warning:#f59e0b;
    --warning-light:#fef3c7;

    --danger:#dc2626;
    --danger-light:#fee2e2;

    --success:#16a34a;
    --success-light:#dcfce7;

    --info:#0284c7;
    --info-light:#e0f2fe;

    --dark:#0f172a;
    --text:#1e293b;
    --muted:#64748b;
    --light-text:#94a3b8;

    --bg:#f1f5f9;
    --white:#ffffff;
    --border:#e2e8f0;
    --soft-border:#edf2f7;

    --sidebar-bg:#0f172a;
    --sidebar-hover:#1e293b;
    --sidebar-active:#16a34a;

    --radius-sm:8px;
    --radius:12px;
    --radius-lg:18px;
    --radius-xl:22px;

    --shadow-sm:0 4px 12px rgba(0,0,0,.05);
    --shadow:0 10px 25px rgba(0,0,0,.07);
    --shadow-lg:0 25px 60px rgba(0,0,0,.22);

    --transition:.25s ease;
}

/* ================= GLOBAL RESET ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Noto Sans Arabic', Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.6;
    overflow-x:hidden;
}

body.urdu,
body.rtl{
    direction:rtl;
    font-family:'Noto Nastaliq Urdu','Noto Sans Arabic',serif;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:#e5e7eb;
    border-radius:10px;
}

::-webkit-scrollbar-thumb{
    background:#94a3b8;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#64748b;
}

/* ================= LAYOUT ================= */

.dashboard-body{
    background:var(--bg);
}

.dashboard-layout{
    display:flex;
    width:100%;
    min-height:100vh;
}

.dashboard-main{
    flex:1;
    padding:22px;
    min-width:0;
}

/* ================= SIDEBAR ================= */

.sidebar{
    width:270px;
    min-height:100vh;
    background:linear-gradient(180deg,#0f172a,#111827);
    color:#fff;
    padding:18px 14px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:sticky;
    top:0;
    box-shadow:8px 0 25px rgba(15,23,42,.18);
    z-index:100;
}

.sidebar-logo{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 8px 22px;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:18px;
}

.logo-icon{
    width:46px;
    height:46px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),#22c55e);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:0 10px 25px rgba(22,163,74,.35);
}

.sidebar-logo h2{
    font-size:19px;
    line-height:1.2;
    font-weight:800;
}

.sidebar-logo p{
    font-size:11px;
    color:#cbd5e1;
}

.sidebar-menu{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.sidebar-menu li a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 13px;
    border-radius:14px;
    color:#cbd5e1;
    font-size:14px;
    font-weight:600;
    transition:var(--transition);
    position:relative;
}

.sidebar-menu li a i{
    width:22px;
    text-align:center;
    font-size:15px;
}

.sidebar-menu li a:hover{
    background:var(--sidebar-hover);
    color:#fff;
    transform:translateX(4px);
}

body.rtl .sidebar-menu li a:hover{
    transform:translateX(-4px);
}

.sidebar-menu li.active a{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    box-shadow:0 8px 18px rgba(22,163,74,.28);
}

/* Flashing Cash Sale Button */
.sidebar-menu .cash-sale-flash a{
    background:linear-gradient(135deg,#ef4444,#f97316,#16a34a,#2563eb);
    background-size:300% 300%;
    color:#fff !important;
    font-weight:900;
    box-shadow:0 0 18px rgba(249,115,22,.45);
    animation:cashSaleGlow 2.2s infinite ease-in-out;
}

.sidebar-menu .cash-sale-flash a::before{
    content:"";
    position:absolute;
    top:0;
    left:-80%;
    width:55%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-20deg);
    animation:cashSaleShine 2.5s infinite;
}

.cash-sale-badge{
    margin-left:auto;
    background:#fff;
    color:#dc2626;
    font-size:9px;
    font-weight:900;
    padding:3px 7px;
    border-radius:999px;
    animation:badgePulse 1.3s infinite;
}

body.rtl .cash-sale-badge{
    margin-left:0;
    margin-right:auto;
}

@keyframes cashSaleGlow{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@keyframes cashSaleShine{
    0%{left:-80%;}
    55%{left:130%;}
    100%{left:130%;}
}

@keyframes badgePulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.12);}
}

/* ================= TOP HEADER ================= */

.topbar,
.page-header{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:16px 18px;
    box-shadow:var(--shadow-sm);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.page-title h1,
.store-header h1{
    font-size:20px;
    color:var(--dark);
    font-weight:900;
}

.page-title p,
.owner-info{
    color:var(--muted);
    font-size:12px;
    margin-top:4px;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.owner-box{
    display:flex;
    align-items:center;
    gap:9px;
    background:#f8fafc;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--border);
}

.owner-icon{
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--secondary-light);
    color:var(--secondary);
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ================= CARDS ================= */

.card,
.panel{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:18px;
    box-shadow:var(--shadow-sm);
    border:1px solid rgba(226,232,240,.8);
}

.card-title,
.panel-title{
    font-size:15px;
    font-weight:900;
    color:var(--dark);
    margin-bottom:14px;
    padding-left:10px;
    border-left:4px solid var(--primary);
}

body.rtl .card-title,
body.rtl .panel-title{
    padding-left:0;
    padding-right:10px;
    border-left:none;
    border-right:4px solid var(--primary);
}

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
}

.stat-card{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:18px;
    box-shadow:var(--shadow-sm);
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid rgba(226,232,240,.85);
}

.stat-card-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.stat-green{background:var(--success-light);color:var(--success);}
.stat-blue{background:var(--secondary-light);color:var(--secondary);}
.stat-orange{background:var(--warning-light);color:var(--warning);}
.stat-red{background:var(--danger-light);color:var(--danger);}

.stat-card h3{
    font-size:13px;
    color:var(--muted);
    margin-bottom:4px;
}

.stat-card h2{
    font-size:24px;
    color:var(--dark);
    font-weight:900;
}

/* ================= FORMS ================= */

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.form-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.full-width{
    grid-column:1/-1;
}

.input-group{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:12px;
}

.input-group label{
    font-size:13px;
    font-weight:800;
    color:#334155;
}

.required::after{
    content:" *";
    color:var(--danger);
}

.input-group input,
.input-group select,
.input-group textarea,
.form-control{
    width:100%;
    min-height:42px;
    border:1px solid #dbe8f0;
    border-radius:var(--radius);
    padding:9px 12px;
    outline:none;
    background:#fff;
    color:var(--text);
    font-size:13px;
    transition:var(--transition);
}

.input-group textarea,
textarea.form-control{
    min-height:85px;
    resize:vertical;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
.form-control:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(22,163,74,.13);
}

.input-hint{
    font-size:11px;
    color:var(--muted);
}

.input-error{
    border-color:var(--danger) !important;
    box-shadow:0 0 0 3px rgba(220,38,38,.12) !important;
}

/* ================= SEARCH AREA ================= */

.search-section,
.filter-section{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:14px;
    box-shadow:var(--shadow-sm);
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:15px;
}

.search-box{
    position:relative;
    flex:1;
    min-width:220px;
}

.search-box i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--light-text);
}

body.rtl .search-box i{
    left:auto;
    right:14px;
}

.search-input{
    width:100%;
    height:42px;
    border-radius:var(--radius);
    border:1px solid #dbe8f0;
    padding:0 14px 0 40px;
    outline:none;
    font-size:13px;
}

body.rtl .search-input{
    padding:0 40px 0 14px;
}

.search-select,
.filter-select{
    height:42px;
    min-width:165px;
    border-radius:var(--radius);
    border:1px solid #dbe8f0;
    padding:0 12px;
    background:#fff;
    outline:none;
}

/* ================= BUTTONS ================= */

.btn{
    min-height:38px;
    padding:9px 15px;
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    font-size:12px;
    font-weight:800;
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    text-decoration:none;
    white-space:nowrap;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn:disabled{
    opacity:.65;
    cursor:not-allowed;
    transform:none;
}

.btn-primary,
.btn-green{
    background:var(--primary);
    color:#fff;
}

.btn-primary:hover,
.btn-green:hover{
    background:var(--primary-dark);
}

.btn-blue{
    background:var(--secondary);
    color:#fff;
}

.btn-blue:hover{
    background:var(--secondary-dark);
}

.btn-gray{
    background:#e5e7eb;
    color:#334155;
}

.btn-red,
.btn-danger{
    background:var(--danger-light);
    color:var(--danger);
}

.btn-red:hover,
.btn-danger:hover{
    background:#fecaca;
}

.btn-warning{
    background:var(--warning-light);
    color:#b45309;
}

.btn-dark{
    background:var(--dark);
    color:#fff;
}

.btn-outline{
    background:#fff;
    color:var(--text);
    border:1px solid var(--border);
}

/* ================= ACTION ICONS ================= */

.action-group{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:center;
}

.action-btn{
    width:38px;
    height:38px;
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    transition:var(--transition);
}

.action-btn:hover{
    transform:translateY(-2px);
}

.view-btn{
    background:var(--secondary-light);
    color:var(--secondary);
}

.edit-btn{
    background:#ede9fe;
    color:#7c3aed;
}

.delete-btn{
    background:var(--danger-light);
    color:var(--danger);
}

.print-btn{
    background:var(--success-light);
    color:var(--success);
}

.pay-btn{
    background:var(--warning-light);
    color:#b45309;
}

/* ================= TABLES ================= */

.table-wrap,
.table-wrapper{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:12px;
    overflow:auto;
    box-shadow:var(--shadow-sm);
    border:1px solid rgba(226,232,240,.8);
}

.table{
    width:100%;
    border-collapse:collapse;
    min-width:950px;
}

.table th{
    padding:12px;
    background:#f8fafc;
    text-align:left;
    font-size:12px;
    color:#475569;
    white-space:nowrap;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:2;
}

body.rtl .table th{
    text-align:right;
}

.table td{
    padding:12px;
    border-bottom:1px solid var(--soft-border);
    font-size:12px;
    color:var(--text);
    white-space:nowrap;
}

.table tr:hover{
    background:#f8fbff;
}

.table .amount{
    font-weight:900;
    color:var(--dark);
}

.table-empty{
    text-align:center;
    padding:28px;
    color:var(--muted);
}

/* ================= BADGES ================= */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
}

.badge-success{
    background:var(--success-light);
    color:var(--success);
}

.badge-danger{
    background:var(--danger-light);
    color:var(--danger);
}

.badge-warning{
    background:var(--warning-light);
    color:#b45309;
}

.badge-blue{
    background:var(--secondary-light);
    color:var(--secondary);
}

.badge-gray{
    background:#e2e8f0;
    color:#475569;
}

/* ================= MODALS ================= */

.modal{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.68);
    backdrop-filter:blur(5px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    overflow-y:auto;
    z-index:999999;
}

.modal.show{
    display:flex;
}

.modal-content{
    width:100%;
    max-width:780px;
    max-height:95vh;
    background:#fff;
    border-radius:var(--radius-xl);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    animation:modalPop .22s ease;
}

.modal-sm{max-width:480px;}
.modal-lg{max-width:980px;}
.modal-xl{max-width:1180px;}

@keyframes modalPop{
    from{
        transform:scale(.96);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.modal-header{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    padding:18px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
}

.modal-header h2{
    margin:0;
    font-size:20px;
    font-weight:900;
}

.modal-header p{
    font-size:12px;
    opacity:.85;
    margin-top:3px;
}

.modal-close{
    background:rgba(255,255,255,.18);
    border:none;
    border-radius:50%;
    width:38px;
    height:38px;
    cursor:pointer;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.modal-close:hover{
    background:rgba(255,255,255,.28);
    transform:rotate(90deg);
}

.modal-body{
    padding:20px;
    overflow-y:auto;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    padding:15px 20px;
    border-top:1px solid var(--soft-border);
    background:#fff;
}

/* ================= TABS / TOGGLES ================= */

.tabs,
.toggle-group{
    display:flex;
    gap:8px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:5px;
    margin-bottom:15px;
}

.tab-btn,
.toggle-btn{
    flex:1;
    border:none;
    background:transparent;
    padding:10px 14px;
    border-radius:10px;
    cursor:pointer;
    font-size:12px;
    font-weight:900;
    color:var(--muted);
    transition:var(--transition);
}

.tab-btn.active,
.toggle-btn.active{
    background:var(--primary);
    color:#fff;
    box-shadow:0 6px 14px rgba(22,163,74,.22);
}

/* ================= TOAST / ALERT ================= */

.toast,
#toast{
    position:fixed;
    right:22px;
    bottom:22px;
    min-width:260px;
    background:var(--success);
    color:#fff;
    padding:13px 18px;
    border-radius:var(--radius);
    font-weight:900;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
    display:none;
    z-index:9999999;
}

body.rtl .toast,
body.rtl #toast{
    right:auto;
    left:22px;
}

.toast.show,
#toast.show{
    display:block;
}

.toast.error,
#toast.error{
    background:var(--danger);
}

.toast.warning,
#toast.warning{
    background:var(--warning);
}

.alert{
    padding:12px 16px;
    border-radius:var(--radius);
    margin-bottom:14px;
    font-weight:800;
}

.alert-success{
    background:var(--success-light);
    color:var(--success);
}

.alert-danger{
    background:var(--danger-light);
    color:var(--danger);
}

.alert-warning{
    background:var(--warning-light);
    color:#b45309;
}

.alert-info{
    background:var(--info-light);
    color:var(--info);
}

/* ================= PAGINATION ================= */

.pagination{
    display:flex;
    align-items:center;
    gap:10px;
    margin:15px 0;
    flex-wrap:wrap;
}

.pagination button,
.pagination .page-link{
    background:var(--secondary);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:8px 13px;
    cursor:pointer;
    font-size:12px;
    font-weight:800;
}

.pagination span{
    color:#334155;
    font-size:12px;
    font-weight:800;
}

/* ================= LEDGER DESIGN ================= */

.ledger-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin-bottom:16px;
}

.ledger-box{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:15px;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border);
}

.ledger-box p{
    font-size:12px;
    color:var(--muted);
}

.ledger-box h3{
    margin-top:5px;
    font-size:22px;
    font-weight:900;
    color:var(--dark);
}

/* ================= INVOICE / PRINT ================= */

.invoice-box{
    max-width:900px;
    margin:auto;
    background:#fff;
    border-radius:var(--radius-lg);
    padding:28px;
    box-shadow:var(--shadow);
}

.invoice-header{
    display:flex;
    justify-content:space-between;
    gap:15px;
    border-bottom:2px solid var(--border);
    padding-bottom:15px;
    margin-bottom:18px;
}

.invoice-title{
    font-size:26px;
    font-weight:900;
    color:var(--dark);
}

.invoice-meta{
    font-size:13px;
    color:var(--muted);
}

/* ================= UTILITIES ================= */

.text-right{text-align:right;}
.text-left{text-align:left;}
.text-center{text-align:center;}

.text-success{color:var(--success);}
.text-danger{color:var(--danger);}
.text-warning{color:var(--warning);}
.text-muted{color:var(--muted);}
.text-primary{color:var(--primary);}

.fw-bold{font-weight:800;}
.fw-black{font-weight:900;}

.mt-1{margin-top:6px;}
.mt-2{margin-top:12px;}
.mt-3{margin-top:18px;}
.mb-1{margin-bottom:6px;}
.mb-2{margin-bottom:12px;}
.mb-3{margin-bottom:18px;}

.d-flex{display:flex;}
.align-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-1{gap:6px;}
.gap-2{gap:12px;}
.gap-3{gap:18px;}

.hide{display:none !important;}
.show{display:block;}

.hr{
    border:none;
    border-top:1px solid var(--soft-border);
    margin:15px 0;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1100px){
    .sidebar{
        width:230px;
    }

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

@media(max-width:900px){
    .dashboard-layout{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        min-height:auto;
        position:relative;
    }

    .sidebar-menu{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    }

    .dashboard-main{
        padding:15px;
    }

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

    .topbar,
    .page-header{
        align-items:flex-start;
    }
}

@media(max-width:600px){
    .dashboard-main{
        padding:10px;
    }

    .card,
    .panel{
        padding:14px;
    }

    .modal{
        padding:8px;
    }

    .modal-content{
        max-height:98vh;
        border-radius:16px;
    }

    .modal-header{
        padding:15px;
    }

    .modal-body{
        padding:15px;
    }

    .modal-actions{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .search-section,
    .filter-section{
        flex-direction:column;
        align-items:stretch;
    }

    .search-box{
        width:100%;
    }
}

/* ================= PRINT ================= */

@media print{
    body{
        background:#fff;
    }

    .sidebar,
    .topbar,
    .page-header,
    .btn,
    .action-btn,
    .search-section,
    .filter-section,
    .pagination,
    .modal,
    .toast,
    #toast{
        display:none !important;
    }

    .dashboard-main{
        padding:0;
    }

    .table-wrap,
    .card,
    .panel,
    .invoice-box{
        box-shadow:none;
        border:none;
        border-radius:0;
    }

    .table th{
        background:#f1f5f9 !important;
        color:#000;
    }
}