:root { --red: #7d0a0a; --gold: #a86a00; --ink: #333; --muted: #777; --bg: #f2f3f7; --line: #e3e3e3; --blue: #17a2b8; }
html, body { font-family: 'Cairo', system-ui, sans-serif; font-size: 14px; color: var(--ink); background: var(--bg); }
body.popup { background: #fff; }
a { text-decoration: none; }
.topbar { background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 6px 20px; border-bottom: 1px solid var(--line); }
.topbar .brand img { height: 70px; }
.topbar .who { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.mainmenu { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.06); padding: 0 16px; }
.mainmenu > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 26px; justify-content: flex-start; }
.mainmenu > ul > li > a { display: block; padding: 14px 4px; color: #444; font-size: 15px; }
.mainmenu > ul > li > a:hover, .mainmenu > ul > li.active > a { color: var(--red); }
.mainmenu .dropdown-menu { text-align: right; font-size: 14px; }
.menu-toggle { background: none; border: 0; padding: 10px 0; font-size: 15px; }
@media (max-width: 991px) { .mainmenu > ul { display: none; flex-direction: column; } .mainmenu > ul.open { display: flex; } .mainmenu .dropdown-menu { position: static !important; transform: none !important; border: 0; box-shadow: none; } }
.page { padding: 12px 20px 30px; }
.box { border: 0; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 16px; }
.filter-box .form-label { font-weight: 600; color: #555; font-size: 13px; }
.list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.list-title { font-weight: 700; color: #444; margin: 0; font-size: 17px; }
.list-tools { display: flex; align-items: center; gap: 14px; }
.pager a { padding: 0 6px; color: #555; } .pager a.cur { color: #6f42c1; font-weight: 700; }
.btn-new { background: #111; color: #fff; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; }
.btn-new:hover { color: #fff; background: #333; }
table.smarty { font-size: 12.5px; margin-bottom: 6px; }
table.smarty thead th { background: linear-gradient(to left, var(--red), var(--gold)); color: #fff; font-weight: 600; white-space: nowrap; vertical-align: middle; border-color: rgba(255,255,255,.15); }
table.smarty thead th a { color: #fff; }
table.smarty td { vertical-align: top; }
table.smarty tbody tr:nth-child(even) td { background: #fafafa; }
tr.pointer { cursor: pointer; } tr.pointer:hover td { background: #fff6e5 !important; }
.row-btns { white-space: nowrap; width: 1%; } .row-btns .btn { padding: 1px 7px; }
.req { color: #d00; }
.fld .form-label { font-weight: 600; font-size: 13px; color: #555; margin-bottom: 3px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; border: 1px solid var(--line); border-radius: 4px; padding: 8px; }
.checks label { font-size: 13px; }
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single { height: 38px; border-color: #ced4da; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 14px; }
.flash { max-width: 600px; margin: 0 auto 10px; text-align: center; }
.tile { border-radius: 6px; color: #fff; padding: 14px 16px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; }
.tile .t-label { font-size: 13px; opacity: .9; } .tile .t-value { font-size: 22px; font-weight: 700; }
.t1 { background: linear-gradient(45deg, #7d0a0a, #b23a3a); } .t2 { background: linear-gradient(45deg, #a86a00, #d39b28); }
.t3 { background: linear-gradient(45deg, #0f6674, #17a2b8); } .t4 { background: linear-gradient(45deg, #3d2c8d, #6f42c1); }
.t5 { background: linear-gradient(45deg, #1e7e34, #34ce57); } .t6 { background: linear-gradient(45deg, #495057, #868e96); }
/* login */
.login-page { display: flex; min-height: 100vh; background: #fff; }
.login-side { width: 36%; background: linear-gradient(160deg, var(--red), var(--gold)); color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px; text-align: center; }
.login-side img { width: 160px; background: #fff; border-radius: 50%; padding: 14px; }
.login-side h1 { font-size: 24px; font-weight: 700; }
.login-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; }
.login-box { width: 100%; max-width: 360px; text-align: right; }
.login-box h2 { font-size: 22px; font-weight: 700; margin-bottom: 18px; color: var(--red); }
.btn-login { background: linear-gradient(to left, var(--red), var(--gold)); color: #fff; font-weight: 700; }
.btn-login:hover { color: #fff; opacity: .92; }
.login-foot { color: var(--muted); font-size: 12px; margin-top: 30px; }
/* print */
@media print { .topbar, .mainmenu, .foot, .no-print, .filter-box { display: none !important; } body { background: #fff; } .box { box-shadow: none; } }
h6.sec { font-weight: 700; color: var(--red); border-bottom: 2px solid #f0e2c8; padding-bottom: 6px; margin: 10px 0 0; }
.btn-print { background: #6f42c1; color: #fff; white-space: nowrap; } .btn-print:hover { color: #fff; background: #5a32a3; }