:root{
  --hope-purple:#7b1f8d;
  --hope-purple-dark:#531164;
  --hope-purple-mid:#8e2ca2;
  --hope-purple-soft:#f7edf9;
  --hope-yellow:#f5cc18;
  --hope-yellow-soft:#fff8d6;
  --hope-ink:#202434;
  --hope-text:#35394a;
  --hope-muted:#6f7280;
  --hope-border:#e8ddea;
  --hope-bg:#f8f6fb;
  --hope-card:#ffffff;
  --hope-danger:#b42318;
  --hope-success:#027a48;
  --sidebar-width:250px;
  --radius-xl:22px;
  --shadow-card:0 12px 30px rgba(69,31,78,.075);
  --shadow-soft:0 8px 22px rgba(69,31,78,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 78% 8%, rgba(245,204,24,.15), transparent 24rem),
    radial-gradient(circle at 10% 86%, rgba(123,31,141,.08), transparent 28rem),
    linear-gradient(180deg,#fff 0%,var(--hope-bg) 44%,#fff 100%);
  color:var(--hope-text);
  font-family:'Tajawal','Cairo','Noto Kufi Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  font-size:13.5px;
  line-height:1.55;
  font-weight:500;
}

a{color:var(--hope-purple);text-decoration:none}a:hover{color:var(--hope-purple-dark);text-decoration:none}

/* Right sidebar layout */
.app-sidebar{
  position:fixed;inset-block:0;right:0;width:var(--sidebar-width);z-index:1030;display:flex;flex-direction:column;
  padding:18px 16px;background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,253,242,.96)),var(--hope-card);
  border-left:1px solid var(--hope-border);box-shadow:-18px 0 45px rgba(69,31,78,.075);
}
.sidebar-brand{display:flex;align-items:center;justify-content:center;padding:0 8px 8px;min-height:82px}
.sidebar-logo{width:170px;max-width:100%;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 7px 14px rgba(83,17,100,.07));background:transparent!important;border:0!important;box-shadow:none!important}
.sidebar-title-block{text-align:center;border-bottom:1px dashed var(--hope-border);padding:0 8px 14px;margin-bottom:10px}
.sidebar-title-block strong{display:block;font-weight:900;color:var(--hope-purple);font-size:16px;letter-spacing:.1px}
.sidebar-title-block span{color:var(--hope-muted);font-size:11.5px;font-weight:700}
.sidebar-nav{display:flex;flex-direction:column;gap:5px;overflow:auto;padding:4px 2px 10px;scrollbar-width:thin}
.sidebar-nav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:15px;color:#343848;font-weight:800;font-size:13.5px;border:1px solid transparent;transition:all .16s ease;line-height:1.35}
.sidebar-nav a:hover{background:var(--hope-purple-soft);color:var(--hope-purple);transform:translateX(-2px)}
.sidebar-nav a.active{color:var(--hope-purple-dark);background:linear-gradient(135deg,#fff7ca,#f9edf9 72%);border-color:rgba(123,31,141,.14);box-shadow:0 8px 18px rgba(123,31,141,.075)}
.nav-icon{width:27px;height:27px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--hope-border);color:var(--hope-purple);font-weight:900;flex:0 0 auto;font-size:13px}
.sidebar-footer{margin-top:auto;padding-top:12px;border-top:1px dashed var(--hope-border)}
.user-card{display:flex;align-items:center;gap:9px;padding:10px;margin-bottom:10px;border-radius:16px;background:#fff;border:1px solid var(--hope-border)}
.avatar{width:34px;height:34px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--hope-purple),var(--hope-purple-dark));color:#fff;font-weight:900;text-transform:uppercase}
.user-card strong{display:block;font-size:13px;font-weight:900;color:var(--hope-ink)}.user-card small{display:block;color:var(--hope-muted);font-weight:700;font-size:11px}

.app-main{margin-right:var(--sidebar-width);min-height:100vh;width:calc(100% - var(--sidebar-width));padding:20px 22px 40px;max-width:none;overflow-x:hidden}
.page-hero{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;margin-bottom:18px;border-radius:var(--radius-xl);background:linear-gradient(135deg,#fff 0%,#fffaf0 56%,#f8effa 100%);border:1px solid var(--hope-border);box-shadow:var(--shadow-soft);width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--hope-purple);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}.eyebrow:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--hope-yellow);box-shadow:0 0 0 4px rgba(245,204,24,.18)}
h1{margin:0;color:var(--hope-ink);font-size:24px;font-weight:900;line-height:1.2;letter-spacing:-.2px}h2,h3{color:var(--hope-ink);font-weight:900;line-height:1.25}h2{font-size:18px;margin:0 0 14px}h3{font-size:16px;margin:16px 0 10px}.page-meta{align-items:center;gap:8px;padding:8px 12px;background:#fff;border:1px solid var(--hope-border);border-radius:999px;color:var(--hope-muted);font-weight:800;font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--hope-success);box-shadow:0 0 0 4px rgba(2,122,72,.12)}

/* Mobile header */
.mobile-header{position:sticky;top:0;z-index:1020;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--hope-border);box-shadow:0 8px 18px rgba(69,31,78,.07)}
.mobile-logo,.offcanvas-logo{width:118px;height:auto;object-fit:contain;background:transparent!important}.mobile-offcanvas{background:#fffdf8}.mobile-nav{max-height:none;overflow:visible}

/* Cards and grids */
.card{background:rgba(255,255,255,.98);border:1px solid var(--hope-border)!important;border-radius:var(--radius-xl)!important;padding:16px;margin-bottom:18px;box-shadow:var(--shadow-card);overflow:hidden;width:100%;max-width:100%;min-width:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;width:100%}.grid .card{margin-bottom:0}.stat{font-size:28px;font-weight:900;color:var(--hope-purple);letter-spacing:-.3px}.muted{color:var(--hope-muted)!important;font-weight:600}
.row{display:grid!important;grid-template-columns:minmax(270px,330px) minmax(0,1fr);gap:16px;align-items:start;margin-left:0!important;margin-right:0!important;width:100%;max-width:100%}.row>*{padding-left:0!important;padding-right:0!important;width:auto!important;max-width:100%!important;min-width:0!important}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;width:100%;max-width:100%}.row > .card{min-width:0}.row > .card:has(table),.row > .card:has(.table-wrap){align-self:start}.row > .card:first-child{position:sticky;top:18px}.row > .card:nth-child(2){min-width:0;overflow:hidden}.field{margin-bottom:12px}.field label{display:block;font-weight:900;margin-bottom:6px;color:#333849;font-size:13px}

/* Forms */
input,select,textarea,.form-control,.form-select{width:100%;padding:10px 12px;border:1px solid #ded2e2;border-radius:13px;background:#fff;font-family:inherit;font-size:13.5px;color:var(--hope-ink);outline:none;transition:.16s ease;box-shadow:none;min-height:42px}textarea{min-height:90px}input:focus,select:focus,textarea:focus,.form-control:focus,.form-select:focus{border-color:var(--hope-purple);box-shadow:0 0 0 3px rgba(123,31,141,.09)}label{font-weight:900;color:#333849;margin-bottom:6px;font-size:13px}
button,.btn,.btn-brand{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;background:linear-gradient(135deg,var(--hope-purple),var(--hope-purple-dark));color:#fff!important;padding:9px 15px;border-radius:13px;text-decoration:none;cursor:pointer;font-family:inherit;font-weight:900;font-size:13.5px;line-height:1.35;box-shadow:0 9px 19px rgba(123,31,141,.15);transition:.16s ease;white-space:nowrap;min-height:40px}button:hover,.btn:hover,.btn-brand:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(123,31,141,.20);color:#fff!important}.btn-outline-brand{background:#fff!important;color:var(--hope-purple)!important;border:1px solid rgba(123,31,141,.22)!important;box-shadow:none!important}.btn-outline-brand:hover{background:var(--hope-purple-soft)!important;color:var(--hope-purple-dark)!important}.btn-secondary{background:#3b3b46!important}.btn-warning{background:#ab6400!important}.btn-danger,.btn-danger:hover{background:var(--hope-danger)!important;color:#fff!important}.btn-light{background:#fff!important;color:var(--hope-purple)!important;border:1px solid var(--hope-border)!important;box-shadow:none!important}.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.actions form{margin:0}input[type="submit"]{width:auto;min-width:95px;background:linear-gradient(135deg,var(--hope-purple),var(--hope-purple-dark));color:#fff;font-weight:900;border:0;box-shadow:0 9px 19px rgba(123,31,141,.15)}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:end;margin-bottom:14px;width:100%;max-width:100%}.toolbar form{display:flex;gap:9px;flex-wrap:wrap;align-items:end;width:100%;min-width:0}.toolbar input{max-width:260px}.toolbar select{max-width:220px}.toolbar .field{margin-bottom:0}.toolbar button,.toolbar .btn{flex:0 0 auto}

/* Tables - professional responsive alignment */
.table-wrap{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:visible;
  overflow-y:hidden;
  border-radius:16px;
  border:1px solid var(--hope-border);
  background:#fff;
  box-shadow:0 5px 16px rgba(69,31,78,.04);
  margin-top:10px;
}
table,.table{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  background:#fff;
  overflow:hidden;
  margin:0!important;
  table-layout:fixed!important;
  font-size:12.2px;
  line-height:1.32;
}
.card > table:first-child{margin-top:0!important}
th,td{
  padding:8px 8px!important;
  border-bottom:1px solid var(--hope-border)!important;
  border-left:1px solid rgba(232,221,234,.58);
  text-align:right!important;
  vertical-align:middle!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  color:#333849;
}
th:last-child,td:last-child{border-left:0}
th{
  position:static;
  background:linear-gradient(180deg,#fbf7fc,#f2e7f5)!important;
  color:var(--hope-purple)!important;
  font-weight:900;
  font-size:11.8px;
  line-height:1.3;
}
tbody tr:hover td{background:#fffdf1!important}
tbody tr:last-child td{border-bottom:0!important}
.table{--bs-table-bg:#fff;--bs-table-hover-bg:#fffdf1}
.table td .btn,.table td button,.actions .btn,.actions button{padding:6px 8px!important;font-size:11.8px!important;min-height:30px!important;border-radius:10px!important;box-shadow:none!important}
.table td form{display:inline-flex;margin:0}
.table td:last-child,.table th:last-child{width:118px;min-width:118px;max-width:118px}
.table td:first-child,.table th:first-child{font-weight:800}
.actions{display:flex!important;gap:5px!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;max-width:100%}
.actions form{margin:0!important;display:inline-flex!important}
#dataTable,.wide-table,.compact-table{min-width:0!important;max-width:100%!important}
.wide-table{font-size:11.4px!important}
.wide-table th,.wide-table td{padding:7px 6px!important}
.wide-table .btn,.wide-table button{font-size:11px!important;padding:5px 7px!important;min-height:28px!important}
@media(min-width:1200px){
  .wide-table th:last-child,.wide-table td:last-child{width:104px;min-width:104px;max-width:104px}
  .compact-table th:last-child,.compact-table td:last-child{width:112px;min-width:112px;max-width:112px}
}
@media(max-width:991.98px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap::-webkit-scrollbar{height:8px}.table-wrap::-webkit-scrollbar-thumb{background:#d8c3dc;border-radius:999px}.table-wrap::-webkit-scrollbar-track{background:#fbf7fc;border-radius:999px}
  table,.table{min-width:760px!important;table-layout:auto!important;font-size:12px}
  .wide-table{min-width:940px!important}
  .compact-table{min-width:560px!important}
}

/* Alerts and tabs */
.alert{padding:12px 14px;border-radius:15px;margin-bottom:15px;font-weight:800;border:1px solid transparent;font-size:13.5px}.alert-success{background:#ecfdf3;color:var(--hope-success);border-color:#abefc6}.alert-danger{background:#fef3f2;color:var(--hope-danger);border-color:#fecdca}.alert-warning{background:#fffaeb;color:#b54708;border-color:#fedf89}.alert-info{background:var(--hope-purple-soft);color:var(--hope-purple);border-color:var(--hope-border)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;width:100%}.tabs a{padding:9px 13px;border-radius:999px;text-decoration:none;background:#fff;border:1px solid var(--hope-border);color:var(--hope-purple);font-weight:900;font-size:13px}.tabs a.active{background:linear-gradient(135deg,var(--hope-purple),var(--hope-purple-dark));color:#fff;box-shadow:0 9px 20px rgba(123,31,141,.15)}

/* Login */
.login-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(circle at 80% 10%,rgba(245,204,24,.22),transparent 25rem),radial-gradient(circle at 10% 90%,rgba(123,31,141,.14),transparent 30rem),linear-gradient(135deg,#fff,#fbf5fd 62%,#fffdf0)}
.login-card{width:min(500px,94vw);padding:30px;border-radius:30px!important;text-align:center;border:1px solid var(--hope-border)!important;box-shadow:0 24px 55px rgba(69,31,78,.12)}.login-logo{width:176px;height:auto;margin:0 auto 16px;display:block;object-fit:contain;background:transparent!important;border:0!important}.login-card h1{color:var(--hope-purple);font-size:28px;margin-bottom:8px}.login-card .field{text-align:right}.login-card button{min-width:130px;margin-top:8px}.demo-note{margin-top:22px;padding-top:16px;border-top:1px dashed var(--hope-border)}

@media(max-width:1399px){:root{--sidebar-width:240px}.app-main{padding:18px 18px 36px}.row{grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:14px}.sidebar-nav a{font-size:12.5px;padding:8px 8px}.sidebar-logo{width:148px}table,.table{font-size:11.8px}th,td{padding:7px 6px!important}}
@media(max-width:1199px){:root{--sidebar-width:235px}.app-main{padding:16px 16px 34px}.row{grid-template-columns:1fr}.toolbar input,.toolbar select{max-width:none}.toolbar form>*{flex:1 1 160px}.card{padding:15px}h1{font-size:22px}}
@media(max-width:991.98px){.app-main{margin-right:0;width:100%;padding:16px 12px 32px}.page-hero{padding:14px 14px;border-radius:18px}h1{font-size:21px}.sidebar-nav a:hover{transform:none}.table-wrap{border-radius:14px}}
@media(max-width:640px){body{font-size:13.5px}.mobile-logo{width:104px}.offcanvas-logo{width:120px}.page-hero{border-radius:18px}h1{font-size:21px}h2{font-size:18px}.login-card{padding:22px}.login-logo{width:150px}.toolbar form{display:block}.toolbar form>*{margin-bottom:9px}.toolbar button,.toolbar .btn,input[type="submit"]{width:100%}.tabs a{flex:1 1 auto;text-align:center}.table td .btn,.table td button{width:auto}}
@media print{body{background:#fff}.app-sidebar,.mobile-header,.page-hero,.toolbar,.tabs,.btn,button{display:none!important}.app-main{margin:0;width:100%;padding:0}.card{box-shadow:none;border:0!important;padding:0}.table-wrap{overflow:visible;border:0;box-shadow:none}table,.table{min-width:0!important;font-size:11px}th,td{padding:6px!important}}


/* v1.0.7 final layout guardrails */
.app-main,.card,.row,.toolbar,.table-wrap{min-width:0!important;box-sizing:border-box!important}
.card:has(table),.card:has(.table-wrap){overflow:hidden!important}
.card:has(table) .toolbar{border-bottom:1px dashed var(--hope-border);padding-bottom:12px;margin-bottom:14px}
.toolbar input,.toolbar select{height:40px;min-height:40px;font-size:12.8px}.toolbar button{height:40px;min-height:40px}
@supports not selector(:has(*)){
  .row > .card{min-width:0!important;overflow:hidden!important}
}

/* v1.0.8 - Professional system layout refinement
   Goal: keep every data table inside its widget, use full page width, and modernize the Bootstrap/jQuery UI. */
:root{
  --sidebar-width:292px;
  --radius-xl:24px;
  --radius-md:16px;
  --table-head:#f5edf7;
}
body{font-size:13px;letter-spacing:0;background:
  radial-gradient(circle at 82% 4%,rgba(245,204,24,.16),transparent 22rem),
  radial-gradient(circle at 8% 90%,rgba(123,31,141,.09),transparent 30rem),
  linear-gradient(180deg,#fff 0,#fbf9fd 46%,#fff 100%)}
.app-sidebar{width:var(--sidebar-width);padding:20px 18px;background:linear-gradient(180deg,#fff 0%,#fffdf5 100%);box-shadow:-16px 0 42px rgba(58,28,68,.08)}
.app-main{margin-right:var(--sidebar-width);width:calc(100% - var(--sidebar-width));padding:24px 28px 48px;overflow-x:hidden}
.sidebar-logo{width:184px}.sidebar-title-block strong{font-size:15px}.sidebar-title-block span{font-size:11.5px}.sidebar-nav a{font-size:13px;padding:9px 11px;border-radius:16px}.nav-icon{font-size:14px}.nav-icon i{line-height:1}
.page-hero{min-height:98px;padding:22px 24px;margin-bottom:22px;border-radius:26px;box-shadow:0 14px 35px rgba(65,31,75,.07)}
.page-hero h1{font-size:26px;line-height:1.1}.eyebrow{font-size:11px;letter-spacing:2px}

/* Convert two-column CRUD screens into professional stacked workspaces.
   The old right-side form was stealing width from wide tables. */
.row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important;width:100%!important;max-width:100%!important;margin:0!important;align-items:stretch!important}
.row>.card:first-child{position:static!important;top:auto!important;order:1}
.row>.card:nth-child(2){order:2;min-width:0!important;width:100%!important;overflow:hidden!important}
.row>.card:first-child form:not(.toolbar):not(.form-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;align-items:end;width:100%}
.row>.card:first-child form:not(.toolbar):not(.form-grid) .field{margin-bottom:0}.row>.card:first-child form:not(.toolbar):not(.form-grid)>button{align-self:end;min-width:120px}.row>.card:first-child form:not(.toolbar):not(.form-grid)>.muted{grid-column:1/-1;margin:2px 0 0}
.card{width:100%!important;max-width:100%!important;min-width:0!important;border-radius:24px!important;border:1px solid rgba(123,31,141,.12)!important;box-shadow:0 13px 32px rgba(62,27,71,.07)!important;padding:18px!important;overflow:hidden!important}.card h2{font-size:18px;margin-bottom:15px}.card h3{font-size:16px}

/* Toolbars behave like real application filter bars */
.toolbar{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:10px!important;padding:12px!important;margin:0 0 14px!important;background:linear-gradient(135deg,#fff,#fffaf0);border:1px solid rgba(123,31,141,.10);border-radius:18px;width:100%!important;max-width:100%!important;overflow:hidden}.toolbar form{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px!important;align-items:end!important;flex:1 1 auto!important;min-width:0!important;width:auto!important}.toolbar input,.toolbar select{max-width:none!important;min-width:0!important;width:100%!important}.toolbar>button,.toolbar>.btn,.toolbar>a.btn{flex:0 0 auto!important;white-space:nowrap!important}

/* Bootstrap-like modern buttons */
button,.btn,.btn-brand,input[type="submit"]{border-radius:13px!important;font-size:12.5px!important;font-weight:800!important;min-height:38px!important;padding:8px 13px!important}.btn-danger,.btn-danger:hover{background:linear-gradient(135deg,#c82019,#9f1b16)!important}.btn-light{background:#fff!important;color:var(--hope-purple)!important;border:1px solid rgba(123,31,141,.18)!important}.btn-light:hover{background:var(--hope-purple-soft)!important}.actions{justify-content:flex-start!important;gap:6px!important}.actions .btn,.actions button{min-height:30px!important;padding:5px 8px!important;font-size:11.5px!important}
input,select,textarea,.form-control,.form-select{border-radius:14px!important;min-height:40px!important;font-size:13px!important;padding:8px 11px!important}label,.field label{font-size:12.5px!important;margin-bottom:5px!important;color:#2d3040!important}

/* Tables: full-width container, controlled scroll inside the widget only. */
.table-wrap{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;border:1px solid rgba(123,31,141,.12)!important;border-radius:18px!important;background:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 18px rgba(62,27,71,.045)!important;margin-top:0!important;-webkit-overflow-scrolling:touch;position:relative}.table-wrap::-webkit-scrollbar{height:9px}.table-wrap::-webkit-scrollbar-track{background:#f8f0fa;border-radius:999px}.table-wrap::-webkit-scrollbar-thumb{background:#d2b7da;border-radius:999px}.table-wrap::-webkit-scrollbar-thumb:hover{background:#b98ac5}
table,.table{width:100%!important;margin:0!important;border-collapse:separate!important;border-spacing:0!important;table-layout:auto!important;font-size:12px!important;line-height:1.38!important;white-space:normal!important}.wide-table{min-width:1120px!important}.wide-table[data-cols="8"],.wide-table[data-cols="9"]{min-width:1020px!important}.compact-table{min-width:0!important}
th,td{padding:9px 10px!important;vertical-align:middle!important;text-align:right!important;white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;border-color:#eadfeb!important;max-width:260px!important}th{background:linear-gradient(180deg,#fbf7fc,#f2e6f5)!important;color:#7b1f8d!important;font-size:12px!important;font-weight:900!important;position:sticky;top:0;z-index:1}td{font-weight:650;color:#252938}tbody tr:nth-child(even) td{background:#fffefd!important}tbody tr:hover td{background:#fff9df!important}.table td:last-child,.table th:last-child{width:auto!important;min-width:130px!important;max-width:150px!important}.table td:first-child,.table th:first-child{min-width:130px!important}.wide-table td,.wide-table th{padding:8px 9px!important}.wide-table td:last-child,.wide-table th:last-child{min-width:125px!important;max-width:140px!important}

/* Make data-heavy cells readable without destroying layout */
td[data-label*="وقت"],td[data-label*="تاريخ"]{white-space:nowrap!important;font-weight:800;direction:ltr;text-align:right!important}td[data-label*="السعر"],td[data-label*="النسبة"],td[data-label*="الإيرادات"],td[data-label*="الأرباح"],td[data-label*="المصروفات"],td[data-label*="صافي"]{white-space:nowrap!important;text-align:center!important;font-variant-numeric:tabular-nums}th[data-label],td[data-label]{min-width:0}.badge-soft{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:var(--hope-purple-soft);color:var(--hope-purple);padding:4px 9px;font-size:11.5px;font-weight:900}

/* jQuery-enhanced micro UI */
.table-tools-note{font-size:11.5px;color:var(--hope-muted);font-weight:700;margin:8px 2px 0}.card.table-card{padding:0!important}.card.table-card>.toolbar{border-radius:24px 24px 0 0;margin:0!important;border-width:0 0 1px 0}.card.table-card>.table-wrap{border-width:0!important;border-radius:0 0 24px 24px!important}.card.form-card{background:linear-gradient(135deg,#fff,#fffdf4)!important}

@media(min-width:1600px){.app-main{padding-left:34px;padding-right:34px}.wide-table{min-width:0!important;table-layout:fixed!important}.wide-table th,.wide-table td{font-size:12.2px!important}.page-hero h1{font-size:27px}}
@media(max-width:1399px){:root{--sidebar-width:274px}.app-main{padding:20px 20px 42px}.sidebar-logo{width:165px}.wide-table{min-width:1080px!important}.toolbar form{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}}
@media(max-width:1199px){:root{--sidebar-width:252px}.app-main{padding:18px 16px 38px}.wide-table{min-width:1040px!important}.row>.card:first-child form:not(.toolbar):not(.form-grid){grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
@media(max-width:991.98px){.app-main{margin-right:0!important;width:100%!important;padding:16px 12px 32px}.mobile-header{position:sticky;top:0;z-index:1020;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hope-border)}.page-hero{min-height:auto}.wide-table,.compact-table,table,.table{min-width:820px!important}.toolbar{display:block!important}.toolbar form{display:grid!important;grid-template-columns:1fr!important;margin-bottom:10px}.toolbar>button,.toolbar>.btn,.toolbar>a.btn{margin:3px 0}}
@media(max-width:640px){.card{padding:14px!important}.page-hero h1{font-size:22px}.wide-table,.compact-table,table,.table{min-width:760px!important}th,td{font-size:11.5px!important;padding:7px 8px!important}}

/* =========================================================
   v1.0.9 Senior Frontend Refinement
   Professional Bootstrap/jQuery dashboard layout, controlled
   table containment, balanced Arabic typography, compact login.
   ========================================================= */
:root{
  --sidebar-width:268px;
  --content-max:1680px;
  --ui-radius:20px;
  --ui-radius-sm:12px;
  --ui-shadow:0 16px 45px rgba(55, 31, 70, .08);
  --ui-shadow-soft:0 8px 24px rgba(55, 31, 70, .055);
  --hope-surface:#ffffff;
  --hope-surface-2:#fffdf6;
}

html,body{max-width:100%;overflow-x:hidden!important}
body{
  font-family:'IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,Arial,sans-serif!important;
  font-size:13px!important;
  line-height:1.5!important;
  font-weight:500!important;
  color:#282b38!important;
}

/* Layout shell */
.app-sidebar{width:var(--sidebar-width)!important;padding:16px 14px!important}
.sidebar-logo{width:158px!important}.sidebar-title-block strong{font-size:14px!important}.sidebar-title-block span{font-size:11px!important}
.sidebar-nav{gap:4px!important}.sidebar-nav a{font-size:12.6px!important;padding:8px 9px!important;border-radius:13px!important}.nav-icon{width:25px!important;height:25px!important;border-radius:9px!important;font-size:12px!important}
.app-main{
  margin-right:var(--sidebar-width)!important;
  width:calc(100% - var(--sidebar-width))!important;
  max-width:none!important;
  padding:18px 22px 42px!important;
}
.app-main > *{max-width:var(--content-max);margin-left:auto;margin-right:auto}
.page-hero{min-height:92px!important;border-radius:22px!important;padding:18px 22px!important;margin-bottom:18px!important;box-shadow:var(--ui-shadow-soft)!important}
.page-hero .eyebrow{font-size:10.5px!important;letter-spacing:2px!important}.page-hero h1{font-size:25px!important;line-height:1.25!important;margin:4px 0 0!important}
.page-meta{font-size:12px!important;padding:8px 12px!important;background:#fff!important;border:1px solid var(--hope-border)!important;border-radius:999px!important}

/* Cards and content grids */
.card{
  border-radius:22px!important;
  border:1px solid rgba(123,31,141,.105)!important;
  box-shadow:var(--ui-shadow)!important;
  background:rgba(255,255,255,.97)!important;
  padding:18px!important;
  overflow:hidden!important;
}
.card h2{font-size:17px!important;line-height:1.35!important;margin-bottom:14px!important;font-weight:800!important;color:#202434!important}.card h3{font-size:15px!important;font-weight:800!important}
.grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;gap:14px!important}.stat{font-size:24px!important}.muted{font-size:12.4px!important}

/* Important: CRUD pages use a professional split layout.
   The form is a right panel; the table panel receives all remaining width.
   On smaller screens everything stacks cleanly. */
.row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px)!important;
  gap:18px!important;
  align-items:start!important;
  width:100%!important;
  max-width:var(--content-max)!important;
  margin:0 auto!important;
  padding:0!important;
  direction:ltr!important;
}
.row > *{min-width:0!important;max-width:100%!important;width:100%!important;margin:0!important;padding:0!important;direction:rtl!important}
.row > .card:first-child{grid-column:2!important;position:sticky!important;top:18px!important;order:2!important;align-self:start!important;background:linear-gradient(135deg,#fff,#fffdf4)!important}
.row > .card:nth-child(2){grid-column:1!important;order:1!important;min-width:0!important;width:100%!important;max-width:100%!important;overflow:hidden!important}
.row > .card:first-child form:not(.toolbar):not(.form-grid){display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.row > .card:first-child .field{margin-bottom:0!important}.row > .card:first-child .muted{font-size:11.5px!important;margin:8px 0 0!important}

/* Full-width pages/forms */
.form-grid{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))!important;gap:12px!important;align-items:end!important}
.tabs{gap:8px!important;margin-bottom:14px!important}.tabs a{font-size:12.3px!important;padding:8px 12px!important;border-radius:12px!important}

/* Forms */
label,.field label{font-size:12px!important;line-height:1.3!important;font-weight:800!important;color:#313445!important;margin-bottom:5px!important}
input,select,textarea,.form-control,.form-select{
  height:38px!important;min-height:38px!important;border-radius:12px!important;border:1px solid #e4d6e8!important;font-size:12.5px!important;padding:7px 10px!important;box-shadow:none!important;background-color:#fff!important;color:#282b38!important
}
textarea{height:auto!important;min-height:78px!important}.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{border-color:rgba(123,31,141,.45)!important;box-shadow:0 0 0 .2rem rgba(123,31,141,.08)!important}

/* Buttons */
button,.btn,.btn-brand,input[type="submit"]{min-height:36px!important;border-radius:12px!important;padding:7px 12px!important;font-size:12px!important;font-weight:800!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;line-height:1.2!important;white-space:nowrap!important}.btn-danger,button.btn-danger{background:linear-gradient(135deg,#c41f1f,#9a1717)!important;border-color:#9a1717!important;color:#fff!important}.btn-light{background:#fff!important;border:1px solid #eadfec!important;color:var(--hope-purple)!important}.btn-light:hover{background:#faf2fc!important}.actions{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;flex-wrap:wrap!important}.actions form{display:inline-flex!important;margin:0!important}.actions .btn,.actions button{min-height:29px!important;padding:5px 8px!important;font-size:11.3px!important;border-radius:10px!important}

/* Search/filter toolbar */
.toolbar{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:end!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:12px!important;
  margin:0 0 12px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fff,#fffaf0)!important;
  border:1px solid rgba(123,31,141,.10)!important;
  overflow:visible!important;
}
.toolbar form{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:9px!important;align-items:end!important;flex:1 1 520px!important;min-width:0!important}.toolbar input,.toolbar select{width:100%!important;max-width:none!important}.toolbar > button,.toolbar > .btn,.toolbar > a.btn{flex:0 0 auto!important}
.card.table-card{padding:0!important}.card.table-card > .toolbar{border-radius:22px 22px 0 0!important;border-width:0 0 1px 0!important;margin:0!important}.card.table-card > .table-wrap,.card.table-card > .dataTables_wrapper{border-radius:0 0 22px 22px!important}

/* Tables: card-contained, professional, no layout escaping. */
.table-wrap{
  width:100%!important;max-width:100%!important;min-width:0!important;overflow:auto!important;border:1px solid rgba(123,31,141,.11)!important;border-radius:18px!important;background:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;-webkit-overflow-scrolling:touch;contain:layout paint;position:relative;
}
.table-wrap::-webkit-scrollbar{height:8px;width:8px}.table-wrap::-webkit-scrollbar-track{background:#f8effa;border-radius:999px}.table-wrap::-webkit-scrollbar-thumb{background:#cfaed7;border-radius:999px}.table-wrap::-webkit-scrollbar-thumb:hover{background:#ad7bbb}
table,.table{
  width:100%!important;max-width:100%!important;margin:0!important;border-collapse:separate!important;border-spacing:0!important;table-layout:fixed!important;font-size:11.8px!important;line-height:1.36!important;white-space:normal!important;background:#fff!important
}
.wide-table{min-width:980px!important;table-layout:fixed!important}.wide-table[data-cols="9"],.wide-table[data-cols="10"],.wide-table[data-cols="11"]{min-width:1080px!important}.compact-table{min-width:0!important}
th,td{
  padding:8px 8px!important;vertical-align:middle!important;text-align:right!important;border-color:#eee4ef!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;max-width:none!important;color:#242734!important
}
th{position:sticky!important;top:0!important;z-index:2!important;background:linear-gradient(180deg,#fcf7fd,#f3e8f6)!important;color:#7b1f8d!important;font-size:11.8px!important;font-weight:900!important}.table > :not(caption) > * > *{background-color:transparent!important}tbody tr:nth-child(even) td{background:#fffdfd!important}tbody tr:hover td{background:#fff9df!important}
td[data-label*="وقت"],td[data-label*="تاريخ"],td[data-label*="الهاتف"]{direction:ltr!important;text-align:right!important;white-space:normal!important;unicode-bidi:plaintext!important}td[data-label*="السعر"],td[data-label*="النسبة"],td[data-label*="الإيرادات"],td[data-label*="الأرباح"],td[data-label*="المصروفات"],td[data-label*="صافي"],td[data-label*="الإجمالي"]{font-variant-numeric:tabular-nums!important;text-align:center!important;white-space:nowrap!important}.table td:last-child,.table th:last-child{min-width:105px!important;width:115px!important}.wide-table td:last-child,.wide-table th:last-child{width:120px!important}.table-tools-note{font-size:11px!important;color:#7a7685!important;margin:8px 2px 0!important}

/* DataTables / jQuery integration */
.dataTables_wrapper,.dt-container{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}.dt-layout-row,.dt-top,.dt-bottom{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px 12px!important}.dt-layout-cell{min-width:0!important}.dt-search label,.dt-length label{font-size:11.5px!important;color:var(--hope-muted)!important;font-weight:800!important}.dt-search input,.dt-length select{height:34px!important;min-height:34px!important;border-radius:10px!important;font-size:12px!important}.dt-info{font-size:11.5px!important;color:var(--hope-muted)!important;font-weight:700!important}.pagination{gap:4px!important;margin:0!important}.page-link{border-radius:10px!important;border:1px solid #eadfec!important;color:var(--hope-purple)!important;font-size:11.5px!important;padding:5px 9px!important}.active>.page-link,.page-link.active{background:var(--hope-purple)!important;border-color:var(--hope-purple)!important;color:#fff!important}.dt-scroll,.dt-scroll-body{width:100%!important;max-width:100%!important;overflow:auto!important}.dt-scroll-body table{min-width:inherit!important}

/* Login page redesigned: compact, centered, not too wide */
.login-page{display:block!important;min-height:100vh!important;padding:22px!important;background:radial-gradient(circle at 82% 12%,rgba(245,204,24,.20),transparent 22rem),radial-gradient(circle at 10% 88%,rgba(123,31,141,.13),transparent 30rem),linear-gradient(135deg,#fff,#fbf5fd 64%,#fffdf0)!important}.login-shell{width:min(980px,100%)!important;min-height:calc(100vh - 44px)!important;margin:0 auto!important;display:grid!important;grid-template-columns:1fr 420px!important;align-items:center!important;gap:22px!important}.login-visual{min-height:520px;border-radius:30px;background:linear-gradient(135deg,rgba(123,31,141,.95),rgba(83,17,100,.96));box-shadow:0 26px 70px rgba(83,17,100,.20);padding:34px;color:#fff;align-items:center;position:relative;overflow:hidden}.login-visual:before{content:"";position:absolute;inset:auto -80px -90px auto;width:280px;height:280px;border-radius:50%;background:rgba(245,204,24,.22)}.login-visual:after{content:"";position:absolute;inset:34px auto auto 34px;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.08)}.login-visual-content{position:relative;z-index:1}.login-visual-logo{width:170px;background:#fff;border-radius:18px;padding:8px;margin-bottom:28px}.login-visual h2{font-size:28px;font-weight:900;margin-bottom:10px}.login-visual p{font-size:14px;opacity:.9;max-width:410px}.login-feature-list{display:grid;gap:10px;margin-top:24px}.login-feature-list span{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:10px 12px;font-weight:800}.login-card{width:100%!important;max-width:420px!important;margin:0!important;padding:28px!important;border-radius:28px!important;box-shadow:0 24px 55px rgba(69,31,78,.13)!important}.login-logo{width:142px!important;margin-bottom:12px!important}.login-card h1{font-size:24px!important;line-height:1.2!important}.login-card .muted{font-size:12.4px!important}.login-card .alert{font-size:12.2px!important;border-radius:14px!important;padding:10px 12px!important}.login-card button[type="submit"]{width:100%!important;margin-top:8px!important;min-height:42px!important}.demo-note{font-size:11.8px!important;margin-top:18px!important;padding-top:14px!important}

@media (min-width:1500px){:root{--content-max:1820px;--sidebar-width:278px}.app-main{padding-left:28px!important;padding-right:28px!important}.row{grid-template-columns:minmax(0,1fr) minmax(320px,380px)!important}.wide-table{min-width:0!important}.wide-table[data-cols="9"],.wide-table[data-cols="10"],.wide-table[data-cols="11"]{min-width:1040px!important}table,.table{font-size:12px!important}}
@media (max-width:1280px){:root{--sidebar-width:248px}.app-main{padding:16px 16px 36px!important}.row{grid-template-columns:1fr!important}.row>.card:first-child,.row>.card:nth-child(2){grid-column:1!important;position:static!important}.row>.card:first-child form:not(.toolbar):not(.form-grid){grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important}.wide-table{min-width:980px!important}}
@media (max-width:991.98px){.app-main{margin-right:0!important;width:100%!important;padding:14px 12px 32px!important}.app-main>*{max-width:100%}.page-hero{min-height:auto!important}.wide-table{min-width:920px!important}.login-shell{grid-template-columns:1fr!important;place-items:center!important;min-height:calc(100vh - 44px)!important}.login-card{max-width:430px!important}}
@media (max-width:640px){body{font-size:12.7px!important}.page-hero h1{font-size:21px!important}.card{padding:14px!important;border-radius:18px!important}.toolbar{display:grid!important;grid-template-columns:1fr!important}.toolbar form{grid-template-columns:1fr!important;flex-basis:auto!important}.toolbar>button,.toolbar>.btn,.toolbar>a.btn{width:100%!important}.wide-table{min-width:840px!important}table,.table{font-size:11.3px!important}th,td{padding:7px!important}.login-page{padding:14px!important}.login-card{padding:22px!important;border-radius:24px!important}.login-logo{width:128px!important}.login-card h1{font-size:21px!important}}
