/* Samanmal IT System – Cool blue UI theme */
/* This file only changes colors and visuals. No PHP or layout logic changed. */

/* Brand palette (tuned to the reference image) */
:root {
  --brand-900: #0d2358;
  --brand-800: #10306f;
  --brand-700: #13408f;
  --brand-600: #1a57c8;
  --brand-500: #2463eb;
  --brand-400: #3682f2;
  --brand-300: #5aa3ff;
  --brand-200: #9bc7ff;
  --brand-100: #d6e6ff;

  --teal-500:  #22c1dd;
  --teal-400:  #48d1e3;
  --teal-300:  #7fe4eb;

  --success-500: #10b981;
  --danger-500:  #ef4444;
  --warning-500: #f59e0b;

  --sidebar-bg: var(--brand-900);
  --sidebar-hover: #0f2e6d;
  --sidebar-active: #113a86;
  --sidebar-text: #e6eeff;

  --topbar-grad: linear-gradient(90deg, var(--brand-500) 0%, var(--teal-500) 100%);

  --surface: #ffffff;
  --surface-2: #f6f8ff;
  --page-bg: #f3f6ff;

  --radius-card: 14px;
  --shadow-soft: 0 10px 30px rgba(16,24,40,.07);
  --shadow-card: 0 8px 28px rgba(16,24,40,.06);
}

/* Page background */
html, body { height: 100%; }
body {
  background: radial-gradient(1200px 700px at -10% -10%, #e8f0ff 0%, #f8fbff 40%, transparent 60%) no-repeat,
              radial-gradient(900px 600px at 110% -10%, #e6fcff 0%, transparent 55%) no-repeat,
              var(--page-bg);
}

/* Cards */
.card {
  border-radius: var(--radius-card);
  border: 1px solid #e5e7eb;
  box-shadow: var(--shadow-card);
  background: var(--surface);
}
.card-header.bg-light {
  background: #f5f8ff !important;
  border-bottom: 1px solid #e8eefb;
}

/* Sidebar */
.sidebar {
  width: 248px;
  min-height: 100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.sidebar .brand {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .2px;
}
.sidebar .nav-link {
  color: rgba(255,255,255,.85);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .nav-link i { color: #cfe0ff; }
.sidebar .nav-link:hover {
  background: var(--sidebar-hover);
  color: #ffffff;
}
.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"] {
  background: var(--sidebar-active);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
@media (max-width: 992px) {
  .sidebar { width: 220px; }
}

/* Topbar */
.topbar {
  background: var(--topbar-grad);
  box-shadow: 0 6px 22px rgba(16,24,40,.18);
}
.topbar .navbar-brand, .topbar .nav-link, .topbar .btn, .topbar, .topbar * {
  color: #ffffff !important;
}

/* Search in topbar */
.topbar .top-search {
  background: rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
}
.topbar .top-search .form-control {
  background: transparent;
  border: 0;
  color: #ffffff;
}
.topbar .top-search .form-control::placeholder {
  color: rgba(255,255,255,.75);
}
.topbar .top-search .btn {
  border-color: rgba(255,255,255,.35) !important;
  color: #ffffff !important;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(90deg, var(--brand-500), var(--teal-500));
  border: 0;
  box-shadow: 0 8px 20px rgba(36,99,235,.25);
}
.btn-primary:hover { filter: brightness(1.03); }
.btn-outline-primary {
  color: var(--brand-600);
  border-color: var(--brand-300);
}
.btn-outline-primary:hover {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.btn-success { background: var(--success-500); border-color: var(--success-500); }
.btn-danger  { background: var(--danger-500);  border-color: var(--danger-500);  }
.btn-warning { background: var(--warning-500); border-color: var(--warning-500); color:#111827; }

/* Tables */
.table thead th {
  background: #f3f7ff;
  border-bottom: 1px solid #e7edff;
}
.table tbody tr:hover { background: #f9fbff; }

/* Badges (soft) */
.badge.bg-info-subtle { background: #e6f0ff !important; color: #2356d6 !important; }
.badge.bg-success-subtle { background:#e7faf3 !important; color:#0e8f6a !important; }
.badge.bg-warning-subtle { background:#fff6e5 !important; color:#9a6b05 !important; }

/* Forms */
.form-control:focus {
  border-color: var(--brand-300);
  box-shadow: 0 0 0 .2rem rgba(36,99,235,.15);
}

/* Metric cards on dashboard (pairs with views/dashboard.php) */
.metric-card { border:0; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.metric-title { color:#6b7280; font-size:12px; margin-bottom:6px; }
.metric-value { font-size:26px; font-weight:800; margin:0; letter-spacing:.2px; }
.metric-1 { background:linear-gradient(180deg,#eef6ff 0%,#ffffff 100%); }
.metric-2 { background:linear-gradient(180deg,#e8fff6 0%,#ffffff 100%); }
.metric-3 { background:linear-gradient(180deg,#fff4e8 0%,#ffffff 100%); }
.metric-4 { background:linear-gradient(180deg,#f2ecff 0%,#ffffff 100%); }

/* Alerts, info panels */
.alert-info {
  background: #e6f9ff;
  border-color: #bde7f3;
  color: #0c5460;
  border-radius: 12px;
}

/* Utility surfaces */
.bg-light { background-color: #f5f8ff !important; }

/* Small polish for lists floating under inputs */
.list-group-item-action {
  border: 1px solid #e8eefb;
}
.list-group-item-action:hover {
  background: #f2f7ff;
}

/* Login screen tweaks (keeps your custom view clean) */
.login-wrap .card-login { border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }