*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:#f4f7fb;color:#182230}.app{display:flex;min-height:100vh}.sidebar{width:260px;background:#0d1726;color:#fff;padding:20px;position:fixed;right:0;top:0;bottom:0;display:flex;flex-direction:column}.brand{font-size:18px;font-weight:800;padding:10px 4px 24px}.brand.big{font-size:26px;text-align:center;color:#111}.sidebar nav{display:grid;gap:6px}.sidebar a{color:#dbe6f5;text-decoration:none;padding:12px 14px;border-radius:10px}.sidebar a:hover{background:#1a2a41}.sidebar-bottom{margin-top:auto}.user-mini{padding:12px;background:#142239;border-radius:12px;margin-bottom:8px}.user-mini small{display:block;color:#9db0c8;margin-top:5px}.badge{background:#ef4444;color:#fff;border-radius:99px;padding:2px 7px;font-size:11px}.main{width:calc(100% - 260px);margin-right:260px}.topbar{height:72px;background:#fff;border-bottom:1px solid #e5eaf0;display:flex;justify-content:space-between;align-items:center;padding:0 28px;position:sticky;top:0;z-index:5}.top-actions{display:flex;gap:18px;align-items:center;color:#657286}.top-actions a{color:#182230;text-decoration:none}.content{padding:26px;max-width:1600px;margin:auto}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:20px}.stat{background:#fff;border:1px solid #e5eaf0;border-radius:16px;padding:20px;box-shadow:0 5px 18px #15243d08}.stat span{display:block;color:#6d7b8e;font-size:13px;margin-bottom:10px}.stat strong{font-size:24px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{background:#fff;border:1px solid #e5eaf0;border-radius:16px;padding:20px;box-shadow:0 5px 18px #15243d08;margin-bottom:20px}.panel h2{margin:0 0 18px;font-size:18px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.filters label{display:grid;gap:6px}.filters input,.filters select,.filters button{height:42px}.quick{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-btn{display:block;padding:18px;background:#f3f6fa;border-radius:12px;text-decoration:none;color:#182230}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d9e0e8;background:#fff;color:#182230;padding:10px 16px;border-radius:10px;text-decoration:none;cursor:pointer}.btn.primary{background:#111827;color:#fff;border-color:#111827}.btn.danger{background:#dc2626;color:#fff;border-color:#dc2626}.btn.sm{padding:7px 10px;font-size:12px}.btn.wide{width:100%;margin-top:10px}input,select,textarea{font:inherit;border:1px solid #d9e0e8;border-radius:10px;padding:10px 12px;background:#fff;color:#182230}textarea{min-height:100px;resize:vertical}label{display:grid;gap:7px;font-size:13px;color:#4d5c70}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-grid .full{grid-column:1/-1}.actions{display:flex;gap:10px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:850px}th,td{padding:13px 10px;border-bottom:1px solid #edf0f4;text-align:right;white-space:nowrap}th{background:#f8fafc;color:#5c6b7e;font-size:12px}td{font-size:13px}.status{display:inline-block;border-radius:99px;padding:5px 10px;font-size:12px;background:#edf1f6}.status.pending{background:#fff4d6;color:#946200}.status.approved,.status.paid,.status.active{background:#e7f8ef;color:#117a46}.status.rejected,.status.cancelled,.status.overdue{background:#ffe8e8;color:#a21b1b}.status.draft,.status.paused{background:#eef2f7;color:#566579}.details{display:grid;grid-template-columns:1fr 1fr;gap:0}.details>div{padding:12px;border-bottom:1px solid #edf0f4}.details dt{font-size:12px;color:#738196}.details dd{margin:5px 0 0;font-weight:700}.alert{padding:13px 16px;border-radius:12px;margin-bottom:16px}.alert.success{background:#e7f8ef;color:#117a46}.alert.danger{background:#ffe8e8;color:#a21b1b}.inline-form{display:flex;gap:6px;align-items:center}.inline-form input{min-width:130px}.notifications{display:grid;gap:10px}.notice{padding:16px;background:#fff;border:1px solid #e5eaf0;border-right:4px solid #111827;border-radius:12px}.notice.read{opacity:.6}.notice p{margin:7px 0}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#eef3f9,#fff)}.login-card{width:min(440px,100%);background:#fff;padding:32px;border-radius:20px;box-shadow:0 20px 70px #10213d15}.login-card form{display:grid;gap:15px}.login-card h1{font-size:22px}.login-card label{font-size:14px}.login-card input{margin-top:7px}.panel-title{display:flex;justify-content:space-between}@media(max-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:1fr}.sidebar{width:220px}.main{margin-right:220px;width:calc(100% - 220px)}}@media(max-width:760px){.sidebar{position:static;width:100%;min-height:auto}.app{display:block}.main{margin:0;width:100%}.sidebar nav{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.content{padding:15px}.topbar{padding:0 15px}.quick{grid-template-columns:1fr}.details{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.filters{display:grid;grid-template-columns:1fr}.filters>*{width:100%}}

/* v2 finance dashboard */
.muted{color:#6b7280}.stat small{display:block;margin-top:6px;color:#6b7280;font-size:12px}.stat.accent{border-top:3px solid #111}.cards.compact{grid-template-columns:repeat(3,1fr);margin:12px 0}.mini-list{display:grid;gap:10px;margin-top:18px}.mini-list>div{display:flex;justify-content:space-between;padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric-grid div{padding:14px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;display:flex;justify-content:space-between;gap:10px}.progress{height:8px;background:#e5e7eb;border-radius:20px;overflow:hidden;min-width:100px}.progress span{display:block;height:100%;background:#111;border-radius:20px}.table-wrap a{color:inherit;text-decoration:none}.table-wrap a:hover{text-decoration:underline}@media(max-width:900px){.metric-grid,.cards.compact{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* Finance UI polish */
html{background:#f4f7fb}
body{line-height:1.55;-webkit-font-smoothing:antialiased}
.content{width:100%}
.cards{align-items:stretch}
.stat{min-height:118px;display:flex;flex-direction:column;justify-content:center}
.stat strong{letter-spacing:-.3px}
.stat.accent{position:relative;overflow:hidden}
.stat.accent:after{content:"";position:absolute;inset:auto -30px -45px auto;width:120px;height:120px;border-radius:50%;background:#11182708}
.panel{overflow:hidden}
.panel-title{align-items:center;gap:12px}
.panel-title h2{margin:0}
canvas{display:block;width:100%!important;max-height:310px}
.quick-btn{transition:.15s ease;border:1px solid transparent}
.quick-btn:hover{background:#fff;border-color:#dbe3ec;transform:translateY(-1px)}
.topbar{backdrop-filter:blur(10px)}
.sidebar{box-shadow:-8px 0 30px rgba(15,23,42,.06)}
@media(max-width:760px){
  .sidebar{box-shadow:none;padding:14px}
  .sidebar .brand{padding-bottom:12px}
  .sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr));max-height:280px;overflow:auto}
  .sidebar a{font-size:13px;padding:10px}
  .topbar{height:auto;min-height:58px;gap:10px}
  .top-actions{gap:8px;font-size:12px}
  .content{padding:12px}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:14px;min-height:105px}
  .stat strong{font-size:18px}
  .stat span{font-size:12px}
  .stat small{font-size:10px}
  .panel{padding:14px;border-radius:14px}
  .panel-title h2{font-size:16px}
  canvas{max-height:240px}
}
@media(max-width:430px){
  .cards{grid-template-columns:1fr 1fr}
  .stat strong{font-size:16px}
  .topbar>div:first-child{font-size:14px}
}

/* FINAL UI RESET / MOBILE FINANCE DASHBOARD */
html,body{direction:rtl;background:#f4f7fb;color:#182230}
a{color:inherit}
.sidebar a{color:#dbe6f5}
.content a:not(.btn){text-decoration:none}
.content h1,.content h2,.content h3{color:#111827}
.stat{position:relative}
.stat strong{display:block;color:#111827}
.chart-card{min-height:360px}
@media(max-width:760px){
  body{overflow-x:hidden}
  .content{width:100%;padding:14px}
  .cards{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{min-width:0}
  .grid-2{grid-template-columns:1fr}
  .panel{width:100%;min-width:0}
  .table-wrap{max-width:100%;overflow-x:auto}
}