@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--ink:#18352e;--muted:#52665c;--forest:#153e31;--deep:#0e3027;--paper:#f5f6f1;--white:#fff;--border:#dce4da;--mint:#e7f1e8;--gold:#ddba74;--radius:20px;font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif}
*{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #b48335;outline-offset:3px} h1,h2,h3,p{margin:0} .initial{margin:20vh auto;text-align:center}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:700}.brand img{width:42px;height:42px;border-radius:12px}.brand b{display:block;font:700 1.45rem "Kantumruy Pro",sans-serif;line-height:1.2}.brand small{display:block;font-weight:500;color:inherit;opacity:.8}
.login{min-height:100svh;display:grid;grid-template-columns:1fr 1fr}.login-hero{background:var(--forest);color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:100%;padding:clamp(2rem,6vw,6rem);position:relative;overflow:hidden;isolation:isolate}.login-hero::before,.login-hero::after{content:"";position:absolute;z-index:-1;width:38rem;height:38rem;border:1px solid #dfc08640;border-radius:50%;inset-inline-start:-18rem;bottom:-14rem}.login-hero::after{width:29rem;height:29rem;bottom:-9.5rem;inset-inline-start:-13.5rem}.login-hero h1{font-size:clamp(2.5rem,6vw,5.4rem);line-height:1.15;letter-spacing:-.05em}.login-hero p{color:#d4e4d6;font-size:1.12rem;margin-top:1.25rem;max-width:23rem}.login-main{display:grid;place-items:center;padding:2rem}.login-card{width:min(100%,410px)}.login-card h2{font-size:2rem;margin-bottom:.25rem}.login-card form{margin-top:1.6rem}.login-card .btn{width:100%;margin-top:.4rem}
.layout{display:grid;grid-template-columns:235px minmax(0,1fr);min-height:100svh}.side{background:var(--forest);color:#f3f8f2;padding:1.55rem 1.1rem;display:flex;flex-direction:column;position:sticky;top:0;height:100svh}.side .brand{padding:.1rem .55rem 2rem}.nav{display:grid;gap:.38rem}.nav button,.logout{display:flex;align-items:center;gap:.74rem;background:transparent;border:0;color:#e0ebe0;border-radius:12px;padding:.65rem .75rem;text-align:start;min-height:44px;white-space:nowrap}.nav button[aria-current],.nav button:hover,.logout:hover{background:#ffffff16;color:white}.nav button[aria-current]{box-shadow:inset -3px 0 var(--gold)}.nav-icon{font:600 1.15rem Arial,sans-serif;width:24px;text-align:center;color:#e2c995}.side-bottom{margin-top:auto;padding-top:1rem}.logout{width:100%}.main{min-width:0;padding:clamp(1rem,3vw,2.6rem);max-width:1520px;width:100%;margin:auto;margin-top:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border);margin-bottom:1.6rem}.topbar small{color:var(--muted)}.person{display:flex;align-items:center;gap:.55rem}.avatar{background:var(--mint);border:1px solid #d5e5d7;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-weight:700;flex:none}.heading{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem}.heading h1{font-size:clamp(1.7rem,4vw,2.25rem);line-height:1.25}.actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}.btn{border:1px solid transparent;border-radius:11px;background:var(--forest);color:white;padding:.55rem .9rem;min-height:43px;font-weight:600;white-space:nowrap}.btn:hover{background:var(--deep)}.btn-soft{color:var(--forest);background:var(--mint);border-color:#d8e7d9}.btn-soft:hover{background:#d9eadd}.btn-plain{background:white;color:var(--forest);border-color:var(--border)}.btn-plain:hover{background:#eff5ef}.btn-danger{background:#fff3ef;color:#883927;border-color:#f1d4c9}.btn-danger:hover{background:#fce8e1}.subtle{color:var(--muted)}.number,.money,.date, bdi{font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap}.money small{margin-inline-start:.32rem;font:inherit;font-size:.56em;opacity:.84}
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--forest);color:#fff;border-radius:24px;padding:clamp(1.15rem,3vw,2.1rem);display:grid;grid-template-columns:minmax(0,1fr) 1fr;gap:1rem;align-items:center;margin-bottom:1rem}.hero::before,.hero::after{content:"";z-index:-1;position:absolute;width:330px;height:330px;border-radius:50%;border:1px solid #ead5a34a;inset-inline-end:-80px;top:-135px}.hero::after{width:245px;height:245px;inset-inline-end:-38px;top:-93px}.hero .eyebrow{font-size:.95rem;color:#d7e7d6}.hero .figure{font-size:clamp(2rem,5vw,3.8rem);font-weight:700;line-height:1.45;letter-spacing:-.035em}.hero .hero-minor{justify-self:start;padding-inline-start:1rem;border-inline-start:1px solid #ffffff43}.hero-minor .money,.hero-minor strong{font-size:clamp(1.1rem,3vw,1.65rem);font-weight:700}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:0 0 1rem}.metric{border:1px solid var(--border);background:white;border-radius:16px;padding:.85rem .95rem;min-width:0}.metric .label{display:block;color:var(--muted);font-weight:500;font-size:.87rem}.metric strong{display:block;font-size:clamp(1rem,2vw,1.5rem);margin-top:.15rem;overflow-wrap:anywhere}.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.panel,.loan{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:1rem;min-width:0}.panel h2,.loan h2{font-size:1.17rem}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.6rem;flex-wrap:wrap}.table-wrap{overflow:auto}.table-wrap:focus-visible{outline:2px solid #b48335}.table{border-collapse:collapse;width:100%;font-size:.91rem}.table th,.table td{padding:.63rem .64rem;text-align:start;border-bottom:1px solid #edf0eb;vertical-align:middle}.table th{white-space:nowrap;font-size:.82rem;color:var(--muted);background:#f6f8f4}.table tbody tr:last-child td{border-bottom:0}.table td:first-child{font-weight:600}.pill{display:inline-block;white-space:nowrap;border-radius:99px;padding:.14rem .58rem;background:#edf2ed;color:#314a40;font-size:.82rem;font-weight:600}.pill.approved,.pill.paid,.pill.active{background:#e1efe4;color:#215d3d}.pill.pending,.pill.partial{background:#fbefd9;color:#705018}.pill.rejected,.pill.overdue,.pill.inactive{background:#f8e8e3;color:#8c3c2a}.empty{color:var(--muted);padding:1.3rem .45rem}.loan summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap}.loan summary::marker{color:var(--forest)}.loan-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.85rem 0}.loan-stats div{border-radius:11px;background:#f3f6f1;padding:.5rem .7rem}.loan-stats span{display:block}.loan-stats small{color:var(--muted)}.stack{display:grid;gap:.65rem}.record{border-top:1px solid #e8ede6;padding:.75rem .2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.55rem}.record p,.event p{overflow-wrap:anywhere}.profile{display:flex;gap:1.4rem;flex-wrap:wrap}.profile dt{color:var(--muted);font-size:.84rem}.profile dd{margin:0;overflow-wrap:anywhere}.event{border-bottom:1px solid var(--border);padding:.75rem 0}.event:last-child{border-bottom:0}.event summary{cursor:pointer}.event details{margin-top:.4rem}
dialog{color:var(--ink);padding:0;border:1px solid var(--border);border-radius:22px;max-width:min(96vw,550px);width:100%;max-height:90svh;box-shadow:0 16px 70px #071f2750;background:white}dialog::backdrop{background:#112e27a0}.dialog-inner{padding:1.35rem}.dialog-title{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:1rem}.dialog-title h2{font-size:1.45rem}.close{width:42px;height:42px;min-height:42px;padding:0;font-size:1.4rem}.form-grid{display:grid;gap:.85rem}.form-columns{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}label{display:grid;gap:.26rem;font-weight:600;font-size:.91rem}input,textarea,select{width:100%;min-height:44px;border-radius:9px;border:1px solid #bdcbc1;padding:.5rem .65rem;background:white;color:var(--ink)}textarea{min-height:75px;resize:vertical}input[type=checkbox]{width:1.15rem;min-height:1.15rem;accent-color:var(--forest)}.checkbox{display:flex;align-items:center;gap:.4rem}.error{color:#943721;font-weight:600}.error:empty{display:none}.submit-row{display:flex;gap:.5rem;justify-content:flex-start;margin-top:.3rem}.submit-row .btn{min-width:105px}#toast:not(:empty){position:fixed;bottom:1rem;inset-inline-start:1rem;max-width:min(90vw,430px);z-index:20;background:#173e32;color:#fff;padding:.65rem 1rem;border-radius:12px;box-shadow:0 4px 20px #102b2440}.queue-tabs{margin-bottom:.85rem}.select-control{max-width:320px}.print-brand,.print-only{display:none}
@media(max-width:1000px){.layout{grid-template-columns:185px minmax(0,1fr)}.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.split{grid-template-columns:1fr}}
@media(max-width:720px){.layout{display:block}.side{position:sticky;height:auto;top:0;z-index:5;padding:.56rem .8rem .42rem;display:grid;grid-template-columns:1fr auto}.side .brand{padding:0}.side .brand img{width:34px;height:34px}.side .brand b{font-size:1.07rem}.side .brand small{font-size:.72rem}.side-bottom{grid-column:2;grid-row:1;padding:0}.logout{padding:.39rem .55rem;min-height:38px}.logout .nav-icon{display:none}.nav{display:flex;overflow:auto;grid-column:1/-1;gap:.25rem;margin-top:.45rem;padding-bottom:.08rem}.nav button{min-height:38px;padding:.38rem .57rem;font-size:.84rem}.nav button[aria-current]{box-shadow:inset 0 -2px var(--gold)}.nav-icon{width:auto}.topbar{margin-bottom:1rem;padding-bottom:.6rem}.hero{border-radius:17px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.metric{padding:.62rem .7rem}.login{display:block}.login-hero{padding:1.45rem;min-height:265px;gap:2rem}.login-main{padding:1.5rem 1.2rem 2.3rem}.login-hero h1{font-size:2.7rem}.login-hero p{margin-top:.45rem;font-size:.94rem}.heading{margin-bottom:.8rem}.panel,.loan{padding:.75rem}.table th,.table td{padding:.55rem}.loan-stats div{padding:.44rem;font-size:.83rem}}
@media print{.side,.topbar,.heading,.actions,.queue-tabs,dialog,#toast,.no-print{display:none!important}.layout,.main,.table-wrap{display:block;padding:0;overflow:visible}.main>.panel{border:0;padding:0}.print-brand,.print-only{display:block}.print-brand{margin-bottom:1.4rem}.table{width:100%}.table tr{break-inside:avoid}.table thead{display:table-header-group}body{background:white;color:black} @page{size:A4;margin:14mm}}
[hidden]{display:none!important}.record>.actions,.loan>.actions{margin-top:.65rem}.record .actions{margin-top:.35rem}.login-card input{font-size:1rem}
@media(max-width:420px){.nav button{padding-inline:.48rem}.nav .nav-icon{display:none}}
.custom-installment{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:.45rem}.custom-installment .close{margin-bottom:1px}