/* ==========================================================
   ROOT
========================================================== */

:root{
    /* Единая типографика системы — как на главной странице.
       --font-display используется для заголовков, --font-sans для остального. */
    --font-sans:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
    /* Заголовки тем же Manrope, что и текст: Outfit выбивался из интерфейса */
    --font-display:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;

    --bg:#f4f5fb;
    --surface:#fff;
    --surface-2:#fafbfe;
    --surface-3:#f7f8fc;

    --border:#e7e9f4;

    --text:#1d2138;
    --text-light:#5f6882;
    --text-muted:#8a90ab;

    --primary:#3b6ef5;
    --primary-hover:#2f57e0;
    --primary-soft:#eef0fd;

    --success:#22c55e;
    --warning:#d8a12b;
    --danger:#e5484d;
    --purple:#7c4dff;
    --teal:#22c3ad;

    --radius-xs:6px;
    --radius-sm:10px;
    --radius:14px;
    --radius-lg:18px;
    --radius-xl:22px;
    --radius-round:999px;

    --shadow-xs:0 2px 6px rgba(20,24,40,.04);
    --shadow-sm:0 6px 18px rgba(20,24,40,.05);
    --shadow:0 12px 30px rgba(20,24,40,.08);
    --shadow-lg:0 22px 48px rgba(20,24,40,.12);

    --transition-fast:.15s ease;
    --transition:.22s ease;
    --transition-slow:.35s ease;

    --container:1500px;
    --topbar-height:64px;
    --sidebar-width:64px;
    --sidebar-width-open:230px;

    --z-dropdown:100;
    --z-sidebar:200;
    --z-topbar:300;
    --z-modal:1000;
}

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font:15px/1.5 var(--font-sans);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img{
    display:block;
    max-width:100%;
}

svg{
    display:block;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

hr{
    height:1px;
    margin:0;
    border:0;
    background:var(--border);
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,h2,h3,h4,h5,h6{
    margin:0;
    color:var(--text);
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.015em;
}

h1{font-size:34px;}
h2{font-size:28px;}
h3{font-size:22px;}
h4{font-size:18px;}

p{
    margin:0;
    color:var(--text-light);
}

small{
    font-size:13px;
    color:var(--text-muted);
}

strong{
    font-weight:600;
}

a{
    color:inherit;
    text-decoration:none;
    transition:var(--transition-fast);
}

a:hover{
    color:var(--primary);
}

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

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

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

.container{
    width:min(var(--container),calc(100% - 48px));
    margin-inline:auto;
}

.content{
    padding:26px;
}

.section{
    margin-bottom:26px;
}

.page-header{
    margin-bottom:26px;
}

.page-title{
    margin-bottom:6px;
}

.page-description{
    color:var(--text-muted);
}

/* ==========================================================
   GRID
========================================================== */

.grid{
    display:grid;
    gap:22px;
}

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

.grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.grid-auto{
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

/* ==========================================================
   FLEX
========================================================== */

.flex{display:flex;}
.flex-column{display:flex;flex-direction:column;}
.align-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.wrap{flex-wrap:wrap;}

.gap-8{gap:8px;}
.gap-12{gap:12px;}
.gap-16{gap:16px;}
.gap-20{gap:20px;}
.gap-24{gap:24px;}

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

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

@media (max-width:900px){
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
    }
}

@media (max-width:640px){
    .container{
        width:calc(100% - 24px);
    }

    .content{
        padding:18px;
    }

    h1{font-size:28px;}
    h2{font-size:24px;}
}
/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar{
    position:fixed;
    top:var(--topbar-height);
    left:0;
    bottom:0;
    width:var(--sidebar-width);
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    padding:14px 10px;
    transition:width var(--transition);
    overflow:hidden;
    z-index:var(--z-sidebar);
}

.sidebar.open{
    width:var(--sidebar-width-open);
}

.main.with-sidebar{
    margin-left:var(--sidebar-width);
    transition:margin-left var(--transition);
}

.sidebar.open~.main{
    margin-left:var(--sidebar-width-open);
}
/* ==========================================================
   SIDEBAR MENU
========================================================== */

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sidebar-link{
    display:flex;
    align-items:center;
    gap:14px;
    height:44px;
    padding:0 13px;
    border-radius:13px;
    color:var(--text-light);
    transition:var(--transition-fast);
    white-space:nowrap;
}

.sidebar-link i{
    width:20px;
    font-size:17px;
    text-align:center;
}

.sidebar-link:hover{
    background:var(--primary-soft);
    color:var(--primary);
}

.sidebar-link.active{
    background:var(--primary);
    color:#fff;
}

.sidebar-link span{
    opacity:0;
    transition:opacity var(--transition);
}

.sidebar.open .sidebar-link span{
    opacity:1;
}
/* ==========================================================
   SIDEBAR TOGGLE
========================================================== */

.sidebar-toggle{
    width:44px;
    height:44px;
    margin-bottom:10px;
    border:none;
    border-radius:13px;
    background:transparent;
    color:var(--text-muted);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition-fast);
}

.sidebar-toggle:hover{
    background:var(--primary-soft);
    color:var(--primary);
}
/* ==========================================================
   ICON BUTTON
========================================================== */

.icon-btn{
    width:40px;
    height:40px;
    border:none;
    border-radius:12px;
    background:var(--surface);
    color:var(--text-muted);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition-fast);
}

.icon-btn:hover{
    background:var(--primary-soft);
    border-color:#d6dcf2;
    color:var(--primary);
}

.icon-btn i{
    font-size:16px;
}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:46px;
    padding:0 18px;
    border:1px solid transparent;
    border-radius:14px;
    background:var(--surface);
    color:var(--text);
    font-size:14px;
    font-weight:600;
    transition:var(--transition-fast);
    white-space:nowrap;
}

.btn i{
    font-size:15px;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn:active{
    transform:translateY(1px);
}

.btn:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.btn-primary{
    background:var(--primary);
    color:#fff;
    box-shadow:0 8px 22px rgba(59,110,245,.22);
}

.btn-primary:hover{
    background:var(--primary-hover);
    color:#fff;
}

.btn-secondary{
    background:var(--primary-soft);
    color:var(--primary);
}

.btn-secondary:hover{
    background:#e2e7fd;
}

.btn-outline{
    border-color:var(--border);
}

.btn-outline:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.btn-success{
    background:#ebfaf3;
    color:var(--success);
}

.btn-success:hover{
    background:#def6ea;
}

.btn-danger{
    background:#fdecec;
    color:var(--danger);
}

.btn-danger:hover{
    background:#fadede;
    color:var(--danger);

}

.btn-icon{
    width:42px;
    height:42px;
    padding:0;
}

.btn-sm{
    min-height:38px;
    padding:0 14px;
    font-size:13px;
}

.btn-lg{
    min-height:52px;
    padding:0 22px;
}
/* ==========================================================
   FORM
========================================================== */

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

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.form-label{
    font-size:14px;
    font-weight:600;
    color:var(--text);
}

.form-description{
    margin-top:-3px;
    font-size:13px;
    color:var(--text-muted);
}
/* ==========================================================
   INPUTS
========================================================== */

.input,
.textarea,
.select{
    width:100%;
    min-height:48px;
    padding:0 15px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--surface);
    color:var(--text);
    font-size:14px;
    transition:var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder{
    color:#a5acbf;
}

.input:hover,
.textarea:hover,
.select:hover{
    border-color:#d3d8eb;
}

.input:focus,
.textarea:focus,
.select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px var(--primary-soft);
}
/* ==========================================================
   TEXTAREA
========================================================== */

.textarea{
    min-height:120px;
    padding:14px 15px;
    resize:vertical;
}
/* ==========================================================
   SELECT
========================================================== */

.select{
    appearance:none;
    cursor:pointer;
    padding-right:42px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24' stroke='%23939ab0' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
}
/* ==========================================================
   CHECKBOX
========================================================== */

.checkbox{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
}

.checkbox input{
    display:none;
}

.checkbox-box{
    width:20px;
    height:20px;
    border:2px solid #ccd2e5;
    border-radius:6px;
    transition:var(--transition-fast);
    position:relative;
}

.checkbox input:checked+.checkbox-box{
    background:var(--primary);
    border-color:var(--primary);
}

.checkbox input:checked+.checkbox-box::after{
    content:"";
    position:absolute;
    left:5px;
    top:1px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
/* ==========================================================
   SWITCH
========================================================== */

.switch{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.switch input{
    display:none;
}

.switch-slider{
    width:46px;
    height:26px;
    border-radius:999px;
    background:#d7dceb;
    position:relative;
    transition:var(--transition-fast);
}

.switch-slider::before{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.15);
    transition:var(--transition-fast);
}

.switch input:checked+.switch-slider{
    background:var(--primary);
}

.switch input:checked+.switch-slider::before{
    transform:translateX(20px);
}
/* ==========================================================
   BADGE
========================================================== */

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    background:var(--primary-soft);
    color:var(--primary);
}

.badge-success{
    background:#ebfaf3;
    color:var(--success);
}

.badge-warning{
    background:#fff7e7;
    color:var(--warning);
}

.badge-danger{
    background:#fdecec;
    color:var(--danger);
}

.badge-purple{
    background:#f2edff;
    color:var(--purple);
}
/* ==========================================================
   ALERT
========================================================== */

.alert{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
}

.alert i{
    font-size:17px;
    margin-top:1px;
}

.alert-title{
    margin-bottom:2px;
    font-weight:700;
    color:var(--text);
}

.alert-text{
    font-size:13px;
    color:var(--text-light);
}

.alert-info{
    background:#eef3ff;
    border-color:#d9e4ff;
    color:var(--primary);
}

.alert-success{
    background:#eefaf2;
    border-color:#d9f3e5;
    color:var(--success);
}

.alert-warning{
    background:#fff8e8;
    border-color:#f6e6b6;
    color:var(--warning);
}

.alert-danger{
    background:#fdecec;
    border-color:#f8d4d6;
    color:var(--danger);
}
/* ==========================================================
   ALERT
========================================================== */

.alert{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
}

.alert i{
    font-size:17px;
    margin-top:1px;
}

.alert-title{
    margin-bottom:2px;
    font-weight:700;
    color:var(--text);
}

.alert-text{
    font-size:13px;
    color:var(--text-light);
}

.alert-info{
    background:#eef3ff;
    border-color:#d9e4ff;
    color:var(--primary);
}

.alert-success{
    background:#eefaf2;
    border-color:#d9f3e5;
    color:var(--success);
}

.alert-warning{
    background:#fff8e8;
    border-color:#f6e6b6;
    color:var(--warning);
}

.alert-danger{
    background:#fdecec;
    border-color:#f8d4d6;
    color:var(--danger);
}
/* ==========================================================
   SURFACE
========================================================== */

.surface{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow-sm);
}

.surface-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:20px 24px;
    border-bottom:1px solid var(--border);
}

.surface-title{
    margin:0;
    font-size:18px;
    font-weight:700;
}

.surface-subtitle{
    margin-top:4px;
    font-size:13px;
    color:var(--text-muted);
}

.surface-body{
    padding:24px;
}

.surface-footer{
    padding:18px 24px;
    border-top:1px solid var(--border);
}
/* ==========================================================
   SEARCH
========================================================== */

.search{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:300px;
    padding:0 16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    transition:var(--transition-fast);
}

.search:focus-within{
    border-color:var(--primary);
    box-shadow:0 0 0 4px var(--primary-soft);
}

.search i{
    color:var(--text-muted);
    font-size:15px;
}

.search input{
    flex:1;
    height:46px;
    border:none;
    background:none;
    box-shadow:none!important;
    padding:0!important;
}

.search input:focus{
    outline:none;
}
/* ==========================================================
   TABLE
========================================================== */

.table-wrap{
    overflow:auto;
    border-radius:18px;
}

.table{
    width:100%;
    border-collapse:collapse;
    background:var(--surface);
}

.table thead{
    background:var(--surface-2);
}

.table th{
    padding:15px 18px;
    text-align:left;
    font-size:13px;
    font-weight:700;
    color:var(--text);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.table td{
    padding:15px 18px;
    border-bottom:1px solid var(--border);
    color:var(--text-light);
    transition:var(--transition-fast);
}

.table tbody tr{
    transition:var(--transition-fast);
}

.table tbody tr:hover{
    background:var(--primary-soft);
}

.table tbody tr:last-child td{
    border-bottom:none;
}
/* ==========================================================
   TABLE ACTIONS
========================================================== */

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

.table-actions .btn-icon{
    width:36px;
    height:36px;
}
/* ==========================================================
   STATS
========================================================== */

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.stat-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:22px;
    transition:var(--transition-fast);
}

.stat-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}

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

.stat-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:20px;
}

.stat-value{
    margin-bottom:6px;
    font-size:32px;
    font-weight:700;
    color:var(--text);
}

.stat-label{
    color:var(--text-muted);
    font-size:13px;
}
/* ==========================================================
   EMPTY
========================================================== */

.empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:60px 30px;
    text-align:center;
}

.empty-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:var(--primary-soft);
    color:#b2b8ca;
    font-size:28px;
    margin-bottom:20px;
}

.empty-title{
    margin-bottom:8px;
    font-size:20px;
    font-weight:700;
}

.empty-text{
    max-width:420px;
    color:var(--text-muted);
}
/* ==========================================================
   BREADCRUMBS
========================================================== */

/* ==========================================================
   ХЛЕБНЫЕ КРОШКИ — один вид на всех страницах
   Разделитель рисует CSS, поэтому в разметке достаточно ссылок
   и последнего элемента .current. На узком экране середина
   схлопывается в «…», чтобы строка не переносилась.
========================================================== */
.breadcrumbs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:18px;
    font-size:12.5px;
    line-height:1.3;
}

.breadcrumbs a,
.breadcrumbs > span:not(.current){
    color:var(--text-muted);
    text-decoration:none;
}

.breadcrumbs a:hover{ color:var(--primary); }

/* разделитель перед каждым элементом, кроме первого */
.breadcrumbs > *:not(:first-child)::before{
    content:"›";
    margin-right:6px;
    color:#C3C8D7;
    font-weight:600;
}

.breadcrumbs .current{
    color:var(--text);
    font-weight:600;
}

.breadcrumbs .crumb-home{ display:inline-flex; align-items:center; gap:6px; }

@media (max-width:640px){
    /* оставляем начало и конец пути: «Организация › … › Режим пребывания» */
    .breadcrumbs > *:not(:first-child):not(:last-child):not(.crumb-keep){ display:none; }
    .breadcrumbs > *:last-child::before{ content:"… ›"; }
}

/* ==========================================================
   PAGINATION
========================================================== */

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:24px;
}

.page-link{
    min-width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    transition:var(--transition-fast);
}

.page-link:hover{
    background:var(--primary-soft);
    border-color:var(--primary);
    color:var(--primary);
}

.page-link.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}
/* ==========================
   TOPBAR
========================== */

.topbar{
    position:sticky;
    top:0;
    z-index:var(--z-topbar);

    height:64px;

    background:var(--surface);
    border-bottom:1px solid var(--border);
}

.topbar-inner{
    width:min(var(--container),calc(100% - 48px));
    height:100%;

    margin:auto;

    display:flex;
    align-items:center;
    gap:20px;
}

/* ==========================
   BRAND
========================== */

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

    flex-shrink:0;

    color:inherit;
}

.brand:hover{
    color:inherit;
}

.brand-logo{
    width:36px;
    height:36px;
    border-radius:10px;

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

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

.brand-title{
    font-size:20px;
    font-weight:700;
    color:var(--text);
    white-space: nowrap;
}

.brand-subtitle{
    display:none;
}

/* ==========================
   NAVIGATION
========================== */

.topbar-nav{
    display:flex;
    align-items:center;
    gap:6px;
    flex:1;
    margin-left:20px;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:6px;

    height:38px;

    padding:0 14px;

    border:none;
    border-radius:10px;

    background:transparent;

    color:var(--text-light);

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

    cursor:pointer;

    transition:var(--transition-fast);
}

.nav-link i{
    font-size:11px;
}

.nav-link:hover{
    background:var(--surface-3);
    color:var(--text);
}

.nav-link.active{
    background:var(--surface-3);
    color:var(--text);
}

/* ==========================
   ACTIONS
========================== */

.topbar-actions{
    margin-left:auto;

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

    flex-shrink:0;
}

.icon-btn{
    width:38px;
    height:38px;

    border:none;
    border-radius:10px;

    background:transparent;

    color:var(--text-light);

    transition:var(--transition-fast);
}

.icon-btn:hover{
    background:var(--surface-3);
    color:var(--primary);
}

/* ==========================
   USER
========================== */

.user-btn{
    display:flex;
    align-items:center;
    gap:10px;

    height:40px;

    padding:0 12px 0 8px;

    border:none;
    border-radius:10px;

    background:transparent;

    transition:var(--transition-fast);
}

.user-btn:hover{
    background:var(--surface-3);
}

.user-avatar{
    width:28px;
    height:28px;

    border-radius:8px;

    background:linear-gradient(135deg,#4d7cff,#3564ef);

    color:#fff;

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

    font-size:12px;
    font-weight:700;
}

.user-name{
    font-size:14px;
    font-weight:600;
    color:var(--text);
}

.user-btn i:last-child{
    font-size:11px;
    color:var(--text-muted);
}

/* ==========================
   DROPDOWN
========================== */
.dropdown{
    position:relative;
}
.dropdown-menu{
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    min-width:240px;
    padding:8px;

    background:rgba(255,255,255,.96);
    border:1px solid rgba(231,233,244,.9);
    border-radius:18px;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:0 18px 45px rgba(20,24,40,.12);

    opacity:0;
    visibility:hidden;

    transform:translateY(-10px) scale(.98);
    transform-origin:top left;

    transition:opacity .18s ease, visibility .18s ease, transform .18s ease, box-shadow .18s ease;
    z-index:var(--z-dropdown);
}

.dropdown.open > .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:40px;
    padding:0 12px;
    border-radius:12px;
    color:var(--text);
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    transition:background .15s ease, color .15s ease, transform .15s ease;
}

.dropdown-item i{
    width:18px;
    color:var(--text-muted);
    font-size:15px;
    text-align:center;
    transition:color .15s ease;
}

.dropdown-item:hover{
    background:var(--primary-soft);
    color:var(--primary);
    transform:translateX(2px);
}

.dropdown-item:hover i{
    color:var(--primary);
}

.dropdown-divider{
    height:1px;
    margin:6px 4px;
    background:var(--border);
}

/* ==========================================================
   FOOTER
========================================================== */

.footer{
    margin-top:auto;
    background:var(--surface);
    border-top:1px solid var(--border);
}

.footer-inner{
    width:min(var(--container),calc(100% - 48px));
    margin:auto;
    padding:40px 0;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px;
}

.footer-brand{
    display:flex;
    gap:14px;
}

.footer-brand img{
    width:48px;
    height:48px;
    flex-shrink:0;
}

.footer-title{
    margin-bottom:6px;
    color:var(--text);
    font-size:18px;
    font-weight:700;
}

.footer-description{
    max-width:420px;
    color:var(--text-muted);
    font-size:14px;
    line-height:1.6;
}

.footer-column h4{
    margin-bottom:14px;
    font-size:15px;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-links a{
    color:var(--text-muted);
    font-size:14px;
    transition:var(--transition-fast);
}

.footer-links a:hover{
    color:var(--primary);
}

.footer-bottom{
    margin-top:32px;
    padding-top:24px;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:var(--text-muted);
    font-size:13px;
}

.footer-social{
    display:flex;
    align-items:center;
    gap:10px;
}

.footer-social a{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:var(--surface-2);
    color:var(--text-muted);
    transition:var(--transition-fast);
}

.footer-social a:hover{
    background:var(--primary-soft);
    color:var(--primary);
}

@media (max-width:900px){

    .topbar-inner{
        width:calc(100% - 24px);
    }

    .brand-subtitle{
        display:none;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media (max-width:640px){

    .topbar-inner{
        height:auto;
        min-height:64px;
        padding:12px 0;
        flex-wrap:wrap;
    }

    .topbar-nav{
        width:100%;
        margin-left:0;
        order:3;
        overflow:auto;
    }

    .topbar-actions{
        margin-left:auto;
    }

}