:root{
  --bg:#0b0909;
  --text:#fffefe;
  --muted:#2a2828;
  --accent:#850926;
  --accent-2:#b33b4a;
  --ok:#2aa36b;
  --warn:#c68a15;
  --card:#151314;
  --line:#2f2b2c;
  --shadow:0 6px 20px rgba(0,0,0,.25);
  --radius:14px;
  --radius-sm:10px;
  --pad:18px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.45;
}
a{color:var(--accent); text-decoration:none}
a:hover{ text-decoration:underline }
img{max-width:100%; height:auto}

/* Layout */
.app{
  max-width:1100px; margin:0 auto; padding:28px 20px 60px;
}
.header{
  display:flex; align-items:center; gap:6px; margin-bottom:24px;
}
.header img.logo{width:44px; height:44px; border-radius:0px; zoom: 120%;}
.header img.nova_logo{width:200px; height:auto; border-radius:0px; zoom: 120%;}
.header .brand{font-weight:700; font-size: 1.4rem; letter-spacing:.2px; color: #818080;}
.highlight {
  color: var(--accent); /* or red */
  display: inline-block;
  font-weight: 400;
}
.nav{
  margin-left:auto; display:flex; gap:16px; flex-wrap:wrap;
}
.nav a{
  display:inline-block; padding:8px 12px; background:var(--muted);
  border-radius:10px; border:1px solid var(--line);
}
.nav a[aria-current="page"]{ outline:2px solid var(--accent) }

/* Cards / panels */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.card.pad{ padding:var(--pad) }
.grid{
  display:grid; gap:16px;
}
.grid.cols-2{ grid-template-columns:1fr 1fr }
.grid.cols-3{ grid-template-columns:repeat(3, 1fr) }
.grid.cols-4{ grid-template-columns:repeat(4, 1fr) }
@media (max-width:900px){
  .grid.cols-4{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:640px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr }
}

/* Forms */
label{display:block; margin-bottom:6px; font-size:.95rem; color:#e9e6e6}
input,select,textarea,button{
  font:inherit; color:inherit;
}
.input, .select, .textarea{
  width:100%; padding:12px 12px; background:#100f0f; color:var(--text);
  border:1px solid var(--line); border-radius:12px;
}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:640px){ .row{ grid-template-columns:1fr } }

.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--muted);
}
.btn.primary{ background:var(--accent); border-color:#6c061d }
.btn.ghost{ background:transparent }
.btn.ok{ background:var(--ok); border-color:#1f7e52 }
.btn.warn{ background:var(--warn); border-color:#a37110 }

/* KPI strip */
.kpi{
  padding:14px; border-radius:12px; background:#121011; border:1px solid var(--line);
}
.kpi .label{ color:#d2cccc; font-size:.85rem }
.kpi .value{ font-size:1.35rem; font-weight:700; margin-top:4px }
.kpi.accent{ border-color:#5b0d1f; outline:2px solid rgba(133,9,38,.35) }

/* Tables */
.table{
  width:100%; border-collapse:collapse; overflow:auto; border-radius:12px; border:1px solid var(--line);
}
.table th, .table td{
  padding:12px; border-bottom:1px solid var(--line); text-align:left;
}
.table th{ background:#131112; color:#dcd8d8; font-weight:600 }
.table tr:hover td{ background:#141214 }

/* Helpers */
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.center{ text-align:center }
.right{ text-align:right }
.badge{
  display:inline-block; padding:4px 8px; border-radius:999px; background:#1a1718; border:1px solid var(--line); font-size:.85rem
}
.hr{ height:1px; background:var(--line); margin:14px 0 }
.note{ color:#bfbaba; font-size:.95rem }
.page-title{ font-size:1.6rem; font-weight:800; letter-spacing:.3px; margin:6px 0 14px }

/* Login page */
.login-wrap{
  max-width:440px; margin:8vh auto; padding:24px; text-align:left;
}
.logo-head{
  display:flex; align-items:center; gap:5px; margin-bottom:10px;
}
.logo-head img{ width:56px; height:56px; border-radius:0px }

/* Footer */
.footer{
  margin-top:28px; color:#bfbaba; font-size:.9rem; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.hero-logo {
  margin-bottom: 28px;
}
.hero-logo .logo-big{
  width: 120px;
  height: auto;
  zoom: 250%;
  margin-bottom: 10px;
}
 
.hero-logo .page-title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 800;
}
.hero-logo .tagline {
  margin: 6px 0 0;
  font-size: 1rem;
  font-style: italic;
  color: #8a8989;
}
/* --- PAeryllMate additions --- */
.header .brand { font-weight: 800; letter-spacing: -0.4px; }
.header .brand .highlight { color: var(--accent); display:inline-block; margin-left:-2px; margin-right:-2px; }

.section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.section-head h2 { margin:0; font-size:1.15rem; }

.banner {
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#141213; color:#e9e6e6; font-size:.95rem;
}
.banner.warn { border-color:#7a101f; outline:2px solid rgba(133,9,38,.25); }
.metric-list { display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
@media (max-width:640px){ .metric-list{grid-template-columns:1fr} }

.small { font-size:.92rem; color:#cfcaca; }

/* Rota Update tweaks */
.rota-table .select { min-width: 160px; }
.rota-table input[type="number"] { width: 120px; }
.rota-table input.rate, .rota-table input.pay { width: 130px; }
.rota-table input.notes { min-width: 220px; }
.rota-table { scroll-margin-top: 90px; } /* adjust to your header height */

/* Disabled-looking buttons (no JS) */
.btn[aria-disabled="true"] {
  opacity:.45; pointer-events:none; filter:grayscale(20%);
}
/* Compact page subtitle */
.page-subtitle { margin:0 0 8px; font-size:1.05rem; color:#d2cccc; }
/* Approvals segment */
.filters .row { margin-bottom: 6px; }
.table.compact th, .table.compact td { padding: 10px; }
.nowrap { white-space: nowrap; }

/* Print-friendly tweaks for server-rendered PDFs or browser print */
@media print {
  .nav, .footer, .actions { display: none !important; }
  .card { box-shadow: none; border-color: #000; }
  .kpi { outline: none; }
}


.profile-card { position:relative; overflow:hidden; }
.profile-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, transparent, rgba(133,9,38,.8), transparent);
}
.card { transition: transform .15s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
/*Flash messages styles*/
.flash {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: .95rem;
}
.flash.error { background:#3a1015; border:1px solid #850926; color:#ffb3b3; }
.flash.warn  { background:#3a2a15; border:1px solid #c68a15; color:#ffe3a0; }
.flash.ok    { background:#103a24; border:1px solid #ffffff; color:#c9ebd5; }


.badge.active   { background:#1d7a46; }
.badge.inactive { background:#7a1d1d; }

.footer .note { opacity: .85; letter-spacing: .2px; }

.credit-vivid {
  font-weight: 700;
  letter-spacing: .3px;
  background: linear-gradient(90deg,#ff5f6d,#ffc371,#f9c74f,#43aa8b,#4d96ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;  /* gradient text */
  text-shadow: 0 0 10px rgba(255,255,255,.06);
  display: inline-block;
}
.credit-vivid::before {
  content: "★ ";
  opacity: .6;
}
.credit-vivid::after {
  content: " ★";
  opacity: .6;
}

/*Temp dev*/

/* === Add to static/css/main.css (Rota tiles: make whole box clickable) === */
.icon-link { display:block; text-decoration:none; color:inherit; }
.icon-box { cursor:pointer; transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease; }
.icon-box:hover { transform: translateY(-2px); border-color:#3a3436; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.icon-box:focus-visible { outline:2px solid #cf3a51; outline-offset:3px; }



.feature-card {
  background: #161415;
  border: 1px solid var(--line, #2a2627);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  margin-bottom: 18px;
}
.feature-card h3 {
  margin: 0 0 6px;
  font-size: 28px;
}
.feature-card .lead {
  color: #c9c6c6;
  margin: 0 0 18px;
  line-height: 1.5;
}
.feature-card .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: end;
}
.icon-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  background: #1d1a1b;
  border: 1px solid #2a2627;
}
.icon {
  width: 64px; height: 64px; flex: 0 0 64px;
  color: #bdbaba;
}
.icon * { stroke: currentColor; }
.actions {
  display: flex; gap: 12px; margin-top: 12px;
}
.btn-tile {
  display: inline-block; text-align: center;
  padding: 10px 16px; border-radius: 10px;
  background: #252224; border: 1px solid #2e2a2b;
  color: #9b2a3b;  /* subtle maroon text */
  font-weight: 600; text-decoration: none;
  transition: transform .08s ease, border-color .15s ease, color .15s ease;
}
.btn-tile:hover { transform: translateY(-1px); border-color: #3a3436; color: #cf3a51; }
.btn-tile:active { transform: translateY(0); }
.btn-accent {
  background: #2a2526; color: #fffefe; border-color:#40383b;
}
.btn-accent:hover { color:#fffefe; border-color:#5a4e52; }
.badge-note {
  display:inline-block; margin-left:10px; padding:2px 8px;
  border-radius:999px; font-size:12px; color:#c9c6c6; border:1px solid #2e2a2b;
}
@media (max-width: 680px){
  .feature-card .grid { grid-template-columns: 1fr; }
}

/* ——— Rota View polish ——— */
.view-hero {
  background: radial-gradient(1200px 400px at 10% -10%, rgba(133,9,38,.25), transparent),
              linear-gradient(180deg, #171415, #141213);
  border: 1px solid var(--line, #2a2627);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.view-hero .avatar {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; border: 1px solid #2e2a2b;
  background: #1e1b1c;
}
.view-hero .title {
  font-size: 22px; margin: 0 0 4px;
}
.view-hero .sub { color:#a9a6a6; margin:0; }
.month-chip, .status-chip {
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px;
  border:1px solid #332b2d; background:#1f1b1c; color:#d2cfd0; margin-left:8px;
}
.status-chip.ok { border-color:#2d3b2f; color:#bfe3c7; background:#1b1f1c; }
.status-chip.locked { border-color:#403436; color:#e3bfc6; background:#20191b; }

/* KPIs */
.kpi-row { display:flex; flex-wrap:wrap; gap:10px; margin: 0 0 8px; }
.kpi {
  background:#1c191a; border:1px solid #2a2627; border-radius:12px; padding:10px 12px;
  font-weight:600; color:#eceaea;
}
.kpi small { display:block; color:#a9a6a6; font-weight:400; }

/* Sleek table */
.table.sleek { border-collapse: separate; border-spacing: 0 6px; }
.table.sleek thead th { color:#c9c6c6; font-weight:600; }
.table.sleek tbody tr { background:#181516; border:1px solid #282325; }
.table.sleek tbody tr td { padding:10px 12px; }
.table.sleek tbody tr.weekend { background:#171417; border-color:#2a2327; }
.table.sleek tbody tr.today { outline:1px dashed #3a3335; outline-offset: -1px; }

/* Shift pills */
.shift-pill {
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px;
  border:1px solid; letter-spacing:.2px;
}
.shift-Morning { color:#dcd1b0; border-color:#4b4331; background:#1b1915; }
.shift-Night { color:#bfd7ff; border-color:#2f3a4b; background:#12161c; }
.shift-Off { color:#b9b6b6; border-color:#343031; background:#161314; }
.shift-Annual\ Leave { color:#cfe8c3; border-color:#334236; background:#121713; }
.shift-PH-Morning { color:#ffd5c7; border-color:#5a3a30; background:#201413; }
.shift-PH-Night { color:#ffd5c7; border-color:#5a3a30; background:#201413; }

/* Notes */
.note-subtle { color:#a7a4a4; }

/* Responsive tables inside cards */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;          /* keeps the card’s rounded feel */
}

/* Give the table a sensible minimum so columns don’t crush */
.table.responsive { min-width: 720px; }

/* Slightly tighter padding for small screens */
@media (max-width: 520px){
  .table.responsive th,
  .table.responsive td { padding: 8px 10px; }
}

/* Optional: nicer thin scrollbar on mobile/Chrome */
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #2e2a2b; border-radius: 8px;
}
/* Responsive tables inside cards */
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px; }
.table.responsive { min-width: 720px; }
@media (max-width:520px){
  .table.responsive th, .table.responsive td { padding:8px 10px; }
}

@media print {
  html, body { background:#fff !important; color:#000 !important; }
  .card { background:#fff !important; border-color:#000 !important; box-shadow:none !important; }
  .table th, .table td { color:#000000 !important; border-bottom-color:#000 !important; }
}
/* ===== Users Admin — Card Layout (scoped) ===== */
.users-admin .users-cards__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}

.users-admin .users-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  background:#0f0d0e; /* matches dark theme */
}

.users-admin .users-card__avatar{
  display:flex; justify-content:center; margin-bottom:12px;
}
.users-admin .users-card__avatar img{
  width:70px; height:70px; border-radius:50%;
  object-fit:cover; border:1px solid var(--line);
}

.users-admin .users-card__form,
.users-admin .users-card__inlineform{ margin:0; }

.users-admin .users-card__row{
  display:flex; flex-direction:column; gap:6px; margin-bottom:10px;
}
.users-admin .users-card__row--inline{ flex-direction:row; align-items:center; gap:10px; }

.users-admin .users-card__row label{
  font-weight:600; color:#fff;
}

.users-admin .users-card__actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;
}
.users-admin .users-card .btn{ white-space:nowrap; }

.users-admin code{ overflow-wrap:anywhere; word-break:break-word; }

/* Desktop nicety: two-column form inside a card */
@media (min-width: 900px){
  .users-admin .users-card__form{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px 16px;
  }
  .users-admin .users-card__form .users-card__row:nth-child(3){ grid-column: span 2; } /* Email full width */
  .users-admin .users-card__form .users-card__row:nth-child(4){ grid-column: span 2; } /* Active inline */
  .users-admin .users-card__form .users-card__row:nth-child(5){ grid-column: span 2; } /* Photo path full width */
  .users-admin .users-card__form .users-card__actions{ grid-column: span 2; }
}