:root{
  --bg:#f5f5f5;
  --surface:#ffffff;
  --teal:#dff1f1;
  --slate:#bbd5da;
  --red:#ff0000;
  --ink:#1c2320;
  --ink-soft:#3f4a48;
  --muted:#6b7877;
  --line:#d7dedd;
  --radius:14px;
  --deep:#1c2320;
  --panel:#f8f9f9;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.5;
}
h1,h2,.num{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
button{
  font-family:inherit;cursor:pointer;
  transition: all 0.18s ease;
}
button:hover{transform:translateY(-1px);}
.shell{
  display:grid;
  grid-template-columns:232px 1fr;
  min-height:100vh;
}

.sidebar{
  background:var(--ink);
  color:#eef3f2;
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  gap:34px;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(155deg, var(--slate), var(--teal) 60%);
  position:relative;flex:none;
}
.brand-mark::after{
  content:"";position:absolute;inset:9px;border-radius:3px;background:var(--ink);
}
.brand-name{font-family:'Fraunces',serif;font-size:19px;color:#fff;}
.brand-sub{font-size:11px;color:#8fa3a1;margin-top:1px;}

nav.mainnav{display:flex;flex-direction:column;gap:2px;}
.sis-subnav{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 12px;padding-left:10px;border-left:1px solid rgba(223,241,241,.2);}
.sis-menu-toggle{width:100%;border:0;background:transparent;text-align:left;}
.sis-menu-toggle:hover{transform:none;}
.sis-menu-chevron{margin-left:auto;transition:transform .18s ease;}
.sis-menu-toggle.expanded .sis-menu-chevron{transform:rotate(180deg);}
.sis-subnav:not(.open){display:none;}
.sis-subnav .navlink{padding-top:7px;padding-bottom:7px;font-size:12.5px;}
.navgroup-label{font-size:11px;color:#7c918f;margin:14px 4px 6px;}
.navlink{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:9px;
  color:#c9d6d4;font-size:13.5px;font-weight:500;
  border-left:2px solid transparent;
}
.navlink svg{flex:none;opacity:.85;}
.navlink:hover{background:rgba(255,255,255,.06);color:#fff;}
.navlink.active{background:rgba(223,241,241,.1);color:#fff;border-left-color:var(--red);}

.sidebar-foot{
  margin-top:auto;
  display:flex;align-items:center;gap:10px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--slate);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink);font-weight:700;}
.foot-name{font-size:13px;color:#eef3f2;}
.foot-role{font-size:11px;color:#8fa3a1;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 26px 15px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);
}
.topbar-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0;}
.topbar .brand{flex:none;}
.topbar .brand-name{color:var(--ink);}
.topbar-search{
  flex:1; min-width:0; max-width:420px; position:relative; display:flex; align-items:center;
  background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:8px 12px 8px 14px;
}
.topbar-search input{
  width:100%; border:none; background:transparent; outline:none; color:var(--ink); font:inherit; font-size:13px;
}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
}
.btn{
  padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:600;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);
}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink);}

main{padding:30px 34px 60px;min-width:0;}

.pageheader{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap;
}
.pageheader h1{font-size:26px;margin:0 0 4px;}
.pageheader .date{color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:8px;}
.live-dot{width:7px;height:7px;border-radius:50%;background:#3f8f6f;display:inline-block;box-shadow:0 0 0 3px rgba(63,143,111,.18);}
.actions{display:flex;gap:10px;}

.todo-shell{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;overflow:hidden;
}
.todo-topline{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;
}
.todo-topline h2{margin:0;font-size:18px;}
.todo-summary{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:12.5px;
}
.pill{
  padding:5px 10px;border-radius:999px;background:var(--teal);border:1px solid var(--slate);color:var(--ink-soft);font-weight:600;
}

.todo-board{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;
}
.todo-column{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;min-height:700px;max-height:700px;
}
.todo-column-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;
}
.todo-column-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot.todo{background:#1f3d5d;}
.dot.monitor{background:#4d9fe9;}
.dot.next{background:#93c7d9;}
.count{background:#edf3f3;border:1px solid var(--line);color:var(--ink-soft);padding:3px 7px;border-radius:999px;font-size:11px;font-weight:700;}

.task-list{
  list-style:none;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow-y:auto;padding-right:4px;
}
.task-list::-webkit-scrollbar{width:8px;}
.task-list::-webkit-scrollbar-thumb{background:rgba(28,35,32,.24);border-radius:999px;}
.task-item{
  display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 10px 8px;
}
.task-item.overdue{
  background:linear-gradient(180deg, #fff8f8 0%, #fff 100%);
  border-color:#f1b3b3;
  box-shadow:inset 0 0 0 1px rgba(177, 40, 40, 0.05);
}
.task-check{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px;cursor:pointer;
}
.task-check.done{background:var(--ink);border-color:var(--ink);color:#fff;}
.task-check svg{width:11px;height:11px;display:block;}
.task-copy{flex:1;min-width:0;}
.task-text{display:block;font-size:13.5px;font-weight:600;word-break:break-word;}
.task-text.done{text-decoration:line-through;color:var(--muted);}
.task-meta{display:block;font-size:11px;color:var(--muted);margin-top:6px;}
.task-creator{display:block;font-size:10px;color:var(--muted);margin-top:0;white-space:nowrap;}
.task-meta.overdue{color:#b12828;font-weight:700;}
.task-actions{display:flex;align-items:center;gap:6px;}
.task-action-stack{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:32px;}
.mini-btn{
  width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
}
.mini-btn.delete:hover{border-color:#f1b3b3;color:#b53131;}
.mini-btn.monitor:hover{border-color:#b8d9f3;color:#266ca8;}
.mini-btn.edit:hover{border-color:#b8d9f3;color:#266ca8;}

.add-box{
  margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:8px;
}
.add-box input, .add-box .date-input{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 10px;font:inherit;font-size:13px;color:var(--ink);outline:none;
}
.add-box .date-input{min-height:38px;}
.add-row{display:flex;gap:8px;align-items:center;}
.add-row button,
.todo-column .submit,
.task-form .submit,
.confirm-actions .secondary,
.confirm-actions .danger,
.topbar .btn,
.topbar-actions .icon-btn,
.task-modal-card .modal-close,
.mini-btn {
  border:1px solid var(--line);
  border-radius:10px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.add-row button,
.todo-column .submit,
.task-form .submit,
.topbar .btn {
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  padding:10px 14px;
}
.add-row button:hover,
.todo-column .submit:hover,
.task-form .submit:hover,
.topbar .btn:hover {
  background:#2f3837;
  border-color:#2f3837;
}
.add-row label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);}

.task-modal {
  position:fixed; inset:0; background:rgba(13,18,22,.42); display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility .2s ease; z-index:80;
}
.task-modal.open { opacity:1; visibility:visible; pointer-events:auto; }
.task-modal-card {
  width:min(100%, 520px); max-height:calc(100vh - 40px); overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 42px rgba(17, 24, 29, 0.18);
  padding:20px; animation:modalRise .2s ease;
}
@keyframes modalRise { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.modal-title{font-family:'Fraunces',serif;font-size:22px;margin:0;}
.modal-close{
  width:34px;height:34px;background:var(--surface);font-size:24px;line-height:1;color:var(--ink-soft);
}
.task-form{display:grid;gap:14px;}
.task-form label{font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.task-form textarea, .task-form input[type="date"]{
  width:100%; border:1px solid var(--line); background:#fff; border-radius:12px; padding:11px 12px; font:inherit; color:var(--ink); resize:vertical; outline:none;
}
.task-form textarea:focus, .task-form input[type="date"]:focus{border-color:var(--slate);box-shadow:0 0 0 3px rgba(187,213,218,.25);}
.photo-field{display:grid;gap:7px;}
.photo-field>label{display:flex;align-items:center;gap:8px;}
.photo-optional{color:var(--muted);font-size:11px;font-weight:500;}
.photo-dropzone{position:relative;min-height:126px;display:flex;align-items:center;justify-content:center;padding:16px;border:1.5px dashed #b8cbca;border-radius:13px;background:linear-gradient(135deg,#f7fbfb,#f1f7f7);cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.photo-dropzone:hover,.photo-dropzone:focus-visible,.photo-dropzone.dragover{border-color:#719c9b;background:#edf6f5;box-shadow:0 0 0 3px rgba(187,213,218,.22);outline:none;}
.photo-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%);}
.photo-drop-content{display:grid;justify-items:center;gap:4px;text-align:center;pointer-events:none;}
.photo-upload-icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:2px;color:#416c6c;background:#e1eeee;border-radius:10px;}
.photo-upload-icon svg{width:19px;height:19px;}
.photo-drop-title{color:var(--ink-soft);font-size:12.5px;font-weight:600;}
.photo-drop-title span{color:#2f6868;text-decoration:underline;text-underline-offset:2px;}
.photo-drop-hint{max-width:330px;color:var(--muted);font-size:10.5px;line-height:1.45;}
.photo-preview-wrap{display:flex;align-items:center;gap:12px;width:100%;min-width:0;}
.photo-preview-wrap[hidden],.photo-drop-content[hidden],.photo-current-note[hidden]{display:none;}
.photo-preview{width:78px;height:68px;flex:none;object-fit:cover;background:#e9eeee;border:1px solid var(--line);border-radius:9px;}
.photo-preview-info{display:grid;gap:3px;min-width:0;}
.photo-preview-name{overflow:hidden;color:var(--ink-soft);font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;}
.photo-preview-note,.photo-current-note{color:var(--muted);font-size:10.5px;}
.photo-remove{display:grid;place-items:center;width:28px;height:28px;flex:none;margin-left:auto;color:#8d3434;background:#fff;border:1px solid #e6cccc;border-radius:8px;font-size:20px;line-height:1;}
.photo-current-note{display:block;}
.photo-error{color:#a52d2d;font-size:11px;}
.task-photo-modal{z-index:95;}
.task-photo-dialog{width:min(100%,900px);max-height:calc(100vh - 40px);overflow:auto;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 42px rgba(17,24,29,.24);}
.task-photo-dialog .modal-head{margin-bottom:12px;}
.task-photo-view{display:block;max-width:100%;max-height:calc(100vh - 120px);margin:0 auto;object-fit:contain;border-radius:9px;}
.photo-view-btn{color:#496b6a;}
.photo-view-btn:hover{border-color:#aac6c4;color:#285554;}
.task-notice{position:fixed;right:24px;bottom:24px;z-index:110;max-width:min(440px,calc(100vw - 32px));padding:12px 16px;color:#fff;background:var(--ink);border-radius:10px;box-shadow:0 8px 24px rgba(17,24,29,.2);font-size:13px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;}
.task-notice.show{opacity:1;transform:translateY(0);}
.task-form .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;}
.task-form button.submit{border:none;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;}
.task-form .right{display:flex;align-items:center;gap:12px;}
.checkbox-inline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.checkbox-inline input{accent-color:var(--ink);}

.confirm-box{display:grid;gap:16px;}
.confirm-message{margin:0;color:var(--muted);font-size:14px;}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;}
.confirm-actions .secondary{background:var(--surface);color:var(--ink-soft);padding:9px 14px;}
.confirm-actions .danger{background:#b92d2d;border-color:#b92d2d;color:#fff;padding:9px 14px;}
.confirm-actions .danger:hover{background:#a92626;border-color:#a92626;}
.confirm-actions .auth-login-link{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border:1px solid var(--ink);border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;}

@media (max-width:980px){
  .todo-board{grid-template-columns:1fr;}
  .todo-column{min-height:auto;}
}

@media (max-width:760px){
  .shell{grid-template-columns:1fr;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:40;width:230px;height:100vh;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.25)
  }
  .sidebar.open{transform:translateX(0);}
  .scrim{
    position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:30;opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .scrim.show{opacity:1;pointer-events:auto;}
  .topbar{padding:12px 16px;background:var(--surface);}
  .topbar-left{gap:10px;}
  .topbar-search{display:none;}
  .topbar .brand{gap:8px;}
  .topbar .brand-name{font-size:16px;color:var(--ink);}
  .hamburger{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;}
  main{padding:20px 16px 50px;}
  .actions .btn:not(.primary){display:none;}
}

/* Add new component styles below this line. */

/* ---------- Financial component ---------- */
.financial-page .topbar { display: none; }
.financial-page .pageheader { margin-bottom: 22px; }
.financial-page .pageheader .sub { color: var(--muted); font-size: 13.5px; }
.financial-page .view-toggle {
  display: flex;
  padding: 4px;
  background: var(--teal);
  border: 1px solid var(--slate);
  border-radius: 10px;
}
.financial-page .view-toggle button {
  padding: 8px 18px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
}
.financial-page .view-toggle button.active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(28, 35, 32, .08);
}
.financial-page .analytics-filter { display: flex; align-items: center; gap: 8px; }
.financial-page .analytics-filter label { color: var(--muted); font-size: 12px; font-weight: 600; }
.financial-page .analytics-filter select {
  padding: 9px 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--slate);
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
}
.financial-page .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.financial-page .stat-card {
  padding: 18px 20px;
  background: var(--teal);
  border: 1px solid var(--slate);
  border-radius: var(--radius);
}
.financial-page .stat-card .k { margin-bottom: 8px; color: var(--ink-soft); font-size: 12.5px; }
.financial-page .stat-card .v { font-size: 24px; }
.financial-page .stat-card .t { margin-top: 6px; color: var(--ink-soft); font-size: 12px; }
.financial-page .stat-card .t.warn { color: #b23b2f; }
.financial-page .stat-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.financial-page .visibility-toggle { display: flex; align-items: center; padding: 2px; color: var(--muted); background: none; border: 0; }
.financial-page .visibility-toggle:hover { color: var(--ink); }
.financial-page .content-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-bottom: 20px; }
.financial-page .panel { padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.financial-page .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.financial-page .panel-head h2 { margin: 0; font-size: 17px; }
.financial-page .panel-head .muted-link { color: var(--muted); font-size: 12.5px; }
.financial-page #trendChart { display: block; width: 100%; height: auto; }
.financial-page .donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.financial-page #donutChart { flex: none; }
.financial-page .legend { display: flex; flex: 1; min-width: 150px; flex-direction: column; gap: 10px; }
.financial-page .legend-row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.financial-page .legend-swatch { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.financial-page .legend-name { flex: 1; color: var(--ink-soft); }
.financial-page .legend-amt { color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.financial-page .lower-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; }
.financial-page .budget-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.financial-page .budget-row:last-child { padding-bottom: 0; border-bottom: 0; }
.financial-page .budget-editor { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.financial-page .budget-editor .form-grid { margin-bottom: 10px; }
.financial-page .budget-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.financial-page .budget-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.financial-page .budget-name .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.financial-page .budget-amt { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.financial-page .budget-amt.over { color: var(--red); font-weight: 700; }
.financial-page .bar-track { height: 7px; overflow: hidden; background: var(--bg); border-radius: 20px; }
.financial-page .bar-fill { height: 100%; border-radius: 20px; }
.financial-page .bar-fill.over { background: var(--red); }
.financial-page .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.financial-page .field label { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: 11.5px; font-weight: 600; }
.financial-page .field input, .financial-page .field select { width: 100%; padding: 9px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.financial-page .field input:focus, .financial-page .field select:focus { outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187, 213, 218, .35); }
.financial-page .field.full { grid-column: 1 / -1; }
.financial-page .add-btn { width: 100%; }
.financial-page table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.financial-page thead th { padding: 0 10px 10px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11.5px; text-align: left; }
.financial-page tbody td { padding: 11px 10px; border-bottom: 1px solid var(--line); }
.financial-page tbody tr:last-child td { border-bottom: 0; }
.financial-page .cat-cell { display: flex; align-items: center; gap: 9px; }
.financial-page .cat-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.financial-page .txn-note { color: var(--muted); font-size: 11.5px; }
.financial-page .txn-amt { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.financial-page .empty-row td { padding: 26px 10px; color: var(--muted); text-align: center; }
.financial-page .del-btn { padding: 4px; color: var(--muted); background: none; border: 0; }
.financial-page .del-btn:hover { color: var(--red); }
.financial-page .pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.financial-page .pagination button { padding: 7px 11px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 600; }
.financial-page .pagination button:disabled { cursor: not-allowed; opacity: .45; }
.financial-page .pagination span { min-width: 72px; color: var(--muted); font-size: 12px; text-align: center; }
.financial-page .rise { opacity: 0; transform: translateY(10px); animation: financialRise .5s ease forwards; }
@keyframes financialRise { to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .financial-page .stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1000px) { .financial-page .content-grid, .financial-page .lower-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .financial-page .topbar { display: flex; }
  .financial-page .stat-row { grid-template-columns: 1fr 1fr; }
  .financial-page .form-grid { grid-template-columns: 1fr; }
  .financial-page .donut-wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .financial-page .stat-row { grid-template-columns: 1fr; }
  .financial-page table thead { display: none; }
  .financial-page tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .financial-page tbody td { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; border: 0; }
  .financial-page tbody td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 600; }
  .financial-page tbody td.cat-td::before { display: none; }
}

/* ---------- History component ---------- */
.history-pageheader { margin-bottom: 22px; }
.history-total { color: var(--muted); font-size: 13px; font-weight: 600; }
.history-panel { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.history-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.history-panel-head h2 { margin: 0 0 4px; font-size: 18px; }
.history-panel-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.history-clear { color: #a52d2d; border-color: #e2bcbc; }
.history-clear:hover { background: #fff4f4; }
.history-notice { margin: 16px 24px 0; padding: 10px 12px; border-radius: 7px; font-size: 13px; }
.history-notice.success { color: #24643d; background: #eaf5ed; }
.history-notice.error { color: #8f2525; background: #fff0f0; }
.history-search > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.history-search-field { display: flex; align-items: center; gap: 8px; min-width: min(360px, 35vw); padding: 7px 8px 7px 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.history-search-field:focus-within { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187,213,218,.3); }
.history-search-field input { min-width: 0; flex: 1; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 13px; }
.history-search-field button { padding: 8px 12px; color: #fff; background: var(--ink); border: 0; border-radius: 7px; font-size: 12px; font-weight: 700; }
.history-table-wrap { overflow-x: auto; }
.history-table { width: 100%; min-width: 700px; border-collapse: collapse; }
.history-table th { padding: 12px 24px; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.history-table td { padding: 14px 24px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.history-table tbody tr:last-child td { border-bottom: 0; }
.history-task { max-width: 340px; font-weight: 600; word-break: break-word; }
.history-id { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.history-badge, .history-area, .history-status { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.history-badge.action-created { color: #23754d; background: #e4f4eb; }
.history-badge.action-updated { color: #9a641d; background: #fff0dc; }
.history-badge.action-deleted { color: #b33b45; background: #fde7e8; }
.history-area { color: var(--ink-soft); background: var(--teal); border: 1px solid var(--slate); }
.history-status { color: var(--muted); background: #eef3f3; }
.history-status.is-done { color: #23754d; background: #e4f4eb; }
.history-date { color: var(--muted); white-space: nowrap; }
.history-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 24px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
.history-page-links { display: flex; align-items: center; gap: 10px; }
.history-page-links strong { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.page-control { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 16px; }
.page-control:hover { background: var(--teal); border-color: var(--slate); }
.page-control.disabled { pointer-events: none; opacity: .4; }
.history-empty { padding: 72px 24px; color: var(--ink-soft); text-align: center; }
.history-empty strong { display: block; margin-bottom: 5px; font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; }
.history-empty p { margin: 0; color: var(--muted); font-size: 13px; }
.empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 12px; color: var(--ink-soft); background: var(--teal); border: 1px solid var(--slate); border-radius: 50%; font-weight: 700; }
@media (max-width: 760px) {
  .history-panel-head { align-items: stretch; flex-direction: column; padding: 18px; }
  .history-search-field { min-width: 0; }
  .history-pagination { align-items: flex-start; flex-direction: column; padding: 14px 18px; }
  .history-table th, .history-table td { padding-right: 16px; padding-left: 16px; }
}

/* ---------- Rate calculator component ---------- */
.rate-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 20px; align-items: stretch; }
.rate-form-panel { padding: 22px 24px; }
.rate-form { display: grid; gap: 16px; max-width: 560px; }
.rate-form .field label { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.rate-form .field input { width: 100%; padding: 11px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 14px; outline: none; }
.rate-form .field input:focus { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187,213,218,.3); }
.rate-form .field select { width: 100%; padding: 11px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 14px; outline: none; }
.rate-form .field select:focus { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187,213,218,.3); }
.currency-input { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.currency-input:focus-within { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187,213,218,.3); }
.currency-input span { padding-left: 12px; color: var(--muted); font-weight: 700; }
.currency-input input { border: 0 !important; box-shadow: none !important; }
.rate-form-actions { display: flex; gap: 10px; margin-top: 4px; }
.rate-result { display: flex; flex-direction: column; justify-content: center; min-height: 280px; padding: 28px; color: #fff; background: var(--ink); border-radius: var(--radius); }
.rate-result-label { color: var(--slate); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rate-result-value { margin: 14px 0 10px; color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; overflow-wrap: anywhere; }
.rate-formula { color: #d3e3e1; font-size: 13px; }
.rate-result p { margin: 28px 0 0; color: #9eb2af; font-size: 12.5px; }
.rate-breakdown { display: grid; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(223,241,241,.18); }
.rate-breakdown div { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #b8cbc8; font-size: 12px; }
.rate-breakdown strong { color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: nowrap; }
.calendar-panel { margin-top: 20px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.calendar-heading h2 { margin: 0 0 4px; font-size: 18px; }
.calendar-heading p { margin: 0; color: var(--muted); font-size: 12.5px; }
.calendar-summary { display: flex; align-items: baseline; gap: 7px; color: var(--muted); font-size: 12px; }
.calendar-summary strong { color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 20px; }
.calendar-toolbar { display: grid; grid-template-columns: 34px 1fr 34px auto; align-items: center; gap: 10px; margin-bottom: 14px; }
.calendar-toolbar-label { color: var(--muted); font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; text-align: center; }
.calendar-nav, .calendar-today { display: inline-flex; align-items: center; justify-content: center; height: 34px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-weight: 700; }
.calendar-nav { width: 34px; font-size: 16px; }
.calendar-today { padding: 0 12px; font-size: 12px; }
.calendar-nav:hover, .calendar-today:hover { background: var(--teal); border-color: var(--slate); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-weekdays { margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; }
.calendar-weekdays span { padding: 5px 0; }
.calendar-day { display: flex; align-items: center; justify-content: center; min-height: 54px; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; }
button.calendar-day { cursor: pointer; }
button.calendar-day:hover { color: var(--ink); background: var(--teal); border-color: var(--slate); transform: translateY(-1px); }
.calendar-day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.calendar-day.salary-5th { background: #e5f2ed; border-color: #b8d8c9; }
.calendar-day.salary-20th { background: #fff2dc; border-color: #ead09e; }
.calendar-day.salary-5th:hover { background: #d4eadf; border-color: #8fc2a8; }
.calendar-day.salary-20th:hover { background: #ffe7bd; border-color: #dcb86c; }
.calendar-day.payday-5th,
.calendar-day.payday-20th { opacity: 1; font-weight: 800; box-shadow: inset 0 0 0 2px currentColor; }
.calendar-day.payday-5th { color: #1e6b4b; border-color: #23754d; }
.calendar-day.payday-20th { color: #8a5a13; border-color: #a96119; }
.calendar-day.payday-5th::after,
.calendar-day.payday-20th::after { content: ''; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.calendar-day { position: relative; }
.calendar-day.absent { color: #fff; background: #b33b45; border-color: #b33b45; }
.calendar-day.absent:hover { background: #982f39; border-color: #982f39; }
.calendar-day.calendar-spacer { background: transparent; border-color: transparent; }
.calendar-key { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 11px; }
.calendar-key-item { display: inline-flex; align-items: center; gap: 7px; }
.calendar-key-mark { width: 10px; height: 10px; background: #b33b45; border-radius: 3px; }
.salary-5th-mark { background: #b8d8c9; }
.salary-20th-mark { background: #ead09e; }
.absent-mark { background: #b33b45; }
.calendar-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.calendar-month-card { min-width: 0; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.calendar-month-card h3 { margin: 0 0 12px; color: var(--ink); font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; text-align: center; }
.calendar-month-card .calendar-day { min-height: 48px; }
.current-month-card { border-color: var(--slate); box-shadow: inset 0 2px 0 var(--slate); }
.monthly-history-panel { margin-top: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.monthly-history-heading { padding: 22px 24px; border-bottom: 1px solid var(--line); }
.monthly-history-heading h2 { margin: 0 0 4px; font-size: 18px; }
.monthly-history-heading p { margin: 0; color: var(--muted); font-size: 12.5px; }
.monthly-history-table { width: 100%; border-collapse: collapse; min-width: 650px; }
.monthly-history-table th { padding: 12px 24px; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.monthly-history-table td { padding: 14px 24px; border-bottom: 1px solid var(--line); font-size: 13px; }
.monthly-history-table tbody tr:last-child td { border-bottom: 0; }
.monthly-history-table .monthly-gain { color: #23754d; font-family: 'IBM Plex Mono', monospace; font-weight: 700; }
.monthly-history-empty { color: var(--muted); text-align: center; }
@media (max-width: 900px) { .rate-layout { grid-template-columns: 1fr; } .rate-result { min-height: 220px; } }
@media (max-width: 480px) {
  .rate-form-actions { flex-direction: column; }
  .rate-form-actions .btn { width: 100%; }
  .calendar-panel { padding: 18px 14px; }
  .calendar-heading { align-items: flex-start; flex-direction: column; }
  .calendar-toolbar { grid-template-columns: 34px 1fr 34px; }
  .calendar-today { grid-column: 1 / -1; }
  .calendar-day { min-height: 42px; border-radius: 7px; }
  .calendar-months { grid-template-columns: 1fr; gap: 14px; }
  .calendar-month-card .calendar-day { min-height: 42px; }
}

/* ---------- Settings component ---------- */
.settings-pageheader { margin-bottom: 22px; }
.settings-grid { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.5fr); gap: 20px; align-items: start; }
.settings-profile-preview, .settings-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.settings-profile-preview { padding: 28px 24px; text-align: center; }
.settings-avatar-frame { width: 76px; height: 76px; margin: 0 auto 16px; overflow: hidden; border-radius: 50%; background: var(--slate); }
.settings-avatar { width: 76px; height: 76px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); background: var(--slate); font-size: 22px; font-weight: 700; }
.settings-avatar-frame .settings-avatar { margin: 0; }
.settings-avatar-image { display: block; object-fit: cover; transform-origin: center; transition: transform .15s ease, object-position .15s ease; }
.settings-profile-preview h2 { margin: 0; font-size: 21px; }
.settings-profile-preview p { margin: 5px 0 14px; color: var(--muted); font-size: 13px; }
.settings-id { display: inline-block; padding: 5px 10px; color: var(--ink-soft); background: var(--teal); border: 1px solid var(--slate); border-radius: 999px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.settings-panel { padding: 24px; }
.settings-panel-head { margin-bottom: 18px; }
.settings-panel-head h2 { margin: 0 0 4px; font-size: 18px; }
.settings-panel-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.settings-alert { margin-bottom: 16px; padding: 10px 12px; border: 1px solid; border-radius: 9px; font-size: 13px; }
.settings-alert.success { color: #23754d; background: #e4f4eb; border-color: #b8d8c9; }
.settings-alert.error { color: #b33b45; background: #fde7e8; border-color: #efb9bd; }
.settings-form { display: grid; gap: 14px; }
.settings-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-field label { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.settings-field input { width: 100%; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 13.5px; outline: none; }
.settings-field input:focus { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187,213,218,.3); }
.settings-field input:disabled { color: var(--muted); background: var(--panel); }
.settings-field input[type="file"] { padding: 8px; background: var(--panel); }
.settings-help { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.picture-adjuster { display: grid; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.picture-adjuster label { display: flex; justify-content: space-between; gap: 12px; }
.picture-adjuster output { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; }
.picture-adjuster input[type="range"] { width: 100%; accent-color: var(--ink); }
.picture-adjuster .btn { justify-self: start; }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.reminder-pageheader { margin-bottom: 22px; }
.reminder-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
.reminder-panel { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.reminder-panel-head { margin-bottom: 18px; }
.reminder-panel-head h2 { margin: 0 0 4px; font-size: 18px; }
.reminder-panel-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.reminder-form { display: grid; gap: 14px; }
.reminder-field label { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.reminder-field input, .reminder-field textarea { width: 100%; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 13.5px; outline: none; }
.reminder-field textarea { min-height: 130px; resize: vertical; }
.reminder-field input:focus, .reminder-field textarea:focus { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187,213,218,.3); }
.reminder-actions { display: flex; justify-content: flex-end; }
.reminder-table-wrap { overflow-x: auto; }
.reminder-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; }
.reminder-table th { padding: 0 10px 10px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; text-align: left; text-transform: uppercase; }
.reminder-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.reminder-table tbody tr:last-child td { border-bottom: 0; }
.reminder-date { white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.reminder-text { max-width: 390px; white-space: pre-wrap; word-break: break-word; }
.reminder-delete { padding: 5px 8px; color: #b33b45; background: transparent; border: 1px solid #efb9bd; border-radius: 7px; font-size: 11px; font-weight: 700; }
.reminder-delete:hover { background: #fde7e8; }
.reminder-empty { padding: 30px 10px; color: var(--muted); text-align: center; }
@media (max-width: 900px) { .reminder-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .settings-panel { padding: 18px; }
  .settings-form-row { grid-template-columns: 1fr; }
  .settings-actions .btn { width: 100%; }
}

/* ---------- SIS concern component ---------- */
.sis-pageheader { margin-bottom: 22px; }
.sis-panel { width: 100%; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sis-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.sis-panel-head h2 { margin: 0 0 4px; font-size: 18px; }
.sis-panel-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.sis-required-note { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.sis-required-note span, .sis-field label span { color: #b33b45; }
.sis-form { display: grid; gap: 16px; }
.sis-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sis-field { min-width: 0; }
.sis-field-full { grid-column: 1 / -1; }
.sis-field label { display: block; margin-bottom: 4px; color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }
.sis-field input, .sis-field select, .sis-field textarea { width: 100%; padding: 7px 9px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12.5px; outline: none; }
.sis-field select { appearance: none; padding-right: 28px; background-color: var(--surface); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%; background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; }
.sis-field select:hover { border-color: var(--slate); background-color: var(--panel); }
.sis-field textarea { min-height: 68px; resize: vertical; }
.sis-field textarea#concernDetails, .sis-field textarea#actionTaken, .sis-field textarea#remarks { height: 35px; min-height: 35px; }
.sis-field input[readonly] { color: var(--muted); background: var(--panel); }
.sis-field input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.sis-user-picker { display: flex; gap: 6px; }
.sis-user-picker input { min-width: 0; flex: 1; }
.sis-picker-button { flex: none; padding: 7px 11px; color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 8px; font-size: 12px; font-weight: 700; }
.sis-picker-button:hover { background: #2f3837; border-color: #2f3837; }
.sis-multi-select { position: relative; }
.sis-multi-select-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 33px; padding: 7px 9px; color: var(--ink); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12.5px; }
.sis-multi-select-toggle:hover, .sis-multi-select-toggle[aria-expanded="true"] { border-color: var(--slate); background: var(--panel); }
.sis-multi-select-toggle span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sis-multi-select-menu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 20; display: grid; gap: 2px; max-height: 190px; padding: 6px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 24px rgba(17, 24, 29, .14); }
.sis-multi-select-menu[hidden] { display: none; }
.sis-multi-select-menu label { display: flex; align-items: center; gap: 8px; padding: 7px 6px; color: var(--ink); border-radius: 5px; font-size: 12px; cursor: pointer; }
.sis-multi-select-menu label:hover { background: var(--teal); }
.sis-multi-select-menu input { width: auto; accent-color: var(--ink); }
.sis-business-partner-picker { width: 100%; }
.sis-business-partner-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; max-height: 330px; overflow-y: auto; padding: 4px 2px; }
.sis-business-partner-list label { display: flex; align-items: center; gap: 8px; padding: 8px 6px; color: var(--ink); border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.sis-business-partner-list label:hover { background: var(--teal); }
.sis-business-partner-list input { width: auto; accent-color: var(--ink); }
.sis-business-partner-modal-actions { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sis-field input:focus, .sis-field select:focus, .sis-field textarea:focus { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187, 213, 218, .3); }
.sis-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.sis-form-actions .btn { min-width: 112px; }
.sis-user-select-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(13, 18, 22, .42); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.sis-user-select-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.sis-user-select-card { width: min(100%, 520px); max-height: min(680px, 90vh); padding: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 42px rgba(17, 24, 29, .18); animation: modalRise .2s ease; }
.sis-user-select-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.sis-user-select-head h2 { margin: 0 0 4px; font-size: 20px; }
.sis-user-select-head p { margin: 0; color: var(--muted); font-size: 12px; }
.sis-user-search-field { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.sis-user-search-field:focus-within { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187, 213, 218, .3); }
.sis-user-search-field input { width: 100%; color: var(--ink); background: transparent; border: 0; outline: none; font: inherit; font-size: 12.5px; }
.sis-user-select-list { display: grid; gap: 6px; max-height: 460px; margin-top: 12px; overflow-y: auto; padding-right: 4px; }
.sis-user-select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; color: var(--ink); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.sis-user-select-option:hover { background: var(--teal); border-color: var(--slate); transform: none; }
.sis-user-select-option strong { font-size: 12.5px; }
.sis-user-select-option span { color: var(--muted); font-size: 11.5px; }
.sis-user-select-empty { padding: 28px 10px; color: var(--muted); text-align: center; font-size: 12.5px; }
@media (max-width: 980px) {
  .sis-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sis-panel { padding: 18px; }
  .sis-panel-head { flex-direction: column; gap: 8px; }
  .sis-form-grid { grid-template-columns: 1fr; gap: 14px; }
  .sis-field-full { grid-column: auto; }
  .sis-form-actions { flex-direction: column-reverse; }
  .sis-form-actions .btn { width: 100%; }
  .sis-user-select-card { padding: 18px; }
  .sis-user-select-option { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* ---------- SIS user management component ---------- */
.sis-user-pageheader { margin-bottom: 22px; }
.sis-user-layout { display: grid; gap: 20px; }
.sis-user-panel { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sis-user-form-panel { padding: 20px 22px; }
.sis-user-form-panel[hidden] { display: none; }
.sis-user-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.sis-user-form-panel .sis-user-panel-head { padding: 0 0 16px; border-bottom: 0; }
.sis-user-panel-head h2 { margin: 0 0 4px; font-size: 18px; }
.sis-user-panel-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.sis-user-tabs { display: flex; gap: 4px; padding: 3px; background: var(--teal); border: 1px solid var(--slate); border-radius: 9px; }
.sis-user-tabs a { padding: 6px 12px; color: var(--ink-soft); border-radius: 6px; font-size: 12px; font-weight: 700; }
.sis-user-tabs a.active { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(28, 35, 32, .08); }
.sis-user-search { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.sis-user-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.sis-user-search input { min-width: 180px; flex: 1; padding: 8px 10px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12.5px; outline: none; }
.sis-user-search input:focus { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187, 213, 218, .3); }
.sis-user-search .btn { padding: 8px 12px; font-size: 12px; }
.sis-user-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sis-user-field label { display: block; margin-bottom: 4px; color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }
.sis-user-field input, .sis-user-field select { width: 100%; padding: 8px 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12.5px; outline: none; }
.sis-user-field input:focus, .sis-user-field select:focus { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(187, 213, 218, .3); }
.sis-user-form-actions { display: flex; justify-content: flex-end; grid-column: 1 / -1; gap: 8px; padding-top: 4px; }
.sis-user-table-wrap { overflow-x: auto; }
.sis-user-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sis-user-table th { padding: 11px 22px; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.sis-user-table td { padding: 12px 22px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sis-user-table tbody tr:last-child td { border-bottom: 0; }
.sis-user-table td:first-child { font-weight: 700; }
.sis-user-date { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 11px; white-space: nowrap; }
.sis-user-status { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.sis-user-status.active { color: #23754d; background: #e4f4eb; }
.sis-user-status.resigned { color: #9a641d; background: #fff0dc; }
.sis-user-actions { display: flex; align-items: center; gap: 6px; }
.sis-user-actions form { margin: 0; }
.sis-user-empty { padding: 42px 22px !important; color: var(--muted); text-align: center; }
.sis-user-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
.sis-user-pagination > div { display: flex; align-items: center; gap: 5px; }
.sis-user-pagination .page-control { width: 28px; height: 28px; font-size: 13px; }
.sis-user-pagination .page-control.current { color: #fff; background: var(--ink); border-color: var(--ink); }
.sis-user-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(13, 18, 22, .42); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.sis-user-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.sis-user-modal-card { width: min(100%, 500px); padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 42px rgba(17, 24, 29, .18); animation: modalRise .2s ease; }
.sis-user-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sis-user-modal-head h2 { margin: 0; font-size: 20px; }
.sis-user-modal .sis-user-form { grid-template-columns: 1fr 1fr; }
.sis-delete-message { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; }
.sis-delete-message strong { color: var(--ink); }
.sis-delete-actions { display: flex; justify-content: flex-end; gap: 8px; }
.sis-danger { color: #fff; background: #b92d2d; border-color: #b92d2d; }
.sis-danger:hover { background: #a92626; border-color: #a92626; }
@media (max-width: 600px) {
  .sis-user-form { grid-template-columns: 1fr; }
  .sis-user-form-actions { grid-column: auto; flex-direction: column-reverse; }
  .sis-user-form-actions .btn { width: 100%; }
  .sis-user-panel-head { align-items: stretch; flex-direction: column; padding: 18px; }
  .sis-user-form-panel .sis-user-panel-head { padding: 0 0 14px; }
  .sis-user-tabs { align-self: flex-start; }
  .sis-user-search { align-items: stretch; flex-wrap: wrap; padding: 14px 18px; }
  .sis-user-search input { min-width: 100%; flex-basis: 100%; }
  .sis-user-search .btn { flex: 1; text-align: center; }
  .sis-user-table thead { display: none; }
  .sis-user-table tbody tr { display: block; padding: 10px 18px; border-bottom: 1px solid var(--line); }
  .sis-user-table tbody tr:last-child { border-bottom: 0; }
  .sis-user-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; }
  .sis-user-table td::before { color: var(--muted); content: attr(data-label); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
  .sis-user-table td.sis-user-empty { display: block; padding: 26px 0 !important; }
  .sis-user-table td.sis-user-empty::before { display: none; }
  .sis-user-pagination { align-items: flex-start; flex-direction: column; padding: 14px 18px; }
  .sis-user-pagination > div { flex-wrap: wrap; }
  .sis-user-modal-card { padding: 18px; }
  .sis-user-modal .sis-user-form { grid-template-columns: 1fr; }
  .sis-delete-actions { flex-direction: column-reverse; }
  .sis-delete-actions .btn { width: 100%; }
}