/* Design language for سامانه اعتبار خرد — a Persian buy-now-pay-later /
   micro-credit platform run through neighbourhood shops (نمایندگی): auto-parts
   counters, gold sellers, appliance stores. The palette leans on a deep,
   confident indigo (ledger-and-signature weight — this is a system people
   trust with real money) paired with a warm gold accent that echoes the
   collateral customers most often put up: طلا. Warm paper backgrounds instead
   of cold corporate gray; soft, restrained shadows instead of heavy Material
   layering. Font stays Vazirmatn (already excellent Persian coverage) but is
   used with a wider weight range for real typographic hierarchy. */
:root{
  --ink:#1E1B2E;
  --ink-2:#6A6380;
  --paper:#F6F3EE;
  --paper-2:#FFFFFF;
  --line:#E7E1D9;
  --brand:#372B6B;        /* primary — deep indigo, this app's signature */
  --brand-d:#251C4D;
  --brand-bg:#EDE9F8;
  --gold:#3B71CA;         /* kept as the legacy variable name a few inline
                              styles still reference — value now points at
                              the new primary indigo so nothing breaks */
  --gold-d:#251C4D;
  --accent:#B4802A;       /* warm gold accent — used sparingly, echoes طلا */
  --accent-bg:#FAF0DC;
  --teal:#2E8859;
  --teal-bg:#E3F1E9;
  --amber:#C1761F;
  --amber-bg:#FAEBD8;
  --coral:#B3423B;
  --coral-bg:#F7E3E1;
  --muted:#8F87A0;
  --shadow-sm:0 1px 2px rgba(30,20,55,.06),0 1px 3px rgba(30,20,55,.07);
  --shadow-md:0 6px 18px rgba(30,20,55,.10),0 2px 6px rgba(30,20,55,.06);
  --shadow-lg:0 18px 44px rgba(30,20,55,.16),0 6px 14px rgba(30,20,55,.08);
}
*{box-sizing:border-box;}
html,body{margin:0;font-family:'Vazirmatn','Tahoma',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;}
body.landing-bg{background:linear-gradient(160deg,#2563EB 0%,#1E40AF 55%,#1E1B4B 100%);min-height:100vh;}
body.landing-bg .app{max-width:480px;padding-top:64px;}
body.landing-bg .masthead{border-bottom:none;justify-content:center;margin-bottom:28px;}
body.landing-bg .masthead .sub{display:none;}
body.landing-bg .masthead h1{color:#FFFFFF;}
body.landing-bg .masthead .brand svg rect{fill:#FFFFFF;}
body.landing-bg .masthead .brand svg path{stroke:#2563EB;}
body.landing-bg .panel{background:var(--paper-2);border-radius:16px;box-shadow:var(--shadow-lg);}
body.landing-bg .tabs{background:rgba(255,255,255,.12);border-radius:12px;padding:4px;margin-bottom:16px;}
body.landing-bg .tabs .tab{color:#FFFFFF;border-radius:9px;}
body.landing-bg .tabs .tab.active{background:#FFFFFF;color:var(--ink);}
/* Tabs nested inside the white login/register card (e.g. "ورود با نام کاربری" /
   "ورود با پیامک یا تماس تلفنی") sit on a light background, not the blue page
   gradient — the white text above was invisible there. This more specific
   selector overrides just that case, back to normal dark tab text; the
   role-selector tabs directly on the blue background (outside .center-box)
   keep their white styling untouched. */
body.landing-bg .center-box .tabs{background:var(--paper);}
body.landing-bg .center-box .tabs .tab{color:var(--ink-2);}
body.landing-bg .center-box .tabs .tab.active{color:var(--ink);}
.app{max-width:1400px;margin:0 auto;padding:28px 20px 60px;transition:max-width .2s ease-in-out;}
.app.app-wide{max-width:1920px;}
.app.app-wide .panel{padding:28px 36px;}
/* Safety net for any table that still doesn't fit even at the wide page width
   above (e.g. تسهیلات اعطا شده when the "مدت اعتبار در دسترس" cell opens its
   inline day/month/year edit form) — the table scrolls horizontally within its
   own box instead of overflowing outside the panel or the page. */
.panel{overflow-x:auto;}
a{color:inherit;}
::selection{background:var(--brand);color:#fff;}

.masthead{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.masthead .brand{display:flex;align-items:center;gap:12px;}
.masthead h1{font-size:28px;font-weight:800;margin:0;letter-spacing:-.01em;}
.masthead .sub{font-size:13px;color:var(--muted);}

.tabs{display:flex;gap:4px;margin-top:0;background:var(--paper);border-radius:.625rem;padding:4px;width:fit-content;max-width:100%;overflow-x:auto;}
.tab{position:relative;padding:9px 18px;font-size:13px;font-weight:500;background:transparent;border:none;border-radius:.5rem;color:var(--ink-2);cursor:pointer;transition:all .15s ease-in-out;white-space:nowrap;}
.tab.active{color:#fff;background:var(--brand);box-shadow:var(--shadow-sm);font-weight:600;}
.tab:not(.active):hover{color:var(--ink);background:rgba(55,43,107,.07);}

.panel{background:var(--paper-2);border-radius:.75rem;padding:28px;min-height:420px;margin-top:14px;box-shadow:var(--shadow-sm);border:1px solid var(--line);}

.role-line{font-size:12px;color:var(--muted);margin-bottom:20px;padding-bottom:14px;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center;}
.role-line b{color:var(--ink);}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.grid.g3{grid-template-columns:repeat(3,1fr);}
.grid.g2{grid-template-columns:repeat(2,1fr);}
@media (max-width:720px){.grid,.grid.g3,.grid.g2{grid-template-columns:1fr 1fr;}}

.card{background:var(--paper-2);border:1px solid var(--line);border-radius:.75rem;padding:15px 17px;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease-in-out,transform .15s ease-in-out;}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.card .label{font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:600;letter-spacing:.02em;}
.card .value{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.card .value.gold{color:var(--accent);}
.card .value.danger{color:var(--coral);}

h2.section{font-size:15px;font-weight:800;margin:28px 0 12px;padding-right:13px;border-right:3px solid var(--accent);}
h2.section:first-of-type{margin-top:0;}
.section-sub{font-size:12px;color:var(--muted);margin-top:-8px;margin-bottom:14px;padding-right:16px;line-height:1.7;}

table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:8px;}
th{text-align:right;font-weight:700;color:var(--ink-2);font-size:11px;padding:10px 12px;border-bottom:2px solid var(--paper);background:var(--paper);letter-spacing:.01em;}
th:first-child{border-radius:.5rem 0 0 .5rem;}
th:last-child{border-radius:0 .5rem .5rem 0;}
td{padding:11px 12px;border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(55,43,107,.035);}

.badge{display:inline-block;padding:3.5px 11px;border-radius:10rem;font-size:11px;font-weight:700;}
.badge.ok{background:var(--teal-bg);color:var(--teal);}
.badge.pending{background:var(--amber-bg);color:var(--amber);}
.badge.late{background:var(--coral-bg);color:var(--coral);}

.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:.5rem;font-family:inherit;font-size:13px;font-weight:600;border:none;background:var(--brand);color:#fff;cursor:pointer;transition:all .15s ease-in-out;box-shadow:var(--shadow-sm);}
.btn:hover{box-shadow:var(--shadow-md);background:var(--brand-d);}
.btn:active{box-shadow:none;transform:scale(.98);}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--line);box-shadow:none;}
.btn.ghost:hover{background:var(--brand-bg);border-color:var(--brand);box-shadow:none;}
.btn.small{padding:5.5px 13px;font-size:11.5px;}
.btn.reject{background:transparent;color:var(--coral);border:1px solid var(--coral);box-shadow:none;}
.btn.reject:hover{background:var(--coral-bg);box-shadow:none;}
.btn.approve{background:var(--teal);}
.btn.approve:hover{background:#236E47;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

.queue-item{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:.75rem;margin-bottom:10px;flex-wrap:wrap;gap:10px;background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:box-shadow .15s ease-in-out;}
.queue-item:hover{box-shadow:var(--shadow-md);}
.queue-item .meta{font-size:12px;color:var(--muted);margin-top:3px;}
.queue-actions{display:flex;gap:8px;}

.note{margin-top:18px;padding:13px 16px;background:var(--brand-bg);border-right:3px solid var(--brand);border-radius:.5rem;font-size:12.5px;color:var(--ink-2);line-height:1.7;}
.note.warn{background:var(--amber-bg);border-right-color:var(--amber);}
.inline-icon{display:inline-flex;flex:0 0 auto;vertical-align:-3px;}
.inline-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.error{margin-top:10px;padding:11px 15px;background:var(--coral-bg);color:var(--coral);border-radius:.5rem;font-size:12.5px;font-weight:600;}
.success{margin-top:10px;padding:11px 15px;background:var(--teal-bg);color:var(--teal);border-radius:.5rem;font-size:12.5px;font-weight:600;}

.form-row{margin-bottom:13px;}
.form-row label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:6px;font-weight:600;}
input[type=text],input[type=password],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:.5rem;
  font-family:inherit;font-size:13px;color:var(--ink);background:var(--paper-2);
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 .2rem var(--brand-bg);}
.password-field{position:relative;}
.password-field input[type=password],.password-field input[type=text]{padding-left:38px;}
.password-toggle{position:absolute;left:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:5px;color:var(--muted);display:flex;border-radius:6px;}
.password-toggle:hover{color:var(--ink);background:var(--line);}
.password-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.form-inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.form-inline .form-row{flex:1;min-width:140px;margin-bottom:0;}
.toolrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}

/* home screen tile grid, bottom nav */
.home-wrap{padding-bottom:70px;}
.home-header{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 20px;}
.home-header .app-title{font-size:17px;font-weight:800;letter-spacing:-.01em;}
.home-header .icon-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper-2);border:1px solid var(--line);position:relative;cursor:pointer;box-shadow:var(--shadow-sm);color:var(--ink-2);}
.home-header .icon-btn svg{width:18px;height:18px;}
.home-header .icon-btn .dot{position:absolute;top:1px;left:1px;width:8px;height:8px;border-radius:50%;background:var(--coral);border:1.5px solid var(--paper-2);}
.tile-section{background:var(--paper-2);border:1px solid var(--line);border-radius:.75rem;padding:18px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.tile-section h3{font-size:13px;font-weight:800;margin:0 0 14px;}
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media (max-width:520px){.tile-grid{grid-template-columns:repeat(3,1fr);}}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;background:none;border:none;font-family:inherit;transition:transform .15s ease-in-out;}
.tile:hover{transform:translateY(-2px);}
.tile:hover .tile-icon{background:var(--brand);}
.tile:hover .tile-icon svg{stroke:#fff;}
.tile .tile-icon{width:52px;height:52px;border-radius:1rem;background:var(--brand-bg);display:flex;align-items:center;justify-content:center;position:relative;transition:background .15s ease-in-out;}
.tile .tile-icon svg{width:24px;height:24px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s ease-in-out;}
.tile .tile-icon .badge-count{position:absolute;top:-4px;left:-4px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;border-radius:10rem;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 0 0 2px var(--paper-2);}
.tile .tile-label{font-size:11px;color:var(--ink);text-align:center;line-height:1.4;font-weight:600;}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--paper-2);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:9px 4px 11px;max-width:1400px;margin:0 auto;box-shadow:var(--shadow-lg);}
.bottom-nav .nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--muted);cursor:pointer;flex:1;background:none;border:none;font-family:inherit;transition:color .15s ease-in-out;font-weight:600;}
.bottom-nav .nav-item .nav-icon{display:flex;}
.bottom-nav .nav-item .nav-icon svg{width:21px;height:21px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s ease-in-out;}
.bottom-nav .nav-item.active{color:var(--brand);}
.bottom-nav .nav-item.active .nav-icon svg{stroke:var(--brand);}

.center-box{max-width:420px;margin:60px auto;background:var(--paper-2);border:1px solid var(--line);border-radius:.75rem;padding:30px;box-shadow:var(--shadow-lg);}
.center-box h2{font-size:18px;margin:0 0 18px;font-weight:800;}

.logout{font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline;}

.invoice-box{background:var(--paper-2);border:1px solid var(--line);border-radius:.75rem;padding:20px;margin-top:10px;box-shadow:var(--shadow-sm);}
.invoice-box .invoice-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);}
.invoice-box .invoice-row:last-child{border-bottom:none;}
@media print{
  body *{visibility:hidden;}
  .invoice-print,.invoice-print *{visibility:visible;}
  .invoice-print{position:absolute;top:0;right:0;left:0;margin:0;padding:24px;box-shadow:none;}
}

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:720px){.product-grid{grid-template-columns:repeat(2,1fr);}}
.product-card{background:var(--paper-2);border:1px solid var(--line);border-radius:.75rem;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease-in-out,transform .15s ease-in-out;}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.product-card .product-image{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--paper);display:block;}
.product-card .product-image-placeholder{width:100%;aspect-ratio:1/1;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--muted);}
.product-card .product-image-placeholder svg{width:32px;height:32px;stroke:var(--muted);fill:none;stroke-width:1.6;}
.product-card .product-body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:6px;flex:1;}
.product-card .product-name{font-size:13px;font-weight:700;color:var(--ink);}
.product-card .product-price{font-size:14px;font-weight:800;color:var(--brand);}
.product-card .product-desc{font-size:11px;color:var(--muted);line-height:1.6;max-height:32px;overflow:hidden;}

/* Roomier field layout for the "تسهیلات" admin tab's expanded application /
   final-approval detail views, so applicant + guarantor + document fields
   don't all wrap into a single cramped column. */
.queue-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 22px;margin-top:8px;}
.queue-detail-grid .meta{margin:0;}
.app-wide .queue-item{padding:18px 22px;}