/* ================================================================
   nafeed/shared.css — CSS مشترك لجميع صفحات منصة نافذ
================================================================ */
:root {
    --green:        #1e7a50;
    --green-light:  #23904e;
    --green-dark:   #145c3a;
    --green-bg:     rgba(10, 60, 40, 0.78);
    --teal:         #129986;
    --white:        #ffffff;
    --gray-100:     #f5f7f6;
    --gray-200:     #e8eceb;
    --gray-400:     #9ca3af;
    --gray-600:     #555f6e;
    --text:         #1f2937;
    --border:       #d1d5db;
    --shadow:       0 2px 12px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 24px rgba(0,0,0,0.12);
    --radius:       8px;
    --transition:   0.22s ease;
}

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

body {
    font-family: 'Tajawal', sans-serif;
    color: var(--text);
    background: var(--gray-100);
    direction: rtl;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; }
input, select, textarea { font-family: inherit; }

/* ─── Shared Navbar ─── */
.navbar {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 999;
}
.navbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.logo-wrap { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-wrap svg { width:44px; height:44px; }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-text .ar { font-size:22px; font-weight:800; color:var(--text); }
.logo-text .en { font-size:14px; font-weight:700; color:var(--green); }

.nav-menu { display:flex; gap:24px; }
.nav-menu a {
    font-size:15px; font-weight:500; color:var(--gray-600);
    padding: 4px 0;
    position: relative;
    transition: color var(--transition);
}
.nav-menu a:hover, .nav-menu a.active { color: var(--green); }
.nav-menu a.active::after {
    content:''; position:absolute; bottom:-4px; right:0; left:0;
    height:2px; background:var(--green); border-radius:2px;
}

.nav-auth { display:flex; gap:12px; flex-shrink:0; }
.btn-outline {
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 18px; border-radius:6px; font-weight:600; font-size:14px;
    border: 1.5px solid var(--green); color:var(--green);
    background:transparent; transition: all var(--transition);
}
.btn-outline:hover { background:var(--green); color:#fff; }
.btn-solid {
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 18px; border-radius:6px; font-weight:600; font-size:14px;
    background:var(--green); color:#fff; border:1.5px solid var(--green);
    transition: all var(--transition);
}
.btn-solid:hover { background:var(--green-light); border-color:var(--green-light); }

/* ─── Shared Footer ─── */
.site-footer {
    background: #0b2e1e;
    color: #b0c4ba;
    padding: 48px 40px 24px;
    margin-top: 80px;
}
.footer-inner {
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;
    border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:32px; margin-bottom:24px;
}
.footer-brand .logo-wrap { margin-bottom:12px; }
.footer-brand .logo-text .ar { color:#fff; }
.footer-brand p { font-size:14px; line-height:1.7; max-width:300px; }
.footer-col h4 { color:#fff; font-size:16px; margin-bottom:16px; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { font-size:14px; color:#b0c4ba; transition:color var(--transition); }
.footer-col ul li a:hover { color:#fff; }
.contact-item { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; }
.social-row { display:flex; gap:10px; margin-top:16px; }
.social-btn {
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center;
    color:#b0c4ba; font-size:15px; transition:all var(--transition);
}
.social-btn:hover { background:var(--green); color:#fff; }
.footer-bottom { max-width:1280px; margin:0 auto; text-align:center; font-size:13px; }

/* ─── Dashboard Layout ─── */
.dash-body { display:flex; min-height:100vh; background:var(--gray-100); }
.sidebar {
    width:260px; flex-shrink:0;
    background:var(--white);
    border-left:1px solid var(--gray-200);
    position:fixed; top:0; right:0; bottom:0;
    display:flex; flex-direction:column;
    z-index:200; transition:transform var(--transition);
}
.sidebar-head {
    height:72px; padding:0 20px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--gray-200);
}
.sidebar-close { display:none; background:transparent; font-size:20px; color:var(--gray-600); }
.sidebar-user {
    padding:16px 20px; display:flex; align-items:center; gap:12px;
    border-bottom:1px solid var(--gray-200);
}
.avatar-circle {
    width:44px; height:44px; border-radius:50%;
    background:var(--green); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:18px;
}
.user-meta h4 { font-size:15px; font-weight:700; }
.user-meta span {
    font-size:12px; background:rgba(30,122,80,0.12);
    color:var(--green); padding:2px 8px; border-radius:10px; font-weight:600;
}
.sidebar-nav { padding:16px 12px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.sidebar-nav a {
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:var(--radius);
    font-size:14px; font-weight:600; color:var(--gray-600);
    transition:all var(--transition);
}
.sidebar-nav a i { width:20px; text-align:center; font-size:16px; }
.sidebar-nav a:hover, .sidebar-nav a.active { background:rgba(30,122,80,0.08); color:var(--green); }
.sidebar-nav .nav-divider { height:1px; background:var(--gray-200); margin:8px 0; }
.sidebar-nav a.danger { color:#ef4444; }
.sidebar-nav a.danger:hover { background:rgba(239,68,68,0.08); }

.dash-main { margin-right:260px; flex:1; display:flex; flex-direction:column; min-height:100vh; }
.dash-topbar {
    height:72px; background:rgba(255,255,255,0.9);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--gray-200);
    padding:0 32px; display:flex; align-items:center;
    justify-content:space-between; position:sticky; top:0; z-index:100;
}
.topbar-left { display:flex; align-items:center; gap:16px; }
.menu-toggle { background:transparent; font-size:20px; color:var(--text); display:none; }
.topbar-search {
    display:flex; align-items:center; gap:8px;
    background:var(--gray-100); border:1px solid var(--gray-200);
    border-radius:20px; padding:8px 16px; width:280px;
}
.topbar-search input { border:none; background:transparent; outline:none; width:100%; font-size:14px; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.icon-btn { background:transparent; font-size:18px; color:var(--gray-600); position:relative; }
.notif-dot { position:absolute; top:0; right:0; width:9px; height:9px; background:#ef4444; border-radius:50%; border:2px solid #fff; }

.dash-content { padding:28px 32px; max-width:1280px; width:100%; }
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; }
.page-header h2 { font-size:24px; font-weight:800; }
.page-header p { font-size:14px; color:var(--gray-400); margin-top:4px; }

/* Cards */
.card {
    background:var(--white); border:1px solid var(--gray-200);
    border-radius:12px; box-shadow:var(--shadow);
}
.welcome-card {
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 28px; margin-bottom:24px;
    background:linear-gradient(120deg, rgba(30,122,80,0.06) 0%, transparent 100%), var(--white);
}
.welcome-card h2 { font-size:22px; }
.welcome-card p { color:var(--gray-400); font-size:14px; margin-top:4px; }

/* Stat Cards */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
    background:var(--white); border:1px solid var(--gray-200);
    border-radius:12px; padding:20px; display:flex; align-items:center; gap:16px;
    box-shadow:var(--shadow); transition:transform var(--transition);
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.si-blue { background:rgba(59,130,246,0.1); color:#3b82f6; }
.si-amber { background:rgba(245,158,11,0.1); color:#f59e0b; }
.si-green { background:rgba(16,185,129,0.1); color:#10b981; }
.si-red { background:rgba(239,68,68,0.1); color:#ef4444; }
.stat-info h3 { font-size:26px; font-weight:800; line-height:1; }
.stat-info p { font-size:13px; color:var(--gray-400); margin-top:4px; }

/* Table */
.table-card { overflow:hidden; }
.table-head { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--gray-200); }
.table-head h3 { font-size:17px; font-weight:700; }
.link-text { color:var(--green); font-weight:600; font-size:14px; }
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:14px 24px; text-align:right; }
thead th { background:rgba(0,0,0,0.02); font-size:13px; color:var(--gray-400); font-weight:600; border-bottom:1px solid var(--gray-200); }
tbody tr { transition:background var(--transition); }
tbody tr:hover { background:rgba(30,122,80,0.025); }
tbody tr:not(:last-child) td { border-bottom:1px solid var(--gray-200); }

/* Badges */
.badge {
    display:inline-flex; align-items:center; padding:4px 10px;
    border-radius:20px; font-size:12px; font-weight:700;
}
.badge-green { background:rgba(16,185,129,0.12); color:#059669; }
.badge-amber { background:rgba(245,158,11,0.12); color:#d97706; }
.badge-red   { background:rgba(239,68,68,0.12);  color:#dc2626; }
.badge-blue  { background:rgba(59,130,246,0.12);  color:#2563eb; }
.badge-purple{ background:rgba(139,92,246,0.12);  color:#7c3aed; }

/* Action Buttons */
.act-btn { background:transparent; width:32px; height:32px; border-radius:6px; font-size:15px; color:var(--gray-400); display:inline-flex; align-items:center; justify-content:center; transition:all var(--transition); }
.act-btn:hover { background:var(--gray-200); color:var(--text); }
.act-btn.red:hover { background:rgba(239,68,68,0.1); color:#ef4444; }
.act-group { display:flex; gap:4px; }

/* Filters */
.filters-bar { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:20px 24px; border-bottom:1px solid var(--gray-200); }
.filter-field { display:flex; flex-direction:column; gap:6px; }
.filter-field label { font-size:13px; font-weight:600; color:var(--gray-600); }
.filter-field select, .filter-field input {
    padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius);
    font-size:14px; background:var(--white); color:var(--text); min-width:160px;
}
.filter-field select:focus, .filter-field input:focus { outline:none; border-color:var(--green); }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:6px; padding:20px; border-top:1px solid var(--gray-200); }
.pg-btn {
    width:36px; height:36px; border-radius:var(--radius);
    border:1px solid var(--border); background:transparent;
    font-size:14px; font-weight:600; color:var(--text);
    display:flex; align-items:center; justify-content:center;
    transition:all var(--transition);
}
.pg-btn:hover:not(:disabled) { border-color:var(--green); color:var(--green); background:rgba(30,122,80,0.06); }
.pg-btn.active { background:var(--green); border-color:var(--green); color:#fff; }
.pg-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* Wizard */
.wizard { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:36px; }
.wz-step { display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0.45; transition:opacity var(--transition); }
.wz-step.active { opacity:1; }
.wz-icon {
    width:46px; height:46px; border-radius:50%; border:2px solid var(--border);
    background:var(--white); display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--gray-400); transition:all var(--transition);
}
.wz-step.active .wz-icon { border-color:var(--green); background:var(--green); color:#fff; box-shadow:0 0 0 4px rgba(30,122,80,0.15); }
.wz-step span { font-size:13px; font-weight:600; }
.wz-line { flex:1; max-width:80px; height:2px; background:var(--gray-200); margin-bottom:24px; }

/* Forms */
.form-section { padding:8px 0; }
.form-section h3 { font-size:18px; font-weight:700; margin-bottom:24px; padding-bottom:10px; border-bottom:2px solid var(--green); display:inline-block; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.form-grid.full { grid-template-columns:1fr; }
.fg { display:flex; flex-direction:column; gap:7px; }
.fg.span2 { grid-column:1/-1; }
.fg label { font-size:14px; font-weight:600; color:var(--gray-600); }
.fg input, .fg select, .fg textarea {
    padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius);
    font-size:14px; color:var(--text); background:var(--white);
    transition:border-color var(--transition);
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
    outline:none; border-color:var(--green);
    box-shadow:0 0 0 3px rgba(30,122,80,0.1);
}
.form-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; }
.review-box { background:rgba(30,122,80,0.05); border:1px solid rgba(30,122,80,0.2); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.review-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--gray-200); }
.review-row:last-child { border-bottom:none; }
.review-row span { color:var(--gray-600); font-size:14px; }
.review-row strong { font-size:14px; }
.check-row { display:flex; gap:10px; align-items:flex-start; margin-bottom:20px; }
.check-row label { font-size:14px; line-height:1.5; }

/* Responsive Dashboard */
@media (max-width:1024px) {
    .dash-main { margin-right:0; }
    .sidebar { transform:translateX(100%); }
    .sidebar.open { transform:translateX(0); }
    .sidebar-close, .menu-toggle { display:block; }
    .stats-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
    .stats-grid { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
    .topbar-search { display:none; }
    .footer-inner { grid-template-columns:1fr; }
}