:root{
    --bg:#eef2f7;
    --panel:#ffffff;
    --text:#182230;
    --muted:#667085;
    --line:#e7ecf4;
    --line-2:#d8dfeb;
    --blue:#2f6df6;
    --blue-hover:#1d4ed8;
    --blue-soft:#eef4ff;
    --dark:#1f2937;
    --dark-hover:#374151;
    --shadow:0 10px 30px rgba(16,24,40,0.12);
    --danger:#dc2626;
    --danger-hover:#b91c1c;
    --success:#16a34a;
    --warning:#d97706;
    --timeline-rail-lift:108px;
    --sidebar-offset:14px;
    --sidebar-width:255px;
    --sidebar-content-gap:24px;
    --settings-submenu-width:240px;
}

*{
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    font-size:16px;
    margin:0;
    background:
        radial-gradient(circle at 6% 14%, rgba(173, 213, 255, 0.38), transparent 28%),
        linear-gradient(135deg, #d8ecff 0%, #f7fbff 46%, #dbeeff 100%);
    color:var(--text);
}

body.drawer-open{
    overflow:hidden;
}

.sidebar{
    width:var(--sidebar-width);
    height:calc(100vh - (var(--sidebar-offset) * 2));
    background:linear-gradient(145deg, rgba(255, 255, 255, 0.78) 0%, rgba(236, 247, 255, 0.6) 100%);
    color:#183258;
    position:fixed;
    top:var(--sidebar-offset);
    left:var(--sidebar-offset);
    padding:29px 24px 22px;
    box-sizing:border-box;
    z-index:20;
    overflow-y:auto;
    border:1px solid rgba(255, 255, 255, 0.88);
    border-radius:22px;
    box-shadow:0 24px 70px rgba(59, 130, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter:blur(18px);
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.sidebar::-webkit-scrollbar{
    display:none;
}

.sidebar-submenu{
    position:fixed;
    top:var(--sidebar-offset);
    left:calc(var(--sidebar-offset) + var(--sidebar-width) + 12px);
    width:var(--settings-submenu-width);
    height:calc(100vh - (var(--sidebar-offset) * 2));
    background:linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(236, 247, 255, 0.72));
    color:#183258;
    padding:24px 16px;
    box-sizing:border-box;
    border:1px solid rgba(255, 255, 255, 0.82);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(59, 130, 246, 0.18);
    backdrop-filter:blur(18px);
    overflow:visible;
    transform:translateX(-18px);
    opacity:0;
    pointer-events:none;
    transition:transform 0.22s ease, opacity 0.22s ease, width 0.22s ease, padding 0.22s ease;
    z-index:19;
}

.sidebar-submenu.show{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
}

.sidebar-submenu-title{
    margin:0 0 14px;
    font-size:20px;
    font-weight:700;
    color:#183258;
}

.sidebar-submenu-body{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    height:calc(100% - 40px);
    overflow-y:auto;
    padding-right:4px;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.sidebar-submenu-body::-webkit-scrollbar{
    display:none;
}

.sidebar-submenu-group{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:0 0 auto;
}

.sidebar-submenu-group + .sidebar-submenu-group{
    margin-top:14px;
}

.sidebar-submenu-item{
    width:100%;
    display:block;
    text-align:left;
    background:transparent;
    color:#182230;
    border:none;
    box-shadow:none;
    text-decoration:none;
    padding:10px 12px;
    cursor:pointer;
    border-radius:8px;
    font-size:16px;
    font-weight:400;
    line-height:1.35;
}

.sidebar-submenu-item.active{
    background:rgba(255, 255, 255, 0.72);
}

.sidebar-submenu-item:hover{
    background:rgba(255, 255, 255, 0.6);
}

.sidebar h2{
    margin:0 0 12px;
    font-size:20px;
}

.sidebar a{
    display:block;
    color:#182230;
    text-decoration:none;
    padding:10px 12px;
    cursor:pointer;
    border-radius:8px;
    font-size:16px;
    margin-bottom:4px;
}

.sidebar a:hover{
    background:rgba(255, 255, 255, 0.6);
}

.sidebar-group{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(24,34,48,0.10);
}

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

.sidebar-link[data-permission-hidden="true"],
.sidebar-submenu-item[data-permission-hidden="true"],
.sidebar-submenu-group[data-permission-hidden="true"]{
    display:none !important;
}

.sidebar-link.active{
    margin-left:-20px;
    margin-right:-20px;
    padding-left:20px;
    padding-right:20px;
    min-height:44px;
    background:rgba(255, 255, 255, 0.38);
    color:#0f1f33;
    font-weight:700;
}

.sidebar-link.active .sidebar-link-icon{
    color:#0f1f33;
}

.sidebar-link-icon{
    position:relative;
    width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:#182230;
}

.sidebar-link-icon svg{
    width:20px;
    height:20px;
    stroke:currentColor;
}

.sidebar-link-text{
    line-height:1.3;
}

.sidebar-task-badge{
    position:absolute;
    top:-7px;
    left:-8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:15px;
    height:15px;
    padding:0 3px;
    border-radius:3px;
    background:#ef2b3a;
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:15px;
    box-sizing:border-box;
}

.sidebar-task-badge.has-overdue::after{
    content:"";
    position:absolute;
    top:-2px;
    right:-3px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ff3045;
    animation:sidebarTaskPulse 1s infinite;
}

@keyframes sidebarTaskPulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.25; transform:scale(1.45); }
}

.sidebar-submenu-item{
    color:#183258;
    border-radius:14px;
}

.sidebar-submenu-item.active{
    background:rgba(255, 255, 255, 0.86);
    box-shadow:0 10px 24px rgba(37, 99, 235, 0.10);
}

.sidebar-submenu-item:hover{
    background:rgba(255, 255, 255, 0.76);
}

.sidebar h2{
    margin:0 0 27px;
    padding-left:7px;
    font-size:29px;
    line-height:1;
    letter-spacing:0;
    color:#213d67;
    font-weight:800;
}

.sidebar a{
    color:#17345b;
    padding:11px 14px;
    border-radius:15px;
    font-size:16px;
    margin-bottom:7px;
}

.sidebar a:hover{
    background:rgba(255, 255, 255, 0.62);
    text-decoration:none;
}

.sidebar-group{
    margin-top:19px;
    padding-top:19px;
    border-top:1px solid rgba(82, 128, 183, 0.22);
}

.sidebar-link{
    gap:19px;
    min-height:44px;
    position:relative;
    transition:background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar-link.active{
    margin-left:-10px;
    margin-right:-10px;
    padding-left:24px;
    padding-right:15px;
    min-height:54px;
    background:rgba(255, 255, 255, 0.9);
    color:#142f55;
    font-weight:700;
    box-shadow:0 18px 38px rgba(41, 91, 157, 0.15);
}

.sidebar-link.active::before{
    content:"";
    position:absolute;
    left:0;
    top:7px;
    bottom:7px;
    width:4px;
    border-radius:0 6px 6px 0;
    background:linear-gradient(180deg, #33a3ff, #2f6df6);
}

.sidebar-link.active .sidebar-link-icon{
    color:inherit;
}

.sidebar-link-icon{
    width:22px;
    height:22px;
    color:#2f6df6;
}

.sidebar-link-icon svg{
    width:22px;
    height:22px;
    stroke-width:2.25;
}

.sidebar-link-text{
    color:inherit;
    white-space:nowrap;
}

.sidebar-link[data-page="metrics"] .sidebar-link-icon{ color:#2e9af2; }
.sidebar-link[data-page="tasks"] .sidebar-link-icon{ color:#7657e8; }
.sidebar-link[data-page="vk-leads"] .sidebar-link-icon{ color:#258be9; }
.sidebar-link[data-page="orders"] .sidebar-link-icon{ color:#258be9; }
.sidebar-link[data-page="finance"] .sidebar-link-icon{ color:#38bf7b; }
.sidebar-link[data-page="sales"] .sidebar-link-icon{ color:#35c7bd; }
.sidebar-link[data-page="inventory"] .sidebar-link-icon{ color:#7657e8; }
.sidebar-link[data-page="reports"] .sidebar-link-icon{ color:#f59e0b; }
.sidebar-link[data-page="clients"] .sidebar-link-icon{ color:#2f75e8; }
.sidebar-link[data-page="settings"] .sidebar-link-icon,
.sidebar-link[data-page="help"] .sidebar-link-icon{ color:#7f94b4; }

.sidebar-link[data-page="vk-leads"] .sidebar-link-icon svg{
    display:none;
}

.sidebar-link[data-page="vk-leads"] .sidebar-link-icon::before{
    content:"vk";
    font-size:20px;
    line-height:1;
    font-weight:800;
    letter-spacing:0;
    color:currentColor;
}

.main{
    margin-left:calc(var(--sidebar-offset) + var(--sidebar-width) + var(--sidebar-content-gap));
    width:calc(100% - (var(--sidebar-offset) + var(--sidebar-width) + var(--sidebar-content-gap)));
    padding:24px 28px 36px;
    box-sizing:border-box;
    min-height:100vh;
    background:#FFFFFF;
}

#pageContent{
    width:100%;
}

body.settings-panel-open .main{
    margin-left:calc(var(--sidebar-offset) + var(--sidebar-width) + var(--settings-submenu-width) + var(--sidebar-content-gap));
    width:calc(100% - (var(--sidebar-offset) + var(--sidebar-width) + var(--settings-submenu-width) + var(--sidebar-content-gap)));
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:18px;
    gap:20px;
    position:relative;
    z-index:3;
}

.topbar-left{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
    min-width:320px;
}

.topbar-right{
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    padding-top:38px;
}

.orders-actions{
    display:flex;
    align-items:flex-start;
    gap:18px;
    flex-wrap:wrap;
}

.orders-create-btn{
    margin-top:calc(38px - 0.8cm);
    min-width:130px;
}

.orders-filter-btn{
    margin-top:calc(38px - 0.8cm);
    min-width:130px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#ffffff;
    color:#344054;
    border:1px solid #d9e2f1;
}

.orders-filter-btn:hover{
    background:#f5f5f5;
}

.orders-filter-btn.active{
    background:#e0e0e0;
    color:#344054;
    border-color:#d9d9d9;
}

.orders-filter-btn svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    flex-shrink:0;
}

.orders-saved-filters{
    margin-top:calc(38px - 0.8cm);
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.orders-saved-filter-btn{
    min-height:36px;
    max-width:220px;
    padding:6px 12px;
    border:1px solid #d9e2f1;
    border-radius:8px;
    background:#ffffff;
    color:#344054;
    font-size:14px;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.orders-saved-filter-btn:hover{
    background:#f5f8ff;
}

.orders-saved-filter-btn.active{
    background:#eef4ff;
    border-color:#bfd2ff;
    color:#1d4ed8;
}

.orders-filter-panel{
    display:none;
    width:100%;
    margin:0 0 16px;
    padding:14px;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 1px 0 rgba(16,24,40,0.02);
}

.orders-filter-panel.show{
    display:block;
}

.orders-filter-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.orders-filter-chip{
    min-height:36px;
    padding:6px 12px;
    border:1px solid #d9e2f1;
    border-radius:8px;
    background:#f8fbff;
    color:#344054;
    font-size:14px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.orders-filter-chip:hover{
    background:#eef4ff;
}

.orders-filter-chip svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    flex-shrink:0;
}

.orders-filter-links{
    margin-left:auto;
    display:none;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.orders-filter-links.show{
    display:inline-flex;
}

.orders-filter-link{
    min-height:36px;
    padding:0;
    border:none;
    background:transparent;
    color:#344054;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
}

.orders-filter-link:hover{
    background:transparent;
    color:#111827;
    text-decoration:underline;
}

.orders-filter-link-danger{
    color:#dc2626;
}

.orders-filter-link-danger:hover{
    color:#b91c1c;
}

.orders-filter-save-modal{
    max-width:360px;
}

.orders-filter-save-modal .crm-modal-head{
    align-items:center;
}

.orders-filter-save-close{
    margin-left:auto;
    min-height:28px;
    width:28px;
    padding:0;
    border:none;
    background:transparent;
    color:#98a2b3;
    font-size:26px;
    line-height:1;
}

.orders-filter-save-close:hover{
    background:transparent;
    color:#667085;
}

.orders-filter-save-body{
    display:grid;
    gap:12px;
}

.orders-filter-required{
    color:#dc2626;
}

.orders-filter-share-all,
.orders-filter-share-employee{
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:#344054;
    font-size:13px;
    line-height:1.35;
}

.orders-filter-share-all input,
.orders-filter-share-employee input{
    width:14px;
    height:14px;
    margin:1px 0 0;
    flex-shrink:0;
}

.orders-filter-share-block{
    display:grid;
    gap:8px;
}

.orders-filter-share-title{
    font-size:13px;
    font-weight:600;
    color:#344054;
}

.orders-filter-share-list{
    max-height:150px;
    overflow:auto;
    display:grid;
    gap:6px;
    padding:8px;
    border:1px solid #d9e2f1;
    border-radius:8px;
    background:#f8fbff;
}

.orders-filter-share-empty,
.orders-filter-save-error{
    color:#dc2626;
    font-size:12px;
}

.orders-filter-share-empty{
    color:#667085;
}

.orders-filter-save-footer{
    justify-content:flex-start;
}

.orders-filter-select-wrap{
    position:relative;
}

.orders-filter-select-chip{
    min-height:36px;
    padding:4px 10px 4px 12px;
    border:1px solid #d9e2f1;
    border-radius:8px;
    background:#f8fbff;
    color:#344054;
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.orders-filter-select-chip svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    flex-shrink:0;
}

.orders-filter-select-chip:hover{
    background:#eef4ff;
}

.orders-filter-select-chip-label{
    font-size:14px;
    font-weight:600;
    color:#344054;
    white-space:nowrap;
}

.orders-filter-select-caret{
    font-size:11px;
    color:#667085;
    line-height:1;
}

.orders-filter-select-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    min-width:220px;
    max-width:280px;
    padding:8px;
    border:1px solid #d9e2f1;
    border-radius:12px;
    background:#ffffff;
    box-shadow:0 18px 48px rgba(15,23,42,0.16);
    display:none;
    z-index:25;
}

.orders-filter-select-wrap.open .orders-filter-select-menu{
    display:grid;
    gap:6px;
}

.orders-filter-select-option{
    width:100%;
    min-height:36px;
    padding:8px 10px;
    border:1px solid transparent;
    border-radius:8px;
    background:#ffffff;
    color:#344054;
    font-size:14px;
    font-weight:500;
    text-align:left;
}

.orders-filter-select-option:hover{
    background:#f8fbff;
}

.orders-filter-select-option.active{
    background:#eef4ff;
    border-color:#bfd2ff;
    color:#1d4ed8;
}

.osf-item-muted{
    color:#8a96a8;
    font-size:12px;
    font-weight:500;
}

.orders-filter-select-empty{
    padding:8px 10px;
    color:#667085;
    font-size:14px;
}

.orders-filter-select-chip.active{
    background:#eef4ff;
    border-color:#bfd2ff;
    color:#1d4ed8;
}

.orders-filter-select-chip.active .orders-filter-select-chip-label{
    color:#1d4ed8;
}

.orders-filter-select-chip.active .orders-filter-select-caret{
    color:#1d4ed8;
}

.orders-filter-date-menu{
    min-width:200px;
    padding:8px;
    gap:0;
    display:none;
}

.orders-filter-select-wrap.open .orders-filter-date-menu{
    display:block;
}

.orders-filter-date-sep{
    height:1px;
    background:#edf1f7;
    margin:6px 0;
}

.orders-filter-date-custom{
    border-top:1px solid #edf1f7;
    margin-top:6px;
    padding-top:10px;
}

.orders-filter-date-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}

.orders-filter-date-row label{
    width:22px;
    font-size:13px;
    color:#667085;
    flex-shrink:0;
}

.orders-filter-date-row input{
    flex:1;
    height:32px;
    padding:4px 8px;
    border:1px solid #d9e2f1;
    border-radius:8px;
    font-size:13px;
    color:#344054;
    background:#fff;
    min-width:0;
}

.orders-filter-date-actions{
    display:flex;
    gap:8px;
    margin-top:4px;
}

.orders-filter-date-custom .orders-filter-date-apply{
    margin-top:10px;
    width:100%;
}

.orders-filter-date-apply{
    flex:1;
    height:32px;
    padding:0 12px;
    background:#2f6df6;
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    min-height:32px;
}

.orders-filter-date-apply:hover{
    background:#1d4ed8;
}

.orders-filter-date-clear{
    height:32px;
    padding:0 10px;
    background:#f3f4f6;
    color:#667085;
    border:1px solid #e5e7eb;
    border-radius:8px;
    font-size:13px;
    cursor:pointer;
    min-height:32px;
}

.orders-filter-date-clear:hover{
    background:#e5e7eb;
}

/* ── Status filter multi-select dropdown ──────────────────────────────────── */

#ordersStatusFilterMenu,
#ordersInvoiceStatusFilterMenu{
    min-width:260px;
    padding:0;
    overflow:hidden;
}

.osf-search{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-bottom:1px solid #edf1f7;
}

.osf-search svg{
    width:16px;
    height:16px;
    stroke:#9ba7b6;
    flex-shrink:0;
}

.osf-search input{
    flex:1;
    border:none;
    outline:none;
    font-size:13px;
    color:#344054;
    background:transparent;
    padding:0;
    min-width:0;
}

.osf-groups{
    max-height:280px;
    overflow-y:auto;
    padding:6px 0;
}

.osf-group{
    margin-bottom:2px;
}

.osf-group-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 12px;
    cursor:pointer;
    user-select:none;
}

.osf-group-head:hover{
    background:#f5f8ff;
}

.osf-group-name{
    font-size:13px;
    font-weight:600;
    color:#344054;
}

.osf-items{
    padding-left:12px;
}

.osf-items--top{
    padding-left:0;
}

.osf-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 12px 4px 4px;
    cursor:pointer;
    user-select:none;
    border-radius:6px;
}

.osf-item:hover{
    background:#f5f8ff;
}

.osf-cb{
    width:16px;
    height:16px;
    border:1.5px solid #d0d5dd;
    border-radius:4px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    position:relative;
}

.osf-cb.checked{
    background:#2f6df6;
    border-color:#2f6df6;
}

.osf-cb.checked::after{
    content:"";
    width:9px;
    height:5px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(-45deg) translateY(-1px);
    display:block;
}

.osf-cb.indet{
    background:#2f6df6;
    border-color:#2f6df6;
}

.osf-cb.indet::after{
    content:"";
    width:8px;
    height:2px;
    background:#fff;
    display:block;
    border-radius:1px;
}

.osf-badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:180px;
}

.osf-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 12px;
    border-top:1px solid #edf1f7;
}

.osf-footer button{
    padding:0;
    min-height:auto;
    background:none;
    border:none;
    font-size:13px;
    color:#2f6df6;
    cursor:pointer;
    font-weight:500;
}

.osf-footer button:hover{
    color:#1d4ed8;
    background:none;
}

.osf-footer-btn{
    padding:0;
    min-height:auto;
    background:none;
    border:none;
    font-size:13px;
    color:#2f6df6;
    cursor:pointer;
    font-weight:500;
}

.osf-footer-btn:hover{
    color:#1d4ed8;
    background:none;
}

.osf-item-name{
    flex:1;
    font-size:13px;
    color:#344054;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.osf-avatar{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#2f6df6;
    color:#fff;
    font-size:11px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.osf-avatar-icon{
    width:18px;
    height:18px;
    stroke:#8a96a8;
    flex-shrink:0;
}

.osf-empty{
    padding:12px 14px;
    font-size:13px;
    color:#8a96a8;
}

.osf-loading{
    padding:12px 14px;
    font-size:13px;
    color:#8a96a8;
}

#userPanel{
    position:relative;
    display:block;
    margin:0 0 14px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(24,34,48,0.10);
}

.user-menu{
    position:relative;
    width:100%;
}

.user-menu-trigger{
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    padding:0;
    border:none;
    background:transparent;
    color:var(--text);
    border-radius:0;
    box-shadow:none;
    min-width:0;
}

.user-menu-trigger:hover{
    background:transparent;
}

.user-menu-main{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:10px;
    min-width:0;
    width:100%;
}

.user-avatar{
    width:40px;
    height:40px;
    border-radius:999px;
    background:linear-gradient(135deg, #2f6df6, #7c3aed);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    flex-shrink:0;
}

.user-meta{
    min-width:0;
    width:100%;
    text-align:left;
    padding-top:2px;
}

.user-company{
    font-size:14px;
    font-weight:700;
    color:var(--text);
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:break-word;
    line-height:1.2;
}

.user-name{
    margin-top:4px;
    font-size:13px;
    color:var(--muted);
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:break-word;
    line-height:1.3;
}

.user-status{
    margin-top:6px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    color:#475467;
}

.user-status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:999px;
    background:#16a34a;
    flex-shrink:0;
}

.user-menu-caret{
    font-size:12px;
    color:var(--muted);
    flex-shrink:0;
}

.user-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:auto;
    width:100%;
    background:white;
    border:1px solid #d9e2f1;
    border-radius:16px;
    box-shadow:0 22px 60px rgba(15,23,42,0.18);
    padding:8px;
    display:none;
    z-index:60;
}

.user-menu-chevron{
    display:none;
}

.user-dropdown.show{
    display:block;
}

.user-dropdown-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 10px 12px;
    border-bottom:1px solid #edf2f7;
}

.user-dropdown-title{
    font-size:14px;
    font-weight:700;
    color:var(--text);
}

.user-dropdown-subtitle{
    margin-top:2px;
    font-size:12px;
    color:var(--muted);
    word-break:break-word;
}

.user-dropdown-actions{
    padding-top:8px;
    display:grid;
    gap:4px;
}

.user-dropdown-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 12px;
    border:none;
    border-radius:8px;
    background:white;
    color:#344054;
    font-size:14px;
    font-weight:600;
    text-align:left;
}

.user-dropdown-item:hover{
    background:#f5f8ff;
}

.user-dropdown-item.danger{
    color:#b42318;
}

.user-dropdown-item.danger:hover{
    background:#fef3f2;
}

.user-dropdown-icon{
    width:18px;
    text-align:center;
    flex-shrink:0;
}

#userPanel{
    margin:0 0 20px;
    padding:0 0 20px;
    border-bottom:1px solid rgba(82, 128, 183, 0.22);
}

.user-menu-trigger{
    color:#17345b;
}

.user-menu-trigger:hover{
    background:transparent;
}

.user-menu-main{
    align-items:center;
    gap:15px;
}

.user-avatar{
    width:53px;
    height:53px;
    background:
        radial-gradient(circle at 28% 22%, rgba(73, 188, 255, 0.85), transparent 34%),
        linear-gradient(135deg, #2378ff 0%, #7a32e8 100%);
    box-shadow:0 14px 30px rgba(74, 86, 232, 0.28);
    font-size:20px;
    letter-spacing:0;
}

.user-meta{
    padding-top:0;
}

.user-company{
    font-size:16px;
    line-height:1.18;
    color:#17345b;
}

.user-name{
    margin-top:7px;
    font-size:14px;
    line-height:1.2;
    color:#6f83a2;
}

.user-status{
    margin-top:10px;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(194, 239, 219, 0.72);
    color:#1f9f69;
    font-size:12px;
    font-weight:600;
}

.user-status::before{
    width:9px;
    height:9px;
    background:#2fbd71;
    box-shadow:0 0 0 4px rgba(47, 189, 113, 0.14);
}

.user-dropdown{
    width:calc(100% + 24px);
    left:-12px;
    border-radius:18px;
    border-color:rgba(185, 207, 234, 0.86);
}

.btn,
button{
    padding:10px 15px;
    border:none;
    background:var(--blue);
    color:white;
    cursor:pointer;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    transition:0.15s ease;
    padding:6px 12px;
    min-height:36px;
    line-height:1.2;
}

.btn:hover,
button:hover{
    background:var(--blue-hover);
}

.btn:disabled,
button:disabled{
    opacity:0.55;
    cursor:not-allowed;
}

.btn-secondary{
    background:#7b8698;
}

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

.btn-light{
    background:#f3f6fb;
    color:#344054;
    border:1px solid #d9e2f1;
}

.btn-light:hover{
    background:#e9eef8;
}

.btn-add-soft{
    background:rgba(22, 163, 74, 0.9);
    color:#ffffff;
    border-color:rgba(21, 128, 61, 0.9);
}

.btn-add-soft:hover{
    background:rgba(21, 128, 61, 0.9);
    border-color:rgba(22, 101, 52, 0.9);
}

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

.btn-danger:hover{
    background:var(--danger-hover);
}

.btn-toggle{
    background:#f3f6fb;
    color:#344054;
    border:1px solid #d9e2f1;
    min-height:34px;
    padding:6px 12px;
    font-size:13px;
    font-weight:600;
}

.btn-toggle:hover{
    background:#e9eef8;
}

.btn-toggle.active{
    background:var(--blue);
    color:white;
    border-color:var(--blue);
}

input, select, textarea{
    padding:12px 14px;
    width:100%;
    border:1px solid var(--line-2);
    border-radius:10px;
    box-sizing:border-box;
    font-size:15px;
    background:white;
    color:var(--text);
    outline:none;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#9bb7ff;
    box-shadow:0 0 0 3px rgba(47,109,246,0.10);
}

input::placeholder,
textarea::placeholder{
    color:#8a94a6;
}

textarea{
    min-height:92px;
    resize:vertical;
}

label{
    display:block;
    margin-bottom:6px;
    font-size:15px;
    color:var(--text);
    font-weight:700;
}

.field{
    margin-bottom:12px;
}

.checkbox-field{
    display:flex;
    align-items:center;
}

.checkbox-field label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    font-weight:600;
    color:#475467;
    font-size:14px;
}

.checkbox-field input{
    width:auto;
}

.section-card{
    background:var(--panel);
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:12px;
    border:1px solid var(--line);
    box-shadow:0 1px 0 rgba(16,24,40,0.02);
}

.section-card h3{
    margin:0 0 10px;
    font-size:18px;
}

.hint-text{
    color:#7b8798;
    font-size:14px;
    margin-bottom:10px;
}

.toggle-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.device-label{
    display:block;
    margin:2px 0 -2px;
    font-size:15px;
    font-weight:700;
    color:var(--text);
}

.inline-pair{
    display:grid;
    grid-template-columns:160px 1fr;
    align-items:center;
    gap:14px;
}

.inline-pair-stack{
    margin-top:12px;
}

.inline-pair .inline-label{
    font-size:15px;
    font-weight:700;
    color:var(--text);
    white-space:nowrap;
}

a{
    color:#1d4ed8;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

.orders-shell{
    position:relative;
    margin-top:0;
}