/* ======================================
 ATTENDANCE PRO
 PHASE 26 CLEAN FOUNDATION
====================================== */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
background:#f3f4f8;
color:#0f172a;
}

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


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

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


.sidebar{
width:280px;
background:#0f172a;
color:white;
padding:36px 28px;

display:flex;
flex-direction:column;
justify-content:space-between;
gap:40px;
}


.brand{
font-size:26px;
font-weight:900;
}


.user-box{
margin-top:28px;
font-size:14px;
line-height:1.5;
}


.menu{
display:flex;
flex-direction:column;
gap:12px;
}


.menu a{
background:rgba(255,255,255,.08);
padding:16px 20px;
border-radius:16px;
font-weight:600;
}


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


/* ======================
 CARD
====================== */

.saas-card{
background:white;
border-radius:30px;
padding:38px;
margin-bottom:32px;

box-shadow:
0 20px 50px rgba(15,23,42,.08);
}


.saas-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(230px,1fr));
gap:26px;
}


/* ======================
 COMPONENT
====================== */

.material-symbols-rounded{
vertical-align:middle;
font-size:32px;
}


.metric-number{
display:block;
font-size:54px;
font-weight:900;
margin-top:24px;
}


.saas-badge{
display:inline-flex;
align-items:center;
gap:10px;

background:#f1f5f9;

padding:12px 18px;
border-radius:999px;

font-weight:800;
}


.saas-btn{
height:56px;

display:inline-flex;
align-items:center;
justify-content:center;

gap:10px;

background:#0f172a;
color:white;

border:0;
border-radius:18px;

padding:0 24px;

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

cursor:pointer;
}


/* ======================
 FORM
====================== */

.saas-input{
width:100%;

height:56px;

padding:0 18px;

border-radius:16px;

border:
1px solid #e5e7eb;

font-size:15px;
}


/* ======================
 TABLE
====================== */

.saas-table{
width:100%;
border-collapse:collapse;
}


.saas-table th{
text-align:left;
padding:16px;

font-size:14px;
color:#64748b;
}


.saas-table td{
padding:20px 16px;

border-top:
1px solid #e5e7eb;

vertical-align:middle;
}


.saas-actions{
display:flex;

align-items:center;

gap:14px;
}


.saas-actions form{
margin:0;
}


.saas-actions .saas-btn{
width:135px;
}


/* ======================
 EMPTY
====================== */

.saas-empty{
padding:50px;
text-align:center;
color:#64748b;
}


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

@media(max-width:700px){

.app{
display:block;
}


.sidebar{
width:100%;
padding:28px;

gap:25px;
}


.menu{
flex-direction:row;

overflow-x:auto;
}


.menu a{
white-space:nowrap;
}


.content{
padding:24px;
}


.saas-card{
padding:28px;
border-radius:26px;
}


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


/* table become cards */

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


.saas-table thead{
display:none;
}


.saas-table tr{
background:white;

padding:22px;
margin-bottom:20px;

border-radius:24px;

box-shadow:
0 15px 35px rgba(15,23,42,.08);
}


.saas-table td{
border:0;
padding:12px 0;
}


.saas-actions{
flex-direction:column;
}


.saas-actions,
.saas-actions form,
.saas-actions .saas-btn{
width:100%;
}

}


/* ======================================
 PHASE 26.2 PREMIUM SAAS SHELL
====================================== */

.brand{
display:flex;
align-items:center;
gap:14px;
}


.brand-logo{
width:52px;
height:52px;

display:flex;
align-items:center;
justify-content:center;

border-radius:18px;

background:white;
color:#0f172a;

font-weight:900;
}


.brand span,
.user-box span,
.sidebar-footer span{

display:block;

font-size:13px;

opacity:.7;

margin-top:4px;

}


.user-box{

display:flex;

align-items:center;

gap:14px;

}


.avatar{

width:46px;
height:46px;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

background:#334155;

font-weight:900;

}


.sidebar-footer{

font-size:14px;

line-height:1.5;

opacity:.9;

}


.sidebar-footer small{

display:block;

opacity:.6;

margin-top:8px;

}


/* ======================================
 PHASE 26 FINAL
 RESPONSIVE SHELL LOCK
====================================== */

/* desktop sidebar footer position */
.sidebar-footer{
margin-top:auto;
}

/* MOBILE TRUE APP BAR */
@media(max-width:700px){

.sidebar{
display:flex !important;
flex-direction:column !important;
justify-content:flex-start !important;

padding:22px 24px !important;
gap:20px !important;
}

/* hide desktop footer in mobile */
.sidebar-footer{
display:none !important;
}

/* compact identity */
.brand{
font-size:28px !important;
line-height:1.1 !important;
}

.user-box{
margin-top:18px !important;
}

/* toolbar navigation */
.menu{
display:flex !important;
flex-direction:row !important;

overflow-x:auto !important;

gap:14px !important;
padding-bottom:8px !important;
}

.menu a{
flex:0 0 auto !important;

padding:
14px 22px !important;

border-radius:
18px !important;
}

/* page spacing */
.content{
padding:
28px 22px !important;
}

}


/* ======================================
 PHASE 26.1
 TRUE RESPONSIVE FOOTER FIX
====================================== */

/* desktop */
@media(min-width:701px){

.sidebar-footer{
display:block !important;
margin-top:auto !important;
}

}


/* mobile footer becomes page footer */
@media(max-width:700px){

.sidebar-footer{
display:block !important;

margin-top:28px !important;

padding-top:24px !important;

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

font-size:14px !important;
opacity:.85 !important;
}

/* keep sidebar compact */
.sidebar{
height:auto !important;
min-height:0 !important;
}

}


/* ======================================
 PHASE 26.2
 TRUE GLOBAL FOOTER
====================================== */

.sidebar-footer{
display:none !important;
}

.app-footer{
padding:28px;
text-align:center;
color:#64748b;
font-weight:600;
}

.app-footer strong{
color:#0f172a;
font-size:18px;
}

.app-footer small{
opacity:.7;
}


/* desktop with sidebar */
@media(min-width:701px){

.app-footer{
margin-left:280px;
}

}


/* mobile */
@media(max-width:700px){

.app-footer{
margin-left:0;
padding:
35px 20px;
}

}


/* ======================================
 PHASE 26.3 PREMIUM SAAS FOOTER
====================================== */

.app-footer{

margin-top:60px;

padding:
40px 28px;

background:white;

border-top:
1px solid #e5e7eb;

box-shadow:
0 -20px 50px rgba(15,23,42,.04);

font-size:14px;

color:#64748b;

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

}


.app-footer strong{

font-size:22px;

font-weight:900;

color:#0f172a;

}


.app-footer span{

font-weight:600;

}


.app-footer small{

margin-top:8px;

padding:
8px 18px;

background:#f1f5f9;

border-radius:999px;

font-weight:700;

color:#475569;

}


/* DESKTOP ALIGN WITH CONTENT */
@media(min-width:701px){

.app-footer{

margin-left:280px;

border-radius:
30px 30px 0 0;

}

}


/* MOBILE PREMIUM FOOTER */
@media(max-width:700px){

.app-footer{

margin-top:50px;

border-radius:
32px 32px 0 0;

padding:
38px 20px 45px;

}

}


/* ======================================
 PHASE 26.4
 FINAL FOOTER RESPONSIVE BEHAVIOR
====================================== */


/* DESKTOP:
footer belongs to sidebar experience
*/
@media(min-width:701px){

.app-footer{
display:none !important;
}

.sidebar-footer{
display:block !important;
margin-top:auto !important;

font-size:13px;
color:rgba(255,255,255,.65);
}

}


/* MOBILE:
footer belongs bottom page
*/
@media(max-width:700px){

.app-footer{
display:flex !important;

margin:50px 22px 0 !important;

border-radius:
28px 28px 0 0;

}

.sidebar-footer{
display:none !important;
}

}



/* ======================================
 PHASE 27.1
 PREMIUM LOGIN EXPERIENCE
====================================== */

.login-shell{
min-height:100vh;
display:grid;
grid-template-columns:1fr 1fr;
background:#f3f4f8;
}


.login-brand{
background:#0f172a;
color:white;
padding:70px;
display:flex;
flex-direction:column;
justify-content:center;
}


.login-logo{
width:82px;
height:82px;
border-radius:24px;
background:white;
color:#0f172a;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
font-weight:900;
margin-bottom:30px;
}


.login-brand h1{
font-size:48px;
margin:0;
}


.login-brand p{
opacity:.7;
font-size:18px;
margin-bottom:40px;
}


.login-feature{
display:flex;
align-items:center;
gap:14px;
margin:14px 0;
font-weight:700;
}


.login-panel{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding:40px;
}


.login-card{
background:white;
width:100%;
max-width:430px;
padding:45px;
border-radius:32px;
box-shadow:
0 25px 70px rgba(15,23,42,.12);
}


.login-card h2{
font-size:34px;
margin:0;
}


.login-card p{
color:#64748b;
}


.login-card form{
display:flex;
flex-direction:column;
gap:18px;
margin-top:30px;
}


.login-footer{
margin-top:28px;
text-align:center;
color:#64748b;
font-size:14px;
}


/* MOBILE LOGIN */
@media(max-width:700px){

.login-shell{
display:block;
}

.login-brand{
padding:42px 30px;
}

.login-brand h1{
font-size:34px;
}

.login-panel{
padding:30px 20px;
}

.login-card{
padding:32px;
border-radius:28px;
}

}



/* PREMIUM SETTINGS */

.settings-card{
max-width:760px;
}

.settings-desc{
color:#64748b;
margin-bottom:28px;
}


.form-group{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:22px;
}


.form-group label{
font-weight:700;
color:#334155;
}


.upload-box{
height:120px;
border:2px dashed #cbd5e1;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
gap:18px;
cursor:pointer;
background:#f8fafc;
transition:.2s;
}


.upload-box:hover{
background:#f1f5f9;
}


.upload-box span{
font-size:42px;
}


.upload-box strong{
display:block;
font-size:18px;
}


.upload-box p{
margin:4px 0 0;
color:#64748b;
}


.brand-preview{
margin-top:15px;
width:90px;
height:90px;
border-radius:24px;
object-fit:contain;
background:white;
box-shadow:0 15px 35px #0002;
padding:12px;
}


@media(max-width:700px){

.settings-card{
margin:0;
border-radius:24px;
}

.upload-box{
height:100px;
}

}



/* ===============================
 ENTERPRISE SETTINGS
================================ */

.settings-page{
max-width:1100px;
margin:auto;
}

.settings-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:28px;
}

.settings-header h1{
display:flex;
align-items:center;
gap:12px;
font-size:28px;
}

.settings-header p{
color:#64748b;
margin-top:8px;
}


.settings-card{
background:white;
border-radius:28px;
padding:34px;
margin-bottom:28px;
box-shadow:
0 20px 50px rgba(15,23,42,.08);
}


.settings-card h3{
font-size:20px;
margin-bottom:8px;
}

.settings-card p{
color:#64748b;
margin-bottom:25px;
}


.logo-upload-box{
display:flex;
align-items:center;
gap:30px;
}


.brand-logo.big{
width:90px;
height:90px;
font-size:30px;
}


.brand-logo.big img{
width:100%;
height:100%;
object-fit:contain;
}


.upload-area{
flex:1;
border:2px dashed #cbd5e1;
border-radius:24px;
height:130px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
cursor:pointer;
}


.upload-area input{
display:none;
}


.upload-area span{
font-size:34px;
}


.upload-area small{
color:#64748b;
}


.settings-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}


.settings-grid label{
font-weight:700;
font-size:14px;
display:block;
margin-bottom:10px;
}


@media(max-width:800px){

.settings-header,
.logo-upload-box{
flex-direction:column;
align-items:stretch;
}

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

}


/* PHASE 27.3 PREMIUM LOGO UX */

.brand-logo img,
.login-logo img{
width:100%;
height:100%;
object-fit:contain;
}

.upload-area input{
display:none;
}

.upload-info{
margin-top:18px;
font-weight:700;
}

.upload-progress{
margin-top:12px;
height:10px;
background:#e5e7eb;
border-radius:999px;
overflow:hidden;
display:none;
}

.upload-progress span{
display:block;
height:100%;
width:0%;
background:#0f172a;
transition:.25s;
}



/* ======================================
PHASE 27.3B ENTERPRISE BRAND POLISH
====================================== */


/* sidebar/login logo image mode */

.brand-logo:has(img),
.login-logo:has(img){
background:white;
padding:8px;
}

.brand-logo img{
width:56px;
height:56px;
object-fit:contain;
}

.login-logo img{
width:90px;
height:90px;
object-fit:contain;
}


/* settings logo preview */

.brand-logo.big{
width:130px;
height:130px;
background:white;
box-shadow:none;
}

.brand-logo.big img{
width:120px;
height:120px;
object-fit:contain;
}


/* enterprise upload layout */

.logo-upload-box{
display:flex;
flex-direction:column;
align-items:center;
gap:28px;
width:100%;
}


.upload-area{
width:100%;
max-width:520px;
min-height:150px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

border:2px dashed #cbd5e1;
border-radius:24px;

cursor:pointer;
transition:.25s;
}


.upload-area:hover{
background:#f8fafc;
border-color:#0f172a;
}


.upload-area span{
font-size:42px;
}


.upload-info{
text-align:center;
font-size:15px;
}


.upload-progress{
width:100%;
max-width:520px;
height:12px;
border-radius:999px;
}


/* mobile tune */

@media(max-width:768px){

.brand-logo.big{
width:110px;
height:110px;
}

.brand-logo.big img{
width:100px;
height:100px;
}

}





/* ===================================
 ENTERPRISE APP HEADER FINAL
=================================== */

.enterprise-topbar{
height:88px;
display:flex;
align-items:center;
justify-content:flex-end;
padding:0 48px;
box-sizing:border-box;
}

.top-user-card{
display:flex;
align-items:center;
gap:14px;
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:999px;
padding:10px 12px 10px 22px;
box-shadow:
0 18px 45px rgba(15,23,42,.08);
}

.top-user-card strong{
display:block;
font-size:15px;
font-weight:800;
color:#0f172a;
}

.top-user-card span{
font-size:13px;
color:#64748b;
}

.top-user-card .avatar{
width:44px;
height:44px;
border-radius:50%;
background:#0f172a;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
}


/* give content correct enterprise spacing */
.content{
padding-top:0 !important;
}


/* mobile enterprise */
@media(max-width:768px){

.enterprise-topbar{
height:auto;
padding:22px 36px;
background:#0f172a;
justify-content:flex-start;
}

.top-user-card{
width:100%;
justify-content:space-between;
background:#1e293b;
border:none;
border-radius:24px;
padding:18px 22px;
box-shadow:none;
}

.top-user-card strong{
color:white;
font-size:18px;
}

.top-user-card span{
color:#cbd5e1;
font-size:15px;
}

}



/* =====================================
 TRUE ENTERPRISE SAAS APP SHELL
===================================== */

.main-shell{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
}

/* top navigation like modern SaaS */
.enterprise-topbar{
height:90px !important;
padding:
0 46px !important;

display:flex !important;
align-items:center !important;
justify-content:flex-end !important;

background:#f5f6fa;
box-sizing:border-box;
}


/* account chip */
.top-user-card{
height:54px;

display:flex;
align-items:center;
gap:14px;

background:#fff;

border:
1px solid #e5e7eb;

border-radius:999px;

padding:
8px 10px 8px 20px;

box-shadow:
0 15px 40px rgba(15,23,42,.08);
}


.top-user-card strong{
font-size:15px;
font-weight:800;
color:#0f172a;
}


.top-user-card span{
font-size:13px;
color:#64748b;
}


.top-user-card .avatar{
width:40px;
height:40px;

border-radius:50%;

background:#0f172a;
color:white;

display:flex;
align-items:center;
justify-content:center;

font-weight:900;
}


/* content alignment */
.content{
width:100%;
box-sizing:border-box;
}


/* MOBILE */
@media(max-width:700px){

.app{
display:block;
}

.main-shell{
display:block;
}


.enterprise-topbar{

height:auto !important;

padding:
20px 28px !important;

background:#0f172a;

justify-content:flex-end !important;

}


.top-user-card{

background:#1e293b;

border:none;

border-radius:22px;

box-shadow:none;

}


.top-user-card strong{
color:white;
}


.top-user-card span{
color:#cbd5e1;
}

}



/* =================================================
   PHASE 26 FINAL
   STRIPE / GITHUB ENTERPRISE SHELL
================================================= */


/* reset old account experiments */
.enterprise-topbar,
.top-user-card,
.user-box{
display:none !important;
}


/* global shell */

.app{
display:flex !important;
min-height:100vh;
background:#f4f6fb;
}


.sidebar{
width:280px;
height:100vh;
position:sticky;
top:0;

background:#0f172a;

padding:
34px 28px;

display:flex;
flex-direction:column;

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


.main-shell{
flex:1;

display:flex;
flex-direction:column;

min-height:100vh;
}



/* TOP BAR */

.topbar{

height:82px;

display:flex;
align-items:center;
justify-content:flex-end;

padding:
0 42px;

background:
rgba(244,246,251,.85);

backdrop-filter:
blur(18px);

position:sticky;
top:0;

z-index:100;
}



/* ACCOUNT BUTTON */

.account{
position:relative;
}


.avatar-btn{

width:46px;
height:46px;

border-radius:50%;

border:none;

background:#0f172a;
color:white;

font-size:18px;
font-weight:900;

cursor:pointer;

box-shadow:
0 15px 35px rgba(15,23,42,.22);
}



/* DROPDOWN */

.account-menu{

position:absolute;

right:0;
top:60px;

width:220px;

background:white;

border-radius:22px;

padding:18px;

box-shadow:
0 25px 70px rgba(15,23,42,.18);

display:none;

animation:
menuDrop .18s ease;

z-index:200;

}


.account-menu.show{
display:block;
}


.account-menu strong{

display:block;

font-size:16px;
color:#0f172a;

}


.account-menu span{

font-size:13px;
color:#64748b;

}


.account-menu hr{

border:none;

border-top:
1px solid #e5e7eb;

margin:
14px 0;

}


.account-menu a{

display:block;

padding:
12px 10px;

border-radius:12px;

color:#0f172a;

font-weight:700;

text-decoration:none;

}


.account-menu a:hover{

background:#f1f5f9;

}



@keyframes menuDrop{

from{
opacity:0;
transform:translateY(-8px);
}

to{
opacity:1;
transform:none;
}

}



/* CONTENT */

.content{

flex:1;

padding:
30px 46px 60px !important;

}



/* FOOTER GLOBAL */

.app-footer{

display:flex !important;

margin:0 !important;

border-radius:0 !important;

padding:
26px;

background:white;

border-top:
1px solid #e5e7eb;

align-items:center;
justify-content:center;

}



/* MOBILE */

@media(max-width:700px){


.app{
display:block !important;
}


.sidebar{

width:100%;
height:auto;

position:relative;

padding:
26px;

}


.main-shell{
min-height:auto;
}


.topbar{

height:70px;

padding:
0 24px;

}


.content{

padding:
26px 22px !important;

}


.account-menu{

right:0;

}


}




/* ==================================================
   PHASE 26 FINAL TRUE
   ACME / VERCEL ENTERPRISE TOP NAV SHELL
================================================== */


/* app becomes vertical */

.app{

display:flex !important;
flex-direction:column !important;

min-height:100vh;

background:#f5f7fb;

}



/* sidebar becomes navbar */

.sidebar{

width:100% !important;

height:86px !important;
min-height:0 !important;

position:sticky !important;

top:0;

z-index:100;

padding:

0 42px !important;


display:flex !important;

flex-direction:row !important;

align-items:center !important;

justify-content:space-between !important;


background:

rgba(15,23,42,.96);


backdrop-filter:

blur(20px);

}



/* sidebar inner */

.sidebar > div{

display:flex;

align-items:center;

gap:36px;

}



/* brand */

.brand{

display:flex !important;

align-items:center;

gap:14px;

margin:0 !important;

}


.brand-logo{

width:48px !important;

height:48px !important;

border-radius:16px !important;

}


.brand strong{

font-size:18px !important;

}


.brand span{

font-size:12px !important;

}



/* menu horizontal */

.menu{

display:flex !important;

flex-direction:row !important;

align-items:center;

gap:10px !important;

margin:0 !important;

}


.menu a{

padding:

12px 18px !important;


border-radius:999px !important;

background:

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

}



/* main wrapper */

.main-shell{

display:flex;

flex-direction:column;

flex:1;

}



/* remove empty old topbar space */

.topbar{

position:absolute !important;

right:42px;

top:20px;

height:auto !important;

padding:0 !important;

background:transparent !important;

}



/* avatar */

.avatar-btn{

width:46px;

height:46px;

box-shadow:

0 15px 40px rgba(0,0,0,.25);

}



/* content full */

.content{

width:100%;

max-width:1200px;

margin:

0 auto;


padding:

50px 40px !important;

}



/* footer enterprise */

.app-footer{

margin-top:auto !important;

width:100%;

border-radius:0 !important;

background:white;

}



/* MOBILE */

@media(max-width:700px){


.sidebar{

height:auto !important;

padding:

24px !important;


display:block !important;

}


.sidebar > div{

display:block;

}


.brand{

margin-bottom:22px !important;

}


.menu{

overflow-x:auto;

}


.topbar{

top:28px;

right:24px;

}


.content{

padding:

32px 22px !important;

}


}




/* ==================================================
   PHASE 26.1
   TRUE ENTERPRISE NAVBAR FINAL
   (ACME / VERCEL STYLE)
================================================== */


/* DESKTOP ONLY */

@media(min-width:701px){


.sidebar{

height:78px !important;

padding:
0 48px !important;

display:grid !important;

grid-template-columns:
300px 1fr !important;

align-items:center !important;

gap:32px;

overflow:visible !important;

}


/* brand lock */

.sidebar > div{

display:grid !important;

grid-template-columns:
300px 1fr;

align-items:center;

width:100%;

}


.brand{

width:300px;

display:flex !important;

align-items:center;

gap:14px;

overflow:hidden;

}


.brand > div:last-child{

min-width:0;

}


.brand strong{

display:block;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

font-size:18px !important;

}


.brand span{

display:block;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

font-size:12px !important;

max-width:210px;

}



/* navigation */

.menu{

display:flex !important;

flex-wrap:nowrap !important;

overflow-x:auto;

gap:10px !important;

padding-right:90px;

scrollbar-width:none;

}


.menu::-webkit-scrollbar{

display:none;

}


.menu a{

flex:0 0 auto;

font-size:14px;

padding:
10px 18px !important;

}



/* account stays right */

.topbar{

position:fixed !important;

top:16px !important;

right:36px !important;

z-index:999;

}


.avatar-btn{

width:48px !important;

height:48px !important;

}



/* dropdown */

.account-menu{

top:58px !important;

right:0;

}


}


/* better mobile menu */

@media(max-width:700px){

.menu{

scrollbar-width:none;

}

.menu::-webkit-scrollbar{

display:none;

}

}




/* ==================================================
   PHASE 26.2
   DESKTOP NAV REAL ENTERPRISE FIX
================================================== */

@media(min-width:701px){


.sidebar{

display:flex !important;

justify-content:space-between !important;

gap:30px !important;

}


.sidebar > div{

display:flex !important;

align-items:center !important;

gap:35px !important;

flex:1;

min-width:0;

}


/* brand fixed */

.brand{

flex:0 0 320px !important;

}



/* desktop nav must NOT disappear */

.menu{

flex:1 !important;

display:flex !important;

justify-content:center !important;

flex-wrap:wrap !important;

overflow:visible !important;

padding-right:80px !important;

gap:10px !important;

}


.menu a{

display:flex !important;

align-items:center;

height:42px;

font-size:14px !important;

white-space:nowrap;

padding:

0 18px !important;

}



/* account safe zone */

.topbar{

right:32px !important;

}


}


/* only mobile scroll menu */

@media(max-width:700px){

.menu{

flex-wrap:nowrap !important;

overflow-x:auto !important;

justify-content:flex-start !important;

}

}




/* ======================================
   PHASE 31
   CLOUDFLARE STYLE SAAS SHELL FINAL
====================================== */


/* reset old shell */
.app{
display:block !important;
}


/* TOP NAV */
.topbar{
position:sticky !important;
top:0 !important;
left:0 !important;
right:0 !important;

height:78px;

display:flex !important;
align-items:center;
justify-content:space-between;

padding:
0 36px;

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

backdrop-filter:
blur(18px);

border-bottom:
1px solid #e5e7eb;

z-index:1000;
}


.top-left{
display:flex;
align-items:center;
gap:18px;
}


.drawer-btn{
width:46px;
height:46px;

border:0;
border-radius:16px;

background:#f1f5f9;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;
}


.top-brand{
font-size:18px;
font-weight:900;
color:#0f172a;
}


/* DRAWER SIDEBAR */
.sidebar{
position:fixed !important;

top:0;
left:0;

width:330px !important;
height:100vh;

transform:
translateX(-110%);

transition:
.35s cubic-bezier(.4,0,.2,1);

z-index:2000;

background:#0f172a;

padding:
34px 28px !important;

box-shadow:
40px 0 80px rgba(15,23,42,.35);
}


.drawer-open .sidebar{
transform:
translateX(0);
}


/* BLUR OVERLAY */
.drawer-overlay{
position:fixed;
inset:0;

background:
rgba(15,23,42,.35);

backdrop-filter:
blur(5px);

opacity:0;
pointer-events:none;

transition:.3s;

z-index:1500;
}


.drawer-open .drawer-overlay{
opacity:1;
pointer-events:auto;
}


/* drawer menu vertical forever */
.sidebar > div{
display:block !important;
}


.menu{
display:flex !important;
flex-direction:column !important;

overflow:visible !important;

padding:0 !important;

gap:12px !important;

margin-top:35px;
}


.menu a{
height:auto !important;

justify-content:flex-start;

padding:
15px 18px !important;

font-size:15px !important;
}


/* account */
.account-menu{
display:none;
}


.account-menu.show{
display:block;
}


/* content center */
.main-shell{
min-height:100vh;
}


.content{
max-width:1200px;

margin:
0 auto;

padding:
48px 32px !important;
}


/* footer enterprise */
.app-footer{
margin:40px auto 0 !important;

max-width:1200px;

border-radius:
28px 28px 0 0;
}


/* MOBILE */
@media(max-width:700px){

.topbar{
height:70px;
padding:
0 20px;
}

.top-brand{
font-size:15px;
}

.sidebar{
width:85% !important;
}

.content{
padding:
28px 22px !important;
}

}




/* ======================================
   PHASE 31
   CLOUDFLARE STYLE SAAS SHELL FINAL
====================================== */


/* reset old shell */
.app{
display:block !important;
}


/* TOP NAV */
.topbar{
position:sticky !important;
top:0 !important;
left:0 !important;
right:0 !important;

height:78px;

display:flex !important;
align-items:center;
justify-content:space-between;

padding:
0 36px;

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

backdrop-filter:
blur(18px);

border-bottom:
1px solid #e5e7eb;

z-index:1000;
}


.top-left{
display:flex;
align-items:center;
gap:18px;
}


.drawer-btn{
width:46px;
height:46px;

border:0;
border-radius:16px;

background:#f1f5f9;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;
}


.top-brand{
font-size:18px;
font-weight:900;
color:#0f172a;
}


/* DRAWER SIDEBAR */
.sidebar{
position:fixed !important;

top:0;
left:0;

width:330px !important;
height:100vh;

transform:
translateX(-110%);

transition:
.35s cubic-bezier(.4,0,.2,1);

z-index:2000;

background:#0f172a;

padding:
34px 28px !important;

box-shadow:
40px 0 80px rgba(15,23,42,.35);
}


.drawer-open .sidebar{
transform:
translateX(0);
}


/* BLUR OVERLAY */
.drawer-overlay{
position:fixed;
inset:0;

background:
rgba(15,23,42,.35);

backdrop-filter:
blur(5px);

opacity:0;
pointer-events:none;

transition:.3s;

z-index:1500;
}


.drawer-open .drawer-overlay{
opacity:1;
pointer-events:auto;
}


/* drawer menu vertical forever */
.sidebar > div{
display:block !important;
}


.menu{
display:flex !important;
flex-direction:column !important;

overflow:visible !important;

padding:0 !important;

gap:12px !important;

margin-top:35px;
}


.menu a{
height:auto !important;

justify-content:flex-start;

padding:
15px 18px !important;

font-size:15px !important;
}


/* account */
.account-menu{
display:none;
}


.account-menu.show{
display:block;
}


/* content center */
.main-shell{
min-height:100vh;
}


.content{
max-width:1200px;

margin:
0 auto;

padding:
48px 32px !important;
}


/* footer enterprise */
.app-footer{
margin:40px auto 0 !important;

max-width:1200px;

border-radius:
28px 28px 0 0;
}


/* MOBILE */
@media(max-width:700px){

.topbar{
height:70px;
padding:
0 20px;
}

.top-brand{
font-size:15px;
}

.sidebar{
width:85% !important;
}

.content{
padding:
28px 22px !important;
}

}




/* ==========================================
   PHASE 31.1
   CLOUDFLARE TRUE ENTERPRISE DRAWER
========================================== */


/* TOP BAR CLOUD STYLE */
.topbar{
height:72px !important;

background:#ffffff !important;

border-bottom:
1px solid #e5e7eb !important;

box-shadow:none !important;

padding:
0 28px !important;
}


.drawer-btn{
background:transparent !important;

border-radius:8px !important;

width:42px !important;
height:42px !important;

color:#475569;
}


.drawer-btn:hover{
background:#f1f5f9 !important;
}


.top-brand{
font-size:15px !important;
font-weight:700 !important;
color:#334155;
}



/* DRAWER LIKE CLOUDFLARE */
.sidebar{

background:#ffffff !important;

color:#334155 !important;

width:360px !important;

padding:
22px 24px !important;

box-shadow:
20px 0 60px rgba(15,23,42,.18) !important;

border-right:
1px solid #e5e7eb;

}


/* BRAND INSIDE DRAWER */
.brand{
display:flex !important;

align-items:center !important;

gap:14px !important;

margin-bottom:25px !important;
}


.brand strong{
font-size:17px !important;

font-weight:800 !important;

color:#0f172a !important;
}


.brand span{
font-size:13px !important;

color:#64748b !important;
}


.brand-logo{
width:44px !important;
height:44px !important;

border:
1px solid #e5e7eb;

box-shadow:none !important;
}



/* MENU LIST */
.menu{

margin-top:20px !important;

display:flex !important;

flex-direction:column !important;

gap:4px !important;

}


.menu a{

background:transparent !important;

color:#475569 !important;

height:46px !important;

border-radius:10px !important;

padding:
0 14px !important;

font-size:15px !important;

font-weight:600 !important;

display:flex !important;

align-items:center !important;

justify-content:flex-start !important;

}


.menu a:hover{

background:#f1f5f9 !important;

color:#0f172a !important;

}



/* REMOVE OLD PILL FEEL */
.sidebar *{
text-shadow:none !important;
}



/* SOFT CLOUDFLARE OVERLAY */
.drawer-overlay{

background:
rgba(255,255,255,.55) !important;

backdrop-filter:
blur(3px) !important;

}



/* AVATAR */
.avatar-btn{

width:42px !important;
height:42px !important;

background:#f1f5f9 !important;

color:#0f172a !important;

box-shadow:none !important;

}


/* account dropdown premium */
.account-menu{

border:
1px solid #e5e7eb;

border-radius:16px !important;

box-shadow:
0 20px 50px rgba(15,23,42,.12);

}



/* MOBILE SAME EXPERIENCE */
@media(max-width:700px){

.sidebar{
width:82% !important;
}


.topbar{
height:64px !important;
}

}




/* =====================================
   PHASE 31.2
   CLOUDFLARE DRAWER FINAL ONLY
===================================== */


/* drawer container */
.sidebar{

width:380px !important;
max-width:88vw !important;

height:100vh !important;

background:#fff !important;

padding:0 !important;

color:#111827 !important;

overflow-y:auto !important;

box-shadow:
12px 0 40px rgba(15,23,42,.12) !important;

}


/* top identity */
.sidebar > div{

display:block !important;

padding:
18px 22px !important;

}


/* brand compact */
.brand{

height:58px !important;

display:flex !important;
align-items:center !important;

gap:14px !important;

margin:0 0 18px 0 !important;

}


.brand-logo{

width:42px !important;
height:42px !important;

border-radius:10px !important;

background:#fff !important;

border:
1px solid #e5e7eb !important;

}


.brand strong{

font-size:15px !important;

font-weight:700 !important;

color:#111827 !important;

}


.brand span{

font-size:12px !important;

color:#6b7280 !important;

}



/* MENU CLOUDFLARE */
.menu{

display:flex !important;

flex-direction:column !important;

gap:2px !important;

padding:0 !important;

margin-top:16px !important;

}


.menu a{

width:100% !important;

height:44px !important;

border-radius:8px !important;

background:transparent !important;

color:#374151 !important;


display:flex !important;

align-items:center !important;

justify-content:flex-start !important;


padding:
0 14px !important;


font-size:15px !important;

font-weight:500 !important;

text-align:left !important;

}



/* inject material feel */
.menu a::before{

font-family:'Material Symbols Rounded';

font-size:21px;

margin-right:14px;

color:#9ca3af;

}


.menu a[href="/dashboard"]::before{
content:"dashboard";
}

.menu a[href="/companies"]::before{
content:"business";
}

.menu a[href="/employees"]::before{
content:"groups";
}

.menu a[href="/shifts"]::before{
content:"schedule";
}

.menu a[href="/payroll"]::before{
content:"payments";
}

.menu a[href="/audit"]::before{
content:"fact_check";
}

.menu a[href="/notifications"]::before{
content:"notifications";
}



.menu a:hover{

background:#f3f4f6 !important;

color:#111827 !important;

}



/* overlay like cloudflare */
.drawer-overlay{

background:
rgba(249,250,251,.65) !important;

backdrop-filter:
blur(5px) !important;

}



/* mobile exact */
@media(max-width:700px){

.sidebar{

width:82vw !important;

}


.menu a{

font-size:15px !important;

}

}


/* desktop exact */
@media(min-width:701px){

.sidebar{

width:390px !important;

}

}




/* =====================================
   PHASE 31.3
   CLOUDFLARE POLISH SAFE PATCH
===================================== */


/* FIX LOGIN MOBILE LOGO LEAK */
.login-shell .brand-logo,
.login-brand .brand-logo{

width:90px !important;
height:90px !important;

max-width:90px !important;
max-height:90px !important;

}


/* DRAWER ALWAYS START TOP */
.sidebar{

display:block !important;

}


.sidebar > div{

height:auto !important;

display:block !important;

}


/* CLOUDFLARE WORKSPACE HEADER */
.sidebar .brand{

padding-bottom:18px !important;

margin-bottom:18px !important;

border-bottom:
1px solid #e5e7eb !important;

}


/* LOGO NORMAL INSIDE DRAWER ONLY */
.sidebar .brand-logo{

width:42px !important;
height:42px !important;

flex:0 0 42px !important;

}


/* MENU POSITION FIX DESKTOP */
.menu{

margin-top:8px !important;

align-items:stretch !important;

justify-content:flex-start !important;

}


/* MENU ITEM LIKE CLOUDFLARE */
.menu a{

justify-content:flex-start !important;

gap:0 !important;

height:42px !important;

margin:0 !important;

}


/* ACTIVE / HOVER ENTERPRISE */
.menu a:hover{

background:#f3f4f6 !important;

}


/* DESKTOP DRAWER FIX */
@media(min-width:701px){

.sidebar{

padding-top:0 !important;

}


.sidebar > div{

padding-top:20px !important;

}


.menu{

position:static !important;

transform:none !important;

}

}



/* MOBILE KEEP CURRENT FEEL */
@media(max-width:700px){

.sidebar{

padding-top:0 !important;

}


.sidebar .brand{

margin-top:8px !important;

}


.menu{

margin-top:10px !important;

}

}




/* ==================================================
   PHASE 27.4
   SETTINGS DESKTOP WIDTH ALIGN ONLY
   mobile untouched
================================================== */

@media(min-width:701px){

    .settings-page{
        width:100% !important;
        max-width:none !important;
    }

    .settings-card{
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box;
    }

}




/* ==================================================
   FINAL DASHBOARD MOBILE METRIC GRID
   Real structure:
   dashboard-page > saas-grid > dashboard-metric
================================================== */

@media(max-width:700px){

.dashboard-page{
    display:block !important;
}

.dashboard-page .saas-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
}

.dashboard-page .dashboard-metric{
    width:100% !important;
    box-sizing:border-box !important;

    padding:22px 14px !important;
    min-height:170px !important;

    border-radius:24px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
}

.dashboard-page .dashboard-metric .material-symbols-rounded{
    font-size:30px !important;
}

.dashboard-page .dashboard-metric h3{
    font-size:13px !important;
    line-height:1.2 !important;
}

.dashboard-page .dashboard-metric .metric-number{
    font-size:38px !important;
    margin:0 !important;
}

}


/* ==================================================
   FINAL FOOTER LOGO SIZE LOCK
   prevent original image size leak
================================================== */

.app-footer img,
.footer-logo{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    object-fit:contain !important;
}

.footer-brand-row{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
}


/* ==================================================
   DASHBOARD METRIC VISUAL POLISH ONLY
   Safe:
   - no grid change
   - no width change
   - no wrapper change
================================================== */

@media(max-width:700px){

.dashboard-page .dashboard-metric{

    padding:
    24px 18px !important;

    justify-content:
    center !important;

    gap:
    14px !important;
}

.dashboard-page .dashboard-metric
.material-symbols-rounded{

    font-size:
    32px !important;

    line-height:
    1 !important;
}

.dashboard-page .dashboard-metric h3{

    margin:
    0 !important;

    font-size:
    14px !important;

    font-weight:
    800 !important;

    line-height:
    1.2 !important;
}

.dashboard-page .dashboard-metric .metric-number{

    margin-top:
    8px !important;

    font-size:
    40px !important;

    line-height:
    1 !important;
}

}


/* ==================================================
   MOBILE ACTION BUTTON GAP FIX
   Scope:
   Companies + Employees card action only
================================================== */

@media(max-width:700px){

.saas-card .saas-btn + .saas-btn{
    margin-top:14px !important;
}

}


/* ==================================================
   REAL MOBILE TABLE ACTION GAP FIX
   Root cause:
   second button is inside form wrapper
   Scope:
   Companies + Employees mobile cards only
================================================== */
@media(max-width:700px){

.saas-actions{
    gap:
    16px !important;
}

.saas-actions form{
    margin-top:
    0 !important;
}

}


/* ==================================================
   REAL MOBILE ACTION SEPARATION FIX
   Root cause:
   mobile override lost display:flex
   Scope:
   table action buttons only
================================================== */
@media(max-width:700px){

.saas-table .saas-actions{
    display:
    flex !important;

    flex-direction:
    column !important;

    gap:
    16px !important;
}

.saas-table .saas-actions form{
    width:
    100% !important;

    margin:
    0 !important;
}

.saas-table .saas-actions .saas-btn{
    width:
    100% !important;
}

}


/* ==================================================
   PAYROLL GENERATE FORM SPACING FIX
   Scope:
   payroll generate card only
   mobile + desktop
================================================== */

.saas-card:first-child > form[action="/payroll/generate"]{
    display:
    flex !important;

    flex-direction:
    column !important;

    gap:
    16px !important;
}

.saas-card:first-child > form[action="/payroll/generate"] .saas-btn{
    margin-top:
    4px !important;
}



/* ==================================================
 PHASE 29.3.3 ENTERPRISE EMPLOYEE DIRECTORY REAL
================================================== */

.employee-directory{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
gap:28px;
}


.employee-card{
background:#fff;
border-radius:32px;
padding:28px;
display:flex;
gap:22px;
align-items:flex-start;
border:1px solid rgba(226,232,240,.9);
box-shadow:
0 25px 70px rgba(15,23,42,.10);
transition:.25s ease;
}


.employee-card:hover{
transform:translateY(-4px);
box-shadow:
0 35px 90px rgba(15,23,42,.16);
}


.employee-avatar{
width:68px;
height:68px;
border-radius:24px;
background:#0f172a;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:900;
flex-shrink:0;
}


.employee-main{
flex:1;
}


.employee-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
}


.employee-main h3{
margin:0;
font-size:22px;
font-weight:900;
letter-spacing:-.4px;
}


.employee-main p{
margin-top:8px;
color:#64748b;
font-weight:700;
}


.employee-meta{
margin-top:20px;
display:grid;
gap:12px;
color:#475569;
font-weight:600;
}


.employee-meta div{
display:flex;
align-items:center;
gap:10px;
}


.employee-action{
margin-top:22px;
height:54px;
border-radius:18px;
}


@media(max-width:700px){

.employee-directory{
display:flex;
flex-direction:column;
gap:22px;
}


.employee-card{
padding:24px;
border-radius:30px;
}


.employee-head{
display:block;
}


.employee-avatar{
width:58px;
height:58px;
font-size:24px;
}


.employee-main h3{
font-size:21px;
margin-top:12px;
}


.employee-action{
width:100%;
justify-content:center;
}

}



/* PHASE 29.5 ENTERPRISE DELETE MODAL */

.delete-modal{
position:fixed;
inset:0;
background:rgba(15,23,42,.55);
backdrop-filter:blur(10px);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
padding:24px;
}


.delete-modal.active{
display:flex;
}


.delete-box{
background:white;
width:100%;
max-width:430px;
border-radius:32px;
padding:36px;
box-shadow:
0 40px 120px rgba(15,23,42,.35);
text-align:center;
animation:modalPop .2s ease;
}


.delete-icon{
font-size:54px;
color:#dc2626;
}


.delete-box h2{
font-size:28px;
margin:18px 0 12px;
}


.delete-box p{
color:#64748b;
line-height:1.6;
font-weight:600;
}


.delete-actions{
display:flex;
gap:14px;
margin-top:30px;
}


.modal-cancel,
.modal-danger{
flex:1;
border:0;
border-radius:18px;
height:56px;
font-weight:800;
cursor:pointer;
}


.modal-cancel{
background:#f1f5f9;
color:#0f172a;
}


.modal-danger{
background:#dc2626;
color:white;
}


@keyframes modalPop{
from{
transform:scale(.92);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}


@media(max-width:600px){

.delete-box{
border-radius:28px;
padding:30px 24px;
}

.delete-actions{
flex-direction:column;
}

}


/* ===============================
 ENTERPRISE DELETE CONFIRM MODAL
 PHASE 29.5.1
=============================== */

.delete-modal{
position:fixed;
inset:0;
background:rgba(15,23,42,.55);
backdrop-filter:blur(8px);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
padding:24px;
}

.delete-modal.active{
display:flex !important;
}

.delete-box{
width:100%;
max-width:460px;
background:#fff;
border-radius:32px;
padding:36px;
box-shadow:
0 40px 100px rgba(15,23,42,.35);
animation:deletePop .22s ease;
}

@keyframes deletePop{
from{
transform:scale(.92);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

.delete-icon{
width:70px;
height:70px;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
background:#fee2e2;
color:#991b1b;
font-size:38px;
margin-bottom:22px;
}

.delete-box h2{
font-size:26px;
font-weight:900;
margin-bottom:12px;
}

.delete-box p{
color:#64748b;
line-height:1.7;
font-weight:600;
}

.delete-actions{
display:flex;
gap:14px;
margin-top:30px;
}

.modal-cancel,
.modal-danger{
border:0;
height:54px;
border-radius:18px;
padding:0 24px;
font-weight:800;
cursor:pointer;
}

.modal-cancel{
background:#f1f5f9;
color:#334155;
}

.modal-danger{
background:#0f172a;
color:white;
flex:1;
}

@media(max-width:700px){

.delete-box{
border-radius:30px;
padding:30px;
}

.delete-actions{
flex-direction:column;
}

.modal-cancel,
.modal-danger{
width:100%;
}

}


/* ============================
 PHASE 29.5.2 DANGER ACTION UX
============================ */

.delete-danger-btn{
background:#dc2626 !important;
color:white !important;
}

.delete-danger-btn:hover{
background:#b91c1c !important;
}

.saas-card form[action="/employees/delete"]{
display:inline-flex;
margin-left:14px;
}

@media(max-width:700px){

.saas-card form[action="/employees/delete"]{
display:flex;
margin-left:0;
margin-top:14px;
}

.saas-card form[action="/employees/delete"] button{
width:100%;
justify-content:center;
}

}



/* ===============================
 PHASE 29.5.3 MANAGEMENT ACTION FIX
 Desktop inline + Mobile equal size
=============================== */


/* desktop */
.saas-card:has(form[action="/employees/delete"]){
display:block;
}

.saas-card:has(form[action="/employees/delete"]) form{
display:inline-flex !important;
vertical-align:top;
margin-top:0 !important;
}

.saas-card form[action="/employees/delete"]{
margin-left:16px !important;
}

.saas-card form[action="/employees/delete"] button,
.saas-card form[action*="disable"] button{
height:58px;
min-width:220px;
justify-content:center;
}


/* mobile */
@media(max-width:700px){

.saas-card:has(form[action="/employees/delete"]) form{
display:flex !important;
width:100%;
margin-left:0 !important;
}

.saas-card:has(form[action="/employees/delete"]) button{
width:100%;
height:60px;
justify-content:center;
}

.saas-card form[action="/employees/delete"]{
margin-top:14px !important;
}

}



/* ===============================
 PHASE 29.5.4 MOBILE BUTTON BREATHING
=============================== */

@media(max-width:700px){

.saas-card:has(form[action="/employees/delete"]) form{
margin-bottom:16px !important;
}

.saas-card form[action="/employees/delete"]{
margin-top:0 !important;
margin-bottom:0 !important;
}

.saas-card:has(form[action="/employees/delete"]){
padding-bottom:34px;
}

}



/* ===============================
 PHASE 29.5.5 MOBILE DELETE MODAL UX
=============================== */

@media(max-width:700px){

.delete-box{
width:calc(100% - 48px) !important;
max-width:420px;
padding:34px 28px !important;
border-radius:28px !important;
}

.delete-actions{
display:flex !important;
flex-direction:column-reverse !important;
gap:14px !important;
width:100% !important;
margin-top:28px;
}

.delete-actions button,
.modal-cancel,
.modal-danger{
width:100% !important;
height:56px !important;
border-radius:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:15px !important;
font-weight:800 !important;
}

.modal-danger{
background:#dc2626 !important;
color:white !important;
}

.modal-cancel{
background:#f1f5f9 !important;
color:#0f172a !important;
}

}



/* ===============================
 PHASE 29.5.6 TRUE MOBILE MODAL BUTTON
=============================== */

@media(max-width:700px){

.delete-box{
padding:38px 34px !important;
}

.delete-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
margin-top:32px !important;
}

.delete-actions .modal-danger,
.delete-actions .modal-cancel{
all:unset;

width:100% !important;
height:58px !important;

display:flex !important;
align-items:center !important;
justify-content:center !important;

box-sizing:border-box !important;

border-radius:18px !important;

font-size:15px !important;
font-weight:800 !important;

cursor:pointer;
}

.delete-actions .modal-danger{
background:#dc2626 !important;
color:white !important;
}

.delete-actions .modal-cancel{
background:#f1f5f9 !important;
color:#0f172a !important;
}

}



/* ==================================================
   PHASE 30.2.1
   ENTERPRISE MATERIAL SIDEBAR ICON SYSTEM
   Remove legacy pseudo icons
================================================== */

.menu a::before{
    display:none !important;
    content:none !important;
}

.menu a{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
}

.menu a .material-symbols-rounded{
    width:24px;
    min-width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    line-height:1;
}

/* Mobile drawer premium sizing */
@media(max-width:768px){

    .menu a{
        gap:16px !important;
        font-size:15px;
    }

    .menu a .material-symbols-rounded{
        font-size:26px;
        width:28px;
        min-width:28px;
    }

}



/* ==================================================
   PHASE 30.4.1
   MOBILE HR ATTENDANCE REPORT EXPERIENCE
================================================== */

@media(max-width:768px){

    .saas-card{
        max-width:100%;
        overflow:hidden;
    }


    .saas-card .saas-table{
        border-collapse:separate;
        border-spacing:0 18px;
    }


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


    .saas-card .saas-table tr:first-child{
        display:none;
    }


    .saas-card .saas-table tr{
        background:white;
        border-radius:22px;
        padding:18px;
        box-shadow:
        0 18px 40px rgba(15,23,42,.08);
    }


    .saas-card .saas-table td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:12px 0;
        border:none;
        font-size:14px;
    }


    .saas-card .saas-table td::before{
        font-weight:700;
        color:#64748b;
    }


    .saas-card .saas-table td:nth-child(1)::before{
        content:"No";
    }

    .saas-card .saas-table td:nth-child(2)::before{
        content:"Hari";
    }

    .saas-card .saas-table td:nth-child(3)::before{
        content:"Tanggal";
    }

    .saas-card .saas-table td:nth-child(4)::before{
        content:"Jam Masuk";
    }

    .saas-card .saas-table td:nth-child(5)::before{
        content:"Jam Keluar";
    }

    .saas-card .saas-table td:nth-child(6)::before{
        content:"Status";
    }

    .saas-card .saas-table td:nth-child(7)::before{
        content:"Keterangan";
    }


    .saas-badge{
        margin-left:auto;
    }


    .saas-btn{
        width:100%;
        justify-content:center;
    }

}



/* PHASE 30.5 ENTERPRISE REALTIME CLOCK */
.enterprise-clock{
    font-weight:700;
    font-size:14px;
    background:#f8fafc;
    padding:10px 18px;
    border-radius:999px;
    white-space:nowrap;
}

@media(max-width:768px){
    .enterprise-clock{
        font-size:12px;
        padding:8px 12px;
    }
}

/* ==================================================
 PHASE 30.6
 ATTENDANCE NOTE COLUMN MOBILE POLISH
================================================== */

@media(max-width:768px){

    .saas-card .saas-table td:nth-child(8)::before{
        content:"Catatan";
    }

    .saas-card .saas-table td{
        gap:20px;
    }

}


/* ==================================================
 PHASE 30.9 PREMIUM LEAVE UX
================================================== */

.leave-form{
display:flex;
flex-direction:column;
gap:18px;
}

.leave-note{
height:120px;
padding-top:18px;
resize:none;
}

.leave-action{
display:flex;
gap:12px;
}

@media(max-width:768px){

.leave-action{
flex-direction:column;
}

.leave-action form,
.leave-action button{
width:100%;
}

}



/* ==================================================
 PHASE 30.10.2
 ENTERPRISE STATUS BADGE SYSTEM
================================================== */

.saas-badge.success{
background:#dcfce7;
color:#166534;
}

.saas-badge.warning{
background:#fef3c7;
color:#92400e;
}

.saas-badge.danger{
background:#fee2e2;
color:#991b1b;
}



/* ==================================================
 PHASE 31.4
 ENTERPRISE ANALYTICS GRAPH
================================================== */

.graph-box{
display:flex;
flex-direction:column;
gap:24px;
}

.graph-bar{
display:grid;
grid-template-columns:120px 1fr 60px;
align-items:center;
gap:20px;
font-weight:800;
}

.graph-bar div{
height:18px;
background:#e5e7eb;
border-radius:999px;
overflow:hidden;
}

.graph-bar i{
display:block;
height:100%;
background:#0f172a;
border-radius:999px;
}

.discipline-circle{
width:150px;
height:150px;
border-radius:50%;
background:#f8fafc;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
font-size:34px;
font-weight:900;
margin:auto;
}

.discipline-circle small{
font-size:13px;
opacity:.6;
}


@media(max-width:768px){

.graph-bar{
grid-template-columns:1fr;
}

.discipline-circle{
width:130px;
height:130px;
}

}


/* ==================================================
 PHASE 31.5
 PREMIUM TREND ANALYTICS
================================================== */

.trend-chart{
display:flex;
align-items:flex-end;
gap:10px;
height:170px;
overflow-x:auto;
padding-top:25px;
}

.trend-item{
min-width:28px;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}

.trend-line{
height:110px;
display:flex;
align-items:flex-end;
}

.trend-line span{
display:block;
width:14px;
border-radius:999px;
background:#0f172a;
}

.trend-item small{
font-size:11px;
font-weight:700;
color:#64748b;
}

@media(max-width:768px){

.trend-chart{
gap:8px;
}

.trend-item{
min-width:24px;
}

}



/* ======================================
 PHASE 31.6.6
 ATTENDANCE FILTER UX
====================================== */

.filter-box{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
}

.filter-box .saas-input{
max-width:180px;
}

@media(max-width:768px){

.filter-box{
flex-direction:column;
align-items:stretch;
}

.filter-box .saas-input,
.filter-box .saas-btn{
width:100%;
max-width:100%;
}

}



/* ==============================
PHASE 29.4 ORGANIZATION ACTION
============================== */

.org-actions{
display:flex;
align-items:center;
gap:8px;
}

.org-actions form{
display:flex;
gap:8px;
align-items:center;
}

.org-actions .saas-input{
width:150px;
}

.saas-btn.danger{
background:#991b1b;
}


@media(max-width:768px){

.org-actions{
flex-direction:column;
align-items:stretch;
}

.org-actions form{
width:100%;
}

.org-actions .saas-input{
width:100%;
}

}



/* ==========================================
 PHASE 29.8C
 ENTERPRISE ORGANIZATION UX POLISH
========================================== */


.org-actions{
display:flex !important;
align-items:center !important;
gap:10px !important;
}


.org-actions form{
display:flex !important;
margin:0 !important;
}


.org-actions .saas-btn{
width:44px !important;
height:44px !important;
min-width:44px !important;

border-radius:14px !important;

padding:0 !important;

display:flex !important;
align-items:center !important;
justify-content:center !important;
}


.org-actions .material-symbols-rounded{
font-size:22px !important;
}


.org-actions .danger{
background:#fee2e2 !important;
color:#991b1b !important;
}


.org-actions .danger:hover{
background:#dc2626 !important;
color:white !important;
}


/* EDIT MODAL INPUT */

#orgEditModal .saas-input{
width:100%;
margin-bottom:14px;
}


#orgEditModal .delete-box{
text-align:left;
}


#orgEditModal h2{
text-align:center;
}


/* MOBILE ORGANIZATION ACTION */

@media(max-width:768px){

.org-actions{
display:grid !important;
grid-template-columns:
repeat(3,1fr) !important;
gap:10px !important;
}


.org-actions form,
.org-actions button{
width:100% !important;
}


.org-actions .saas-btn{
height:50px !important;
}

}




/* ======================================
 PHASE 29.10
 ORGANIZATION DESKTOP TABLE HARDENING
====================================== */


/* prevent card collision */

.saas-grid{
align-items:start;
}


.saas-card{
min-width:0;
overflow:hidden;
}


/* enterprise table scroll */

.saas-table{
width:100%;
}


.saas-card:has(.saas-table){
overflow-x:auto;
}


/* keep actions compact */

.org-actions{
white-space:nowrap;
}


/* desktop organization split */

@media(min-width:1000px){

.saas-grid{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr) !important;
}

}


/* tablet/mobile */

@media(max-width:999px){

.saas-grid{
grid-template-columns:1fr !important;
}

.saas-card{
width:100%;
}

}




/* ==========================================
 PHASE 29.10
 ORGANIZATION MOBILE TABLE FIX
 isolate organization table from old mobile rules
========================================== */

@media(max-width:700px){

/* restore organization table visibility */
body:has([action="/organization/department/create"])
.saas-table{
display:table !important;
width:100% !important;
}

body:has([action="/organization/department/create"])
.saas-table thead{
display:table-header-group !important;
}

body:has([action="/organization/department/create"])
.saas-table tbody{
display:table-row-group !important;
}

body:has([action="/organization/department/create"])
.saas-table tr{
display:table-row !important;
}

body:has([action="/organization/department/create"])
.saas-table th,
body:has([action="/organization/department/create"])
.saas-table td{
display:table-cell !important;
padding:14px 10px !important;
}

body:has([action="/organization/department/create"])
.saas-table td::before{
content:none !important;
}


/* allow horizontal scroll cleanly */
body:has([action="/organization/department/create"])
.saas-card{
overflow-x:auto;
}

}



/* ==========================================
 PHASE 29.10B
 TRUE MOBILE ORGANIZATION CARD TABLE
========================================== */

@media(max-width:700px){

body:has([action="/organization/department/create"])
.saas-card{
overflow-x:hidden !important;
}


/* convert table */
body:has([action="/organization/department/create"])
.saas-table,
body:has([action="/organization/department/create"])
.saas-table tbody,
body:has([action="/organization/department/create"])
.saas-table tr,
body:has([action="/organization/department/create"])
.saas-table td{
display:block !important;
width:100% !important;
}


body:has([action="/organization/department/create"])
.saas-table thead{
display:none !important;
}


body:has([action="/organization/department/create"])
.saas-table tr{
background:white;
border-radius:22px;
padding:18px;
margin-bottom:18px;
box-shadow:
0 12px 35px rgba(15,23,42,.08);
}


/* row layout */
body:has([action="/organization/department/create"])
.saas-table td{
padding:10px 0 !important;

display:flex !important;
align-items:center !important;
justify-content:space-between !important;

font-size:14px;
}


/* labels */
body:has([action="/organization/department/create"])
.saas-table td:nth-child(1)::before{
content:"Name";
}

body:has([action="/organization/department/create"])
.saas-table td:nth-child(2)::before{
content:"Info";
}

body:has([action="/organization/department/create"])
.saas-table td:nth-child(3)::before{
content:"Level / Position";
}

body:has([action="/organization/department/create"])
.saas-table td:nth-child(4)::before{
content:"Status / Employees";
}

body:has([action="/organization/department/create"])
.saas-table td::before{
font-weight:800;
color:#64748b;
}


/* actions */
body:has([action="/organization/department/create"])
.org-actions{
display:flex !important;
justify-content:flex-end !important;
gap:10px !important;
}


body:has([action="/organization/department/create"])
.org-actions .saas-btn{
width:46px !important;
height:46px !important;
}


}




/* ==========================================
 PHASE 29.10C FINAL
 CLEAN ORGANIZATION MOBILE TABLE
========================================== */

@media(max-width:700px){

/* isolate org */
body:has([action="/organization/department/create"])
.saas-card{
overflow-x:hidden !important;
}


/* normal compact table */
body:has([action="/organization/department/create"])
.saas-table{
display:table !important;
width:100% !important;
table-layout:auto !important;
}


body:has([action="/organization/department/create"])
.saas-table thead{
display:table-header-group !important;
}


body:has([action="/organization/department/create"])
.saas-table tbody{
display:table-row-group !important;
}


body:has([action="/organization/department/create"])
.saas-table tr{
display:table-row !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
}


body:has([action="/organization/department/create"])
.saas-table th,
body:has([action="/organization/department/create"])
.saas-table td{
display:table-cell !important;
width:auto !important;

padding:14px 8px !important;

font-size:12px !important;
vertical-align:middle !important;
}


body:has([action="/organization/department/create"])
.saas-table td::before{
display:none !important;
content:"" !important;
}


/* compact buttons */
body:has([action="/organization/department/create"])
.org-actions{
display:flex !important;
flex-direction:row !important;
gap:6px !important;
align-items:center !important;
}


body:has([action="/organization/department/create"])
.org-actions form{
width:auto !important;
}


body:has([action="/organization/department/create"])
.org-actions .saas-btn{
width:36px !important;
height:36px !important;
min-width:36px !important;
border-radius:10px !important;
}


body:has([action="/organization/department/create"])
.org-actions span{
font-size:18px !important;
}


/* badge */
body:has([action="/organization/department/create"])
.saas-badge{
padding:8px 12px !important;
font-size:12px !important;
}

}





/* ==========================================
 PHASE 29.10E
 ENTERPRISE RESPONSIVE TABLE
========================================== */

@media(max-width:768px){

.saas-card{
overflow:hidden !important;
}


.saas-table{
width:100% !important;

display:block !important;

overflow-x:auto !important;

white-space:nowrap !important;

-webkit-overflow-scrolling:touch;

padding-bottom:8px;
}


.saas-table table,
.saas-table tbody,
.saas-table thead{
width:100% !important;
}


.saas-table th,
.saas-table td{

padding:16px 18px !important;

font-size:14px !important;

vertical-align:middle !important;

}


.org-actions{

display:flex !important;

flex-direction:row !important;

gap:8px !important;

justify-content:flex-start !important;

}


.org-actions .saas-btn{

width:42px !important;
height:42px !important;

min-width:42px !important;

}


.status-badge{

min-width:80px;

text-align:center;

}

}



/* ==========================================
 PHASE 29.10F
 MOBILE ACTION BUTTON FIT
========================================== */

@media(max-width:768px){

.org-actions{
display:flex !important;
flex-direction:row !important;
gap:6px !important;
width:max-content !important;
}


.org-actions .saas-btn{

width:36px !important;
height:36px !important;

min-width:36px !important;

border-radius:11px !important;

}


.org-actions .material-symbols-rounded{

font-size:18px !important;

}


.saas-table td:last-child,
.saas-table th:last-child{

min-width:130px !important;

}


}



/* ==========================================
 PHASE 29.10G
 FIX MOBILE TABLE ACTION CLIPPING
========================================== */

@media(max-width:768px){

.saas-card{
overflow:visible !important;
}


.saas-table{

display:block !important;

width:100% !important;

overflow-x:auto !important;

overflow-y:hidden !important;

}


.saas-table table{

min-width:620px !important;

}


.saas-table th,
.saas-table td{

white-space:nowrap !important;

}


.saas-table th:last-child,
.saas-table td:last-child{

width:170px !important;
min-width:170px !important;

}


.org-actions{

display:flex !important;

flex-direction:row !important;

gap:10px !important;

}


.org-actions .saas-btn{

width:44px !important;
height:44px !important;

min-width:44px !important;

}


}



/* ==========================================
 PHASE 29.10H
 REAL ORGANIZATION MOBILE TABLE FIX
 ACTUAL HTML: table.saas-table
========================================== */

@media(max-width:768px){

/* actual table element */
table.saas-table{

display:table !important;

width:100% !important;

table-layout:fixed !important;

overflow:visible !important;

white-space:normal !important;

}


/* balance columns */
table.saas-table th,
table.saas-table td{

padding:14px 8px !important;

font-size:13px !important;

}


/* give action real space */
table.saas-table th:last-child,
table.saas-table td:last-child{

width:150px !important;

}


/* buttons row */
.org-actions{

display:flex !important;

flex-direction:row !important;

justify-content:flex-start !important;

gap:7px !important;

width:auto !important;

}


/* premium compact */
.org-actions .saas-btn{

width:38px !important;

height:38px !important;

min-width:38px !important;

border-radius:12px !important;

}


.org-actions form{

width:auto !important;

}


.org-actions span{

font-size:19px !important;

}

}



/* ==========================================
 PHASE 29.11
 REAL ENTERPRISE MOBILE ORGANIZATION CARD
========================================== */

@media(max-width:768px){


/* convert table */
table.saas-table,
table.saas-table thead,
table.saas-table tbody,
table.saas-table tr,
table.saas-table td{

display:block !important;

width:100% !important;

}


table.saas-table thead{

display:none !important;

}


table.saas-table tr{

background:white !important;

border-radius:24px !important;

padding:22px !important;

margin:22px 0 !important;

box-shadow:
0 20px 50px rgba(15,23,42,.08) !important;

}


/* each row */
table.saas-table td{

padding:10px 0 !important;

font-size:15px !important;

display:flex !important;

justify-content:space-between !important;

align-items:center !important;

}


/* actions */
table.saas-table td:last-child{

justify-content:flex-end !important;

padding-top:18px !important;

}


.org-actions{

display:flex !important;

gap:10px !important;

}


.org-actions .saas-btn{

width:46px !important;

height:46px !important;

border-radius:14px !important;

}


}