:root {
    --ink: #102a24;
    --muted: #65756f;
    --green: #107b61;
    --green-dark: #075747;
    --green-pale: #eaf6f0;
    --cream: #f5f4ec;
    --line: #dfe6e2;
    --white: #fff;
    --shadow: 0 24px 60px rgba(12, 45, 37, .12);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: "DM Sans", sans-serif;
    background: #f8faf9;
}
button, input { font: inherit; }
a { color: inherit; }

.login-shell {
    display: grid;
    grid-template-columns: minmax(380px, .92fr) minmax(520px, 1.08fr);
    min-height: 100vh;
}
.brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 48px clamp(42px, 6vw, 92px);
    color: #fff;
    background: #073f34;
}
.brand-panel::before,
.brand-panel::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}
.brand-panel::before { width: 520px; height: 520px; right: -280px; top: -210px; }
.brand-panel::after { width: 420px; height: 420px; left: -275px; bottom: -175px; }
.brand-panel__glow {
    position: absolute;
    inset: auto -20% -30% 15%;
    height: 65%;
    background: radial-gradient(circle, rgba(37,174,129,.22), transparent 66%);
}
.brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.8px;
    text-decoration: none;
}
.brand__mark {
    display: block;
    width: 82px;
    height: 48px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 9px;
    background: #fff url("../images/day-day-logo.png") center / contain no-repeat;
}
.brand__mark svg { display: none; }
.brand-panel__content {
    position: relative;
    z-index: 1;
    margin: auto 0;
    max-width: 590px;
}
.eyebrow {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}
.eyebrow--green { color: var(--green); }
.brand-panel h1 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 4.2vw, 66px);
    line-height: 1.06;
    letter-spacing: -3px;
}
.brand-panel h1 span { color: #76d4ab; }
.brand-panel__copy {
    max-width: 520px;
    margin: 28px 0 38px;
    color: rgba(255,255,255,.68);
    font-size: 17px;
    line-height: 1.75;
}
.insight-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 450px;
    padding: 19px 22px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(8px);
}
.insight-card__label { display: block; margin-bottom: 5px; color: rgba(255,255,255,.58); font-size: 12px; }
.insight-card strong { font-size: 15px; }
.mini-chart { display: flex; align-items: end; gap: 5px; width: 110px; height: 42px; }
.mini-chart span { flex: 1; border-radius: 3px 3px 1px 1px; background: #74d3aa; opacity: .35; }
.mini-chart span:last-child { opacity: 1; }
.brand-panel__foot {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(255,255,255,.4);
    font-size: 12px;
    letter-spacing: .5px;
}
.login-panel {
    display: grid;
    padding: 44px;
    place-items: center;
    background:
        radial-gradient(circle at 95% 5%, rgba(16,123,97,.08), transparent 30%),
        var(--cream);
}
.login-card { width: min(100%, 440px); }
.mobile-brand { display: none; }
.login-card__header { margin-bottom: 30px; }
.login-card__header h2 {
    margin: 0 0 9px;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -1.4px;
}
.login-card__header > p:last-child { margin: 0; color: var(--muted); line-height: 1.6; }
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 15px;
    border: 1px solid #f0c5bf;
    border-radius: 10px;
    color: #8b3329;
    background: #fff0ed;
    font-size: 14px;
}
.alert svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.login-form > label, .label-row label {
    display: block;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 600;
}
.label-row { display: flex; justify-content: space-between; margin-top: 21px; }
.muted-link { color: var(--green); font-size: 13px; font-weight: 600; }
.input-wrap { position: relative; }
.input-wrap > svg {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 20px;
    transform: translateY(-50%);
    fill: none;
    stroke: #87948f;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.input-wrap input {
    width: 100%;
    height: 54px;
    padding: 0 50px 0 48px;
    border: 1px solid #d5ded9;
    outline: none;
    border-radius: 12px;
    color: var(--ink);
    background: rgba(255,255,255,.86);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.input-wrap input::placeholder { color: #a0aaa6; }
.input-wrap input:focus {
    border-color: var(--green);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(16,123,97,.1);
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 11px;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    color: #75847e;
    background: transparent;
    cursor: pointer;
    place-items: center;
}
.password-toggle:hover { background: var(--green-pale); }
.password-toggle svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.remember {
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: max-content;
    margin: 18px 0 24px !important;
    color: var(--muted);
    cursor: pointer;
    font-weight: 400 !important;
}
.remember input { width: 16px; height: 16px; accent-color: var(--green); }
.primary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 55px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--green);
    box-shadow: 0 12px 24px rgba(16,123,97,.2);
    cursor: pointer;
    font-weight: 700;
    transition: transform .2s, background .2s;
}
.primary-button:hover { transform: translateY(-1px); background: var(--green-dark); }
.primary-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.login-card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 28px 0 0;
    color: #97a19d;
    font-size: 11px;
}

.dashboard-page { background: #f3f6f4; }
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px max(28px, calc((100% - 1180px) / 2));
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.brand--dark { color: var(--ink); }
.user-menu { display: flex; align-items: center; gap: 11px; }
.user-menu div { display: flex; flex-direction: column; }
.user-menu strong { font-size: 13px; }
.user-menu small { color: var(--muted); }
.user-menu a { margin-left: 12px; color: var(--green); font-size: 13px; font-weight: 700; text-decoration: none; }
.avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: var(--green); font-weight: 700; }
.dashboard { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 56px 0; }
.welcome-row { display: flex; align-items: end; justify-content: space-between; margin-bottom: 34px; }
.welcome-row h1 { margin: 0 0 8px; font-family: "Manrope", sans-serif; font-size: 36px; letter-spacing: -1.4px; }
.welcome-row p:last-child { margin: 0; color: var(--muted); }
.status-pill { padding: 9px 13px; border: 1px solid #cde8dc; border-radius: 99px; color: var(--green); background: var(--green-pale); font-size: 12px; font-weight: 700; }
.status-pill span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #21a476; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 52px; }
.summary-grid article { padding: 23px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.summary-grid article > span, .summary-grid small { display: block; color: var(--muted); font-size: 12px; }
.summary-grid strong { display: block; margin: 9px 0 7px; font-family: "Manrope", sans-serif; font-size: 24px; }
.summary-grid__accent { color: #fff; border-color: var(--green-dark) !important; background: var(--green-dark) !important; }
.summary-grid__accent span, .summary-grid__accent small { color: rgba(255,255,255,.65) !important; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { margin: 0 0 6px; font-family: "Manrope", sans-serif; }
.section-heading p { margin: 0; color: var(--muted); }
.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.module-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; color: inherit; background: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.module-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(12,45,37,.08); }
.module-card__icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: var(--green); background: var(--green-pale); font-size: 11px; font-weight: 800; }
.module-card h3 { margin: 0 0 5px; font-size: 15px; }
.module-card p { margin: 0; color: var(--muted); font-size: 13px; }
.module-card__arrow { color: var(--green); font-size: 21px; }
.activity-dashboard-page { padding-bottom: 72px; }
.activity-summary-grid { margin-bottom: 18px; }
.activity-dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, .9fr); gap: 18px; margin-bottom: 18px; }
.activity-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.activity-card__heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.activity-card__heading h2 { margin: 4px 0 0; font-family: "Manrope", sans-serif; font-size: 19px; letter-spacing: -.35px; }
.activity-kicker { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.activity-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; color: var(--muted); font-size: 10px; font-weight: 700; }
.activity-legend span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.activity-legend i { width: 8px; height: 8px; border-radius: 3px; }
.legend-sales { background: var(--green); }
.legend-receipts { background: #4bb5d8; }
.legend-payments { background: #f0a94b; }
.activity-chart { display: grid; grid-template-columns: repeat(7, minmax(38px, 1fr)); gap: 8px; min-height: 252px; margin-top: 22px; padding: 10px 8px 0; border-bottom: 1px solid var(--line); background-image: linear-gradient(to bottom, rgba(222,230,226,.75) 1px, transparent 1px); background-size: 100% 25%; }
.activity-chart__day { display: grid; grid-template-rows: 205px auto auto; gap: 3px; min-width: 0; color: var(--ink); text-align: center; font-size: 11px; font-weight: 700; }
.activity-chart__day small { color: var(--muted); font-size: 9px; font-weight: 500; }
.activity-chart__bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 205px; }
.activity-bar { width: min(10px, 27%); border-radius: 4px 4px 1px 1px; transition: opacity .2s; }
.activity-bar:hover { opacity: .72; }
.activity-bar--sales { background: var(--green); }
.activity-bar--receipts { background: #4bb5d8; }
.activity-bar--payments { background: #f0a94b; }
.position-visual { display: grid; gap: 5px; margin: 22px 0 15px; padding: 22px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #0d4f41, #08745c); }
.position-visual span, .position-visual small { color: rgba(255,255,255,.68); font-size: 11px; }
.position-visual strong { margin: 4px 0; font-family: "Manrope", sans-serif; font-size: 27px; }
.position-visual strong.is-negative { color: #ffd29c; }
.position-list { margin: 0; }
.position-list div { display: flex; justify-content: space-between; gap: 15px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.position-list div:last-child { padding-bottom: 2px; border-bottom: 0; }
.position-list dt { color: var(--muted); font-size: 11px; }
.position-list dd { margin: 0; font-size: 12px; font-weight: 800; text-align: right; }
.activity-flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.activity-flow-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.activity-flow-card__icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; color: #fff; background: var(--green); font-size: 10px; font-weight: 800; }
.activity-flow-card__icon--in { background: #368eae; }
.activity-flow-card__icon--out { background: #d68a28; }
.activity-flow-card__icon--stock { color: #655121; background: #f4d36d; }
.activity-flow-card div { display: grid; min-width: 0; }
.activity-flow-card div > span, .activity-flow-card small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.activity-flow-card strong { margin: 3px 0; font-family: "Manrope", sans-serif; font-size: 23px; }
.executive-dashboard { width: min(1240px, calc(100% - 40px)); padding: 34px 0 64px; }
.executive-welcome { align-items: center; margin-bottom: 24px; }
.executive-welcome h1 { font-size: 32px; }
.insight-board { display: grid; gap: 14px; padding: 16px; border: 1px solid #d5dedb; border-radius: 24px; background: #e4e9e7; box-shadow: 0 22px 55px rgba(22, 54, 45, .08); }
.insight-panel { min-width: 0; padding: 20px; border: 1px solid #dbe4e0; border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 7px 18px rgba(21, 50, 43, .045); }
.insight-label { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.insight-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.insight-heading h2 { margin: 4px 0 0; font-family: "Manrope", sans-serif; font-size: 16px; letter-spacing: -.25px; }
.insight-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; color: var(--muted); font-size: 9px; font-weight: 700; }
.insight-legend span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.insight-legend i { width: 7px; height: 7px; border-radius: 2px; }
.insight-overview { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(380px, 2fr) minmax(180px, .8fr); align-items: center; gap: 25px; }
.overview-revenue { display: grid; gap: 6px; }
.overview-revenue strong { font-family: "Manrope", sans-serif; font-size: 27px; letter-spacing: -.7px; }
.overview-revenue small { color: var(--muted); font-size: 10px; }
.top-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.top-product-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; }
.top-product-item > div { display: grid; min-width: 0; }
.top-product-item b, .top-product-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-product-item b { font-size: 10px; }
.top-product-item small { color: var(--muted); font-size: 8px; }
.top-product-item > strong { font-size: 10px; white-space: nowrap; }
.metric-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #fff; background: #279474; font-size: 10px; font-weight: 800; }
.metric-icon--2 { background: #dfa033; }
.metric-icon--3 { background: #438ddd; }
.metric-icon--4 { background: #896ed3; }
.weekly-spark-card { display: grid; gap: 6px; }
.weekly-spark-card > strong { font-family: "Manrope", sans-serif; font-size: 21px; }
.mini-bars { display: flex; align-items: end; justify-content: space-between; gap: 6px; height: 54px; padding: 4px 3px 0; border-bottom: 1px solid var(--line); }
.mini-bars i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(#7b5dd5, #5135b3); }
.insight-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.insight-panel--revenue { grid-column: span 5; }
.cashflow-panel { grid-column: span 3; }
.position-panel { grid-column: span 4; }
.donut-panel { grid-column: span 3; }
.movement-panel { grid-column: span 3; }
.balance-panel { grid-column: span 6; }
.method-panel { grid-column: span 4; }
.monthly-panel { grid-column: span 8; }
.revenue-total-row { display: flex; gap: 34px; margin: 18px 0 4px; }
.revenue-total-row div { display: grid; gap: 2px; }
.revenue-total-row span { color: var(--muted); font-size: 9px; }
.revenue-total-row strong { font-family: "Manrope", sans-serif; font-size: 17px; }
.line-chart { margin-top: 8px; }
.line-chart svg { width: 100%; height: 165px; overflow: visible; }
.line-chart line { stroke: #e5ece9; stroke-width: 1; }
.line-chart polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.line-chart__sales { stroke: var(--green); }
.line-chart__receipts { stroke: #4b8ee8; }
.line-chart__labels { display: grid; grid-template-columns: repeat(7, 1fr); color: var(--muted); font-size: 8px; text-align: center; }
.cashflow-panel { display: flex; flex-direction: column; }
.cashflow-metric { display: grid; gap: 4px; margin-top: 17px; padding: 13px 14px; border-left: 3px solid var(--green); border-radius: 0 11px 11px 0; background: #f1f8f5; }
.cashflow-metric--out { border-left-color: #e0a03a; background: #fff8ec; }
.cashflow-metric span, .cashflow-metric small { color: var(--muted); font-size: 9px; }
.cashflow-metric strong { font-family: "Manrope", sans-serif; font-size: 18px; }
.cashflow-net { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 10px; }
.cashflow-net span { color: var(--muted); }
.position-panel { display: flex; flex-direction: column; }
.position-hero { display: grid; gap: 5px; margin: 17px 0 15px; padding: 18px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #0d4f41, #08745c 64%, #22916f); }
.position-hero span, .position-hero small { color: rgba(255,255,255,.68); font-size: 9px; }
.position-hero strong { font-family: "Manrope", sans-serif; font-size: 24px; }
.position-hero strong.is-negative { color: #ffd59f; }
.balance-comparison { display: grid; gap: 13px; margin-top: auto; }
.balance-comparison div { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; color: var(--muted); font-size: 9px; }
.balance-comparison b { color: var(--ink); font-size: 10px; }
.balance-comparison i { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: var(--green); }
.balance-comparison i.is-payable { background: #e0a03a; }
.donut-layout { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 18px; margin-top: 22px; }
.status-donut { display: grid; width: 118px; height: 118px; place-items: center; border-radius: 50%; }
.status-donut::before { content: ""; grid-area: 1 / 1; width: 76px; height: 76px; border-radius: 50%; background: #fff; }
.status-donut span { z-index: 1; display: grid; grid-area: 1 / 1; text-align: center; }
.status-donut b { font-family: "Manrope", sans-serif; font-size: 22px; }
.status-donut small { color: var(--muted); font-size: 8px; }
.donut-legend { display: grid; gap: 10px; }
.donut-legend span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.donut-legend i { width: 7px; height: 7px; border-radius: 2px; }
.donut-legend b { color: var(--ink); }
.dot-paid { background: var(--green); }
.dot-open { background: #4b8ee8; }
.dot-draft { background: #f0ae43; }
.dot-void { background: #a58bd4; }
.movement-panel .insight-heading > b { color: var(--green); font-family: "Manrope", sans-serif; font-size: 25px; }
.horizontal-metrics { display: grid; gap: 12px; margin-top: 20px; }
.horizontal-metrics > div:not(.empty-insight) { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; font-size: 9px; }
.horizontal-metrics span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.horizontal-metrics b { font-size: 9px; }
.horizontal-metrics i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: #ecf1ef; }
.horizontal-metrics em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0b6f58, #47b991); }
.horizontal-metrics > div:nth-child(2) em { background: linear-gradient(90deg, #347dd7, #63a8ef); }
.horizontal-metrics > div:nth-child(3) em { background: linear-gradient(90deg, #d48b27, #f0bb54); }
.horizontal-metrics > div:nth-child(4) em { background: linear-gradient(90deg, #7553cb, #aa92e5); }
.horizontal-metrics > div:nth-child(5) em { background: linear-gradient(90deg, #cf5891, #ef82b3); }
.balance-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 22px; }
.balance-kpis > div { display: grid; gap: 4px; min-width: 0; }
.balance-kpis span { color: var(--muted); font-size: 9px; }
.balance-kpis strong { overflow: hidden; font-family: "Manrope", sans-serif; font-size: 17px; text-overflow: ellipsis; }
.tiny-column-bars { display: flex; align-items: end; gap: 3px; height: 67px; margin-top: 5px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.tiny-column-bars i { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--green); }
.tiny-column-bars--blue i { background: #4b8ee8; }
.tiny-column-bars--gold i { background: #e0a03a; }
.horizontal-metrics--methods { margin-top: 24px; }
.monthly-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; min-height: 207px; margin-top: 18px; padding: 12px 12px 0; border-bottom: 1px solid var(--line); background-image: linear-gradient(to bottom, rgba(222,230,226,.7) 1px, transparent 1px); background-size: 100% 33.333%; }
.monthly-chart__group { display: grid; grid-template-rows: 174px auto; gap: 6px; text-align: center; }
.monthly-chart__group > div { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 174px; }
.monthly-chart__group i { width: min(13px, 28%); min-height: 2px; border-radius: 3px 3px 0 0; }
.monthly-chart__group .is-sales { background: var(--green); }
.monthly-chart__group .is-receipt { background: #4b8ee8; }
.monthly-chart__group .is-payment { background: #e0a03a; }
.monthly-chart__group span { color: var(--muted); font-size: 9px; font-weight: 700; }
.empty-insight { align-self: center; padding: 14px; border: 1px dashed #ccd8d3; border-radius: 10px; color: var(--muted); font-size: 9px; text-align: center; }
.final-accounts-page { padding-bottom: 72px; }
.period-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.period-toolbar form { width: min(470px, 100%); }
.period-toolbar label { display: grid; gap: 7px; color: #344b44; font-size: 11px; font-weight: 700; }
.period-toolbar select { width: 100%; padding: 11px; border: 1px solid #d5ded9; border-radius: 9px; background: #fff; }
.period-toolbar > div { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.final-account-stats { margin-bottom: 28px; }
.amount-negative { color: #aa4338 !important; }
.is-selected-row td { background: #f0f8f5; }
.period-control-panel a { color: var(--green); text-decoration: none; }
.final-report-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 18px; }
.final-report-card { min-width: 0; }
.final-report-heading-actions { display: flex; align-items: center; gap: 12px; }
.final-report-print { min-height: 36px; padding: 0 14px; }
.statement-list { display: grid; gap: 2px; }
.statement-list h3, .balance-sheet-grid h3 { margin: 16px 0 8px; color: var(--green); font-family: "Manrope", sans-serif; font-size: 13px; }
.statement-list > div, .balance-sheet-grid p, .balance-sheet-grid .statement-total, .balance-sheet-grid .statement-grand-total { display: flex; justify-content: space-between; gap: 18px; margin: 0; padding: 9px 2px; border-bottom: 1px solid #edf1ef; font-size: 11px; }
.statement-list span, .balance-sheet-grid span { color: var(--muted); }
.statement-list b, .balance-sheet-grid b { text-align: right; white-space: nowrap; }
.statement-list .statement-total, .balance-sheet-grid .statement-total { margin-top: 5px; border-bottom: 1px solid #cddad5; font-weight: 800; }
.statement-list .statement-grand-total, .balance-sheet-grid .statement-grand-total { margin-top: 10px; padding: 13px 12px; border: 0; border-radius: 10px; color: #fff; background: var(--green-dark); font-weight: 800; }
.statement-list .statement-grand-total span, .balance-sheet-grid .statement-grand-total span { color: rgba(255,255,255,.72); }
.balance-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.manual-journal-lines { display: grid; gap: 8px; margin: 18px 0 12px; }
.manual-journal-line { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(170px, 1fr) 110px 110px 32px; gap: 8px; align-items: center; }
.manual-journal-line input, .manual-journal-line select { width: 100%; min-width: 0; padding: 10px; border: 1px solid #d5ded9; border-radius: 8px; background: #fff; }
.manual-journal-line--head { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.line-remove { width: 32px; height: 32px; border: 0; border-radius: 8px; color: #a4473c; background: #fdeeed; cursor: pointer; font-size: 18px; }
.journal-balance { margin-top: 14px; padding: 12px 14px; border-radius: 9px; color: var(--green); background: var(--green-pale); font-size: 11px; font-weight: 800; text-align: right; }
.journal-balance.is-unbalanced { color: #a4473c; background: #fdeeed; }
.housekeeping-welcome { margin-bottom: 28px; }
.housekeeping-summary { margin-bottom: 34px; }
.housekeeping-modules { margin-bottom: 34px; }
.housekeeping-modules .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.housekeeping-module-card.is-active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 116, 92, .1); }
.housekeeping-section--hidden { display: none; }
.housekeeping-workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 10px 0 18px; }
.housekeeping-workspace-heading div { display: grid; gap: 4px; }
.housekeeping-workspace-heading span { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.housekeeping-workspace-heading strong { font-family: "Manrope", sans-serif; font-size: 22px; }
.housekeeping-workspace-heading a { color: var(--green); font-size: 13px; font-weight: 700; text-decoration: none; }
.housekeeping-workspace-heading a:hover { text-decoration: underline; }
.housekeeping-access-jumps { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; }
.housekeeping-access-jumps a { min-width: 135px; padding: 11px 16px; border: 1px solid #cbd8d2; border-radius: 9px; color: var(--green); background: #fff; font-size: 13px; font-weight: 800; text-align: center; text-decoration: none; }
.housekeeping-access-jumps a:hover, .housekeeping-access-jumps a:focus-visible { border-color: var(--green); background: var(--green-pale); }
.table-summary { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.table-summary strong { color: var(--ink); }
.credit-return-items { grid-column: 1 / -1; }
.credit-return-table input { width: 110px; }
.credit-return-table .number strong { display: block; }
.credit-return-table small { white-space: nowrap; }
.main-nav { display: flex; align-self: stretch; gap: 6px; margin-left: auto; margin-right: 30px; }
.main-nav a { display: flex; align-items: center; padding: 0 13px; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.main-nav a.active { color: var(--green); box-shadow: inset 0 -2px var(--green); }
.inventory-page { padding-top: 42px; }
.page-title-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.page-title-row h1 { margin: 0 0 7px; font-family: "Manrope", sans-serif; font-size: 38px; letter-spacing: -1.5px; }
.page-title-row p:last-child { margin: 0; color: var(--muted); }
.action-row { display: flex; gap: 10px; }
.primary-button--auto { width: auto; height: 44px; padding: 0 19px; box-shadow: none; }
.secondary-button { height: 44px; padding: 0 17px; border: 1px solid #ced9d4; border-radius: 10px; color: var(--ink); background: #fff; cursor: pointer; font-weight: 700; }
.secondary-button:hover { border-color: var(--green); color: var(--green); }
.secondary-button--compact { height: 32px; padding: 0 10px; border-radius: 7px; font-size: 11px; }
.action-row--payable { flex-wrap: wrap; justify-content: flex-end; align-items: stretch; max-width: 820px; }
.action-row--payable .secondary-button,
.action-row--payable .primary-button--auto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 104px;
    min-height: 50px;
    height: auto;
    padding: 9px 15px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}
.action-row--payable .link-button { min-width: 118px; }
.action-row--payable .primary-button--auto { min-width: 118px; }
.button-plus { flex: 0 0 auto; font-weight: 800; line-height: 1; }
.action-row--receivable { flex-wrap: wrap; justify-content: flex-end; align-items: stretch; max-width: 860px; }
.action-row--receivable .secondary-button,
.action-row--receivable .primary-button--auto {
    min-width: 132px;
    min-height: 66px;
    height: auto;
    padding: 12px 22px;
    line-height: 1.22;
    text-align: center;
    white-space: normal;
}
.action-row--receivable a[href="daily_logistics.php"] { min-width: 190px; }
.notice { margin-bottom: 20px; padding: 14px 17px; border: 1px solid; border-radius: 11px; font-size: 14px; }
.notice--success { border-color: #bde1d1; color: #086048; background: #eaf7f1; }
.notice--error { border-color: #efc1ba; color: #8b3329; background: #fff0ed; }
.credit-check { padding: 12px 14px; border: 1px solid #d5ded9; border-radius: 10px; color: var(--muted); background: #f8faf9; font-size: 12px; font-weight: 700; }
.credit-check--ok { border-color: #bde1d1; color: #086048; background: #eaf7f1; }
.credit-check--blocked { border-color: #efc1ba; color: #8b3329; background: #fff0ed; }
.inventory-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.inventory-stats article { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.inventory-stats span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.inventory-stats strong { font-family: "Manrope", sans-serif; font-size: 23px; }
.inventory-stats .stat-warning { border-color: #efd6a5; background: #fffaf0; }
.location-strip { display: flex; gap: 12px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 3px; }
.location-card { flex: 0 0 225px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; color: inherit; background: #fff; text-decoration: none; }
.location-card > span { display: inline-block; margin-bottom: 12px; padding: 4px 7px; border-radius: 6px; color: var(--green); background: var(--green-pale); font-size: 10px; font-weight: 800; }
.location-card strong, .location-card small { display: block; }
.location-card small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.location-card.active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(16,123,97,.08); }
.data-panel { margin-bottom: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.data-panel--stock-search { overflow: visible; }
.data-panel--purchase-request-search { overflow: visible; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0 0 4px; font-family: "Manrope", sans-serif; font-size: 18px; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.filter-form { display: flex; align-items: center; gap: 7px; }
.filter-form input, .filter-form select, .filter-form button { height: 38px; border: 1px solid #d5ded9; border-radius: 8px; background: #fff; padding: 0 11px; }
.filter-form button { color: #fff; border-color: var(--green); background: var(--green); cursor: pointer; font-weight: 700; }
.filter-form a { color: var(--green); font-size: 12px; font-weight: 700; }
.formatted-date-control { position: relative; display: grid; grid-template-columns: minmax(145px, 1fr) 40px; min-width: 188px; }
.filter-form .formatted-date-control input[type="text"] { width: 100%; min-width: 0; border-radius: 8px 0 0 8px; }
.filter-form .formatted-date-control__native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.filter-form .formatted-date-control__button { width: 40px; padding: 0; border: 1px solid #d5ded9; border-left: 0; border-radius: 0 8px 8px 0; background: #fff; color: #263a33; display: inline-flex; align-items: center; justify-content: center; }
.filter-form .formatted-date-control__button:hover { background: #f2f7f4; color: var(--green); }
.formatted-date-control__button svg { width: 18px; height: 18px; }
.filter-form .inventory-filter-search { width: min(280px, 100%); }
.filter-form .inventory-filter-search input { width: 100%; }
.filter-form .inventory-filter-search .item-search__results { width: min(520px, calc(100vw - 72px)); }
.filter-form .purchase-request-filter-search { width: min(320px, 100%); }
.filter-form .purchase-request-filter-search input { width: 100%; }
.filter-form .purchase-request-filter-search .item-search__results { width: min(560px, calc(100vw - 72px)); }
.panel-heading--stacked { align-items: stretch; flex-direction: column; gap: 14px; }
.filter-form--extract { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; }
.filter-form--extract input, .filter-form--extract select, .filter-form--extract button, .filter-form--extract a { width: 100%; min-width: 0; }
.filter-form--extract button, .filter-form--extract a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.filter-form--extract .item-search input { width: 100%; height: 38px; border: 1px solid #d5ded9; border-radius: 8px; background: #fff; padding: 0 11px; }
.filter-form--extract .item-search__results { top: 42px; width: min(520px, calc(100vw - 72px)); }
.filter-form--bank { display: grid; grid-template-columns: repeat(2, minmax(145px, .7fr)) minmax(145px, .8fr) minmax(250px, 1.6fr) auto; align-items: end; gap: 12px; }
.filter-form--bank label { display: grid; gap: 6px; color: #50625b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.filter-form--bank input, .filter-form--bank select { width: 100%; }
.filter-form--aging { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(280px, 1.5fr) auto auto; align-items: end; gap: 12px; }
.filter-form--aging label { display: grid; gap: 6px; color: #50625b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.filter-form--aging input { width: 100%; }
.filter-form--aging a { min-height: 38px; display: inline-flex; align-items: center; }
.filter-form--aging .item-search { width: 100%; }
.filter-form--aging .item-search__results { top: 42px; width: min(520px, calc(100vw - 72px)); text-transform: none; letter-spacing: normal; }
.ar-aging-filter-panel { overflow: visible; }
.ar-aging-table { min-width: 1160px; }
.ar-aging-detail-table { min-width: 980px; }
.delivery-detail-table { min-width: 1200px; }
.delivery-phone { white-space: nowrap; }
.delivery-route-heading th { padding: 12px 14px; border-top: 2px solid #9ab8ad; background: #edf6f2; text-align: left; }
.delivery-route-heading__content { display: flex; align-items: center; gap: 50px; }
.delivery-route-heading__content div { display: flex; align-items: baseline; gap: 9px; }
.delivery-route-heading__content span { color: #62746d; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.delivery-route-heading__content strong { color: #102f27; font-size: 13px; }
.ar-aging-table tfoot td { border-top: 2px solid #c9d8d2; background: #f4f8f6; }
.ar-aging-stats article small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.bank-filter-actions { display: flex; align-items: center; gap: 10px; }
.bank-filter-actions button { white-space: nowrap; }
.bank-filter-actions a { min-height: 38px; display: inline-flex; align-items: center; }
.extract-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; grid-column: span 2; }
.extract-filter-actions a { border: 1px solid #d5ded9; border-radius: 8px; background: #fff; text-decoration: none; }
.extract-search-block { display: grid; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.extract-search-title h2 { margin: 0 0 4px; font-family: "Manrope", sans-serif; font-size: 18px; }
.extract-search-title p { max-width: 620px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.extract-search-block .filter-form--extract { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); align-items: end; overflow: visible; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 12px 18px; color: #73817c; background: #f8faf9; font-size: 10px; letter-spacing: .5px; text-align: left; text-transform: uppercase; }
td { padding: 15px 18px; border-top: 1px solid #edf1ef; vertical-align: middle; }
td strong, td small { display: block; }
td small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.number { text-align: right; white-space: nowrap; }
.stock-status { display: inline-block; padding: 5px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.stock-status.healthy { color: #087054; background: #e6f5ee; }
.stock-status.low { color: #9a5a09; background: #fff1d5; }
.table-strong-link { display: inline-block; color: inherit; text-decoration: none; }
.table-strong-link strong { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.table-strong-link:hover strong { color: #0b5d49; }
.table-sort-link { color: var(--green); font-weight: 800; text-decoration: none; white-space: nowrap; }
.table-sort-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.empty-state { padding: 34px; color: var(--muted); text-align: center; }
.pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.pagination-pages { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.pagination-pages a, .pagination-pages span { display: inline-flex; min-width: 36px; height: 34px; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid #d5ded9; border-radius: 8px; color: var(--ink); background: #fff; font-weight: 700; text-decoration: none; }
.pagination-pages a:hover, .pagination-pages .active { border-color: var(--green); color: #fff; background: var(--green); }
.transaction-print-page .dashboard { width: min(1180px, calc(100% - 48px)); }
dialog { width: min(620px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 18px; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(5,32,27,.55); backdrop-filter: blur(3px); }
.dialog-form { padding: 25px; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; margin-bottom: 22px; }
.dialog-heading span { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.dialog-heading h2 { margin: 5px 0 0; font-family: "Manrope", sans-serif; font-size: 23px; }
.dialog-heading > button { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 26px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid label { color: #344b44; font-size: 12px; font-weight: 700; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid > .full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #d5ded9; border-radius: 9px; outline: none; background: #fff; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(16,123,97,.08); }
.select-with-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 7px; }
.select-with-actions select { margin-top: 0; }
.select-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.workflow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.workflow-steps > div { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; }
.workflow-steps span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--green); background: var(--green-pale); font-weight: 800; }
.workflow-steps strong { font-size: 13px; }
.workflow-steps small { color: var(--muted); font-size: 10px; }
.workflow-steps b { color: #a5b2ad; }
.form-panel .panel-heading a { color: var(--green); font-size: 13px; font-weight: 700; }
.document-form { padding: 22px; }
.settings-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.settings-divider strong { font-size: 14px; }
.settings-divider span { color: var(--muted); font-size: 12px; }
.document-lines { margin: 20px 0; border: 1px solid var(--line); border-radius: 11px; }
.table-input { width: 130px; padding: 8px 9px; border: 1px solid #d5ded9; border-radius: 7px; text-align: right; }
.table-input--wide { width: 190px; text-align: left; }
.table-textarea { min-height: 58px; resize: vertical; }
.table-input--sequence { width: 105px; }
.table-select { min-width: 120px; padding: 8px 9px; border: 1px solid #d5ded9; border-radius: 7px; background: #fff; }
.table-select--wide { min-width: 220px; }
.table-file { max-width: 190px; font-size: 11px; }
.inline-row-form { display: contents; }
.table-check { display: inline-flex; align-items: center; gap: 6px; color: #344b44; font-size: 12px; font-weight: 700; white-space: nowrap; }
.table-check input { width: 15px; height: 15px; }
.area-checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 9px; padding: 12px; border: 1px solid #dfe7e3; border-radius: 9px; background: #f8faf9; }
.inline-area-builder { margin-top: 2px; padding: 12px; border: 1px dashed #b9c9c1; border-radius: 9px; background: #fbfdfc; }
.inline-area-builder > div { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; align-items: end; margin-top: 8px; }
.inline-area-builder input { margin-top: 0; }
.inline-area-builder button { height: 36px; white-space: nowrap; }
.inline-area-builder small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.product-thumb { display: grid; width: 72px; height: 54px; place-items: center; border: 1px solid #d5ded9; border-radius: 8px; object-fit: cover; background: #f6faf8; color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
.product-thumb--empty { padding: 6px; }
.payment-qr-setting { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px dashed #c9d5d0; border-radius: 10px; background: #f8fbfa; }
.payment-qr-setting img { width: 72px; height: 72px; border: 1px solid #d5ded9; border-radius: 8px; object-fit: contain; background: #fff; }
.destination-preview { display: grid; gap: 5px; padding: 12px; border: 1px dashed #b9cfc6; border-radius: 10px; background: #f8fbfa; color: var(--muted); font-size: 12px; }
.destination-preview strong { color: var(--ink); font-size: 13px; }
.destination-preview span { color: var(--green); font-weight: 800; }
.destination-preview small { line-height: 1.45; }
.block-label { display: block; color: #344b44; font-size: 12px; font-weight: 700; }
.block-label textarea { width: 100%; margin-top: 7px; padding: 11px; border: 1px solid #d5ded9; border-radius: 9px; resize: vertical; }
.status-badge { display: inline-block; padding: 5px 8px; border-radius: 99px; color: #50625b; background: #edf1ef; font-size: 10px; font-weight: 800; }
.bank-reconciliation-stats article small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.bank-stat--matched { border-color: #b9e3d4 !important; background: linear-gradient(145deg, #fff, #f1fbf7) !important; }
.bank-stat--exception { border-color: #f1c4bb !important; background: linear-gradient(145deg, #fff, #fff4f1) !important; }
.bank-reconciliation-filter-panel { overflow: visible; }
.bank-reconciliation-table { min-width: 1340px; }
.bank-reconciliation-table th:nth-child(1) { width: 185px; }
.bank-reconciliation-table th:nth-child(2) { width: 180px; }
.bank-reconciliation-table th:nth-child(3) { width: 145px; }
.bank-reconciliation-table th:nth-child(4) { width: 130px; }
.bank-reconciliation-table th:nth-child(5) { width: 430px; }
.bank-reconciliation-table th:nth-child(6) { width: 165px; }
.bank-reconciliation-table td { vertical-align: top; }
.bank-reconciliation-table td > strong, .bank-reconciliation-table td > small { display: block; }
.bank-reconciliation-table td > small { margin-top: 4px; }
.empty-report-cell { padding: 42px 18px !important; text-align: center; color: var(--muted); }
.bank-match-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bank-match-fields label { display: grid; gap: 4px; color: #687a73; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.bank-match-fields input, .reconciliation-form select { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid #d5ded9; border-radius: 7px; background: #fff; font-size: 11px; }
.bank-reconciliation-table td:last-child select { margin: 10px 0 8px; }
.bank-reconciliation-table td:last-child .secondary-button { width: 100%; height: 34px; padding: 0 10px; color: #fff; border-color: var(--green); background: var(--green); }
.reconciliation-form > small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.reconciliation-badge { display: inline-flex; margin-top: 7px; padding: 5px 8px; border-radius: 99px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.reconciliation-badge--matched { color: #087052; background: #daf4e9; }
.reconciliation-badge--unmatched { color: #946414; background: #fff1c9; }
.reconciliation-badge--investigate { color: #9a3d35; background: #fde4df; }
.variance-warning { color: #a13c32 !important; font-weight: 800; }
.variance-ok { color: #087052 !important; font-weight: 800; }
.bank-reconciliation-guide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.bank-reconciliation-guide article { display: flex; gap: 12px; padding: 17px; border: 1px solid #dce5e1; border-radius: 12px; background: #fff; }
.bank-reconciliation-guide article > span { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 11px; font-weight: 800; }
.bank-reconciliation-guide strong { font-size: 12px; }
.bank-reconciliation-guide p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.status-approved, .status-received { color: #087054; background: #e6f5ee; }
.status-submitted, .status-issued, .status-partially_received { color: #87520c; background: #fff1d5; }
.status-rejected, .status-cancelled { color: #96392f; background: #fde9e6; }
.status-ordered { color: #315f92; background: #e8f1fa; }
.status-paid { color: #087054; background: #e6f5ee; }
.status-partially-paid, .status-overdue { color: #87520c; background: #fff1d5; }
.status-unpaid { color: #50625b; background: #edf1ef; }
.status-void { color: #96392f; background: #fde9e6; }
.status-draft { color: #50625b; background: #edf1ef; }
.status-sufficient, .status-override_approved, .status-approved { color: #087054; background: #e6f5ee; }
.status-insufficient, .status-pending_branch, .status-pending_credit, .status-pending_general { color: #87520c; background: #fff1d5; }
.status-not_required { color: #50625b; background: #edf1ef; }
.row-actions form { display: flex; gap: 7px; }
.row-actions button, .row-actions a { padding: 0; border: 0; color: var(--green); background: none; cursor: pointer; font-size: 12px; font-weight: 700; text-decoration: none; }
.row-actions .danger-link { color: #a4473c; }
.row-actions--stacked { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sort-icon-buttons { display: inline-flex; align-items: center; gap: 5px; }
.sort-icon-buttons form { margin: 0; }
.sort-icon-buttons button {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 1px solid #cbd8d2;
    border-radius: 7px;
    color: var(--green);
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}
.sort-icon-buttons button:hover { border-color: var(--green); background: var(--green-pale); }
.dialog-form--wide { padding: 22px; }
dialog:has(.dialog-form--wide) { width: min(980px, calc(100% - 24px)); }
.dialog-form--wide .dialog-heading { margin-bottom: 16px; }
.dialog-form--wide .form-grid { gap: 12px; }
.dialog-form--wide .form-grid label { font-size: 11px; }
.dialog-form--wide .form-grid input,
.dialog-form--wide .form-grid select,
.dialog-form--wide .form-grid textarea { padding: 8px 9px; border-radius: 7px; font-size: 12px; }
.gl-maintenance { padding: 12px; background: #f0f4f2; }
.gl-toolbar { display: grid; grid-template-columns: repeat(5, 86px) 1fr 86px 86px; gap: 7px; margin-bottom: 12px; }
.gl-toolbar button, .gl-toolbar a { display: inline-flex; align-items: center; justify-content: center; height: 32px; border: 1px solid #c3cdc8; border-radius: 3px; color: #102a24; background: linear-gradient(#fff, #e4e9e6); cursor: pointer; font-size: 12px; font-weight: 700; text-decoration: none; }
.gl-toolbar button:disabled { color: #98a39f; cursor: not-allowed; }
.gl-form-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 16px; border: 1px dotted #7d8a86; background: #f7f9f8; }
.gl-form-title { color: #102a24; font-size: 13px; text-align: center; }
.gl-form-shell label { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; color: #102a24; font-size: 12px; font-weight: 700; }
.gl-form-shell label.full { grid-column: 1 / -1; }
.gl-form-shell label.full input { width: 100%; }
.gl-form-shell input, .gl-form-shell select { width: 100%; height: 32px; padding: 5px 8px; border: 1px solid #bbc6c1; border-radius: 2px; background: #fff; }
.gl-form-shell .checkbox-label { grid-template-columns: auto 1fr; justify-content: start; }
.gl-form-shell .checkbox-label input { width: 16px; height: 16px; }
.request-items-panel { margin-top: 16px; padding: 14px; border: 1px solid #dfe7e3; border-radius: 8px; background: #fbfdfc; }
.request-items-panel__title { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid #e8eeeb; }
.request-items-panel__title strong { display: block; color: var(--ink); font-size: 13px; }
.request-items-panel__title span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.request-lines { display: grid; gap: 8px; margin-top: 12px; overflow: visible; padding-bottom: 8px; }
.request-line { display: grid; grid-template-columns: minmax(420px, 1fr) 130px 34px; gap: 8px; align-items: start; }
.request-line--head { color: #73817c; font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.request-line--head span { padding: 0 3px; line-height: 1.15; }
.request-line select, .request-line input { width: 100%; min-width: 0; height: 38px; padding: 8px 10px; border: 1px solid #d5ded9; border-radius: 7px; font-size: 12px; }
.request-line button { width: 34px; height: 38px; border: 0; border-radius: 7px; color: #96392f; background: #fde9e6; cursor: pointer; font-size: 16px; line-height: 1; }
.printout-details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.printout-details summary { cursor: pointer; color: var(--green); font-size: 12px; font-weight: 800; }
.printout-details .form-grid { margin-top: 12px; }
.add-line-button { margin-top: 6px; padding: 8px 0; border: 0; color: var(--green); background: none; cursor: pointer; font-weight: 700; }
.invoice-lines { display: grid; gap: 9px; margin-top: 20px; }
.invoice-line { display: grid; grid-template-columns: minmax(230px, 1fr) 92px 120px 100px 38px; gap: 8px; align-items: start; }
.invoice-line--head { color: #73817c; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.invoice-line input { width: 100%; min-width: 0; padding: 10px; border: 1px solid #d5ded9; border-radius: 8px; }
.invoice-line strong { padding-top: 10px; text-align: right; white-space: nowrap; }
.invoice-line > button { height: 40px; border: 0; border-radius: 8px; color: #96392f; background: #fde9e6; cursor: pointer; font-size: 18px; }
.item-search { position: relative; min-width: 0; }
.item-search small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.item-search__results { position: absolute; z-index: 50; top: 42px; left: 0; right: auto; width: min(680px, calc(100vw - 72px)); max-height: 360px; overflow-y: auto; border: 1px solid #cbd8d2; border-radius: 10px; background: #fff; box-shadow: 0 16px 40px rgba(15,42,35,.18); }
.request-line .item-search__option, .item-search__option { display: block; width: 100%; height: auto; min-height: 54px; padding: 11px 14px; border: 0; border-bottom: 1px solid #edf1ef; border-radius: 0; color: var(--ink); background: #fff; cursor: pointer; text-align: left; font-size: 13px; line-height: 1.3; }
.item-search__option:hover { background: #f6faf8; }
.item-search__option strong, .item-search__option small { display: block; padding: 0; text-align: left; line-height: 1.35; }
.item-search__option strong { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.item-search__sku { flex: 0 0 auto; color: #a43a30; font-weight: 800; white-space: nowrap; }
.item-search__name { min-width: 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.item-search__option small { margin-top: 3px; font-size: 11px; }
.item-search__empty { padding: 12px; color: var(--muted); font-size: 12px; }
.print-page { min-height: 100vh; color: #122c25; background: #e9eeeb; }
.print-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(24px, calc((100% - 900px) / 2)); border-bottom: 1px solid #d7e0dc; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }
.print-toolbar a { color: var(--green); font-size: 13px; font-weight: 700; text-decoration: none; }
.print-toolbar button { height: 40px; padding: 0 16px; border: 0; border-radius: 9px; color: #fff; background: var(--green); cursor: pointer; font-weight: 700; }
.print-document { width: min(900px, calc(100% - 64px)); margin: 28px auto; padding: 44px 58px; background: #fff; box-shadow: 0 22px 70px rgba(15,42,35,.13); }
.print-header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 26px; border-bottom: 3px solid var(--ink); }
.print-brand { font-family: "Manrope", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.print-header p, .print-title span, .print-meta-grid span { margin: 5px 0 0; color: #70807b; font-size: 12px; }
.print-title { text-align: right; }
.print-title h1 { margin: 7px 0 0; font-family: "Manrope", sans-serif; font-size: 27px; letter-spacing: -.7px; }
.print-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0; }
.print-meta-grid--six { grid-template-columns: repeat(3, 1fr); margin-top: -10px; }
.print-meta-grid--five { grid-template-columns: repeat(5, 1fr); margin: 12px 0 18px; }
.print-meta-grid div, .print-two-column > div, .print-note { padding: 15px; border: 1px solid #dfe6e2; border-radius: 10px; }
.print-meta-grid strong, .print-meta-grid span { display: block; }
.print-meta-grid strong { margin-top: 6px; font-size: 13px; }
.print-two-column { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.print-two-column h2, .print-note h2, .print-section-title { margin: 0 0 8px; font-family: "Manrope", sans-serif; font-size: 14px; }
.print-two-column p, .print-note p { margin: 0; line-height: 1.55; }
.print-note { margin-bottom: 20px; }
.print-table { border: 1px solid #dfe6e2; }
.print-table th, .print-table td { font-size: 11px; }
.print-table th { border-bottom: 1px solid #dfe6e2; color: #40524b; background: #f4f7f5; }
.print-table td { border-top: 1px solid #edf1ef; }
.print-table tfoot td { border-top: 2px solid #cfd9d4; font-weight: 800; }
.signature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 70px; }
.signature-grid span { display: block; height: 1px; margin-bottom: 10px; background: #122c25; }
.signature-grid strong { font-size: 12px; }

@media print {
    @page { size: A4; margin: 16mm 20mm; }
    @page transactionLandscape { size: A4 landscape; margin: 8mm; }
    body.print-page { background: #fff; }
    body.transaction-print-page { page: transactionLandscape; background: #fff; }
    .no-print { display: none !important; }
    body[data-print-report] { background: #fff; }
    body[data-print-report] .topbar,
    body[data-print-report] .final-accounts-page > :not(.final-report-grid):not([data-print-section]) { display: none !important; }
    body[data-print-report] .final-accounts-page { width: auto; padding: 0; }
    body[data-print-report] .final-report-grid { display: block; }
    body[data-print-report] .final-report-grid [data-print-section],
    body[data-print-report] .final-accounts-page > [data-print-section] { display: none !important; }
    body[data-print-report="trial-balance"] .final-accounts-page [data-print-section="trial-balance"],
    body[data-print-report="profit-loss"] .final-accounts-page [data-print-section="profit-loss"],
    body[data-print-report="balance-sheet"] .final-accounts-page [data-print-section="balance-sheet"] { display: block !important; margin: 0; }
    body[data-print-report] .data-panel { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
    body[data-print-report] .panel-heading { padding: 0 0 10px; }
    body[data-print-report] .table-wrap { overflow: visible; }
    .transaction-print-page .dashboard { width: auto; padding: 0; }
    .transaction-print-page .page-title-row { margin-bottom: 8px; gap: 12px; }
    .transaction-print-page .page-title-row h1 { margin-bottom: 2px; font-size: 15px; letter-spacing: 0; }
    .transaction-print-page .page-title-row p { font-size: 9px; }
    .transaction-print-page .eyebrow { margin-bottom: 2px; font-size: 8px; }
    .transaction-print-page .data-panel { border: 0; border-radius: 0; margin: 0; overflow: visible; }
    .transaction-print-page .panel-heading { padding: 0 0 6px; }
    .transaction-print-page .panel-heading h2 { margin-bottom: 1px; font-size: 12px; }
    .transaction-print-page .panel-heading p { font-size: 8px; }
    .transaction-print-page .table-wrap { overflow: visible; }
    .transaction-print-page table { table-layout: fixed; font-size: 7.5px; }
    .transaction-print-page .delivery-detail-table { min-width: 0; }
    .transaction-print-page .delivery-detail-table thead th:nth-child(1) { width: 18%; }
    .transaction-print-page .delivery-detail-table thead th:nth-child(2) { width: 12%; }
    .transaction-print-page .delivery-detail-table thead th:nth-child(3) { width: 30%; }
    .transaction-print-page .delivery-detail-table thead th:nth-child(4) { width: 6%; }
    .transaction-print-page .delivery-detail-table thead th:nth-child(5) { width: 10%; }
    .transaction-print-page .delivery-detail-table thead th:nth-child(6) { width: 16%; }
    .transaction-print-page .delivery-detail-table thead th:nth-child(7) { width: 8%; }
    .transaction-print-page .delivery-route-heading { break-after: avoid; }
    .transaction-print-page th, .transaction-print-page td { padding: 3px 4px; font-size: 7.5px; line-height: 1.15; overflow-wrap: anywhere; }
    .transaction-print-page td small { margin-top: 1px; font-size: 6.5px; }
    .print-document { width: auto; margin: 0; padding: 0 4mm; box-shadow: none; }
    .print-header, .signature-grid { break-inside: avoid; }
    .print-table { font-size: 11px; }
    .print-table th, .print-table td { padding: 8px; }
}

@media (max-width: 1050px) {
    .insight-overview { grid-template-columns: minmax(180px, .9fr) minmax(360px, 1.7fr); }
    .weekly-spark-card { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: end; }
    .weekly-spark-card .mini-bars { grid-column: 1 / -1; }
    .insight-panel--revenue { grid-column: span 12; }
    .cashflow-panel, .position-panel { grid-column: span 6; }
    .donut-panel, .movement-panel { grid-column: span 6; }
    .balance-panel { grid-column: span 12; }
    .final-report-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
    .brand-panel { display: none; }
    .login-panel { min-height: 100vh; padding: 30px 22px; }
    .mobile-brand { display: inline-flex; margin-bottom: 56px; color: var(--ink); }
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .activity-dashboard-grid { grid-template-columns: 1fr; }
    .activity-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .executive-dashboard { width: min(100% - 28px, 820px); }
    .insight-overview { grid-template-columns: 1fr; }
    .weekly-spark-card { grid-column: auto; }
    .method-panel { grid-column: span 5; }
    .monthly-panel { grid-column: span 7; }
    .housekeeping-modules .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inventory-stats { grid-template-columns: repeat(2, 1fr); }
    .filter-form--extract, .extract-search-block .filter-form--extract { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-form--bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-form--aging { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bank-filter-actions { align-self: end; }
    .bank-reconciliation-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-title-row, .panel-heading { align-items: start; flex-direction: column; }
    .main-nav { display: none; }
    .workflow-steps { grid-template-columns: 1fr; }
    .workflow-steps > b { display: none; }
}
@media (max-width: 740px) {
    .cashflow-panel, .position-panel, .donut-panel, .movement-panel, .balance-panel, .method-panel, .monthly-panel { grid-column: 1 / -1; }
    .top-product-grid { grid-template-columns: 1fr; }
    .period-toolbar { align-items: flex-start; flex-direction: column; }
    .balance-sheet-grid { grid-template-columns: 1fr; gap: 12px; }
    .manual-journal-line { grid-template-columns: 1fr 1fr; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
    .manual-journal-line--head { display: none; }
    .manual-journal-line .line-remove { grid-column: 2; justify-self: end; }
}
@media (max-width: 620px) {
    .login-card__header h2 { font-size: 29px; }
    .login-card__footer { flex-wrap: wrap; }
    .topbar { padding: 15px 18px; }
    .topbar .brand { gap: 8px; font-size: 15px; letter-spacing: -.35px; }
    .topbar .brand__mark { width: 58px; height: 34px; border-radius: 6px; }
    .user-menu div { display: none; }
    .dashboard { width: calc(100% - 32px); padding: 38px 0; }
    .welcome-row { align-items: start; gap: 20px; flex-direction: column; }
    .welcome-row h1 { font-size: 29px; }
    .summary-grid, .module-grid { grid-template-columns: 1fr; }
    .filter-form--bank, .filter-form--aging, .bank-reconciliation-guide { grid-template-columns: 1fr; }
    .bank-filter-actions { justify-content: space-between; }
    .bank-filter-actions button { flex: 1; }
    .activity-card { padding: 18px 14px; }
    .activity-card__heading { flex-direction: column; }
    .activity-legend { justify-content: flex-start; }
    .activity-chart { gap: 3px; overflow-x: auto; padding-right: 0; padding-left: 0; }
    .activity-chart__bars { gap: 2px; }
    .activity-flow-grid { grid-template-columns: 1fr; }
    .executive-dashboard { width: calc(100% - 24px); padding-top: 28px; }
    .executive-welcome { align-items: flex-start; }
    .insight-board { padding: 9px; border-radius: 18px; }
    .insight-panel { padding: 16px; border-radius: 14px; }
    .insight-heading { flex-direction: column; }
    .insight-legend { justify-content: flex-start; }
    .donut-layout { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
    .status-donut { width: 108px; height: 108px; }
    .balance-kpis { grid-template-columns: 1fr; }
    .tiny-column-bars { height: 45px; }
    .monthly-chart { gap: 5px; padding-right: 3px; padding-left: 3px; }
    .monthly-chart__group > div { gap: 2px; }
    .housekeeping-modules .module-grid { grid-template-columns: 1fr; }
    .housekeeping-workspace-heading { align-items: flex-start; flex-direction: column; }
    .inventory-stats { grid-template-columns: 1fr 1fr; }
    .action-row, .filter-form { width: 100%; flex-wrap: wrap; }
    .filter-form--extract, .extract-search-block .filter-form--extract { display: grid; grid-template-columns: 1fr; }
    .extract-filter-actions { grid-column: auto; }
    .action-row button { flex: 1; }
    .action-row--payable > * { flex: 1 1 126px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid label.full { grid-column: auto; }
    .invoice-line { grid-template-columns: 1fr; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
    .invoice-line--head { display: none; }
    .invoice-line strong { text-align: left; }
    .request-line { grid-template-columns: 1fr; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
    .request-line--head { display: none; }
    .request-items-panel { padding: 12px; }
}

/* End-to-end accounting training */
.training-page { max-width: 1180px; }
.training-hero { align-items: stretch; }
.training-progress-card { display: grid; min-width: 210px; padding: 18px 20px; border: 1px solid #bfe2d4; border-radius: 16px; background: #ecf8f3; }
.training-progress-card span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.training-progress-card strong { margin: 5px 0 12px; color: #08765c; font: 800 28px/1 var(--heading); }
.training-progress-card .secondary-button { min-height: 34px; padding: 7px 10px; }
.training-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.training-summary-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.training-summary-grid span, .training-summary-grid small { display: block; color: var(--muted); }
.training-summary-grid span { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.training-summary-grid strong { display: block; margin: 7px 0 4px; font: 800 22px/1.1 var(--heading); }
.training-summary-grid small { font-size: 12px; }
.training-summary-grid__result { color: #fff; border-color: #08765c !important; background: #08765c !important; }
.training-summary-grid__result span, .training-summary-grid__result small { color: #c8f2e5; }
.training-note { margin-bottom: 20px; padding: 16px 18px; border-left: 4px solid #e1a52c; border-radius: 8px 14px 14px 8px; background: #fff7e6; }
.training-note p { margin: 4px 0 0; color: #5e5542; }
.accounting-flow-panel { overflow: visible; }
.training-mermaid-card { margin: 0 20px 20px; padding: 16px; border: 1px solid #cbded6; border-radius: 12px; background: #fff; overflow-x: auto; }
.training-mermaid-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.training-mermaid-card__heading h3 { margin: 0 0 4px; font-size: 18px; }
.training-mermaid-card__heading p { margin: 0; color: var(--muted); font-size: 13px; }
.training-mermaid-card__heading a { flex: 0 0 auto; padding: 9px 13px; border: 1px solid #cbd8d2; border-radius: 8px; color: var(--green); font-size: 12px; font-weight: 800; text-decoration: none; }
.training-mermaid-card__heading a:hover { border-color: var(--green); background: var(--green-pale); }
.training-mermaid-card .mermaid { min-width: 980px; margin: 0; text-align: center; }
.accounting-flowchart { display: grid; gap: 12px; padding: 22px; background: linear-gradient(180deg, #f8fbfa 0%, #eef6f2 100%); }
.flow-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch; gap: 10px; }
.flow-row--finish { margin-top: 2px; }
.flow-node { display: grid; align-content: start; min-height: 118px; padding: 15px; border: 2px solid #b7d8ca; border-radius: 9px; color: var(--ink); background: #fff; text-decoration: none; box-shadow: 0 8px 20px rgba(15, 42, 35, .06); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.flow-node:hover, .flow-node:focus-visible { border-color: #08765c; box-shadow: 0 12px 28px rgba(8, 118, 92, .14); transform: translateY(-1px); }
.flow-node--start, .flow-node--end { color: #fff; border-color: #08765c; background: #08765c; }
.flow-node--warning { border-color: #e1a52c; background: #fff8e8; }
.flow-node small { display: inline-flex; width: fit-content; margin-bottom: 7px; padding: 4px 8px; border-radius: 999px; color: inherit; background: rgba(255, 255, 255, .18); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.flow-node strong { display: block; margin-bottom: 6px; font-size: 15px; line-height: 1.2; }
.flow-node span { display: block; color: var(--muted); font-size: 12px; line-height: 1.42; }
.flow-node--start span, .flow-node--end span { color: #d7f4ea; }
.flow-connector, .flow-down { display: grid; place-items: center; color: #08765c; font: 800 26px/1 var(--heading); }
.flow-down { min-height: 28px; }
.flow-decision-row { display: grid; justify-items: center; min-height: 150px; padding: 8px 0; }
.flow-diamond { display: grid; width: 156px; height: 156px; place-items: center; border: 2px solid #e1a52c; color: var(--ink); background: #fff8e8; text-decoration: none; transform: rotate(45deg); box-shadow: 0 8px 22px rgba(111, 77, 12, .08); transition: border-color .18s ease, box-shadow .18s ease; }
.flow-diamond:hover, .flow-diamond:focus-visible { border-color: #08765c; box-shadow: 0 12px 28px rgba(8, 118, 92, .14); }
.flow-diamond span { display: grid; width: 110px; gap: 4px; color: #3b3322; text-align: center; transform: rotate(-45deg); }
.flow-diamond strong { font-size: 15px; line-height: 1.15; }
.flow-diamond small { color: #7a642e; font-size: 11px; line-height: 1.25; }
.flow-branch-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: -6px; }
.flow-branch-labels span { display: grid; min-height: 30px; place-items: center; border-radius: 999px; color: #075c49; background: #e1f3ec; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.flow-branches { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.flow-branches::before { content: ""; position: absolute; top: -14px; left: 25%; right: 25%; height: 2px; background: #9fcbbc; }
.flow-stack { display: grid; gap: 8px; }
.flow-stack .flow-node { min-height: auto; }
.online-sales-flowchart { margin: 22px; padding-top: 20px; border-top: 1px solid #cfe0d8; }
.stock-sales-flowchart { margin: 22px; padding-top: 20px; border-top: 1px solid #cfe0d8; }
.online-sales-flowchart__heading { margin-bottom: 14px; }
.online-sales-flowchart__heading h3 { margin: 4px 0 5px; font-size: 20px; }
.online-sales-flowchart__heading p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.online-sales-mermaid-wrap { padding: 16px; border: 1px solid #d6e5df; border-radius: 12px; background: #fff; overflow-x: auto; }
.online-sales-mermaid-wrap .mermaid { min-width: 780px; margin: 0; text-align: center; }
.stock-sales-flowchart .mermaid { min-width: 960px; }
.training-data-panel { margin-bottom: 20px; }
.training-data-panel code, .training-step code { padding: 2px 6px; border-radius: 5px; color: #075c49; background: #eaf6f1; font-family: Consolas, monospace; }
.training-flow { display: grid; gap: 14px; margin: 22px 0; }
.training-track-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 40px 0 18px; padding-top: 28px; border-top: 1px solid var(--line); }
.training-track-heading h2 { margin: 2px 0 5px; font-size: 27px; }
.training-track-heading p { margin-bottom: 0; color: var(--muted); }
.training-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.training-step h2 { margin: 2px 0 12px; font-size: 21px; }
.training-step ol { margin: 0; padding-left: 21px; }
.training-step li { margin: 7px 0; color: #34473f; }
.training-step a { color: #08765c; font-weight: 700; }
.training-check { position: relative; width: 44px; height: 44px; cursor: pointer; }
.training-check input { position: absolute; opacity: 0; }
.training-check span { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid #b9d3c9; border-radius: 50%; color: #08765c; font-weight: 800; background: #f5fbf8; }
.training-check input:checked + span { color: #fff; border-color: #08765c; background: #08765c; }
.training-check input:checked + span::after { content: '✓'; font-size: 20px; }
.training-check input:checked + span { font-size: 0; }
.training-checkpoint, .training-warning { margin: 14px 0 0; padding: 10px 12px; border-radius: 9px; }
.training-checkpoint { color: #145f4c; background: #edf8f3; }
.training-warning { color: #724f0e; background: #fff5df; }
.training-journal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.training-journal span { padding: 9px 11px; border: 1px solid #d7e8e1; border-radius: 8px; font-weight: 700; background: #f8fbfa; }
.training-journal span:first-child { color: #12624e; }
.training-journal--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.training-final-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
.training-final-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.training-final-grid h3 { margin: 0 0 12px; }
.training-final-grid dl { margin: 0; }
.training-final-grid dl div { display: flex; justify-content: space-between; gap: 15px; padding: 8px 0; border-bottom: 1px solid #edf1ef; }
.training-final-grid dt { color: var(--muted); }
.training-final-grid dd { margin: 0; font-weight: 700; text-align: right; }
.training-final-grid .training-total { margin-top: 4px; border-bottom: 0; color: #08765c; font-weight: 800; }
@media (max-width: 900px) {
    .training-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .flow-row { grid-template-columns: 1fr; }
    .flow-connector { min-height: 24px; transform: rotate(90deg); }
    .flow-branches { grid-template-columns: 1fr; }
    .flow-branches::before { display: none; }
    .flow-branch-labels { grid-template-columns: 1fr; }
    .online-sales-mermaid-wrap .mermaid { min-width: 680px; }
    .training-journal--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .training-final-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .training-progress-card { width: 100%; }
    .training-summary-grid { grid-template-columns: 1fr; }
    .accounting-flowchart { padding: 12px; }
    .flow-node { min-height: auto; padding: 13px; }
    .flow-decision-row { min-height: 130px; }
    .flow-diamond { width: 130px; height: 130px; }
    .flow-diamond span { width: 92px; }
    .flow-diamond strong { font-size: 13px; }
    .flow-diamond small { font-size: 10px; }
    .training-step { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 17px 14px; }
    .training-check, .training-check span { width: 36px; height: 36px; }
    .training-journal, .training-journal--four { grid-template-columns: 1fr; }
    .training-track-heading { align-items: flex-start; flex-direction: column; }
}