:root{
    --bg: #f4f8f7;
    --surface: #ffffff;
    --surface-alt: #ecf4f2;
    --text: #22333b;
    --muted: #6c7a7f;
    --primary: #84c5c0;
    --primary-600: #6ab4ae;
    --accent: #f6c28b;
    --border: #dfe7e5;
    --shadow: 0 10px 30px rgba(34, 51, 59, 0.08);
}

body{
    background: var(--bg);
    background-image: none;
    color: var(--text);
}

.layout-titlebar{
    background: linear-gradient(90deg, #7fcac2 0%, #9bd9d2 60%, #f7d4ad 100%);
}
.layout-titlebar-title{
    color: #ffffff;
}
.layout-titlebar-btn{
    background: transparent;
}
.layout-titlebar-btn>span{
    color: rgba(255,255,255,0.85);
}
.layout-titlebar-btn:hover>span{
    color: #ffffff;
    text-shadow: none;
}

.layout-footer{
    background-color: #2e3b40;
    color: rgba(255,255,255,0.8);
}

.breadcrumbz{
    background-color: #e9f2f0;
}
.breadcrumbz a,
.breadcrumbz li{
    color: #4f6a6f;
}

.btnz1{
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--text);
}
.btnz1:hover{
    background-color: var(--surface-alt);
    text-shadow: none;
}

.menubtn{
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.menubtn p{
    color: var(--text);
    text-shadow: none;
}
.menubtn:hover{
    background-color: var(--surface-alt);
}
.menubtn:hover p{
    color: var(--text);
    background-color: transparent;
    text-shadow: none;
}

.panel{
    background-color: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow);
}
.panel-heading{
    background-color: var(--surface-alt) !important;
    border-bottom-color: var(--border) !important;
}

.nav-tabs>li>a{
    color: var(--text);
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover{
    color: var(--primary);
    background-color: var(--surface);
    border-color: var(--border) var(--border) transparent;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
    border-color: var(--border);
}

.form-control{
    border-color: var(--border);
    box-shadow: none;
}
.form-control:focus{
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(106, 180, 174, 0.2);
}