/* ======================================================
   Corporate UI — Clean, High-Contrast, Accessible
   Drop-in stylesheet for your PHP pages
   ====================================================== */

/* ==== Design Tokens ==== */
:root{
  /* Base */
  --bg-page: #f6f8fb;
  --bg-surface: #ffffff;
  --text: #101828;           /* Gray-900 */
  --text-muted: #475467;     /* Gray-600 */
  --border: #e4e7ec;         /* Gray-200 */
  --shadow: 0 10px 30px rgba(16, 24, 40, .08);

  /* Brand */
  --brand: #0d6efd;          /* Corporate blue */
  --brand-600: #0b5ed7;
  --brand-50: #e8f0ff;

  /* Accents / States */
  --accent: #12b76a;         /* Emerald */
  --info: #2e90fa;
  --success: #17a34a;
  --danger: #d92d20;
  --warning: #f79009;

  /* Radii */
  --r-card: 14px;
  --r-pill: 999px;

  /* Focus ring */
  --ring: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* ==== Base & Typography ==== */
html, body { height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(13,110,253,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-page), #fff);
}
a{ color: var(--brand); text-decoration: none; }
a:hover{ color: var(--brand-600); text-decoration: underline; }

.brand-mark{ font-weight: 700; letter-spacing: .2px; color: var(--brand)!important; }
.section-title{
  font-weight: 700; color: var(--text);
  margin-bottom: .75rem; letter-spacing: .2px;
  position: relative; display: inline-block; padding-bottom: .25rem;
}
.section-title::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent 70%);
}
.lead-muted{ color: var(--text-muted); }

/* Improve default element visibility */
::placeholder{ color: #94a3b8; opacity: 1; }
:focus-visible{ outline: none; box-shadow: var(--ring); }

/* ==== Navbar ==== */
.navbar{
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.navbar-brand{ color: var(--brand)!important; }
.navbar .nav-link{
  color: var(--text)!important; font-weight: 600; opacity: .85;
}
.navbar .nav-link:hover{ opacity: 1; color: var(--brand)!important; }

/* Mobile toggler icon visibility on light nav */
.navbar-toggler{ border-color: rgba(16,24,40,.25) }
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(16,24,40,.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==== Cards / Containers ==== */
.hero-card,
.card,
.bg-surface{
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.card-accent{ border-top: 4px solid var(--brand); }

/* ==== Buttons ==== */
.btn-heritage{
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .65rem 1.1rem;
  font-weight: 600;
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-heritage:hover{ background: var(--brand-600); color: #fff; }
.btn-heritage:active{ transform: translateY(1px); }

.btn-outline-gilt{ /* repurposed as primary outline */
  border: 2px solid var(--brand);
  color: var(--brand);
  background: transparent;
  border-radius: 10px;
  padding: .6rem 1.05rem;
  font-weight: 600;
}
.btn-outline-gilt:hover{ background: var(--brand-50); }

/* Utility buttons (optional) */
.btn-success{ background: var(--success); color: #fff; border: none; border-radius: 10px; }
.btn-danger{ background: var(--danger); color: #fff; border: none; border-radius: 10px; }
.btn-info{ background: var(--info); color: #fff; border: none; border-radius: 10px; }

/* ==== Forms ==== */
.form-label, label{ font-weight: 600; color: var(--text-muted); }
.form-control, .form-select{
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: .6rem .75rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand); box-shadow: var(--ring);
}
.form-hint{ font-size: .85rem; color: var(--text-muted); }

/* ==== Tables ==== */
.table thead th{
  background: #eef2f9;
  border-bottom: 2px solid var(--border);
  color: var(--text);
}
.table-striped tbody tr:nth-of-type(odd){
  background-color: #f9fbff;
}
.table > :not(caption) > * > *{ padding: .65rem .75rem; }

/* ==== Alerts / Notices ==== */
.alert{
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: .75rem .9rem;
}
.alert-parchment{ background: #fff7e3; border-color: #ffe2a1; color: #6b4b0f; }
.alert-success{ background: #e9f7ef; border-color: #c9e9d6; color: #126a3a; }
.alert-danger{ background: #fde2e3; border-color: #f5c2c7; color: #842029; }
.alert-info{ background: #e7f0ff; border-color: #cfe0ff; color: #0a58ca; }

/* ==== Pills / Badges ==== */
.badge-soft{
  background: #e8f7f7;
  color: #036666;
  border: 1px solid #c7eded;
  border-radius: var(--r-pill);
  padding: .25rem .6rem;
  font-weight: 600;
}

/* ==== Footer ==== */
footer{
  background: #0b1320;
  color: #c7cfdb!important;
  border-top: 1px solid rgba(255,255,255,.08);
}
footer a{ color: #9ec5ff; }
footer a:hover{ text-decoration: underline; }


.preview-popover-wrap { max-width: 340px; }
.preview-popover .img-wrap { position: relative; }
.preview-popover img { display: block; width: 100%; height: auto; }
.preview-popover .hl {
  position: absolute;
  border: 2px solid #dc3545;
  background: rgba(220,53,69,.15);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset;
}



/* ==== Utilities ==== */
.shadow-soft{ box-shadow: var(--shadow); }
.border-brand{ border-color: var(--brand)!important; }
.text-brand{ color: var(--brand)!important; }
.bg-page{ background: var(--bg-page)!important; }
.bg-surface{ background: var(--bg-surface)!important; }

/* Decorative divider */
.hr-ornate{
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #d6deea, transparent);
}

/* ==== Responsive Tweaks ==== */
@media (max-width: 576px){
  .section-title{ font-size: 1.25rem; }
  .navbar .nav-link{ font-weight: 600; }
}