/* ================================
   Rubeya & Co-Advocates – Brand UI
   ================================ */
:root{
  --brand-navy:#0E2B4C;        /* deep navy */
  --brand-navy-2:#0A233F;      /* darker shade */
  --brand-ink:#12263A;
  --brand-text:#0f172a;
  --brand-muted:#5b6b85;
  --brand-bg:#f6f8fb;
  --white:#fff;

  --accent:#3b82f6;            /* subtle blue for focus states */
  --good:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;

  --radius:14px;
  --shadow:0 8px 24px rgba(2,26,44,0.06);
}

/* ===== Sticky layout scaffold ===== */
html, body { height: 100%; margin: 0; }
body.layout{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--brand-bg);
  color: var(--brand-text);
  font: 15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
}
.app-header{ flex-shrink: 0; }
.app-main{
  flex: 1 0 auto;
  max-width:1200px; margin:18px auto; padding:0 16px 80px;
}
.app-footer{ flex-shrink: 0; }

/* Header */
.app-header{
  background:linear-gradient(180deg,var(--brand-navy) 0%, var(--brand-navy-2) 100%);
  color:var(--white);
  box-shadow:var(--shadow);
}
.header-inner{
  max-width:1200px; margin:0 auto;
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{height:36px; display:block;}
.logo-right{height:34px;}
.logo-left{height:36px;}

/* Hero banner */
.hero{ position:relative; height:160px; overflow:hidden; }
.hero-img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(20%); }
.hero-overlay{
  position:absolute; inset:0; 
  background:linear-gradient(180deg, rgba(14,43,76,0.0) 0%, rgba(14,43,76,0.65) 100%);
}

/* Top nav */
.topnav{
  display:flex; align-items:center; gap:8px;
  max-width:1200px; margin:0 auto; padding:8px 16px 14px;
}
.nav-link{
  color:#e6eefb; text-decoration:none; padding:6px 10px; border-radius:10px;
}
.nav-link:hover{ background:rgba(255,255,255,0.1); }
.nav-link.active{ background:#113153; color:#fff; }
.nav-spacer{ flex:1 1 auto; }

/* User dropdown in nav */
.nav-user{
  position: relative;
  color: #fff;
  font-weight: 500;
}
.nav-user .dropdown-toggle{
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}
.nav-user .dropdown-toggle:hover{
  background: rgba(255,255,255,0.1);
}
.nav-user .dropdown-menu{
  position: absolute;
  top: 120%;
  right: 0;
  background: #fff;
  color: #0f2540;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  min-width: 140px;
  display: none;
  flex-direction: column;
  z-index: 100;
}
.nav-user.open .dropdown-menu{ display: flex; }
.nav-user .dropdown-menu a{
  padding: 10px 14px;
  color: var(--brand-ink);
  text-decoration: none;
}
.nav-user .dropdown-menu a:hover{
  background: #f3f6fb;
}
.dropdown-menu .dropdown-item{
  display:block; width:100%; text-align:left;
  padding:10px 14px; background:transparent; border:0; color:var(--brand-ink); cursor:pointer;
}
.dropdown-menu .dropdown-item:hover{ background:#f3f6fb; }

/* Messages */
.messages{ max-width:1200px; margin:18px auto 0; padding:0 16px; }
.alert{ padding:12px 14px; border-radius:12px; background:#eaf1ff; color:#0f2952; margin-bottom:10px; }
.alert.success{ background:#e8f7ee; color:#0f3a20; }
.alert.warning{ background:#fff7e6; color:#7a4c00; }
.alert.error, .alert.danger{ background:#ffeaea; color:#7a0a0a; }

/* Cards */
.card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px;
}
.card + .card{ margin-top:14px; }
.card-title{ font-size:18px; font-weight:600; margin:0 0 10px; color:var(--brand-ink); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; 
  height:38px; padding:0 14px; border-radius:10px; border:1px solid transparent;
  background:#f3f6fb; color:#0f2540; cursor:pointer; font-weight:600;
}
.btn:hover{ filter:brightness(0.98); }
.btn:focus{ outline:2px solid var(--accent); outline-offset:2px; }

.btn-primary{ background:var(--brand-navy); color:#fff; }
.btn-primary:hover{ background:#143a66; }

.btn-outline{
  background:transparent; border:1px solid var(--brand-navy); color:var(--brand-navy);
}
.btn-outline:hover{ background:rgba(14,43,76,.06); }

.btn-danger{ background:var(--bad); color:#fff; }
.btn-danger:disabled{
  background:#f2b4b4; color:#611313; cursor:not-allowed; border-color:transparent;
}

/* Remove underline from all anchors styled as .btn */
a.btn, 
a.btn:hover, 
a.btn:focus, 
a.btn:active {
  text-decoration: none !important;
}

/* Forms */
.form-grid{ display:grid; gap:12px; }
.form-row{ display:grid; gap:6px; }
label{ font-weight:600; color:var(--brand-ink); }
input[type="text"], input[type="number"], select, textarea{
  height:38px; padding:0 12px; border-radius:10px; border:1px solid #d9e2f0; background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,0.02) inset;
}
textarea{ height:120px; padding:10px 12px; resize:vertical; }
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;
}

/* ===== Simple scrollable tables ===== */
.table-wrap {
  width: 100%;
  overflow-x: auto;              /* enables horizontal scroll */
  -webkit-overflow-scrolling: touch;
}
.table {
  min-width: 900px;              /* force scroll on small screens */
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #eef2f7;
  white-space: nowrap;
}
.table thead th {
  background:#f7f9fc;
  font-weight:700;
  color:#0f2540;
  position: sticky;
  top:0;
}
.table tbody tr:hover{ background:#fbfdff; }
.table .num{ text-align:right; font-variant-numeric:tabular-nums; }

/* Badges */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; font-weight:700; font-size:12px;
}
.badge.issued{ background:#e8f7ee; color:#166534; }
.badge.reserved{ background:#eff6ff; color:#1e40af; }

/* Footer */
.app-footer{ background:#0b1f36; color:#c8d7ee; }
.footer-inner{
  max-width:1200px; margin:0 auto; padding:18px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-title{ font-weight:800; letter-spacing:.2px; }
.footer-sub{ opacity:.8; font-size:13px; }
.footer-logo{ height:26px; filter:contrast(100%) saturate(80%); }
.footer-legal{
  border-top:1px solid rgba(255,255,255,0.1); padding:12px 16px; text-align:center; font-size:13px;
}

/* Utilities */
.mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; }
.mb-0{ margin-bottom:0; }
.text-right{ text-align:right; }

/* Print-friendly tweaks */
@media print{
  .hero, .topnav, .messages { display:none !important; }
  .app-main{ padding:0; }
  .card, .table-wrap{ box-shadow:none; }
}

/* =========================
   Mobile tweaks (≤ 640px)
   ========================= */
@media (max-width: 640px) {
  .header-inner{ max-width: 100%; padding: 10px 12px; gap: 10px; }
  .logo-left{ height: 26px; }
  .logo-right{ height: 24px; }

  .hero{ height: 110px; }

  .topnav{
    max-width: 100%;
    padding: 8px 12px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }
  .nav-link{ padding: 6px 10px; white-space: nowrap; }
  .nav-user .dropdown-menu{ right: 6px; }

  .app-main{ margin: 12px auto 70px; padding: 0 12px 70px; }
  .card{ padding: 14px; border-radius: 12px; }
  .card-title{ font-size: 16px; margin-bottom: 8px; }
  .btn{ height: 36px; padding: 0 12px; }
  input[type="text"], input[type="number"], select, textarea{ height: 36px; }

  .table{ min-width: 640px; font-size: 14px; }
  .table th, .table td{ padding: 9px 10px; }
  .table td.date-col{ font-size: 13px; }

  .app-footer{ padding-top: 6px; }
  .footer-inner{ max-width: 100%; padding: 14px 12px; gap: 10px; }
  .footer-title{ font-size: 14px; }
  .footer-sub{ font-size: 12px; }
  .footer-logo{ height: 22px; }
  .footer-legal{ padding: 10px 12px; font-size: 12px; }
}