/* =============================================================
WaslPay / وصل پی — Material Design RTL Theme (Responsive)
Author: ChatGPT — UI-only (no logic changes)
Notes:
- Keep your HTML and
- Optional: add Google Font in for better look:
============================================================= */
/* -----------------------------
CSS Variables (Theme)
------------------------------ */
:root{
--brand:#1976d2; /* Primary */
--brand-dark:#0d47a1; /* Primary (dark) */
--ink:#0b1324; /* Text */
--muted:#64748b; /* Secondary text */
--bg:#f5f7fb; /* App background */
--surface:#ffffff; /* Cards / panels */
--success:#16a34a;
--warning:#f59e0b;
--danger:#ef4444;
--radius-lg:16px;
--radius-md:12px;
--radius-sm:10px;
--shadow-sm:0 6px 18px rgba(2,6,23,.06);
--shadow-md:0 10px 30px rgba(2,6,23,.08);
--ring:0 0 0 3px rgba(25,118,210,.18);
--trans:.22s cubic-bezier(.2,.6,.2,1);
}
/* -----------------------------
Reset & Base
------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Vazirmatn', Arial, Tahoma, sans-serif;
margin:0; padding:0; direction:rtl; text-align:right;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; line-height:1.65;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-dark); text-decoration:underline}
/* Container */
.container{max-width:960px; width:92%; margin:20px auto; background:var(--surface);
padding:24px; border-radius:var(--radius-lg); box-shadow:var(--shadow-md)}
@media (max-width:600px){.container{width:95%; padding:18px}}
/* -----------------------------
Header / Topbar
------------------------------ */
.header{
background:linear-gradient(135deg,var(--brand),#6aa3ff);
color:#fff; padding:24px 16px; text-align:center;
box-shadow:var(--shadow-md)
}
.header .title{font-size:1.6rem; font-weight:800; letter-spacing:.3px}
.header .subtitle{opacity:.95; margin-top:6px; font-size:1rem}
/* -----------------------------
Navbar
------------------------------ */
.navbar{background:var(--surface); padding:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:20}
.navbar a{color:#0b1324; font-weight:700; padding:10px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:8px}
.navbar a:hover{background:rgba(25,118,210,.08); color:var(--brand)}
.navbar a.active{background:var(--brand); color:#fff}
@media (max-width:600px){
.navbar{justify-content:flex-start; overflow:auto; -webkit-overflow-scrolling:touch}
.navbar a{flex:0 0 auto}
}
/* -----------------------------
Titles / Headings
------------------------------ */
.form-title{margin:0 0 18px; font-size:1.5rem; font-weight:800; text-align:center; color:#0b1324}
/* -----------------------------
Forms
------------------------------ */
.field-group{margin-bottom:16px}
.field-group label{display:block; font-weight:700; margin-bottom:8px; color:#0f172a}
input[type="text"],
input[type="number"],
input[type="file"],
select,
textarea{
width:100%; padding:12px 14px; margin:8px 0 0 0;
border:1.6px solid #e5e7eb; border-radius:12px; background:#fff; color:var(--ink);
transition:border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus{
border-color:var(--brand); box-shadow:var(--ring); outline:0
}
input[readonly], textarea[readonly]{background:#f3f4f6}
/* Better file input (supported browsers) */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button{
margin-inline-start:-14px; margin-inline-end:12px; border:0; border-radius:999px;
padding:10px 14px; background:var(--brand); color:#fff; font-weight:700; cursor:pointer;
transition:transform var(--trans), background var(--trans)
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover{background:var(--brand-dark)}
/* Input states */
input:disabled, select:disabled, textarea:disabled{background:#f5f5f5; color:#9aa4b2}
/* Helper text / alerts in forms */
.alert{margin-top:6px; font-size:.92rem; color:var(--danger)}
/* -----------------------------
Buttons
------------------------------ */
button,
.btn{background:var(--brand); color:#fff; border:0; padding:12px 18px; border-radius:999px; cursor:pointer; font-size:1rem; font-weight:800;
display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px;
transition:transform var(--trans), box-shadow var(--trans), background var(--trans); box-shadow:var(--shadow-sm)}
button:hover,.btn:hover{background:var(--brand-dark); transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0)}
button:focus-visible,.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn.block{width:100%}
.btn.outline{background:transparent; color:var(--brand); border:2px solid var(--brand)}
.btn.ghost{background:transparent; color:var(--brand)}
.btn.danger{background:var(--danger)}
.btn.success{background:var(--success)}
.btn.warning{background:var(--warning); color:#111}
/* -----------------------------
Tables (Admin)
------------------------------ */
.table-container{background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:auto}
.table{width:100%; border-collapse:separate; border-spacing:0; margin:20px 0; min-width:720px}
.table th, .table td{padding:14px 16px; border-bottom:1px solid #eef2f7; text-align:right}
.table th{position:sticky; top:0; background:#f8fafc; color:#0b1324; font-weight:800; z-index:1}
.table tr:nth-child(even) td{background:#fcfdff}
.table tr:hover td{background:#f6faff}
/* Legacy table borders (kept for backward compatibility) */
.table th, .table td{border-left:0; border-right:0}
/* Status colors */
.status-pending{color:#f59e0b; font-weight:800}
.status-approved{color:#16a34a; font-weight:800}
.status-completed{color:#1976d2; font-weight:800}
.status-canceled{color:#ef4444; font-weight:800}
/* -----------------------------
Cards / Surfaces & Utilities
------------------------------ */
.card{background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:18px}
.surface{background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:14px}
.muted{color:var(--muted)}
.center{display:grid; place-items:center}
.round{border-radius:999px}
.shadow{box-shadow:var(--shadow-md)}
.w-100{width:100%}
/* Breadcrumb */
.breadcrumb{display:flex; gap:6px; align-items:center; color:var(--muted); font-weight:600}
.breadcrumb a{color:inherit}
.breadcrumb .sep{opacity:.5}
/* Alerts blocks */
.alert-block{padding:14px 16px; border-radius:var(--radius-md); background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d}
.alert-block.success{background:#ecfdf5; border-color:#d1fae5; color:#065f46}
.alert-block.warning{background:#fffbeb; border-color:#fde68a; color:#92400e}
/* Badges */
.badge{display:inline-flex; align-items:center; gap:8px; padding:.35rem .7rem; border-radius:999px; font-weight:700; font-size:.85rem;
background:rgba(25,118,210,.1); color:var(--brand-dark)}
.badge.success{background:rgba(22,163,74,.12); color:var(--success)}
.badge.warning{background:rgba(245,158,11,.14); color:var(--warning)}
.badge.danger{background:rgba(239,68,68,.12); color:var(--danger)}
/* Divider */
.divider{height:1px; background:#e5e7eb; margin:14px 0}
/* -----------------------------
Accessibility / Fine-tuning
------------------------------ */
:focus{outline:none}
:focus-visible{box-shadow:var(--ring)}
::selection{background:rgba(25,118,210,.18)}
/* Accent for checkboxes/radios (if used) */
input[type="checkbox"], input[type="radio"]{accent-color:var(--brand)}
/* -----------------------------
Responsive tweaks
------------------------------ */
@media (max-width:960px){
.table{min-width:640px}
}
@media (max-width:600px){
button,.btn{width:100%}
}