:root {
    --graphite: #3f4443;
    --graphite-deep: #242827;
    --cardboard: #c3ad8b;
    --blue-gray: #5b6770;
    --cherry: #7c2629;
    --metal: #c9cdcf;
    --warm-gray: #cbc4bc;
    --paper: #f4f4f4;
    --white: #ffffff;
    --border: #e3e5e4;
    --shadow: 0 18px 45px rgba(36, 40, 39, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    color: var(--graphite-deep);
    font-family: "Montserrat", Arial, sans-serif;
}

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

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 2;
    display: flex;
    width: 248px;
    flex-direction: column;
    padding: 28px 20px 22px;
    background: var(--graphite-deep);
    color: var(--white);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 8px 36px;
}

.brand img {
    width: 118px;
    height: 44px;
    object-fit: contain;
    filter: invert(1);
}

.brand span {
    border-left: 1px solid rgba(255,255,255,.25);
    padding-left: 14px;
    color: var(--cardboard);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
}

.nav { display: grid; gap: 7px; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 13px 14px;
    color: #d8dcda;
    font-size: 14px;
    font-weight: 500;
    transition: .2s ease;
}

.nav-link:hover, .nav-link.is-active {
    background: rgba(195, 173, 139, .14);
    color: var(--white);
}

.nav-link.is-active { box-shadow: inset 3px 0 var(--cardboard); }
.nav-icon { width: 20px; color: var(--cardboard); font-size: 20px; text-align: center; }

.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 20px 8px 0;
}

.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer strong { font-size: 12px; }
.sidebar-footer small { margin-top: 3px; color: #9fa6a3; font-size: 10px; }

.user-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: var(--cardboard);
    color: var(--graphite-deep);
    font-weight: 700;
}

.workspace { margin-left: 248px; padding: 36px 42px 52px; }

.topbar, .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.eyebrow {
    margin: 0 0 7px;
    color: var(--blue-gray);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; }
h2 { margin-bottom: 0; font-size: 20px; letter-spacing: -.025em; }

.topbar-actions { display: flex; align-items: center; gap: 14px; }
.status { color: var(--blue-gray); font-size: 12px; font-weight: 600; }
.status i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #4f8a62;
    box-shadow: 0 0 0 4px rgba(79,138,98,.12);
}

.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 17px;
    font-size: 12px;
    font-weight: 700;
}

.button-primary { background: var(--graphite); color: var(--white); }
.button-secondary { border: 1px solid var(--border); background: var(--white); }

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}

.metric-card {
    position: relative;
    overflow: hidden;
    min-height: 164px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    background: var(--white);
    box-shadow: 0 8px 25px rgba(36,40,39,.04);
}

.metric-card-accent { background: var(--cardboard); border-color: var(--cardboard); }
.metric-card::after {
    position: absolute;
    top: -24px;
    right: -24px;
    width: 84px;
    height: 84px;
    border: 1px solid rgba(63,68,67,.09);
    border-radius: 50%;
    content: "";
}

.metric-label { display: block; color: var(--blue-gray); font-size: 11px; font-weight: 600; }
.metric-card-accent .metric-label { color: var(--graphite); }
.metric-card strong { display: block; margin: 17px 0 16px; font-size: 34px; letter-spacing: -.04em; }
.metric-card strong small { font-size: 13px; letter-spacing: 0; }
.metric-card a { color: var(--blue-gray); font-size: 10px; font-weight: 700; }

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr);
    gap: 18px;
    margin-top: 18px;
}

.panel {
    min-height: 380px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.panel-heading { margin-bottom: 22px; }
.panel-heading > a { color: var(--cherry); font-size: 11px; font-weight: 700; }

.movement-list { display: grid; }
.movement {
    display: grid;
    grid-template-columns: 10px minmax(130px, .7fr) minmax(180px, 1fr) auto;
    align-items: center;
    gap: 14px;
    border-top: 1px solid #eceeed;
    padding: 15px 3px;
    font-size: 11px;
}

.movement:first-child { border-top: 0; }
.movement:hover { background: #fafafa; }
.movement-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--cardboard); }
.movement-main strong, .movement-main small { display: block; }
.movement-main small { margin-top: 4px; color: var(--blue-gray); }
.movement-route { overflow: hidden; color: var(--blue-gray); text-overflow: ellipsis; white-space: nowrap; }
.movement-value { font-weight: 700; }

.quick-panel { background: var(--graphite); color: var(--white); }
.quick-panel .eyebrow { color: var(--cardboard); }
.quick-actions { display: grid; gap: 10px; }
.quick-actions > a {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 14px;
    background: rgba(255,255,255,.035);
}
.quick-actions > a:hover { border-color: rgba(195,173,139,.45); }
.quick-actions > a > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    background: var(--cardboard);
    color: var(--graphite-deep);
    font-size: 19px;
}
.quick-actions strong, .quick-actions small { display: block; }
.quick-actions strong { font-size: 12px; }
.quick-actions small { margin-top: 4px; color: #aeb4b2; font-size: 9px; }

.empty-state { padding: 55px 20px; text-align: center; }
.empty-state > span { color: var(--cardboard); font-size: 38px; }
.empty-state h3 { margin: 14px 0 8px; }
.empty-state p { color: var(--blue-gray); font-size: 11px; line-height: 1.6; }

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

@media (max-width: 760px) {
    .sidebar { position: static; width: 100%; padding: 18px; }
    .brand { padding-bottom: 18px; }
    .nav { grid-template-columns: repeat(2, 1fr); }
    .sidebar-footer { display: none; }
    .workspace { margin-left: 0; padding: 24px 18px 38px; }
    .topbar, .topbar-actions { align-items: flex-start; }
    .topbar { flex-direction: column; }
    .metrics { grid-template-columns: 1fr; }
    .movement { grid-template-columns: 10px 1fr auto; }
    .movement-route { display: none; }
}

.app-launcher-page {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(124,38,41,.055) 0 23%, transparent 23% 100%),
        linear-gradient(145deg, #f0eff3 0%, #e7e8ec 52%, #f4f2ef 100%);
}

.launcher-header {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(52,57,56,.12);
    padding: 0 38px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(12px);
}

.launcher-brand { display: flex; align-items: center; gap: 13px; }
.launcher-brand img { width: 112px; }
.launcher-brand span { border-left: 1px solid #ccd0ce; padding-left: 13px; color: var(--cherry); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.launcher-user { display: flex; align-items: center; gap: 10px; }
.launcher-user > div strong, .launcher-user > div small { display: block; }
.launcher-user > div strong { font-size: 10px; }
.launcher-user > div small { margin-top: 2px; color: #747c79; font-size: 7px; }
.launcher-user .status { margin-right: 18px; font-size: 9px; }
.launcher-user form { margin: 0 0 0 8px; }
.logout-button {
    min-height: 34px;
    border: 1px solid rgba(124,38,41,.24);
    border-radius: 8px;
    padding: 0 14px;
    background: rgba(255,255,255,.7);
    color: var(--cherry);
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
}
.logout-button:hover { border-color: var(--cherry); background: #fff; }

.login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(124,38,41,.07) 0 24%, transparent 24%),
        linear-gradient(145deg, #f0eff3, #e7e8ec 55%, #f4f2ef);
}
.login-card {
    width: min(440px, 100%);
    border: 1px solid rgba(52,57,56,.12);
    border-radius: 18px;
    padding: 38px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 24px 70px rgba(36,40,39,.15);
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.login-brand img { width: 142px; }
.login-brand span { border-left: 1px solid #ccd0ce; padding-left: 14px; color: var(--cherry); font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.login-card h1 { font-size: 28px; }
.login-intro { margin: 9px 0 27px; color: #68716e; font-size: 12px; line-height: 1.6; }
.login-form { display: grid; gap: 18px; }
.login-field { display: grid; gap: 7px; }
.login-field span { color: #535b58; font-size: 10px; font-weight: 700; }
.login-field input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d5d9d7;
    border-radius: 9px;
    padding: 0 14px;
    background: #fff;
    font: inherit;
    font-size: 14px;
}
.login-field input:focus { border-color: var(--cherry); outline: 3px solid rgba(124,38,41,.1); }
.login-submit { width: 100%; border: 0; cursor: pointer; }
.login-error { border-radius: 8px; padding: 12px 14px; background: #f8e8e8; color: var(--cherry); font-size: 11px; line-height: 1.5; }

.launcher-workspace { max-width: 1320px; margin: auto; padding: 38px 42px 56px; }
.launcher-hero { overflow: hidden; border: 1px solid rgba(52,57,56,.1); border-radius: 22px; background: rgba(255,255,255,.78); box-shadow: 0 18px 50px rgba(36,40,39,.08); }
.launcher-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:30px 32px 25px; }
.launcher-heading h1 { margin-top:5px; font-size:32px; }
.launcher-intro { margin:9px 0 0; color:#68716e; font-size:11px; line-height:1.6; }
.launcher-heading > time { color:var(--cherry); font-size:18px; font-weight:700; text-align:right; }
.launcher-heading > time small { display:block; margin-top:4px; color:#7a817e; font-size:8px; font-weight:600; text-transform:capitalize; }

.launcher-quick { display:grid; grid-template-columns:220px 1fr; gap:26px; margin-top:24px; border:1px solid rgba(52,57,56,.1); border-radius:16px; padding:22px 24px; background:rgba(255,255,255,.58); }
.launcher-quick header h2,.launcher-section-heading h2,.launcher-activity h2 { margin:4px 0 0; font-size:17px; }
.launcher-quick > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:10px; }
.launcher-quick a { position:relative; min-height:70px; border:1px solid rgba(52,57,56,.1); border-radius:12px; padding:14px 38px 13px 14px; background:#fff; box-shadow:0 5px 14px rgba(36,40,39,.05); transition:transform .16s ease,border-color .16s ease; }
.launcher-quick a:hover { border-color:rgba(124,38,41,.35); transform:translateY(-2px); }
.launcher-quick a b,.launcher-quick a span { display:block; }
.launcher-quick a b { font-size:9px; }
.launcher-quick a span { margin-top:5px; color:#737b78; font-size:7px; line-height:1.4; }
.launcher-quick a i { position:absolute; top:50%; right:14px; color:var(--cherry); font-size:18px; font-style:normal; transform:translateY(-50%); }
.launcher-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:38px; }
.launcher-section-heading > span { color:#737b78; font-size:8px; }

.app-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(115px, 1fr));
    gap: 14px;
    margin-top: 17px;
}

.app-tile { display:grid; min-height:156px; align-content:center; justify-items:center; border:1px solid rgba(52,57,56,.1); border-radius:16px; padding:17px 10px; background:rgba(255,255,255,.68); text-align:center; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.app-tile:hover { border-color:rgba(124,38,41,.24); box-shadow:0 12px 28px rgba(36,40,39,.1); transform:translateY(-3px); }
.app-tile .app-icon {
    position: relative;
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(52,57,56,.11);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 19px rgba(36,40,39,.12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.app-tile:hover .app-icon { box-shadow:0 10px 24px rgba(36,40,39,.15); }
.app-tile:focus-visible { border-radius: 12px; outline: 3px solid rgba(124,38,41,.25); outline-offset: 6px; }
.app-tile > strong { margin-top: 12px; font-size: 10px; line-height: 1.35; }
.app-tile > small { margin-top: 4px; color: #737b78; font-size: 7px; }
.app-icon i, .app-icon b { position: absolute; display: block; }

.app-sales .app-icon i { width: 42px; height: 33px; border-radius: 5px; background: #7c4a70; }
.app-sales .app-icon b { width: 11px; height: 20px; border-radius: 2px; background: #e7a52b; box-shadow: 15px -8px #c74d5b, 30px 3px #29a8a1; }
.app-production .app-icon i { width: 48px; height: 36px; border-bottom: 9px solid #477778; border-left: 12px solid #477778; transform: skewY(-25deg); }
.app-production .app-icon b { bottom: 19px; width: 48px; height: 8px; background: #c3ad8b; }
.app-operator .app-icon i { width: 43px; height: 43px; border: 8px solid #0795c7; border-radius: 50%; }
.app-operator .app-icon b { width: 49px; height: 8px; background: #7c2629; transform: rotate(-38deg); }
.app-receiving .app-icon i { width: 43px; height: 48px; border-radius: 4px; background: #e5a323; }
.app-receiving .app-icon b { width: 26px; height: 20px; border: 4px solid #fff; border-top: 0; }
.app-stock .app-icon i { width: 46px; height: 39px; background: #7c4a70; clip-path: polygon(50% 0,100% 25%,100% 100%,0 100%,0 25%); }
.app-stock .app-icon b { width: 28px; height: 8px; background: #26b4ab; box-shadow: 0 12px #c3ad8b; }
.app-products .app-icon i { width: 43px; height: 43px; border: 9px solid #c3ad8b; border-radius: 50%; }
.app-products .app-icon b { width: 12px; height: 12px; border-radius: 50%; background: #7c2629; }
.app-movements .app-icon i { width: 49px; height: 9px; border-radius: 8px; background: #0795c7; transform: translateY(-9px); }
.app-movements .app-icon i::after { position: absolute; right: -3px; top: -6px; border: 10px solid transparent; border-left-color: #0795c7; content: ""; }
.app-movements .app-icon b { width: 49px; height: 9px; border-radius: 8px; background: #7c2629; transform: translateY(10px); }
.app-movements .app-icon b::after { position: absolute; left: -3px; top: -6px; border: 10px solid transparent; border-right-color: #7c2629; content: ""; }
.app-catalog .app-icon i { width: 48px; height: 45px; border-radius: 4px; background: repeating-linear-gradient(90deg,#343938 0 3px,transparent 3px 6px); }
.app-catalog .app-icon b { right: 13px; bottom: 13px; width: 21px; height: 21px; border: 5px solid #e5a323; border-radius: 50%; background: #fff; }
.app-settings .app-icon i { width: 46px; height: 46px; border: 10px dotted #7c4a70; border-radius: 50%; }
.app-settings .app-icon b { width: 16px; height: 16px; border-radius: 50%; background: #e5a323; }
.app-payroll .app-icon i { width: 48px; height: 39px; border-radius: 5px; background: #7c4a70; }
.app-payroll .app-icon i::before { position: absolute; inset: 8px 7px auto; height: 5px; border-radius: 4px; background: #f4d5d6; box-shadow: 0 11px #fff; content: ""; }
.app-payroll .app-icon b { right: 12px; bottom: 12px; width: 22px; height: 22px; border-radius: 50%; background: #e5a323; box-shadow: inset 0 0 0 5px #fff8; }
.app-employees .app-icon i { width: 28px; height: 28px; border-radius: 50%; background: #7c4a70; transform: translateY(-10px); }
.app-employees .app-icon b { bottom: 12px; width: 51px; height: 28px; border-radius: 26px 26px 6px 6px; background: #26b4ab; }
.app-schedule .app-icon i { width: 49px; height: 47px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 5px #0795c7; }
.app-schedule .app-icon i::before { position: absolute; top: 10px; left: 5px; width: 39px; height: 5px; background: #0795c7; content: ""; }
.app-schedule .app-icon b { width: 8px; height: 8px; background: #e5a323; box-shadow: 13px 0 #7c4a70, 26px 0 #26b4ab, 0 13px #7c4a70, 13px 13px #26b4ab; }
.app-dashboards .app-icon i { left: 14px; bottom: 14px; width: 10px; height: 22px; border-radius: 3px 3px 0 0; background: #26b4ab; box-shadow: 15px -11px #e5a323, 30px -24px #7c4a70; }
.app-dashboards .app-icon b { left: 11px; bottom: 11px; width: 51px; height: 4px; border-radius: 4px; background: #343938; }

.launcher-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top:0;
    border:0;
    border-top:1px solid rgba(52,57,56,.1);
    border-radius:0;
    background:rgba(247,247,246,.72);
}
.launcher-metrics > div { display:grid; gap:4px; border-left:1px solid rgba(52,57,56,.1); padding:20px 24px; }
.launcher-metrics > div:first-child { border-left: 0; }
.launcher-metrics span { color: #68716e; font-size: 8px; font-weight: 600; }
.launcher-metrics strong { font-size:21px; }
.launcher-metrics strong small { font-size: 7px; }
.launcher-metrics > div > small { color:#89908d; font-size:7px; }
.launcher-metrics .metric-primary strong { color:var(--cherry); }

.launcher-activity { margin-top:34px; border:1px solid rgba(52,57,56,.1); border-radius:16px; padding:22px 24px; background:rgba(255,255,255,.7); }
.launcher-activity > header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px; }
.launcher-activity > header > a { color:var(--cherry); font-size:8px; font-weight:700; }
.activity-list { display:grid; }
.activity-list > a { display:grid; grid-template-columns:10px minmax(0,1fr) auto 65px; align-items:center; gap:13px; border-top:1px solid rgba(52,57,56,.08); padding:11px 4px; }
.activity-list > a:first-child { border-top:0; }
.activity-list span b,.activity-list span small { display:block; }
.activity-list span b { font-size:9px; }
.activity-list span small { overflow:hidden; margin-top:3px; color:#737b78; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.activity-list strong { font-size:10px; }
.activity-list time { color:#737b78; font-size:8px; text-align:right; }
.activity-mark { width:8px; height:8px; border-radius:50%; background:#477778; }
.activity-mark.movement-scrap,.activity-mark.movement-shipment { background:var(--cherry); }
.activity-mark.movement-production_output,.activity-mark.movement-receipt { background:#1f7353; }
.activity-empty { margin:0; padding:18px 0 4px; color:#737b78; font-size:9px; }

@media (max-width: 1050px) {
    .app-grid { grid-template-columns: repeat(4, minmax(115px, 1fr)); }
    .launcher-quick { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
    .launcher-header { padding: 0 18px; }
    .launcher-user .status, .launcher-user > div { display: none; }
    .launcher-user form { margin-left: 0; }
    .launcher-workspace { padding: 35px 18px; }
    .launcher-heading { align-items:flex-start; padding:24px 20px; }
    .launcher-heading > time { display:none; }
    .launcher-heading h1 { font-size: 24px; }
    .app-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 12px; margin-top: 34px; }
    .app-tile .app-icon { width: 68px; height: 68px; }
    .app-tile > strong { font-size: 8px; }
    .app-tile > small { display: none; }
    .launcher-metrics { grid-template-columns: repeat(2, 1fr); }
    .launcher-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(52,57,56,.1); }
    .launcher-metrics > div:nth-child(4) { border-top: 1px solid rgba(52,57,56,.1); }
    .launcher-section-heading > span { display:none; }
    .launcher-quick { padding:18px; }
    .launcher-quick > div { grid-template-columns:1fr; }
    .activity-list > a { grid-template-columns:10px minmax(0,1fr) auto; }
    .activity-list time { display:none; }
}