/* ============================================================
   Qasem POS — Design Tokens & Base Styles
   Persian/Dari RTL · Vazirmatn · matches screenshots
============================================================ */

:root{
    /* Brand */
    --brand-grad-from:#6778E2;
    --brand-grad-to:  #7450AA;
    --brand-grad: linear-gradient(105deg, var(--brand-grad-from) 0%, var(--brand-grad-to) 100%);

    /* Nav / sidebar */
    --nav-active:#6366F1;
    --sidebar:    #17202F;
    --sidebar-hover:#1E293B;
    --sidebar-text:#E2E8F0;
    --sidebar-muted:#94A3B8;

    /* Actions */
    --primary:    #2563EB;
    --primary-700:#1D4ED8;

    /* Surfaces */
    --bg:         #F9FAFC;
    --card:       #FFFFFF;
    --input-fill: #E8F0FD;
    --border:     #E5E7EB;

    /* Status */
    --income:     #098064;
    --income-soft:#39A585;
    --expense:    #EA263A;
    --balance:    #D6A445;
    --neutral:    #000000;

    /* Table actions */
    --tbl-del:  #EA263A;
    --tbl-edit: #D6A445;
    --tbl-print:#2563EB;

    /* Layout */
    --sidebar-w: 260px;
    --topbar-h: 64px;
    --radius:    16px;
    --radius-sm: 10px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --shadow:    0 4px 14px rgba(15,23,42,.06);
    --shadow-lg: 0 18px 40px rgba(15,23,42,.10);
}

*{ box-sizing: border-box; }

html,body{
    margin:0; padding:0;
    background: var(--bg);
    color:#0F172A;
    font-family: 'Vazirmatn','Tahoma','Segoe UI',sans-serif;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01";
}
body{ font-size: 14px; line-height: 1.55; }

a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ------- App shell ------- */
.app{ display:flex; min-height:100vh; }
.app__main{
    flex:1; margin-right: var(--sidebar-w);
    min-width:0; display:flex; flex-direction:column;
}

/* ------- Sidebar ------- */
.sidebar{
    position: fixed; right:0; top:0; bottom:0;
    width: var(--sidebar-w);
    background: var(--sidebar);
    color: var(--sidebar-text);
    display:flex; flex-direction:column;
    z-index: 30;
}
.sidebar__brand{
    padding: 18px 18px 14px;
    background: var(--brand-grad);
    color:#fff;
    display:flex; align-items:center; gap:12px;
}
.sidebar__brand .logo{
    width:42px; height:42px; border-radius:12px;
    background: rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-weight:600; font-size:18px;
}
.sidebar__brand .title{ font-weight:600; font-size:15px; line-height:1.2; }
.sidebar__brand .subtitle{ font-size:11px; color: rgba(255,255,255,.85); }

.sidebar__role{
    margin: 14px; padding: 12px 14px;
    background: var(--sidebar-hover);
    border-radius: 12px;
    display:flex; align-items:center; gap:10px;
}
.sidebar__role .avatar{
    width:34px; height:34px; border-radius:10px;
    background: var(--nav-active); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:600;
}
.sidebar__role .meta{ font-size:12px; }
.sidebar__role .meta strong{ display:block; font-size:13px; }
.sidebar__role .meta span{ color: var(--sidebar-muted); }

.sidebar__nav{ flex:1; overflow-y:auto; padding: 6px 10px 18px; }
.sidebar__nav a{
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px; margin: 2px 0;
    color: var(--sidebar-text); border-radius: 10px;
    font-size: 13.5px;
}
.sidebar__nav a:hover{ background: var(--sidebar-hover); text-decoration:none; }
.sidebar__nav a.active{ background: var(--nav-active); color:#fff; }
.sidebar__nav a svg, .sidebar__nav a .ico{ width:18px; height:18px; opacity:.9; }
.sidebar__nav .sep{ height:1px; background: rgba(255,255,255,.06); margin:8px 6px; }
.sidebar__nav .label{ font-size:11px; color: var(--sidebar-muted); padding:10px 12px 4px; letter-spacing:.4px; }

.sidebar__footer{
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size:11px; color: var(--sidebar-muted);
    display:flex; justify-content:space-between; align-items:center;
}

/* ------- Topbar ------- */
.topbar{
    height: var(--topbar-h);
    display:flex; align-items:center; justify-content:space-between;
    padding: 0 24px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky; top:0; z-index: 10;
}
.topbar__title{ font-size:18px; font-weight:600; }
.topbar__meta{ display:flex; align-items:center; gap:10px; font-size:13px; color:#475569; }
.topbar__meta .badge{
    background: var(--input-fill); padding:6px 10px;
    border-radius: 10px; color:#1E40AF; font-weight:500;
}

/* Mobile hamburger */
.topbar__menu-btn{ display:none; background:transparent; border:0; padding:8px; border-radius:8px; }
.topbar__menu-btn:hover{ background: var(--input-fill); }

/* ------- Page area ------- */
.page{ padding: 22px 24px 40px; }

/* ------- Cards & KPI ------- */
.card{
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 18px 20px;
    border: 1px solid #F1F5F9;
}
.card--accent{ position: relative; padding-top: 22px; overflow:hidden; }
.card--accent::before{
    content:""; position:absolute; top:0; right:0; left:0; height:4px;
    background: var(--neutral);
}
.card--income::before { background: var(--income); }
.card--expense::before{ background: var(--expense); }
.card--balance::before{ background: var(--balance); }
.card--primary::before{ background: var(--primary); }
.card--neutral::before{ background: var(--neutral); }

.kpi{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kpi__label{ color:#475569; font-size:13px; }
.kpi__value{ font-size:22px; font-weight:600; margin-top:4px; letter-spacing:-.2px; }
.kpi__icon{
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background: var(--input-fill);
}

/* ------- Forms ------- */
.form-row{ margin-bottom: 14px; }
.form-label{ display:block; font-size:12.5px; color:#334155; margin-bottom:6px; }
.input, .select, .textarea{
    width:100%; background: var(--input-fill);
    border: 1px solid transparent; border-radius: 12px;
    padding: 11px 14px; font-size: 14px;
    font-family: inherit; color:#0F172A;
    transition: border-color .15s, background .15s;
}
.input:focus, .select:focus, .textarea:focus{
    outline:none; border-color: var(--primary); background:#fff;
}
.input--with-icon{ padding-left: 40px; }
.input-wrap{ position: relative; }
.input-wrap .ico{
    position:absolute; left:12px; top:50%; transform: translateY(-50%);
    width:18px; height:18px; color:#64748B;
}

.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 10px 18px; border-radius: 12px;
    font-weight:500; font-size: 14px;
    border: 1px solid transparent; cursor:pointer;
    font-family: inherit;
    transition: transform .04s ease, filter .15s, background .15s, color .15s;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--primary); color:#fff; }
.btn--primary:hover{ background: var(--primary-700); text-decoration:none; color:#fff; }
.btn--grad{ background: var(--brand-grad); color:#fff; }
.btn--grad:hover{ filter: brightness(1.04); color:#fff; text-decoration:none; }
.btn--success{ background: var(--income); color:#fff; }
.btn--success:hover{ background:#06694F; color:#fff; text-decoration:none; }
.btn--danger{ background: var(--expense); color:#fff; }
.btn--danger:hover{ background:#C81F2F; color:#fff; text-decoration:none; }
.btn--ghost{ background:#fff; border-color: var(--border); color:#0F172A; }
.btn--ghost:hover{ background: var(--input-fill); text-decoration:none; }
.btn--sm{ padding: 6px 12px; font-size: 12.5px; border-radius: 10px; }
.btn--block{ width: 100%; }

/* ------- Tables ------- */
.table-wrap{ overflow-x:auto; border-radius: 12px; }
.table{
    width:100%; border-collapse: separate; border-spacing: 0;
    font-size: 13.5px;
    background: var(--card);
}
.table thead th{
    background:#F8FAFC; color:#475569; font-weight:500; text-align: right;
    padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table tbody td{
    padding: 10px 12px; border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}
.table tbody tr:hover{ background:#FAFBFD; }
.table .num{ font-variant-numeric: tabular-nums; }

.badge{
    display:inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; background: var(--input-fill); color: #1E40AF;
}
.badge--green{ background:#E1F4EE; color: var(--income); }
.badge--red{   background:#FCE3E6; color: var(--expense); }
.badge--amber{ background:#FCF1DA; color:#9A6B14; }
.badge--gray{  background:#F1F5F9; color:#475569; }

.act{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; margin:0 2px;
    color:#fff; cursor:pointer; border: 0;
}
.act--del  { background: var(--tbl-del); }
.act--edit { background: var(--tbl-edit); }
.act--print{ background: var(--tbl-print); }

/* ------- Flash messages ------- */
.flash{
    border-radius: 12px; padding: 10px 14px; margin-bottom: 14px;
    font-size: 13.5px; border: 1px solid transparent;
}
.flash--ok{    background:#E1F4EE; color: var(--income); border-color:#BFE6D6; }
.flash--err{   background:#FCE3E6; color: var(--expense); border-color:#F6BFC5; }
.flash--info{  background:#E8F0FD; color:#1E40AF;  border-color:#C7D7F4; }

/* ------- Login screen ------- */
.login-bg{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: var(--brand-grad); padding: 24px;
}
.login-card{
    width:100%; max-width: 380px; background:#fff; border-radius: 22px;
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.login-card__top{
    background: var(--brand-grad); color:#fff; text-align:center; padding: 28px 22px 22px;
}
.login-card__logo{
    width:64px; height:64px; margin: 0 auto 10px; border-radius: 18px;
    background: rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-size: 26px; font-weight:600;
}
.login-card__title{ font-size: 18px; font-weight: 600; }
.login-card__sub{ font-size: 12.5px; opacity:.9; margin-top: 4px; }
.login-card__body{ padding: 24px 22px 22px; }
.login-card__footer{ padding: 14px 22px 22px; text-align:center; font-size:11.5px; color:#64748B; }

/* ------- POS layout ------- */
.pos{
    display:grid; grid-template-columns: 1fr 380px; gap: 18px;
}
.pos__cart-wrap{ display:flex; flex-direction:column; gap:14px; }
.pos__catalog{ display:flex; flex-direction:column; gap: 12px; }
.pos__products{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
    gap: 10px;
}
.pos-prod{
    background:#fff; border:1px solid var(--border); border-radius: 14px;
    padding: 10px 10px 8px; cursor:pointer; text-align:center;
    transition: border-color .12s, box-shadow .12s, transform .04s;
    display:flex; flex-direction:column; gap:4px;
}
.pos-prod:hover{ border-color: var(--primary); box-shadow: var(--shadow-sm); }
.pos-prod:active{ transform: translateY(1px); }
.pos-prod__name{ font-size:13px; font-weight:500; min-height:34px; line-height:1.3; }
.pos-prod__code{ font-size:11px; color:#64748B; }
.pos-prod__price{ font-size:13px; color: var(--primary); font-weight:600; margin-top:4px; }
.pos-prod__stock{ font-size:11px; color:#475569; }
.pos-prod__stock--low{ color: var(--expense); }

.pos__totals{
    background:#F8FAFC; border-radius:12px; padding:12px 14px; margin-top: 8px;
}
.pos__totals .row{ display:flex; justify-content:space-between; padding:4px 0; font-size:13px; }
.pos__totals .row strong{ font-size:16px; }

/* ------- Vendor mobile portal ------- */
.vportal{ max-width: 540px; margin: 0 auto; }
.vportal .stat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

/* ------- Utility ------- */
.flex{ display:flex; }
.flex.between{ justify-content:space-between; }
.flex.center{ align-items:center; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; }
.mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; } .mt-4{ margin-top:16px; }
.mb-2{ margin-bottom:8px; } .mb-3{ margin-bottom:12px; } .mb-4{ margin-bottom:16px; }
.text-sm{ font-size: 12.5px; }
.text-muted{ color:#64748B; }
.text-right{ text-align:right; }
.text-center{ text-align:center; }
.num-fa{ font-variant-numeric: tabular-nums; }

/* RTL bidi fixes for LTR content (phone numbers, codes, IBANs…) */
.ltr, .phone{
    direction: ltr;
    unicode-bidi: bidi-override;
    display: inline-block;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
input.input--ltr{
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.text-income{ color: var(--income); }
.text-expense{ color: var(--expense); }
.text-balance{ color: var(--balance); }
.text-primary{ color: var(--primary); }

/* ------- Responsive ------- */
@media (max-width: 1100px){
    .grid-4{ grid-template-columns: repeat(2, 1fr); }
    .grid-3{ grid-template-columns: repeat(2, 1fr); }
    .pos{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
    :root{ --sidebar-w: 0px; }
    .sidebar{
        transform: translateX(100%);
        transition: transform .25s ease;
        width: 280px;
    }
    .sidebar.open{ transform: translateX(0); }
    .app__main{ margin-right: 0; }
    .topbar__menu-btn{ display:inline-flex; }
    .topbar{ padding: 0 14px; }
    .page{ padding: 14px; }
    .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* Print */
@media print {
    .sidebar, .topbar, .no-print{ display: none !important; }
    .app__main{ margin: 0; }
    body{ background:#fff; }
    .card{ box-shadow:none; border:0; }
}

/* ============================================================
   Dashboard quick-action tiles (mobile-first)  [added 2026-05-31]
   2 columns on phones, 4 on tablet/desktop. Large tap targets.
============================================================ */
.dash-actions{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.dash-tile{
    position:relative;
    display:flex; flex-direction:column; align-items:flex-start; gap:8px;
    min-height: 118px;
    padding: 16px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid #EEF1F6;
    box-shadow: var(--shadow-sm);
    color:#0F172A;
    overflow:hidden;
    transition: transform .08s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.dash-tile:hover{ text-decoration:none; color:#0F172A; box-shadow: var(--shadow); }
.dash-tile:active{ transform: scale(.98); }
.dash-tile::before{
    content:""; position:absolute; top:0; right:0; left:0; height:5px;
    background: var(--tile-accent, var(--primary));
}
.dash-tile__icon{
    width:48px; height:48px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background: var(--tile-soft, var(--input-fill));
    color: var(--tile-accent, var(--primary));
    flex: none;
}
.dash-tile__icon svg{ width:24px; height:24px; flex:none; }
.dash-tile__label{ font-size:15px; font-weight:600; line-height:1.25; }
.dash-tile__sub{ font-size:12px; color:#64748B; }

.dash-tile--sell  { --tile-accent:#2563EB; --tile-soft:#E8F0FD; }
.dash-tile--vendor{ --tile-accent:#9A6B14; --tile-soft:#FCF1DA; }
.dash-tile--stock { --tile-accent:#098064; --tile-soft:#E1F4EE; }
.dash-tile--cash  { --tile-accent:#6366F1; --tile-soft:#E8EAFD; }
.dash-tile--due   { --tile-accent:#EA263A; --tile-soft:#FCE3E6; }

/* Very small phones: keep 2-up but tighten */
@media (max-width: 360px){
    .dash-actions{ gap:10px; }
    .dash-tile{ min-height:110px; padding:13px; border-radius:16px; }
    .dash-tile__icon{ width:42px; height:42px; border-radius:12px; }
    .dash-tile__label{ font-size:14px; }
}

/* Tablet / desktop: 4+ across */
@media (min-width: 700px){
    .dash-actions{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:16px; }
    .dash-tile{ min-height:140px; padding:18px; }
    .dash-tile__label{ font-size:16px; }
}

/* On phones show the dashboard KPIs 2-up (denser than 1 col) */
@media (max-width: 760px){
    .dash-actions + .grid-4{ grid-template-columns: repeat(2, 1fr); gap:12px; }
    .dash-actions + .grid-4 .kpi__value{ font-size:18px; }
    .dash-actions + .grid-4 .kpi__icon{ display:none; }
}
@media (max-width: 460px){
    .dash-actions + .grid-4{ grid-template-columns: 1fr; }
}



/* ============================================================
   POS cart table + number inputs (قیمت / تعداد)   [pos-cart-fixed-v2]
============================================================ */
.pos__cart-wrap .table{ table-layout:fixed; width:100%; }
.pos__cart-wrap .table th,
.pos__cart-wrap .table td{ overflow:hidden; padding:8px 6px; vertical-align:middle; }
.pos__cart-wrap .table td:first-child{ white-space:normal; word-break:break-word; }
.input--cart{
    width:100%; min-width:0; padding:9px 6px; font-size:15px;
    text-align:center; font-variant-numeric: tabular-nums; border-radius:10px;
    -moz-appearance:textfield; appearance:textfield;
}
.input--cart::-webkit-outer-spin-button,
.input--cart::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
@media (max-width: 760px){
    .pos__cart-wrap .table th,
    .pos__cart-wrap .table td{ padding:8px 4px; }
    .input--cart{ font-size:16px; padding:10px 5px; }
}