/* =====================================================
   BASE
===================================================== */

:root{

--bg1:#0f172a;
--bg2:#111827;

--card:#ffffff;
--border:#e5e7eb;

--text:#0f172a;
--muted:#6b7280;

--sidebar:#0b1220;
--sidebar2:#121a2f;

--orange:#ff7a00;
--orange2:#ff9500;
--green:#22c55e;

--accent:#ff7a00;

}

/* page background like Stripe dashboard */

body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:radial-gradient(circle at 20% 20%,#182237 0%,#0f172a 40%,#0b1220 100%);
color:var(--text);
}

/* links */

a{
text-decoration:none;
color:inherit;
}


/* =====================================================
   APP LAYOUT
===================================================== */

.app{
display:flex;
min-height:100vh;
}

/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{

width:260px;

background:
linear-gradient(180deg,#0b1220,#121a2f);

color:#fff;

padding:14px 12px;

flex-shrink:0;

box-shadow:
4px 0 25px rgba(0,0,0,.45);

transition:
width .35s cubic-bezier(.77,.05,.21,1);

}


/* brand */

.sidebar-brand{
display:flex;
align-items:center;
gap:10px;
padding:10px;
}

/* logo animation */

.logo{

height:38px;
width:38px;

border-radius:50%;

object-fit:cover;

border:2px solid rgba(255,255,255,.2);

transition:transform .35s ease;

}

.logo:hover{
transform:rotate(8deg) scale(1.08);
}


/* gradient brand text */

.brand-text{

font-weight:800;
font-size:16px;

background:linear-gradient(90deg,#ff7a00,#ff9500);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}


/* collapse button */

.collapse-btn{

margin-left:auto;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.15);

color:#fff;

border-radius:10px;

padding:6px 10px;

cursor:pointer;

transition:all .25s ease;

}

.collapse-btn:hover{

background:rgba(255,122,0,.25);

}


/* sidebar user */

.sidebar-user{

display:flex;

align-items:center;

gap:10px;

padding:12px;

border-bottom:1px solid rgba(255,255,255,.08);

margin-bottom:6px;

}

.sidebar-user img{

width:36px;
height:36px;
border-radius:50%;

}

.user-name{

font-weight:600;
font-size:14px;

}

.user-role{

font-size:11px;
opacity:.65;

}


/* =====================================================
   SIDEBAR NAV
===================================================== */

.sidebar-nav{

display:flex;
flex-direction:column;

gap:6px;

margin-top:10px;

}

.sidebar-nav a{

display:flex;

align-items:center;

gap:10px;

padding:10px 12px;

border-radius:12px;

color:rgba(255,255,255,.85);

transition:
all .25s ease;

}


/* hover animation */

.sidebar-nav a:hover{

background:rgba(255,122,0,.15);

transform:translateX(4px);

box-shadow:
0 4px 12px rgba(0,0,0,.35);

}


/* active */

.sidebar-nav a.active{

background:
linear-gradient(90deg,#ff7a00,#ff9500);

color:#fff;

box-shadow:
0 6px 14px rgba(255,122,0,.45);

}


/* =====================================================
   COLLAPSED SIDEBAR
===================================================== */

body.sidebar-collapsed .sidebar{

width:84px;

}

body.sidebar-collapsed .brand-text{

display:none;

}

body.sidebar-collapsed .sidebar-nav a{

justify-content:center;

}

body.sidebar-collapsed .sidebar-nav a .txt{

display:none;

}

body.sidebar-collapsed .collapse-btn{

transform:rotate(180deg);

}


/* =====================================================
   CONTENT
===================================================== */

.content{
flex:1;
padding:18px;
}

.container{
max-width:1200px;
margin:auto;
}


/* =====================================================
   CARDS
===================================================== */

.card{

background:var(--card);

border:1px solid var(--border);

border-radius:16px;

padding:16px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

margin-bottom:14px;

transition:
transform .18s ease,
box-shadow .18s ease;

}

.card:hover{

transform:translateY(-3px);

box-shadow:
0 16px 40px rgba(0,0,0,.15);

}


/* =====================================================
   FORMS
===================================================== */

.row{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.col{
flex:1;
min-width:260px;
}

input,select,textarea{

width:100%;

padding:10px;

border:1px solid #d9d9e6;

border-radius:8px;

box-sizing:border-box;

}


/* buttons */

button{

background:
linear-gradient(90deg,#ff7a00,#ff9500);

color:#fff;

border:none;

padding:10px;

border-radius:10px;

cursor:pointer;

transition:
all .18s ease;

}

button:hover{

transform:translateY(-1px);

box-shadow:
0 6px 14px rgba(255,122,0,.35);

}

button.secondary{

background:#fff;

color:#111;

border:1px solid #ccc;

}


/* =====================================================
   TABLES
===================================================== */

table{

width:100%;

border-collapse:collapse;

}

th,td{

padding:10px;

border-bottom:1px solid var(--border);

text-align:left;

}

th{

background:#fafbff;

font-weight:700;

}


/* =====================================================
   BADGES
===================================================== */

.badge{

display:inline-block;

padding:4px 8px;

border-radius:999px;

font-size:12px;

border:1px solid var(--border);

background:#f8fafc;

}

.badge.green{

background:#ecfdf5;

border-color:#a7f3d0;

color:#065f46;

}

.badge.red{

background:#fef2f2;

border-color:#fecaca;

color:#991b1b;

}

.small{

font-size:12px;
color:var(--muted);

}


/* =====================================================
   KPI CARDS (ANIMATED)
===================================================== */

.kpis{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:14px;

}

@media (max-width:1100px){

.kpis{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:520px){

.kpis{
grid-template-columns:1fr;
}

}


/* KPI animation */

.kpi{

border-radius:16px;

border:1px solid var(--border);

padding:16px;

background:#fff;

box-shadow:0 8px 20px rgba(0,0,0,.06);

position:relative;

overflow:hidden;

transition:transform .25s ease;

}

.kpi:hover{

transform:translateY(-4px);

}


/* glow animation */

.kpi::after{

content:"";

position:absolute;

top:-50%;

left:-50%;

width:200%;

height:200%;

background:

linear-gradient(
120deg,
transparent 30%,
rgba(255,255,255,.25),
transparent 70%
);

transform:rotate(25deg);

opacity:0;

transition:opacity .4s;

}

.kpi:hover::after{

opacity:1;

animation:kpiGlow 1.4s linear;

}

@keyframes kpiGlow{

0%{transform:translateX(-100%) rotate(25deg)}

100%{transform:translateX(100%) rotate(25deg)}

}


/* colored versions */

.kpi.orange{

border-left:5px solid #ff7a00;

background:linear-gradient(180deg,#fff3e8,#ffffff);

}

.kpi.green{

border-left:5px solid #22c55e;

background:linear-gradient(180deg,#ecfdf5,#ffffff);

}


/* =====================================================
   MOBILE
===================================================== */

.top-header{
display:none;
}

.mobile-nav{
display:none;
}


/* =====================================================
   MOBILE LAYOUT
===================================================== */

@media (max-width:900px){

.app{
display:block;
}

.sidebar{
display:none;
}

.top-header{

display:flex;

justify-content:space-between;

align-items:center;

background:#0f172a;

color:#fff;

padding:10px 12px;

}

.mobile-nav{

display:none;

}

.mobile-nav.show{

display:grid;

grid-template-columns:1fr 1fr;

gap:8px;

padding:10px;

background:#0f172a;

}

.mobile-nav a{

display:flex;

align-items:center;

justify-content:center;

padding:12px;

border-radius:10px;

background:rgba(255,255,255,.08);

color:#fff;

font-size:14px;

font-weight:600;

transition:all .2s ease;

}

.mobile-nav a:hover{

background:linear-gradient(90deg,#ff7a00,#ff9500);

transform:scale(1.05);

}

.row{
flex-direction:column;
}

.col{
min-width:100%;
}

}


/* =====================================================
   MOBILE RECEIVING TABLE
===================================================== */

@media (max-width:768px){

.mobile-table thead{
display:none;
}

.mobile-table,
.mobile-table tbody,
.mobile-table tr,
.mobile-table td{
display:block;
width:100%;
}

.mobile-table tr{

border:1px solid #e6e8ef;

border-radius:12px;

padding:10px;

margin-bottom:12px;

background:#fff;

}

.mobile-table td{

border:none;

padding:6px 0;

}

.mobile-table td::before{

content:attr(data-label);

display:block;

font-size:12px;

color:#6b7280;

margin-bottom:4px;

font-weight:600;

}

}

/* ===== FIX Z-READING CARD OVERLAP ===== */

.row{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:stretch;
}

.row .col{
flex:1 1 260px;   /* responsive card width */
min-width:260px;
max-width:100%;
}

.row .col.card{
margin:0;
}

/* Prevent nested cards from stretching outside */
.col .card{
height:100%;
}

/* Better stacking for medium screens */
@media (max-width:1000px){

.row .col{
flex:1 1 48%;
}

}

/* Mobile full width */
@media (max-width:600px){

.row .col{
flex:1 1 100%;
}

}

.search_results{
border:1px solid #ddd;
background:#fff;
max-height:200px;
overflow:auto;
position:relative;
z-index:10;
}

.search_item{
padding:6px;
cursor:pointer;
border-bottom:1px solid #eee;
}

.search_item:hover{
background:#f2f6ff;
}

.mobile-nav details{
    margin-bottom:8px;
    border-radius:10px;
    overflow:hidden;
    background:rgba(255, 255, 255, 0.03);
}

.mobile-nav summary{
    list-style:none;
    cursor:pointer;
    padding:12px 14px;
    font-weight:600;
}

.mobile-nav summary::-webkit-details-marker{
    display:none;
}

.mobile-subnav{
    display:flex;
    flex-direction:column;
    padding:0 0 8px 12px;
}

.mobile-subnav a{
    padding:10px 14px;
    text-decoration:none;
    border-radius:8px;
    margin:2px 8px 2px 0;
}

.mobile-subnav a.active{
    background:rgba(255,255,255,0.08);
    font-weight:700;
}