:root{
  --espresso:#4a3225; --espresso-2:#6b4a34; --baize:#2f6149; --baize-2:#3c7a5c;
  --parchment:#f4eee4; --paper:#fffdf8; --line:#e0d6c6; --line-2:#d0c3ad;
  --ink:#2c2218; --muted:#8a7c68; --crit:#b23b2e; --warn:#b8860b; --ok:#2f6149;
  --shadow:0 1px 2px rgba(74,50,37,.06),0 8px 24px rgba(74,50,37,.06);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(47,97,73,.06), transparent),
    var(--parchment);
  min-height:100vh; font-size:15px; line-height:1.5;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:600; letter-spacing:-.01em; margin:0}
a{color:var(--baize)}
button{font-family:inherit;cursor:pointer}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 26px;background:var(--espresso);color:#f3eadd;
  position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px}
.mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--baize-2),var(--baize));color:#fff;
  font-family:"Fraunces",serif;font-weight:700;font-size:16px}
.brand-title{font-family:"Fraunces",serif;font-size:16px;color:#fbf6ee}
.brand-sub{font-size:11.5px;color:#cdbca8;letter-spacing:.06em;text-transform:uppercase}
#nav{display:flex;gap:4px;flex-wrap:wrap}
#nav a{color:#e8dcc9;text-decoration:none;padding:7px 13px;border-radius:8px;font-size:13.5px;font-weight:500}
#nav a:hover{background:rgba(255,255,255,.08)}
#nav a.active{background:var(--baize);color:#fff}

main{max-width:1180px;margin:26px auto;padding:0 22px 60px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:30px}
.page-head p{margin:4px 0 0;color:var(--muted)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 22px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.stat .n{font-family:"Fraunces",serif;font-size:32px;font-weight:700;color:var(--espresso)}
.stat .l{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:2px}
.stat .bar{height:7px;border-radius:6px;background:#eadfce;margin-top:10px;overflow:hidden}
.stat .bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--baize),var(--baize-2))}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.panel h2{font-size:19px;margin-bottom:8px}
.panel .hint{color:var(--muted);font-size:13px;margin-bottom:12px}

/* table */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
tbody tr:hover{background:#faf6ee}
td.num,th.num{text-align:center}
.row-click{cursor:pointer}

.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
.badge.full{background:#e3efe8;color:var(--ok)}
.badge.partial{background:#f6edd6;color:var(--warn)}
.badge.critical{background:#f6e0dc;color:var(--crit)}
.badge.custom{background:#ece6db;color:var(--muted)}
.badge.Active{background:#e3efe8;color:var(--ok)}
.badge.OnLeave{background:#f6edd6;color:var(--warn)}
.badge.Inactive{background:#eee;color:var(--muted)}

/* buttons */
.btn{border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  padding:8px 14px;border-radius:9px;font-size:13.5px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--espresso-2)}
.btn.primary{background:var(--espresso);color:#fbf3e8;border-color:var(--espresso)}
.btn.primary:hover{background:var(--espresso-2)}
.btn.green{background:var(--baize);color:#fff;border-color:var(--baize)}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:7px}
.btn.ghost{background:transparent}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}

/* forms */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
.field{display:flex;flex-direction:column;gap:4px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;color:var(--muted);font-weight:600}
input,select,textarea{font-family:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line-2);
  border-radius:8px;background:#fffefb;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--baize);box-shadow:0 0 0 3px rgba(47,97,73,.12)}
textarea{resize:vertical;min-height:54px}
.has-error {border-color: var(--crit); background: #fdf5f4;}
.error-msg {color: var(--crit); font-size: 11.5px; margin-top: 2px;}
.subhead{font-family:"Fraunces",serif;font-size:16px;margin:18px 0 8px;color:var(--espresso)}
.repeat-row{display:grid;gap:8px;grid-template-columns:repeat(6,1fr);align-items:end;margin-bottom:8px}
.repeat-row .field{gap:2px}
.muted{color:var(--muted)}
.right{text-align:right}
.flex{display:flex;gap:8px;align-items:center}
.spacer{flex:1}

/* drill-down */
.drill{background:#faf6ee;border-left:3px solid var(--baize);padding:8px 14px;margin:0 0 2px;font-size:13px}
.drill .dz{display:flex;justify-content:space-between;padding:3px 0}

.toast{position:fixed;right:18px;bottom:18px;background:var(--espresso);color:#fff;padding:11px 16px;
  border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.25s;z-index:50;font-size:13.5px}
.toast.show{opacity:1;transform:none}
.toast.err{background:var(--crit)}

.empty{text-align:center;color:var(--muted);padding:30px}
.loader{color:var(--muted);padding:20px}
@media(max-width:760px){.cards{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.repeat-row{grid-template-columns:1fr 1fr}}

/* --- Premium Form Tabs, Modal & Table Editors --- */
.tab-layout { display: flex; gap: 24px; margin-top: 20px; align-items: flex-start; }
.tab-menu { width: 260px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); position: sticky; top: 90px; }
.tab-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 10px 14px; border: none; background: none; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; transition: 0.2s; margin-bottom: 4px; }
.tab-btn:hover { background: rgba(47, 97, 73, 0.05); color: var(--baize); }
.tab-btn.active { background: var(--baize); color: #fff; font-weight: 600; }
.tab-btn .badge { margin-left: 8px; font-size: 10.5px; padding: 1px 6px; }
.tab-content { flex: 1; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); min-height: 600px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.2s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(44, 34, 24, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-box { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; width: 90%; max-width: 900px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 12px 36px rgba(44, 34, 24, 0.16); animation: scaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes scaleUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header { padding: 16px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; background: #faf6ee; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.modal-header h3 { font-size: 18px; color: var(--espresso); }
.modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 12px; background: #faf6ee; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }

.diff-container { display: flex; flex-direction: column; gap: 14px; }
.diff-item { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.diff-item-header { background: #faf6ee; padding: 8px 12px; font-weight: 600; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 13.5px; }
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; }
.diff-side { padding: 12px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.diff-side.old { background: #fdf5f4; color: #a8352a; border-right: 1px solid var(--line); }
.diff-side.new { background: #e3efe8; color: #23543d; }
.diff-side-title { font-size: 11px; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.05em; color: var(--muted); }

.table-editor-container { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.table-editor { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-editor th, .table-editor td { padding: 8px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.table-editor th:last-child, .table-editor td:last-child { border-right: none; }
.table-editor th { background: #faf6ee; color: var(--espresso); font-weight: 600; font-size: 12px; }
.table-editor input, .table-editor select { width: 100%; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 4px; font-size: 13px; background: #fffefb; }
.table-editor input:focus, .table-editor select:focus { outline: none; border-color: var(--baize); }
.table-editor td.actions { width: 50px; text-align: center; }

.btn-danger { background: var(--crit); color: #fff; border-color: var(--crit); }
.btn-danger:hover { background: #962f25; border-color: #962f25; }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { background: #f5edd6; }