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

html,body{
max-width:100%;
overflow-x:hidden;
}

body{
background:#eee7de;
font-family:tahoma,arial;
direction:rtl;
color:#2d1a12;
}

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

.topbar{
background:#fff;
padding:12px 16px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 2px 10px rgba(0,0,0,.06);
position:sticky;
top:0;
z-index:999;
}

.topbrand b{
font-size:28px;
display:block;
font-weight:bold;
color:#2d1a12;
}

.topbrand span{
font-size:13px;
color:#9b6a3a;
}

/* ================= MENU ================= */

.sidebar{
background:#2b120b;
display:flex;
gap:8px;
padding:10px;
overflow-x:auto;
white-space:nowrap;
scrollbar-width:none;
}

.sidebar::-webkit-scrollbar{
display:none;
}

.sidebar a{
color:white;
text-decoration:none;
padding:12px 18px;
border-radius:16px;
font-size:15px;
flex-shrink:0;
transition:.2s;
}

.sidebar a.active,
.sidebar a:hover{
background:#9b6435;
}

/* ================= CONTENT ================= */

.content{
padding:18px;
width:100%;
max-width:100%;
overflow:hidden;
}

h2{
font-size:34px;
margin-bottom:22px;
font-weight:bold;
}

h3{
font-size:22px;
margin-bottom:14px;
}

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

.card{
background:white;
padding:20px;
border-radius:24px;
margin-bottom:20px;
box-shadow:0 4px 16px rgba(0,0,0,.06);
width:100%;
}

/* ================= INPUTS ================= */

input,
select,
textarea{
width:100%;
padding:15px;
border-radius:16px;
border:1px solid #d8c9bd;
margin-bottom:14px;
font-family:tahoma;
font-size:15px;
background:#fafafa;
transition:.2s;
}

input:focus,
select:focus,
textarea:focus{
outline:none;
border-color:#9b6435;
background:white;
}

textarea{
min-height:120px;
resize:vertical;
}

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

.btn,
button.btn{
background:#8c5428;
color:white;
padding:12px 22px;
border:none;
border-radius:16px;
font-size:16px;
cursor:pointer;
text-decoration:none;
display:inline-block;
transition:.2s;
}

.btn:hover{
opacity:.92;
}

.btn-gray{
background:#555;
color:white;
padding:10px 15px;
border-radius:14px;
text-decoration:none;
font-size:14px;
display:inline-block;
}

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

.tabs{
display:flex;
gap:10px;
margin:20px 0;
overflow-x:auto;
white-space:nowrap;
scrollbar-width:none;
}

.tabs::-webkit-scrollbar{
display:none;
}

.tabs a{
padding:11px 18px;
border-radius:16px;
background:#ddd;
text-decoration:none;
color:#2d1a12;
font-size:15px;
display:inline-block;
flex-shrink:0;
}

.tabs a.btn{
background:#9b6435;
color:white;
}

/* ================= DASHBOARD ================= */

.dashboard-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-top:20px;
}

.dash-card{
background:white;
padding:20px;
border-radius:22px;
text-align:center;
box-shadow:0 4px 14px rgba(0,0,0,.06);
border:1px solid #eadfd5;
}

.dash-card span{
display:block;
font-size:16px;
font-weight:bold;
margin-bottom:10px;
color:#7a4723;
}

.dash-card b{
font-size:32px;
display:block;
}

.dash-card.main{
background:#8c5428;
}

.dash-card.main span,
.dash-card.main b{
color:white;
}

.dash-card.wide{
grid-column:1 / -1;
}

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

.table-wrap{
width:100%;
max-width:100%;
overflow-x:auto;
overflow-y:hidden;
margin-top:15px;
-webkit-overflow-scrolling:touch;
border-radius:22px;
}

.table{
width:max-content;
min-width:100%;
border-collapse:collapse;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,.05);
direction:rtl;
}

.table th{
background:#8c5428;
color:white;
padding:12px 14px;
font-size:13px;
white-space:nowrap;
}

.table td{
padding:10px 14px;
border-bottom:1px solid #eee;
text-align:center;
font-size:13px;
white-space:nowrap;
background:white;
}

.table tr:hover td{
background:#faf7f3;
}

/* ================= ACTIONS ================= */

.action{
color:#2563eb;
text-decoration:none;
font-weight:bold;
}

.danger{
color:#dc2626;
text-decoration:none;
font-weight:bold;
}

.done{
color:#16a34a;
font-weight:bold;
}

.pending{
color:#d97706;
font-weight:bold;
}

.invoice{
color:#8c5428;
font-weight:bold;
text-decoration:none;
}

/* ================= LOGIN ================= */

.login-page{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.login-box{
background:white;
width:100%;
max-width:430px;
padding:34px;
border-radius:30px;
box-shadow:0 6px 24px rgba(0,0,0,.12);
}

.brand{
font-size:40px;
font-weight:bold;
text-align:center;
margin-bottom:10px;
}

.tag{
text-align:center;
color:#9b6a3a;
margin-bottom:28px;
font-size:15px;
}

.alert{
background:#fee2e2;
color:#991b1b;
padding:14px;
border-radius:14px;
margin-bottom:14px;
}

/* ================= MOBILE ================= */

@media(max-width:700px){

.topbar{
padding:10px;
}

.topbrand b{
font-size:23px;
}

.topbrand span{
font-size:11px;
}

.sidebar{
padding:8px;
}

.sidebar a{
font-size:14px;
padding:10px 14px;
}

.content{
padding:14px;
}

h2{
font-size:28px;
}

h3{
font-size:19px;
}

.card{
padding:15px;
border-radius:20px;
}

.dashboard-grid{
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.dash-card{
padding:15px;
}

.dash-card span{
font-size:14px;
}

.dash-card b{
font-size:24px;
}

input,
select,
textarea{
font-size:14px;
padding:13px;
}

.btn{
font-size:14px;
padding:11px 18px;
}

.table th,
.table td{
font-size:11px;
padding:8px 10px;
}

.login-box{
padding:24px;
border-radius:24px;
}

.brand{
font-size:34px;
}

}