/* ============================================================
   grants.swaida.org theme override
   Apply landing-page aesthetic: parchment + basalt + sprout
   Include in HTML head: <link rel="stylesheet" href="theme.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg:        #F5F0E8;
  --bg2:       #EDE6DA;
  --surf:      #FFFDF9;
  --surf2:     #F8F4EE;
  --bord:      #DDD5C5;
  --bord2:     #CFC6B4;

  --txt:       #1A1612;
  --txt2:      #4A4035;
  --txt3:      #8A7D6A;

  --accent:    #5CB033;
  --accent-l:  #78C94E;
  --accent-d:  #4A9B2A;
  --accent-bg: rgba(92,176,51,.08);

  --gold:      #C49B20;
  --gold-bg:   rgba(196,155,32,.1);

  --info:      #3B7BC0;
  --success:   #4A9B2A;
  --warning:   #C49B20;
  --danger:    #C0392B;

  --sidebar-bg:     #1A1A18;
  --sidebar-bg2:    #2A2926;
  --sidebar-txt:    rgba(255,255,255,.85);
  --sidebar-txt2:   rgba(255,255,255,.5);
  --sidebar-active: rgba(92,176,51,.18);

  --rad:    14px;
  --rad-sm: 8px;
  --rad-lg: 20px;

  --sh:    0 2px 16px rgba(28,20,10,.06);
  --sh-md: 0 6px 28px rgba(28,20,10,.10);
  --sh-lg: 0 16px 48px rgba(28,20,10,.16);

  --font-ar: 'Tajawal', sans-serif;
  --font-en: 'Outfit', sans-serif;
}

/* Body + typography */
body, html {
  background: var(--bg) !important;
  color: var(--txt) !important;
  font-family: var(--font-ar) !important;
}
[dir="rtl"], html[lang="ar"] { font-family: var(--font-ar) !important; }
[dir="ltr"], html[lang="en"] { font-family: var(--font-en) !important; }

/* Login screen */
#login-screen, .login-screen, .login-wrap,
[id*="login"]:not(.btn):not(button) {
  background: var(--bg) !important;
}
.login-box, .loginBox, #login-box,
#login-screen .box, #login-screen > div {
  background: var(--surf) !important;
  border: 1px solid var(--bord) !important;
  border-radius: var(--rad-lg) !important;
  box-shadow: var(--sh-md) !important;
  color: var(--txt) !important;
}
#login-screen, .login-screen { background: var(--bg) !important; }

/* Sidebar kept dark */
#sidebar, .sidebar, aside, nav.side {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-txt) !important;
  border-left: 1px solid rgba(255,255,255,.04) !important;
}
#sidebar a, .sidebar a, #sidebar button, .sidebar button {
  color: var(--sidebar-txt2) !important;
  background: transparent !important;
}
#sidebar a:hover, .sidebar a:hover,
#sidebar a.active, .sidebar a.active, #sidebar .active {
  background: var(--sidebar-active) !important;
  color: #fff !important;
}

/* Main content */
main, .main, #main, .content, #content {
  background: var(--bg) !important;
  color: var(--txt) !important;
}

/* Cards / panels with comfortable padding */
.card, .panel, .box, .tile, .widget,
[class*="-card"], [class*="-panel"], [class*="-box"],
.kpi-card, .stat-card, .info-card,
.choice-card, .chooser-card {
  background: var(--surf) !important;
  border: 1px solid var(--bord) !important;
  border-radius: var(--rad) !important;
  color: var(--txt) !important;
  box-shadow: var(--sh) !important;
  padding: 24px !important;
}
.kpi-card, .stat-card { padding: 20px !important; }
.card + .card, .panel + .panel { margin-top: 16px !important; }

/* Headers */
h1, h2, h3, h4, h5, h6,
.title, .heading, .section-title {
  color: var(--txt) !important;
  font-family: var(--font-ar) !important;
}

/* Buttons */
.btn, button.btn, .button, button.primary, .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--rad-sm) !important;
  font-family: var(--font-ar) !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  transition: all .2s !important;
}
.btn:hover, .button:hover, .btn-primary:hover {
  background: var(--accent-d) !important;
  border-color: var(--accent-d) !important;
}
.btn-secondary, .btn-outline, button.outline {
  background: transparent !important;
  color: var(--accent-d) !important;
  border: 1px solid var(--accent) !important;
}
.btn-secondary:hover, .btn-outline:hover { background: var(--accent-bg) !important; }
.btn-ghost, button.ghost {
  background: transparent !important;
  color: var(--txt2) !important;
  border: 1px solid var(--bord) !important;
}
.btn-danger, button.danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.btn-sm, .button-sm { padding: 6px 14px !important; font-size: 12px !important; }
.btn-lg, .button-lg { padding: 14px 28px !important; font-size: 15px !important; }

/* GLOBAL form field spacing -- all views, all forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input:not([type]),
select,
textarea {
  background: var(--surf) !important;
  border: 1.5px solid var(--bord) !important;
  border-radius: var(--rad-sm) !important;
  color: var(--txt) !important;
  font-family: var(--font-ar) !important;
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  width: 100%;
  box-sizing: border-box;
}

textarea {
  padding: 14px 16px !important;
  min-height: 90px !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-bg) !important;
}

label {
  color: var(--txt2) !important;
  font-family: var(--font-ar) !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.field, .form-group, .input-group {
  margin-bottom: 16px !important;
}

/* Tables */
table {
  background: var(--surf) !important;
  border-radius: var(--rad-sm) !important;
  overflow: hidden !important;
}
thead th, table th {
  background: var(--bg2) !important;
  color: var(--txt) !important;
  border-bottom: 2px solid var(--bord2) !important;
  font-family: var(--font-ar) !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
}
tbody td, table td {
  border-bottom: 1px solid var(--bord) !important;
  color: var(--txt) !important;
  padding: 12px 16px !important;
}
tbody tr:hover { background: var(--surf2) !important; }

/* Badges / chips / status pills */
.badge, .chip, .pill, .tag, .status,
[class*="-badge"], [class*="-chip"] {
  border-radius: 50px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
}
.badge-success, .status-approved, .status-success {
  background: rgba(74,155,42,.12) !important;
  color: #2E6B18 !important;
}
.badge-warning, .status-pending, .status-warning {
  background: var(--gold-bg) !important;
  color: #7A5C0E !important;
}
.badge-danger, .status-rejected, .status-danger {
  background: rgba(192,57,43,.12) !important;
  color: #8B2920 !important;
}

/* KPIs */
.kpi-value, .stat-value, .number-big {
  color: var(--accent) !important;
  font-family: var(--font-en) !important;
  font-weight: 800 !important;
}

/* Links */
a:not(.btn):not(.button):not(.tile):not(.card) { color: var(--accent-d) !important; }
a:not(.btn):hover { color: var(--accent) !important; }

/* Container max-width */
.container, .wrap, .main-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb {
  background: var(--bord2);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--txt3); }