/* =====================================================================
   DCO BRAND THEME — modern override for Dirar Charity Organization ERP
   Loaded AFTER style.css in header.php so it wins on cascade.
   Brand colors pulled directly from the official DCO logo:
     Blue  #2478c0  ·  Gold #f0a80c  ·  Red #e41800
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap");

:root{
  --dco-blue:        #2478c0;
  --dco-blue-dark:    #1a5c97;
  --dco-blue-light:  #e9f2fb;
  --dco-navy:          #0f2c44;
  --dco-navy-light:    #16415f;
  --dco-gold:          #f0a80c;
  --dco-gold-light:    #fff3dc;
  --dco-red:           #e41800;
  --dco-bg:            #f4f7fa;
  --dco-card-radius:   14px;
  --dco-shadow:        0 2px 10px rgba(15,44,68,0.07), 0 1px 2px rgba(15,44,68,0.05);
  --dco-shadow-hover:  0 8px 24px rgba(15,44,68,0.12);

  /* Re-point Bootstrap's own variables at DCO colors so anything already
     consuming --bs-primary / --bs-success etc. updates automatically */
  --bs-primary:        var(--dco-blue);
  --bs-primary-rgb:    36, 120, 192;
  --bs-success:        #2e9e5b;
  --bs-success-rgb:    46, 158, 91;
  --bs-warning:        var(--dco-gold);
  --bs-warning-rgb:    240, 168, 12;
  --bs-info:           #2f8fae;
  --bs-info-rgb:       47, 143, 174;
  --bs-danger:         var(--dco-red);
  --bs-danger-rgb:     228, 24, 0;
  --bs-dark:           var(--dco-navy);
  --bs-dark-rgb:       15, 44, 68;
  --bs-body-font-family: "Inter", "Open Sans", sans-serif;
  --bs-body-bg:        var(--dco-bg);
  --bs-body-color:     #1c2733;
}

/* ── Base typography ────────────────────────────────────────────── */
body{
  background: var(--dco-bg) !important;
  font-family: "Inter", "Open Sans", sans-serif !important;
  letter-spacing: 0.1px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
  font-family: "Manrope", "Inter", sans-serif !important;
  color: var(--dco-navy) !important;
  font-weight: 700 !important;
}
.content-header h1{
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px;
}
.breadcrumb-item a{ color: var(--dco-blue); }
.breadcrumb-item.active, .breadcrumb-item{ color: #6c7a87; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.app-sidebar{
  background: var(--dco-navy) !important;
  box-shadow: 2px 0 16px rgba(0,0,0,0.12) !important;
  border-right: none !important;
}
.app-sidebar .brand-link{
  padding: 1.1rem 1.2rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 8px;
}
.app-sidebar .brand-link .b-brand{
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.app-sidebar .brand-link img.logo{
  width: 100% !important;
  display: block;
}
.app-sidebar .nav-link{
  color: rgba(255,255,255,0.72) !important;
  border-radius: 8px;
  margin: 1px 10px;
  transition: all .15s ease;
}
.app-sidebar .nav-icon i, .app-sidebar .nav-icon > svg{
  color: rgba(255,255,255,0.55) !important;
}
.app-sidebar .nav-item:hover > .nav-link,
.app-sidebar .nav-item:focus > .nav-link{
  background: rgba(36,120,192,0.22) !important;
  color: #fff !important;
}
.app-sidebar .nav-item.active > .nav-link,
.app-sidebar .nav-item:active > .nav-link{
  background: var(--dco-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(36,120,192,0.4);
}
.app-sidebar .nav-item.active > .nav-link i,
.app-sidebar .nav-item:active > .nav-link i{
  color: #fff !important;
}
.app-sidebar .nav-submenu{
  background: rgba(0,0,0,0.15) !important;
}
.app-sidebar .nav-submenu .nav-link{
  color: rgba(255,255,255,0.6) !important;
}
.app-sidebar .nav-submenu .nav-item.active > .nav-link,
.app-sidebar .nav-submenu .nav-item:hover > .nav-link{
  color: var(--dco-gold) !important;
  background: transparent !important;
}

/* ── Top header bar ──────────────────────────────────────────────── */
.site-header{
  background: #ffffff !important;
  border-bottom: 1px solid #e3e9ee;
  box-shadow: 0 1px 6px rgba(15,44,68,0.05) !important;
}
.header-search .form-control{
  border-radius: 20px !important;
  background: var(--dco-bg) !important;
  border: 1px solid #dde4ea !important;
}
.user-dropdown .avtar img{
  border: 2px solid var(--dco-blue);
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card{
  border: none !important;
  border-radius: var(--dco-card-radius) !important;
  box-shadow: var(--dco-shadow) !important;
  transition: box-shadow .2s ease, transform .15s ease;
}
.card:hover{
  box-shadow: var(--dco-shadow-hover) !important;
}
.card-header{
  background: #fff !important;
  border-bottom: 1px solid #edf1f5 !important;
  border-radius: var(--dco-card-radius) var(--dco-card-radius) 0 0 !important;
  font-weight: 700;
  padding: 1rem 1.3rem !important;
}
.card-header h4, .card-header h5{
  font-size: 1.05rem !important;
  margin: 0;
}
.card-body{
  padding: 1.3rem !important;
}

/* Dashboard hero / gradient widgets */
.btn-bg{
  background: linear-gradient(135deg, var(--dco-blue) 0%, var(--dco-navy) 100%) !important;
  border-radius: var(--dco-card-radius) !important;
}
.icon-shape.bg-dark{
  background: rgba(255,255,255,0.15) !important;
  border-radius: 12px !important;
}
.icon-shape{
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  border-radius: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px;
  transition: all .15s ease !important;
}
.btn-primary{
  --bs-btn-bg: var(--dco-blue) !important;
  --bs-btn-border-color: var(--dco-blue) !important;
  --bs-btn-hover-bg: var(--dco-blue-dark) !important;
  --bs-btn-hover-border-color: var(--dco-blue-dark) !important;
  --bs-btn-active-bg: var(--dco-blue-dark) !important;
  --bs-btn-active-border-color: var(--dco-blue-dark) !important;
  --bs-btn-disabled-bg: var(--dco-blue) !important;
  --bs-btn-disabled-border-color: var(--dco-blue) !important;
  box-shadow: 0 2px 6px rgba(36,120,192,0.3) !important;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(36,120,192,0.4) !important; }
.btn-outline-primary{
  --bs-btn-color: var(--dco-blue) !important;
  --bs-btn-border-color: var(--dco-blue) !important;
  --bs-btn-hover-bg: var(--dco-blue) !important;
  --bs-btn-hover-border-color: var(--dco-blue) !important;
}
.btn-success{ --bs-btn-bg: #2e9e5b !important; --bs-btn-border-color: #2e9e5b !important; }
.btn-warning{
  --bs-btn-bg: var(--dco-gold) !important;
  --bs-btn-border-color: var(--dco-gold) !important;
  --bs-btn-color: #1c2733 !important;
}
.btn-danger{ --bs-btn-bg: var(--dco-red) !important; --bs-btn-border-color: var(--dco-red) !important; }

/* ── Tables ──────────────────────────────────────────────────────── */
.table thead th{
  background: var(--dco-navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: none !important;
  padding: 0.85rem 1rem !important;
}
.table tbody tr{
  transition: background .12s ease;
}
.table tbody tr:hover{
  background: var(--dco-blue-light) !important;
}
.table td{
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
  border-color: #edf1f5 !important;
}
.table-striped tbody tr:nth-of-type(odd){
  background: #fafbfd;
}

/* ── Badges / status pills ──────────────────────────────────────── */
.badge{
  border-radius: 6px !important;
  font-weight: 600 !important;
  padding: 0.35em 0.7em !important;
}
.badge.bg-success{ background: #2e9e5b !important; }
.badge.bg-warning{ background: var(--dco-gold) !important; color: #1c2733 !important; }
.badge.bg-danger{ background: var(--dco-red) !important; }

/* ── Forms ───────────────────────────────────────────────────────── */
.form-control, .form-select{
  border-radius: 9px !important;
  border: 1px solid #dde4ea !important;
  padding: 0.55rem 0.9rem !important;
  font-size: 0.92rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus{
  border-color: var(--dco-blue) !important;
  box-shadow: 0 0 0 3px rgba(36,120,192,0.15) !important;
}
.form-group label, label{
  font-weight: 600 !important;
  color: var(--dco-navy);
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}

/* ── Modals ──────────────────────────────────────────────────────── */
.modal-content{
  border: none !important;
  border-radius: var(--dco-card-radius) !important;
  box-shadow: 0 12px 40px rgba(15,44,68,0.22) !important;
}
.modal-header{
  border-bottom: 1px solid #edf1f5 !important;
  border-radius: var(--dco-card-radius) var(--dco-card-radius) 0 0 !important;
}

/* ── Nav tabs ────────────────────────────────────────────────────── */
.nav-tabs .nav-link{
  border-radius: 9px 9px 0 0 !important;
  font-weight: 600;
  color: #6c7a87;
}
.nav-tabs .nav-link.active{
  color: var(--dco-blue) !important;
  border-color: #dee2e6 #dee2e6 #fff !important;
  border-bottom: 2px solid var(--dco-blue) !important;
}

/* ── Scrollbar polish (webkit) ───────────────────────────────────── */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: #c7d1da; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--dco-blue); }

/* ── Misc polish ─────────────────────────────────────────────────── */
.alert{
  border: none !important;
  border-radius: 10px !important;
  font-weight: 500;
}
.alert-success{ background: #e6f5ec !important; color: #1d6b3c !important; }
.alert-danger{ background: #fce8e5 !important; color: #a3220a !important; }
.alert-warning{ background: var(--dco-gold-light) !important; color: #7a5400 !important; }
.alert-info{ background: #e8f3f7 !important; color: #1f5c70 !important; }

a{ color: var(--dco-blue); }
a:hover{ color: var(--dco-blue-dark); }

/* =====================================================================
   LOGIN PAGE — standalone overrides (login.php doesn't include header.php,
   so these selectors target login.php's own markup directly)
   ===================================================================== */
.authentication-signin.btn-bg{
  background: linear-gradient(135deg, var(--dco-blue) 0%, var(--dco-navy) 100%) !important;
}