/* Lavajet DBMS — list-page skin (hero + KPI cards + filter bar + card table).
   Mirrors the look of suppliers.html. Self-contained: does not need _shared.css.
   Everything is scoped to body.lj-shell so pages without the shell are untouched. */

body.lj-shell{
  --g:#099b5e; --gd:#067548;
  --lp-card:rgba(15,22,38,.86); --lp-card2:rgba(255,255,255,.04);
  --lp-br:rgba(255,255,255,.10); --lp-tp:#e9f0f2; --lp-ts:#c3cfd4; --lp-tm:#8fa3a8;
  --lp-th:rgba(255,255,255,.05); --lp-hover:rgba(255,255,255,.045);
  --lp-in:rgba(255,255,255,.06); --lp-hero:rgba(15,22,38,.55);
  --lp-b:#3d8ef0; --lp-a:#f59e0b; --lp-r:#ef4444; --lp-gr:#22c55e; --lp-p:#a78bfa;
  --blue:#3d8ef0; --tm:var(--lp-tm); --ts:var(--lp-ts); --tp:var(--lp-tp);
  font-family:'DM Sans',Arial,sans-serif; color:var(--lp-tp);
}
body.lj-shell.light-mode{
  --lp-card:#ffffff; --lp-card2:#faf8f3;
  --lp-br:#eef1ee; --lp-tp:#2a2620; --lp-ts:#5c5648; --lp-tm:#8a8474;
  --lp-th:#f4f7f5; --lp-hover:#f7faf8;
  --lp-in:#ffffff; --lp-hero:rgba(255,255,255,.55);
  --lp-b:#2563eb; --lp-a:#d97706; --lp-r:#dc2626; --lp-gr:#099b5e; --lp-p:#7c3aed;
  --blue:#2563eb;
}

/* ---------- hero (same look as the Dashboard hero) ---------- */
body.lj-shell .hero{background:transparent!important; border:0!important; padding:6px 24px 0!important; backdrop-filter:none;}
body.lj-shell .lj-ph{
  position:relative; overflow:hidden; border-radius:18px; min-height:150px; padding:22px 32px; display:flex; align-items:center;
  max-width:1600px; margin:0 auto;
  background:linear-gradient(100deg,#fff 0%,rgba(255,255,255,.94) 42%,rgba(255,255,255,0) 68%),url('Photos/wallpaper-light-v2.jpg') center/cover;
  box-shadow:0 4px 18px rgba(16,40,30,.12); border:1px solid #eef1ee;
}
body.lj-shell .lj-ph::after{content:''; position:absolute; top:-30%; bottom:-30%; left:60%; width:76px; transform:skewX(-20deg);
  background:linear-gradient(180deg,#34d27b,#0f9b5e); opacity:.92;}
body.lj-shell .lj-ph-in{position:relative; z-index:2; max-width:58%;}
body.lj-shell .lj-ph-logo{height:34px; width:auto; display:block; margin-bottom:8px;}
body.lj-shell .hero h1{margin:0; font-size:28px; font-weight:800; line-height:1.1; color:#12201a; letter-spacing:-.2px;}
body.lj-shell .lj-tag{margin-top:5px; font-size:14px; font-weight:700; color:#0f9b5e; letter-spacing:.3px;}
body.lj-shell .hero p{margin:6px 0 0; font-size:12.5px; color:#4a5a52!important;}
body.lj-shell:not(.light-mode) .lj-ph{
  background:linear-gradient(100deg,rgba(12,22,40,.97) 0%,rgba(12,22,40,.92) 42%,rgba(12,22,40,.1) 68%),url('Photos/wallpaper-dark.jpg') center/cover;
  border-color:rgba(255,255,255,.10); box-shadow:0 4px 18px rgba(0,0,0,.35);
}
body.lj-shell:not(.light-mode) .hero h1{color:#f1f6f7;}
body.lj-shell:not(.light-mode) .hero p{color:#9fb2b7!important;}
body.lj-shell:not(.light-mode) .lj-tag{color:#34d27b;}

/* ---------- stat cards (same look as the Dashboard stat cards) ---------- */
body.lj-shell .krow{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:1600px; margin:16px auto 0!important; padding:0 24px;}
body.lj-shell .kpi{
  background:#fff!important; border:1px solid #eef1ee!important; border-radius:14px; padding:16px!important; min-width:0;
  box-shadow:0 2px 10px rgba(16,40,30,.08)!important; display:flex; align-items:center; gap:14px; position:static; overflow:visible;
}
body.lj-shell .kpi::before{display:none;}
body.lj-shell .ki{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:21px; flex-shrink:0; background:#3b82f6;}
body.lj-shell .kpi.g .ki{background:#14b8a6;}
body.lj-shell .kpi.a .ki{background:#22c55e;}
body.lj-shell .kpi.r .ki{background:#f59e0b;}
body.lj-shell .kpi.p .ki{background:#a78bfa;}
body.lj-shell .kpi .kv{font-size:27px!important; font-weight:800; line-height:1.05; color:#1f2a24!important; margin:0;}
body.lj-shell .kpi .kl{font-size:12.5px; color:#5a6d63; font-weight:600; margin-top:3px; text-transform:none; letter-spacing:0;}
body.lj-shell .kpi .ks{font-size:11px; color:#8a9a92; margin-top:2px;}
body.lj-shell:not(.light-mode) .kpi{background:rgba(15,22,38,.88)!important; border-color:rgba(255,255,255,.10)!important; box-shadow:0 2px 10px rgba(0,0,0,.3)!important;}
body.lj-shell:not(.light-mode) .kpi .kv{color:#f1f6f7!important;}
body.lj-shell:not(.light-mode) .kpi .kl{color:#b9c8cc;}
body.lj-shell:not(.light-mode) .kpi .ks{color:#8fa3a8;}
@media (max-width:1100px){body.lj-shell .krow{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){body.lj-shell .krow{grid-template-columns:repeat(2,1fr); padding:0 16px;} body.lj-shell .lj-ph-in{max-width:100%;} body.lj-shell .lj-ph::after{display:none;}}

/* ---------- filter bar (white rounded card) ---------- */
body.lj-shell .fbar{background:transparent!important; border:0!important; padding:16px 24px 0!important;}
body.lj-shell .fbar .finner{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; max-width:1600px; margin:0 auto; padding:14px 16px;
  background:var(--lp-card); border:1px solid var(--lp-br); border-radius:14px; box-shadow:0 2px 10px rgba(16,40,30,.08);
}
body.lj-shell .fg{display:flex; flex-direction:column; gap:4px;}
body.lj-shell .fg label{font-size:9.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; color:var(--lp-tm);}
body.lj-shell .fw{position:relative;}
body.lj-shell .fw i{position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--lp-tm); pointer-events:none;}
body.lj-shell .fi{
  padding:8px 11px; background:var(--lp-in)!important; border:1px solid var(--lp-br)!important; border-radius:9px;
  color:var(--lp-tp)!important; font-size:12.5px; font-family:inherit; outline:none; min-width:140px;
}
body.lj-shell .fi-s{min-width:240px; padding-left:30px;}
body.lj-shell .fi:focus{border-color:var(--g)!important; box-shadow:0 0 0 3px rgba(9,155,94,.14);}
body.lj-shell select.fi option{background:#fff; color:#2a2620;}

/* ---------- card + table ---------- */
body.lj-shell .pg{max-width:1600px; margin:0 auto; padding:16px 24px 28px!important; background:transparent!important;}
body.lj-shell .card{
  background:var(--lp-card)!important; border:1px solid var(--lp-br)!important; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 10px rgba(16,40,30,.08)!important;
}
body.lj-shell .card-top{margin-top:0;}
body.lj-shell .cbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--lp-br);
}
body.lj-shell .ct{font-size:13.5px; font-weight:700; color:var(--lp-tp);}
body.lj-shell .tbl-w{overflow-x:auto;}
body.lj-shell .tbl-w table{width:100%; border-collapse:collapse; font-size:12.5px;}
body.lj-shell .tbl-w thead{background:var(--lp-th)!important;}
body.lj-shell .tbl-w th{
  padding:10px 14px; text-align:left; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px;
  color:var(--lp-tm); border-bottom:1px solid var(--lp-br); background:var(--lp-th); white-space:nowrap;
}
body.lj-shell .tbl-w td{padding:10px 14px; border-bottom:1px solid var(--lp-br); color:var(--lp-ts); white-space:nowrap; vertical-align:middle;}
body.lj-shell .tbl-w tbody tr:last-child td{border-bottom:0;}
body.lj-shell .tbl-w tbody tr:hover{background:var(--lp-hover)!important;}
body.lj-shell .tbl-w td.code,body.lj-shell .tbl-w td.code a{font-weight:700; color:var(--g); text-decoration:none;}
body.lj-shell .tbl-w td.code a:hover{text-decoration:underline;}
body.lj-shell .tbl-w td:last-child{white-space:nowrap;}

/* ---------- buttons ---------- */
body.lj-shell .btn{
  padding:6px 13px; border-radius:7px; font-size:11.5px; font-weight:600; cursor:pointer; border:1px solid transparent;
  font-family:inherit; display:inline-flex; align-items:center; gap:5px; transition:all .15s;
}
body.lj-shell .btn-sm{padding:4px 9px; font-size:10.5px;}
body.lj-shell .btn-g{background:var(--g); color:#fff;}
body.lj-shell .btn-g:hover{filter:brightness(1.1);}
body.lj-shell .btn-o{background:transparent; border-color:var(--lp-br); color:var(--lp-ts);}
body.lj-shell .btn-o:hover{background:var(--lp-hover); color:var(--lp-tp);}
body.lj-shell .btn-b{background:rgba(61,142,240,.14); border-color:rgba(61,142,240,.35); color:var(--lp-b);}
body.lj-shell .btn-a{background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.35); color:var(--lp-a);}
body.lj-shell .btn-r{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.32); color:var(--lp-r);}
body.lj-shell .btn-b:hover,body.lj-shell .btn-a:hover,body.lj-shell .btn-r:hover{filter:brightness(1.12);}
body.lj-shell td .btn-sm{margin-right:3px;}

/* ---------- badges ---------- */
body.lj-shell .badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:10.5px; font-weight:600; line-height:1.5;}
body.lj-shell .badge-g{background:rgba(34,197,94,.14); color:var(--lp-gr);}
body.lj-shell .badge-b{background:rgba(61,142,240,.14); color:var(--lp-b);}
body.lj-shell .badge-a{background:rgba(245,158,11,.15); color:var(--lp-a);}
body.lj-shell .badge-r{background:rgba(239,68,68,.14); color:var(--lp-r);}
body.lj-shell .badge-p{background:rgba(167,139,250,.16); color:var(--lp-p);}
body.lj-shell .badge-gray{background:rgba(143,163,168,.16); color:var(--lp-ts);}

/* ---------- pager ---------- */
body.lj-shell .pgn{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; border-top:1px solid var(--lp-br); flex-wrap:wrap;}
body.lj-shell .pgi{font-size:11.5px; color:var(--lp-tm);}
body.lj-shell .pgb-wrap{display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
body.lj-shell .pgb{
  min-width:28px; height:28px; padding:0 9px; border-radius:7px; border:1px solid var(--lp-br);
  background:transparent; color:var(--lp-ts); font-size:11.5px; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
body.lj-shell .pgb:hover{background:var(--lp-hover); color:var(--lp-tp);}
body.lj-shell .pgb.on,body.lj-shell .pgb.active{background:var(--g); border-color:var(--g); color:#fff;}
body.lj-shell .pgb:disabled{opacity:.4; cursor:default;}

@media (max-width:900px){
  body.lj-shell .hero{padding:14px 16px!important;}
  body.lj-shell .fbar{padding:12px 16px 0!important;}
  body.lj-shell .pg{padding:12px 16px 24px!important;}
  body.lj-shell .fi-s{min-width:100%;}
  body.lj-shell .fg{flex:1 1 140px;}
}

/* ---------- Add Asset tile page ---------- */
body.lj-shell .pg .grp-title{
  display:inline-block; background:var(--lp-card); border:1px solid var(--lp-br); border-radius:9px; padding:7px 14px;
  color:var(--g); border-bottom:1px solid var(--lp-br); box-shadow:0 2px 10px rgba(16,40,30,.08);
}
body.lj-shell .tile{
  background:var(--lp-card)!important; border:1px solid var(--lp-br)!important; border-radius:14px!important;
  box-shadow:0 2px 10px rgba(16,40,30,.08);
}
body.lj-shell .tile:hover{border-color:var(--g)!important; transform:translateY(-2px);}
body.lj-shell .tile-icon{border-radius:50%!important;}
body.lj-shell .tile-label{color:var(--lp-tp);}
body.lj-shell .tile-sub{color:var(--lp-tm);}
body.lj-shell .lj-ph-in{text-align:left;}

/* RTL (Arabic) */
html[dir="rtl"] body.lj-shell .lj-ph{
  background:linear-gradient(260deg,#fff 0%,rgba(255,255,255,.94) 42%,rgba(255,255,255,0) 68%),url('Photos/wallpaper-light-v2.jpg') center/cover;
}
html[dir="rtl"] body.lj-shell:not(.light-mode) .lj-ph{
  background:linear-gradient(260deg,rgba(12,22,40,.97) 0%,rgba(12,22,40,.92) 42%,rgba(12,22,40,.1) 68%),url('Photos/wallpaper-dark.jpg') center/cover;
}
html[dir="rtl"] body.lj-shell .lj-ph::after{left:auto; right:60%; transform:skewX(20deg);}
html[dir="rtl"] body.lj-shell .lj-ph-in{text-align:right;}
html[dir="rtl"] body.lj-shell .fi-s{padding-left:11px; padding-right:30px;}
html[dir="rtl"] body.lj-shell .fw i{left:auto; right:10px;}
html[dir="rtl"] body.lj-shell .tbl-w th, html[dir="rtl"] body.lj-shell .tbl-w td{text-align:right;}