:root{
    --primary:#0F4C81;
    --secondary:#2F80ED;
    --danger:#EB5757;
    --bg:#F8FAFC;
    --card:#FFFFFF;
    --text:#1F2937;
    --muted:#6B7280;
    --border:#E5E7EB;
    --shadow:0 8px 24px rgba(15,76,129,0.08);
    --radius:16px;
    --sidebar-width:280px;
    --sidebar-collapsed-width:82px;
    --header-height:72px;
}

*{
    box-sizing:border-box;
}

html, body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
}

body{
    min-height:100vh;
}

.wp-site-blocks{
    min-height:100vh;
    background:var(--bg);
}

a{
    text-decoration:none;
}

.hsems-header{
    height:var(--header-height);
    background:linear-gradient(90deg, var(--primary), var(--secondary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    box-shadow:var(--shadow);
    position:sticky;
    top:0;
    z-index:999;
}

.hsems-header-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.hsems-sidebar-toggle{
    background:rgba(255,255,255,0.15);
    color:#fff;
    border:1px solid rgba(255,255,255,0.25);
    width:42px;
    height:42px;
    border-radius:10px;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hsems-sidebar-toggle:hover{
    background:rgba(255,255,255,0.25);
}

.hsems-brand{
    font-size:24px;
    font-weight:700;
    letter-spacing:0.4px;
}

.hsems-header-right{
    font-size:14px;
    opacity:0.95;
}

.hsems-app{
    display:grid;
    grid-template-columns:var(--sidebar-width) minmax(0, 1fr);
    min-height:calc(100vh - var(--header-height));
    max-width:1600px;
    margin:0 auto;
    width:100%;
    transition:grid-template-columns 0.25s ease;
}

.hsems-sidebar{
    width:var(--sidebar-width);
    min-width:var(--sidebar-width);
    max-width:var(--sidebar-width);
    background:#fff;
    border-right:1px solid var(--border);
    padding:24px 16px;
    box-shadow:var(--shadow);
    transition:all 0.25s ease;
    overflow:hidden;
}

.hsems-sidebar-title{
    font-size:13px;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:14px;
    font-weight:700;
    white-space:nowrap;
}

.hsems-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.hsems-menu li{
    margin-bottom:10px;
}

.hsems-menu a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    color:var(--text);
    font-weight:600;
    transition:all 0.2s ease;
    white-space:nowrap;
}

.hsems-menu a:hover{
    background:#EEF5FF;
    color:var(--primary);
}

.hsems-main{
    min-width:0;
    width:100%;
    padding:24px;
}

.hsems-page-title{
    font-size:28px;
    font-weight:700;
    margin:0 0 8px;
    color:var(--primary);
}

.hsems-page-subtitle{
    font-size:15px;
    color:var(--muted);
    margin:0 0 24px;
}

.hsems-card-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    margin-bottom:24px;
}

.hsems-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px;
    box-shadow:var(--shadow);
}

.hsems-card h3{
    margin:0 0 8px;
    font-size:15px;
    color:var(--muted);
    font-weight:600;
}

.hsems-card .value{
    font-size:30px;
    font-weight:700;
    color:var(--primary);
}

.hsems-panel{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow);
    margin-bottom:24px;
}

.hsems-panel h2{
    margin:0 0 12px;
    font-size:20px;
    color:var(--primary);
}

.hsems-footer{
    text-align:center;
    padding:18px;
    background:#fff;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:14px;
}

/* Collapsed sidebar */
.hsems-app.sidebar-collapsed{
    grid-template-columns:var(--sidebar-collapsed-width) minmax(0, 1fr);
}

.hsems-app.sidebar-collapsed .hsems-sidebar{
    width:var(--sidebar-collapsed-width);
    min-width:var(--sidebar-collapsed-width);
    max-width:var(--sidebar-collapsed-width);
    padding:24px 10px;
}

.hsems-app.sidebar-collapsed .hsems-sidebar-title{
    display:none;
}

.hsems-app.sidebar-collapsed .hsems-menu a{
    text-align:center;
    padding:12px 6px;
    font-size:0;
    position:relative;
}

.hsems-app.sidebar-collapsed .hsems-menu a::before{
    font-size:18px;
    display:inline-block;
}

/* Sidebar icons by menu position */
.hsems-menu li:nth-child(1) a::before{ content:"🏠"; }
.hsems-menu li:nth-child(2) a::before{ content:"👤"; }
.hsems-menu li:nth-child(3) a::before{ content:"🚜"; }
.hsems-menu li:nth-child(4) a::before{ content:"🗂️"; }
.hsems-menu li:nth-child(5) a::before{ content:"📄"; }
.hsems-menu li:nth-child(6) a::before{ content:"⚠️"; }
.hsems-menu li:nth-child(7) a::before{ content:"🦺"; }
.hsems-menu li:nth-child(8) a::before{ content:"✅"; }
.hsems-menu li:nth-child(9) a::before{ content:"🎓"; }
.hsems-menu li:nth-child(10) a::before{ content:"🔍"; }
.hsems-menu li:nth-child(11) a::before{ content:"🏥"; }
.hsems-menu li:nth-child(12) a::before{ content:"📁"; }
.dewa3-front-form label{
    display:block;
    font-weight:600;
    margin-bottom:6px;
    color:var(--text);
}

.dewa3-form-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px 20px;
}

.dewa3-front-form input,
.dewa3-front-form select{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    font-size:14px;
}

.dewa3-front-btn{
    background:var(--primary);
    color:#fff;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
}

.dewa3-front-btn:hover{
    background:var(--secondary);
}

.dewa3-front-btn-secondary{
    background:#fff;
    color:var(--primary);
    border:1px solid var(--primary);
    padding:12px 20px;
    border-radius:10px;
    font-weight:600;
    text-decoration:none;
    display:inline-block;
}

.dewa3-front-btn-secondary:hover{
    background:#eef5ff;
}

.dewa3-front-success,
.dewa3-front-error{
    padding:12px 14px;
    border-radius:10px;
    margin-bottom:16px;
    font-size:14px;
    font-weight:600;
}

.dewa3-front-success{
    background:#e8f7ed;
    color:#1f7a3e;
    border:1px solid #b7e4c7;
}

.dewa3-front-error{
    background:#fdecec;
    color:#b42318;
    border:1px solid #f5c2c7;
}

.dewa3-table-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.dewa3-search-form input,
.dewa3-search-form select{
    min-width:220px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
}

.dewa3-search-form input{
    min-width:260px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
}

.dewa3-table-wrap{
    overflow-x:auto;
}

.dewa3-front-table{
    width:100%;
    border-collapse:collapse;
    min-width:1000px;
}

.dewa3-front-table th,
.dewa3-front-table td{
    border:1px solid var(--border);
    padding:12px 14px;
    font-size:14px;
    background:#fff;
    text-align:center;
    vertical-align:middle;
}

.dewa3-front-table th{
    background:#eef5ff;
    color:var(--primary);
    font-weight:700;
}

.dewa3-front-table th a{
    color:var(--primary);
    text-decoration:none;
    font-weight:700;
}

.dewa3-front-table th a:hover{
    color:var(--secondary);
}

.dewa3-action-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.dewa3-action-links a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
}

.dewa3-action-links a:hover{
    color:var(--secondary);
}

@media (max-width: 1100px){
    .hsems-card-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 768px){
    .hsems-app{
        grid-template-columns:1fr;
    }

    .hsems-sidebar{
        width:100%;
        min-width:100%;
        max-width:100%;
        border-right:none;
        border-bottom:1px solid var(--border);
    }

    .hsems-app.sidebar-collapsed{
        grid-template-columns:1fr;
    }

    .hsems-app.sidebar-collapsed .hsems-sidebar{
        width:100%;
        min-width:100%;
        max-width:100%;
        padding:12px 16px;
    }

    .hsems-app.sidebar-collapsed .hsems-sidebar-title{
        display:block;
    }

    .hsems-app.sidebar-collapsed .hsems-menu a{
        font-size:14px;
        text-align:left;
        padding:12px 14px;
    }

    .hsems-app.sidebar-collapsed .hsems-menu a::before{
        content:none;
    }

    .hsems-main{
        padding:16px;
    }

    .hsems-card-grid{
        grid-template-columns:1fr;
    }

    .hsems-header{
        padding:0 16px;
    }

    .hsems-brand{
        font-size:20px;
    }

    .hsems-header-right{
        display:none;
    }

    .dewa3-form-grid{
        grid-template-columns:1fr;
    }

    .dewa3-search-form{
        width:100%;
    }

.dewa3-search-form input,
.dewa3-search-form select{
    min-width:100%;
    width:100%;
}
}
/* =========================
FILTER DROPDOWN STYLING
========================= */

.dewa3-search-form select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

min-width:220px;
padding:12px 40px 12px 14px;

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

background:#fff;
color:var(--text);

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

cursor:pointer;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%231e40af' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%231e40af' stroke-width='2' fill='none'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:14px;
}

/* hover */

.dewa3-search-form select:hover{
border-color:#2563eb;
}

/* focus */

.dewa3-search-form select:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 2px rgba(37,99,235,0.15);
}

/* =========================
FILTER BAR LAYOUT
========================= */

.dewa3-search-form{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}

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

@media (max-width:768px){

.dewa3-search-form{
flex-direction:column;
align-items:stretch;
}

.dewa3-search-form input,
.dewa3-search-form select{
width:100%;
min-width:100%;
}

}
.dewa3-analytics-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.dewa3-chart-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
}

.dewa3-chart-card h3{
    margin:0 0 16px;
    color:var(--primary);
    font-size:18px;
}

@media (max-width: 768px){
    .dewa3-analytics-grid{
        grid-template-columns:1fr;
    }
}
.dewa3-dashboard-cards{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px;
    margin-bottom:24px;
}

.dewa3-dashboard-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px 18px;
    box-shadow:var(--shadow);
    min-height:110px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.dewa3-dashboard-card-label{
    font-size:14px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:10px;
}

.dewa3-dashboard-card-value{
    font-size:34px;
    font-weight:700;
    line-height:1;
    color:var(--primary);
}

@media (max-width: 1100px){
    .dewa3-dashboard-cards{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px){
    .dewa3-dashboard-cards{
        grid-template-columns:1fr;
    }
}
.dewa3-front-table td.dewa3-expired{
    background:#fdecec !important;
    color:#b42318 !important;
    font-weight:700 !important;
}

.dewa3-front-table td.dewa3-warning{
    background:#fff4e5 !important;
    color:#b26a00 !important;
    font-weight:700 !important;
}

.dewa3-front-table td.dewa3-ok{
    background:#e8f7ed !important;
    color:#1f7a3e !important;
    font-weight:700 !important;
}