/* /style.css */

/*
 * =========================================
 *  Dynamiki Brand CSS Color Palette
 * =========================================
 */
:root {
  --dynamiki-red: #b52024;
  --dynamiki-blue: #1d3c69;
  --dynamiki-gray: #aaaaaa;
  --dynamiki-light-gray: #f8f9fa; /* A standard light gray for backgrounds */
  --dynamiki-dark-text: #343a40; /* A standard dark color for text */
}

/*
 * =========================================
 *  Bootstrap 5 Variable Overrides
 * =========================================
 *  This makes Bootstrap's default components (like buttons) use our brand colors.
 */
body {
  --bs-primary: var(--dynamiki-blue);
  --bs-primary-rgb: 29, 60, 105;
  --bs-secondary: var(--dynamiki-gray);
  --bs-danger: var(--dynamiki-red);
  --bs-body-color: var(--dynamiki-dark-text);
  --bs-link-color: var(--dynamiki-blue);
  --bs-link-hover-color: var(--dynamiki-red);
}

/*
 * =========================================
 *  Custom Styles & Logo Integration
 * =========================================
 */
.navbar-brand img {
  max-height: 40px; /* Controls the logo size in the navbar */
  margin-right: 10px;
}

.login-container {
  max-width: 480px;
  margin: 5rem auto;
}

.login-container .card-header {
  text-align: center;
  padding: 2rem;
  background-color: transparent;
  border-bottom: 0;
}

.login-container .card-header img {
  max-width: 80%;
  height: auto;
}

/* ===== Dynamiki Brand Theme (activates when body.brand-dynamiki is present) ===== */
:root {
  --dyn-red-600: #950d02;         /* primary */
  --dyn-red-700: #820b02;
  --dyn-navy-900: #0D2B45;        /* headings, links */
  --dyn-navy-700: #1D3D5C;
  --dyn-surface: #ffffff;         /* cards, navbar */
  --dyn-bg: #F6F7F9;              /* page background */
  --dyn-shadow: 0 10px 30px rgba(13,43,69,.08), 0 2px 8px rgba(13,43,69,.06);
}

body.brand-dynamiki {
  /* subtle paper/texture feel */
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(212,60,60,.05), transparent 60%),
    radial-gradient(1200px 800px at 90% 10%, rgba(13,43,69,.05), transparent 60%),
    linear-gradient(#F8FAFC, #F6F7F9);
  color: var(--dyn-navy-900);
}

/* Navbar: clean white with slight blur + shadow */
body.brand-dynamiki .navbar-glass,
body.brand-dynamiki .navbar {
  background: var(--dyn-surface) !important;
  color: var(--dyn-navy-900);
  border-bottom: 1px solid rgba(13,43,69,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--dyn-shadow);
}
body.brand-dynamiki .navbar .navbar-brand,
body.brand-dynamiki .navbar .nav-link { color: var(--dyn-navy-900); }
body.brand-dynamiki .navbar .btn-outline-danger { border-color: rgba(212,60,60,.35); color: #C23232; }

/* Cards / shells (login, files, records) */
body.brand-dynamiki .glass-card,
body.brand-dynamiki .login-shell,
body.brand-dynamiki .card {
  background: var(--dyn-surface);
  border: 1px solid rgba(13,43,69,.08);
  box-shadow: var(--dyn-shadow);
  color: var(--dyn-navy-900);
}

/* Headings */
body.brand-dynamiki h1,
body.brand-dynamiki h2,
body.brand-dynamiki h3,
body.brand-dynamiki h4,
body.brand-dynamiki h5 {
  color: var(--dyn-navy-900);
  letter-spacing: -0.01em;
}

/* Primary button => Dynamiki red */
body.brand-dynamiki .btn-primary {
  background-color: var(--dyn-red-600);
  border-color: var(--dyn-red-600);
  color: #fff;
  border-radius: 999px;           /* pill look like site CTAs */
  box-shadow: 0 12px 24px rgba(212,60,60,.25), 0 2px 6px rgba(0,0,0,.08);
}
body.brand-dynamiki .btn-primary:hover { background-color: var(--dyn-red-700); border-color: var(--dyn-red-700); }
body.brand-dynamiki .btn-primary:active { transform: translateY(1px); }

/* Secondary/outline */
body.brand-dynamiki .btn-outline-secondary {
  color: var(--dyn-navy-900);
  border-color: rgba(13,43,69,.25);
  border-radius: 999px;
}

/* Links */
body.brand-dynamiki a,
body.brand-dynamiki .link-primary {
  color: var(--dyn-navy-900);
}
body.brand-dynamiki a:hover { color: var(--dyn-navy-700); }

/* Inputs */
body.brand-dynamiki .form-control,
body.brand-dynamiki .input-group-text {
  border-radius: 12px;
  border-color: rgba(13,43,69,.18);
}
body.brand-dynamiki .form-control:focus {
  border-color: rgba(149, 13, 2, 1.0);
  box-shadow: 0 0 0 .2rem rgba(212,60,60,.21);
}

/* Dropzone tweaks (files.html) */
body.brand-dynamiki .dropzone {
  background: #fff;
  border: 2px dashed rgba(13,43,69,.22);
}
body.brand-dynamiki .dropzone.dz-drag-hover {
  border-color: rgba(149, 13, 2, 1.0);
  box-shadow: 0 0 0 4px rgba(212,60,60,.12) inset;
}
body.brand-dynamiki .dz-preview .pdf-icon {
  background: rgba(212,60,60,.12);
  border-color: rgba(212,60,60,.25);
}

/* Badges / counters */
body.brand-dynamiki .badge.text-bg-light {
  background: #EFF3F7 !important; color: var(--dyn-navy-900) !important;
}

/* Login page left pane (optional accent doodles muted on light theme) */
body.brand-dynamiki .brand-pane {
  background: linear-gradient(180deg, rgba(212,60,60,.04), rgba(13,43,69,.03));
  color: var(--dyn-navy-900);
}
body.brand-dynamiki .welcome h1 { color: var(--dyn-navy-900); }
body.brand-dynamiki .welcome p { color: #475569; }

/* Light-mode mesh subtlety */
body.brand-dynamiki .mesh {
  filter: blur(20px) saturate(110%);
  opacity: .7;
}