:root{
  --bg:#14110f;
  --card:#1c1917;
  --text:#f4f4f5;
  --muted:#a1a1aa;

  /* Dark-red theme */
  --accent:#B6232B;        /* primary */
  --accent-600:#991b1f;    /* hover/active */
  --accent-contrast:#ffffff;

  --chip:#2a2522;
  --border:#26221f;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.5 system-ui,Segoe UI,Roboto;
}
a{color:var(--text);text-decoration:none}

/* Small role pill */
.badge{
  padding:4px 8px;border-radius:999px;
  background:#3a0f11;color:#ffc3c7;font-size:12px;
}

/* Layout */
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{
  background:#0f0c0b;border-right:1px solid var(--border);
  padding:16px;position:sticky;top:0;height:100vh
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;margin-bottom:12px}

.nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;margin:6px 0;opacity:.9;
  transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.nav a.active,.nav a:hover{
  background:var(--accent);color:var(--accent-contrast);opacity:1;
}

.content{padding:20px}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  background:#120e0c;border-bottom:1px solid var(--border);
  padding:12px 16px;border-radius:16px
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px
}

/* Forms - inputs & selects */
label{display:block;margin:10px 0 6px;color:var(--muted)}

input, select{
  width:100%;
  padding:12px 14px;
  border:1px solid #2a2f39;border-radius:10px;
  background:#11141a;color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Custom select look (with arrow) */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:38px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'>\
<path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
}
select:focus{ outline:0; border-color:var(--accent-600); box-shadow:0 0 0 3px rgba(182,35,43,.25) }
option{ background:#11141a; color:var(--text); }

/* Inputs focus */
input:focus{
  outline:0; border-color:var(--accent-600);
  box-shadow:0 0 0 3px rgba(182,35,43,.25);
}

/* Buttons (no full width by default) */
button{
  width:auto;                /* <- changed */
  margin-top:16px;
  padding:12px 16px;
  border:0;border-radius:10px;
  background:var(--accent); color:var(--accent-contrast);
  font-weight:800; cursor:pointer;
  transition:background .15s ease, transform .02s ease-in;
}
button:hover{ background:var(--accent-600) }
button:active{ transform:scale(.99) }
button[disabled]{opacity:.6;cursor:not-allowed}

/* Prevent grid buttons in forms (e.g., Settings) from stretching full row */
.card form button{ justify-self:start }

/* Errors / notices */
.error{color:#ff6b6b;margin-top:8px}

/* Login */
.login-wrap{
  min-height:100vh;display:grid;place-items:center;
  background:#0b0b10 url('/assets/img/login-bg.jpg') center/cover no-repeat fixed;
  position:relative;
}
.login-wrap::after{
  content:"";position:fixed;inset:0;
  background:linear-gradient(120deg, rgba(182,35,43,.25), rgba(0,0,0,.45));
  pointer-events:none;
}
.login-card{
  width:100%;max-width:420px;background:rgba(20,17,15,.86);
  border:1px solid #2a211c;border-radius:18px;padding:28px;backdrop-filter:blur(8px)
}
.login-card h1{margin:0 0 10px}
/* keep login button full-width */
.login-card button{ width:100% }

/* Clients module extras */
.gridCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.clientCard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;display:block;transition:transform .05s ease, border-color .15s}
.clientCard:hover{transform:translateY(-1px);border-color:var(--accent)}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#2a2222;color:#ffd6d6}
.tabs button{margin:0;padding:8px 12px}
/* Themed file input */
input[type=file]{
  width:100%;
  padding:8px 12px;
  border:1px solid #2a2f39;
  border-radius:10px;
  background:#11141a;
  color:var(--muted);
}
input[type=file]::file-selector-button{
  background:var(--accent);
  color:var(--accent-contrast);
  border:0; border-radius:8px;
  padding:8px 12px;
  margin-right:10px;
  cursor:pointer;
}
input[type=file]::file-selector-button:hover{ background:var(--accent-600) }

.tabs a.tabBtn{display:inline-block;background:#191514;color:inherit;
  padding:6px 10px;border-radius:8px;text-decoration:none}
.tabs a.tabBtn.active{background:var(--accent)}