:root{color-scheme:dark;--bg:#000715;--panel:#191d27;--text:#d7d7d7;--muted:#8c96a8;--blue:#244bd7;--line:#343943}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 Niramit,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button{min-height:44px;padding:8px 15px;border-radius:7px;border:1px solid #454a55;background:#252a35;cursor:pointer}button:hover{background:#333a49}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--blue);color:white;border-color:var(--blue)}button.light{background:#f6f9fb;color:#191d27}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;z-index:9;background:#fff;color:#000;padding:8px}.demo-banner{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid var(--line);font-size:14px}.demo-banner a{text-decoration:underline}.demo-banner span{color:var(--muted)}.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:calc(100vh - 65px)}.johta-nav{border-right:1px solid #101828;padding:26px 24px;display:flex;flex-direction:column;gap:20px}.johta-logo{font-size:24px;color:#fff;font-style:italic;font-weight:700}.nav-search{font-size:14px;color:var(--muted)}input,select,textarea{width:100%;background:#191d27;border:1px solid #565b66;border-radius:8px;padding:10px 12px;min-height:44px}textarea{min-height:95px;resize:vertical}.nav-search input{margin-top:6px;background:#090e19}nav p{font-size:14px;color:var(--muted);margin:18px 0 8px}nav a{display:block;padding:10px 13px;margin:5px 0;border:1px solid transparent;border-radius:8px;color:#9ba5b8}nav a.active{color:#fff;background:linear-gradient(90deg,#0c1b56,#080e20);border-color:#1a2851}.demo-note{font-size:14px;color:var(--muted);margin-top:auto}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #101828;padding:25px 32px}.workspace-header h1{font-size:28px;font-weight:500;margin:0}.workspace-header span{font-size:16px}.workspace-header small{color:var(--muted)}#workspace-content{padding:26px 32px 60px}.greeting{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}.greeting h2{font-size:26px;font-weight:500;margin:4px 0}.greeting p{margin:0;color:var(--muted);font-size:14px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:20px 0 28px}.stat{background:var(--panel);border:1px solid #525660;border-radius:10px;padding:20px 26px}.stat span{display:block;font-size:17px}.stat strong{display:block;font-size:32px;font-weight:500;margin-top:12px}.two-col{display:grid;grid-template-columns:1fr 1.3fr;gap:24px}.panel{background:var(--panel);border-radius:10px;padding:20px;margin-bottom:24px}.panel h2{font-size:20px;font-weight:500;margin:0 0 20px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:15px}.panel-heading h2{margin:0}.panel-heading input{max-width:260px}.meeting{padding:16px 0;border-bottom:1px solid #363a45}.meeting strong,.meeting small{display:block}.meeting small{color:#b9bdc6}.chart{width:100%;height:200px;display:block}.chart-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}.chart-tabs button{min-height:32px;padding:3px 8px;font-size:13px}.chart-tabs .selected{background:#19378d}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{padding:14px 12px;text-align:left;border-bottom:1px solid #3c414c;font-weight:400}th{background:#212632;color:#d7d7d7}.badge{display:inline-block;padding:3px 9px;border-radius:5px;font-size:13px;background:#132840;color:#a6cbff}.badge.Present,.badge.Approved,.badge.Completed{background:#14371d;color:#7bec91}.badge.Late,.badge.Rejected{background:#451b1b;color:#ffa0a0}.badge.Pending,.badge.Draft{background:#463418;color:#f0d088}.projects-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}.projects-controls input{flex:1;min-width:160px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.project-card{background:var(--panel);border:1px solid #454b5a;border-radius:8px;padding:20px}.project-card h3{margin:12px 0 7px;font-size:20px}.project-card p{color:var(--muted);font-size:14px}.project-card button{width:100%;margin-top:10px}.project-grid.kanban{grid-template-columns:repeat(3,minmax(0,1fr))}.kanban-col>h3{font-size:16px}.kanban-col .project-card{margin-bottom:16px}.profile{display:grid;grid-template-columns:160px 1fr 1fr;gap:24px}.profile-avatar{background:#243147;border-radius:10px;min-height:170px;display:grid;place-items:center;font-size:50px;color:#b7c8e1}.profile h3{font-size:16px;font-weight:500;margin-top:0}dl{display:grid;grid-template-columns:1fr 1fr;gap:8px}dt{color:var(--muted);font-size:14px}dd{margin:0}dialog{width:min(680px,calc(100% - 32px));border:1px solid #454a55;border-radius:14px;background:#191d27;color:#d7d7d7;padding:26px;max-height:90vh;overflow:auto}dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}.dialog-heading{display:flex;gap:16px;align-items:center;justify-content:space-between}.dialog-heading h2{font-size:26px;font-weight:500;margin:0 0 20px}.fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:block;color:#b7bdc9;margin:12px 0}.field input,.field select,.field textarea{margin-top:7px}.field.full{grid-column:1/-1}.team-options{display:flex;gap:16px;flex-wrap:wrap}.team-options label{display:flex;align-items:center;gap:7px}.team-options input{width:18px;min-height:18px}.form-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;flex-wrap:wrap}.form-footer button:first-child{margin-right:auto}.demo-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 24px;background:#f6f9fb;color:#191d27;border-radius:8px;box-shadow:0 4px 20px #0008;display:none;max-width:90vw;z-index:10}.demo-toast.visible{display:block}:focus-visible{outline:2px solid #8da5ff;outline-offset:3px}.empty{padding:30px;text-align:center;color:var(--muted)}.section-subtitle{color:var(--muted);margin:0 0 20px}.project-detail dt,.project-detail dd{padding:8px 0}.team-members{display:flex;gap:16px;flex-wrap:wrap}.team-members span{background:#242c3b;padding:10px 16px;border-radius:8px}.study-link{text-decoration:underline}
@media(min-width:1500px){#workspace-content{max-width:1250px;margin:auto}}@media(max-width:1000px){.workspace{grid-template-columns:215px minmax(0,1fr)}.johta-nav{padding:20px 14px}.stats{gap:12px}.stat{padding:15px}.two-col{grid-template-columns:1fr}.project-grid{grid-template-columns:repeat(2,1fr)}.profile{grid-template-columns:120px 1fr}.profile>section:last-child{grid-column:2}.workspace-header,#workspace-content{padding:22px}.panel-heading{flex-wrap:wrap}}@media(max-width:650px){.demo-banner{padding:10px 14px;gap:10px;flex-wrap:wrap}.demo-banner span{order:3;width:100%}.workspace{display:block}.johta-nav{border-right:0;border-bottom:1px solid #263044;padding:14px}.johta-logo{font-size:22px}.nav-search,.demo-note{display:none}.johta-nav nav{display:flex;gap:5px;overflow:auto}.johta-nav nav p{display:none}.johta-nav nav a{white-space:nowrap;font-size:14px;padding:7px}.workspace-header,#workspace-content{padding:16px}.workspace-header h1{font-size:23px}.stats{grid-template-columns:repeat(2,1fr)}.greeting{align-items:flex-start;flex-wrap:wrap}.greeting h2{font-size:24px}.project-grid,.project-grid.kanban{grid-template-columns:1fr}.profile{grid-template-columns:1fr}.profile>section:last-child{grid-column:auto}.profile-avatar{min-height:120px}.fields-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.panel{padding:16px}.panel-heading input{max-width:100%}}