:root{
  /* Light theme */
  --bg:#f4f6fb;
  --panel:#ffffff;
  --panel2:#f8f9fd;
  --text:#111827;
  --muted:#5b6477;
  --accent:#6d5efc;

  --good:#0f9d58;
  --warn:#b45309;
  --bad:#e11d48;

  --border:rgba(17,24,39,.10);
  --shadow: 0 10px 22px rgba(17,24,39,.08);
  --radius:16px;
  --maxw: 980px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background: var(--bg);
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--maxw); margin:0 auto; padding:20px}

.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.pad{padding:18px 18px}

.topbar{
  position:sticky; top:0; z-index:20;
  background: rgba(244,246,251,.85);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:800; letter-spacing:.2px;
}
.brand .dot{
  width:12px; height:12px; border-radius:999px;
  background:var(--accent);
  box-shadow: 0 0 0 6px rgba(109,94,252,.15);
}
.small{font-size:12px; color:var(--muted)}

.row{display:flex; gap:16px; align-items:stretch}
@media (max-width: 880px){ .row{flex-direction:column} }

.sidebar{
  min-width:260px;
  padding:14px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
}
.main{
  flex:1;
  padding:18px;
}

.nav{
  display:flex; flex-direction:column; gap:6px;
  margin-top:10px;
}
.nav a{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  display:flex; justify-content:space-between; align-items:center;
  background: rgba(17,24,39,.03);
}
.nav a:hover{
  background: rgba(17,24,39,.05);
}
.nav a.active{
  border-color: rgba(109,94,252,.35);
  background: rgba(109,94,252,.10);
}
.nav a.disabled{
  opacity:.55;
}

.badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  background: rgba(17,24,39,.02);
}
.badge.public{
  border-color: rgba(15,157,88,.30);
  color: rgba(15,157,88,.95);
  background: rgba(15,157,88,.06);
}
.badge.auth{
  border-color: rgba(180,83,9,.30);
  color: rgba(180,83,9,.95);
  background: rgba(180,83,9,.07);
}
.badge.perm{
  border-color: rgba(109,94,252,.35);
  color: rgba(109,94,252,.95);
  background: rgba(109,94,252,.08);
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 700px){ .grid{grid-template-columns:1fr} }

.kv{
  display:flex; flex-direction:column; gap:6px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(17,24,39,.02);
}
.kv code{
  font-family:var(--mono);
  font-size:12px;
  background: rgba(17,24,39,.05);
  padding:2px 6px;
  border-radius:8px;
  border:1px solid rgba(17,24,39,.08);
}

hr.sep{
  border:none; border-top:1px solid var(--border);
  margin:14px 0;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.75);
  cursor:pointer;
  color:var(--text);
}
.btn:hover{background: rgba(255,255,255,.95)}
.btn.primary{
  border-color: rgba(109,94,252,.35);
  background: rgba(109,94,252,.10);
}
.btn.primary:hover{background: rgba(109,94,252,.14)}
.btn.danger{
  border-color: rgba(225,29,72,.30);
  background: rgba(225,29,72,.08);
}
.btn.danger:hover{background: rgba(225,29,72,.12)}
.btn:disabled{opacity:.6; cursor:not-allowed}

input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.90);
  color:var(--text);
}
input:focus{
  outline:none;
  border-color: rgba(109,94,252,.45);
  box-shadow: 0 0 0 4px rgba(109,94,252,.14);
}
label{display:block; margin:10px 0 6px; color:var(--muted); font-size:13px}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  background: rgba(255,255,255,.85);
  text-align:left;
  vertical-align:top;
  font-size:13px;
}
.table th{
  background: rgba(17,24,39,.03);
  color:var(--muted);
  font-weight:700
}
.table tr:last-child td{border-bottom:none}

.h1{font-size:22px; margin:0 0 8px}
.h2{font-size:16px; margin:0 0 8px; color:var(--muted); font-weight:700}

.note{
  border-left:3px solid rgba(109,94,252,.55);
  padding:10px 12px;
  background: rgba(109,94,252,.07);
  border-radius:12px;
  margin-top:10px;
}
.denied{
  border-left:3px solid rgba(225,29,72,.55);
  padding:14px 14px;
  background: rgba(225,29,72,.07);
  border-radius:14px;
}
.ok{
  border-left:3px solid rgba(15,157,88,.55);
  padding:14px 14px;
  background: rgba(15,157,88,.07);
  border-radius:14px;
}

.footer{
  margin-top:18px;
  color:var(--muted);
  font-size:12px;
}


/* ---- Layout stability overrides ---- */
.row{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 880px){
  .row{ grid-template-columns: 1fr; }
}

.sidebar{
  width:320px;
  max-width:320px;
  min-width:320px;
}

.main{
  min-width: 0; /* allow wrapping instead of forcing shrink */
}

/* Make long strings wrap instead of expanding columns */
.kv, .denied, .ok, .note, .table, .main, .sidebar{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.kv code{
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space: normal;
}

.nav a span{
  min-width:0;
}

/* ---- Help tables readability ---- */
/* Prevent awkward word splitting in first/last columns (Role / Who) */
.table.roles th:nth-child(1),
.table.roles td:nth-child(1),
.table.roles th:nth-child(3),
.table.roles td:nth-child(3){
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Give those columns some reasonable width */
.table.roles th:nth-child(1), .table.roles td:nth-child(1){ width: 120px; }
.table.roles th:nth-child(3), .table.roles td:nth-child(3){ width: 140px; }

/* Allow permissions column to wrap nicely */
.table.roles th:nth-child(2),
.table.roles td:nth-child(2){
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ---- Mobile / responsive fixes ---- */
/* Prevent ugly single-letter wraps */
.h1, .h2, .badge, .btn{
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.badge{ white-space: nowrap; }

/* On small screens, do NOT keep fixed sidebar width */
@media (max-width: 880px){
  .sidebar{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Titles: scale down a bit on very small screens to avoid breaking */
@media (max-width: 420px){
  .h1{ font-size: 20px; }
}

/* Tables: instead of breaking words into letters, allow horizontal scroll */
@media (max-width: 520px){
  .table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
  .table th, .table td{
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  .table.roles th:nth-child(2), .table.roles td:nth-child(2){
    min-width: 240px;
  }
}