/* ==========================================================
   BMGG WMS V3.0
   layout.css
========================================================== */


/* ==========================================================
   Body
========================================================== */

html,
body{

height:100%;

font-family:var(--font-family);

background:var(--bg);

color:var(--text);

overflow:hidden;

}

body{

display:flex;

}


/* ==========================================================
   Login
========================================================== */

.login-page{

display:flex;

width:100%;

height:100vh;

}

.login-left{

flex:1;

position:relative;

background:
linear-gradient(135deg, rgba(22,58,95,.65) 0%, rgba(16,42,67,.85) 100%),
center center/cover no-repeat;
background-color:var(--primary-dark);
}

.login-overlay{

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:rgba(22,58,95,.72);

color:#fff;

padding:60px;

}

.login-logo{

width:140px;

margin-bottom:30px;

}

.login-overlay h1{

font-size:38px;

font-weight:700;

margin-bottom:10px;

}

.login-overlay p{

font-size:16px;

opacity:.9;

}

.login-right{

width:520px;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

}


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

.app{

display:flex;

width:100%;

height:100vh;

background:var(--bg);

}

.hidden{

display:none !important;

}


/* ==========================================================
   Sidebar
========================================================== */

.sidebar{

width:var(--sidebar-width);

background:var(--bg-sidebar);

display:flex;

flex-direction:column;

color:#fff;

transition:all var(--transition);

box-shadow:var(--shadow-md);

z-index:100;

}


/* Brand */

.brand{

height:78px;

display:flex;

align-items:center;

padding:0 22px;

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

}

.brand img{

width:42px;

height:42px;

margin-right:14px;

border-radius:var(--radius-sm);

}

.brand h2{

font-size:18px;

font-weight:700;

line-height:20px;

}

.brand span{

font-size:12px;

opacity:.75;

}


/* Menu */

.sidebar nav{

flex:1;

overflow-y:auto;

padding:18px 0;

}

.menu-title{

padding:14px 24px 8px;

font-size:11px;

font-weight:600;

letter-spacing:1px;

opacity:.55;

text-transform:uppercase;

}

.sidebar nav a{

display:flex;

align-items:center;

height:46px;

padding:0 24px;

cursor:pointer;

transition:var(--transition-fast);

font-size:14px;

font-weight:500;

color:#fff;

text-decoration:none;

}

.sidebar nav a:hover{

background:var(--bg-sidebar-hover);

}

.sidebar nav a.active{

background:var(--bg-sidebar-active);

border-left:4px solid var(--accent);

padding-left:20px;

font-weight:600;

}

.sidebar-footer{

height:60px;

display:flex;

align-items:center;

justify-content:center;

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

font-size:12px;

opacity:.75;

}


/* ==========================================================
   Main
========================================================== */

.main{

flex:1;

display:flex;

flex-direction:column;

overflow:hidden;

}


/* ==========================================================
   Topbar
========================================================== */

.topbar{

height:var(--topbar-height);

background:var(--bg-topbar);

display:flex;

align-items:center;

justify-content:space-between;

padding:0 30px;

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

box-shadow:var(--shadow-xs);

z-index:50;

}


/* Search */

.search{

width:420px;

}

.search input{

width:100%;

height:42px;

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

border-radius:var(--radius-md);

padding:0 16px;

background:#fff;

font-size:14px;

transition:var(--transition);

}

.search input:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(22,58,95,.08);

}


/* Right */

.top-actions{

display:flex;

align-items:center;

gap:18px;

}

.top-actions button{

width:40px;

height:40px;

border:none;

background:#fff;

border-radius:50%;

cursor:pointer;

box-shadow:var(--shadow-xs);

font-size:16px;

transition:var(--transition);

}

.top-actions button:hover{

transform:translateY(-2px);

box-shadow:var(--shadow-sm);

}


/* User */

.user{

display:flex;

align-items:center;

margin-left:10px;

cursor:pointer;

}

.avatar{

width:44px;

height:44px;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

font-weight:700;

margin-right:12px;

flex-shrink:0;

}

.user strong{

display:block;

font-size:14px;

}

.user span{

font-size:12px;

color:var(--text-light);

}


/* ==========================================================
   Content
========================================================== */

#content{

flex:1;

overflow-y:auto;

padding:28px;

}

#content > section{

display:block;

}

/* ==========================================================
   Page Header
========================================================== */

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:28px;

}

.page-header h1{

font-size:30px;

font-weight:700;

margin-bottom:4px;

color:var(--text-title);

}

.page-header p{

color:var(--text-light);

}

.today{

font-size:14px;

color:var(--text-light);

}


/* ==========================================================
   KPI
========================================================== */

.kpi-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:20px;

margin-bottom:28px;

}

.kpi-card{

background:#fff;

border-radius:var(--radius-lg);

padding:24px;

box-shadow:var(--shadow-sm);

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

transition:var(--transition);

min-height:130px;

}

.kpi-card:hover{

transform:translateY(-3px);

box-shadow:var(--shadow-md);

}

.kpi-card h3{

font-size:13px;

color:var(--text-light);

margin-bottom:12px;

font-weight:600;

text-transform:uppercase;

letter-spacing:.5px;

}

.kpi-card h2{

font-size:34px;

font-weight:700;

margin-bottom:8px;

color:var(--primary);

}

.kpi-card span{

font-size:13px;

color:var(--text-light);

}


/* ==========================================================
   Panel
========================================================== */

.panel{

background:#fff;

border-radius:var(--radius-lg);

padding:24px;

margin-bottom:24px;

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

box-shadow:var(--shadow-sm);

}

.panel-title{

font-size:18px;

font-weight:600;

margin-bottom:20px;

color:var(--text-title);

}


/* ==========================================================
   Quick Grid
========================================================== */

.quick-grid{

display:grid;

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

gap:18px;

}

.quick-grid button{

height:48px;

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

background:#fff;

border-radius:var(--radius-md);

font-size:14px;

font-weight:500;

cursor:pointer;

transition:var(--transition);

font-family:var(--font-family);

}

.quick-grid button:hover{

background:var(--primary);

color:#fff;

border-color:var(--primary);

transform:translateY(-2px);

box-shadow:var(--shadow-sm);

}


/* ==========================================================
   Scrollbar
========================================================== */

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-thumb{

background:#C9D2DC;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#AEBBC8;

}

::-webkit-scrollbar-track{

background:transparent;

}