/* /assets/app.css */

/* ===== Brand palette ===== */
:root{
  --s4-black:#000;
  --s4-dark:#0f0f10;
  --s4-mid:#1a1b1e;
  --s4-white:#fff;

  /* Accent (BLACK) */
  --accent:#000;
  --accent-600:#111;
  --accent-700:#222;
  --accent-100:#f2f2f2;
  --accent-contrast:#fff;
  --accent-ring:rgba(0,0,0,.25);
}

/* ===== Page layout (sticky footer) ===== */
html,body{height:100%;}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#fff;            /* default: white pages */
}
main{ flex:1 0 auto; }

/* ===== Header & Footer ===== */
.navbar-studio,
.footer-studio{
  background:var(--s4-black);
  color:var(--s4-white);
}
.navbar-studio .navbar-brand,
.navbar-studio .nav-link{ color:rgba(255,255,255,.85); }
.navbar-studio .nav-link:hover,
.navbar-studio .nav-link:focus,
.navbar-studio .nav-link.active{ color:#fff; }

/* Buttons in the black navbar */
.navbar-studio .btn-outline-secondary{
  color:#fff; border-color:rgba(255,255,255,.6);
}
.navbar-studio .btn-outline-secondary:hover,
.navbar-studio .btn-outline-secondary:focus{
  color:#000; background:#fff; border-color:#fff;
}
.navbar-studio .btn-primary{
  color:#000; background:#fff; border-color:#fff; /* readable on black bar */
}

.footer-studio a{
  color:#fff; text-decoration:underline dotted;
}

/* subtle spacing below header */
.main-wrap{ padding-top:1rem; }

/* ===== Optional dark page mode ===== */
body.brand-dark{ background:var(--s4-dark); color:var(--s4-white); }
body.brand-dark .card{
  background:var(--s4-mid); color:var(--s4-white); border-color:#2a2b2f;
}
body.brand-dark .table{ color:var(--s4-white); }

/* ===== Login page ===== */
.login-body{
  min-height:100svh;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#0f0f10 0%, #121316 100%);
  color:#fff;
}
.login-shell{ width:100%; max-width:460px; padding:24px; }
.login-card{ border-radius:14px; overflow:hidden; }
.login-card .card-body{ padding:28px; }
.login-logo{ height:56px; }
.login-muted{ color:rgba(255,255,255,.7); }
.login-card .form-control{
  background:#fff; color:#111; border-color:#e5e5e5;
}
.login-card .btn-primary{ width:100%; }

/* ===== Small polish ===== */
.table-sm td, .table-sm th{ vertical-align:middle; }

/* ================================================================== */
/* =====================  BLACK ACCENT THEME  ======================= */
/* ================================================================== */

/* Primary buttons */
.btn-primary{
  color:var(--accent-contrast);
  background-color:var(--accent);
  border-color:var(--accent);
}
.btn-primary:hover,
.btn-primary:focus{
  background-color:var(--accent-600);
  border-color:var(--accent-600);
}
.btn-primary:active{
  background-color:var(--accent-700) !important;
  border-color:var(--accent-700) !important;
}

/* Outline primary */
.btn-outline-primary{
  color:var(--accent);
  border-color:var(--accent);
  background-color:transparent;
  font-weight:600;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  color:var(--accent-contrast);
  background-color:var(--accent);
  border-color:var(--accent);
}

/* Brand-black disabled states */
.btn-primary{
  --bs-btn-disabled-color: var(--accent-contrast);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-disabled-opacity: .45;
}

.btn-outline-primary{
  --bs-btn-disabled-color: #7a7a7a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #bfbfbf;
  --bs-btn-disabled-opacity: 1;
}

/* Focus ring (inputs/selects/buttons) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus{
  box-shadow:0 0 0 .25rem var(--accent-ring);
  border-color:var(--accent-600);
}

/* Switches/checkboxes/radios checked state */
.form-check-input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
}

/* ===== Content links (bold black). Navbar/footer keep their white links. */
main a:not(.btn), .card a:not(.btn){
  color:#000;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
main a:not(.btn):hover,
main a:not(.btn):focus,
.card a:not(.btn):hover,
.card a:not(.btn):focus{
  color:#222;
  text-decoration-thickness:2px;
}

/* Pills / badges / pagination */
.badge.bg-primary,
.nav-pills .nav-link.active{
  background-color:var(--accent) !important;
  color:var(--accent-contrast) !important;
}
.page-link{ color:var(--accent); }
.page-item.active .page-link{
  background-color:var(--accent);
  border-color:var(--accent);
  color:var(--accent-contrast);
}

/* Soft background helper */
.bg-accent-100{ background-color:var(--accent-100) !important; }

/* ===== Tabs (use black accent) ===== */
.nav-tabs .nav-link{
  color:#111;
  font-weight:600;
  border: var(--bs-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus{
  color:#000;
  border-color:#e9ecef #e9ecef #fff; /* match BS default, keep bottom clean */
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  color:#000;
  background-color:#fff;
  border-color:#000 #000 #fff; /* black top/sides, fuse bottom into pane */
  font-weight:700;
}

/* Keep accent readable on dark pages too */
body.brand-dark a,
body.brand-dark .link-primary{ color:#fff; font-weight:600; text-decoration:underline; }