:root {
    --ink: #182230;
    --muted: #8993a4;
    --line: #edf0f4;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --brand: #6658d3;
    --brand-dark: #5144bb;
    --sidebar-width: 252px;
    --header-height: 76px;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--canvas); }

body.admin-body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

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

.admin-shell { min-height: 100vh; }

.admin-header {
    position: sticky;
    z-index: 1030;
    top: 0;
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0 34px 0 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand-lockup { display: inline-flex; align-items: center; gap: 12px; min-width: var(--sidebar-width); }
.brand-mark { display: grid; width: 40px; height: 40px; color: #fff; background: linear-gradient(145deg, #786be4, #5547c4); border-radius: 12px; place-items: center; box-shadow: 0 5px 12px rgba(93, 79, 204, .2); }
.brand-mark svg { width: 23px; height: 23px; }
.brand-copy, .profile-copy { display: flex; flex-direction: column; }
.brand-name { color: #1e2432; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15; }
.brand-caption { margin-top: 3px; color: #9ba3b1; font-size: 10px; font-weight: 500; letter-spacing: .45px; }
.sidebar-toggle { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; margin-left: auto; padding: 8px; color: #616c7d; background: #f5f6fa; border: 0; border-radius: 10px; }
.sidebar-toggle svg { width: 21px; height: 21px; }
.header-actions { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.header-date { align-items: center; gap: 8px; color: #8b94a3; font-size: 12px; font-weight: 500; }
.header-date svg, .heading-date svg { width: 16px; height: 16px; }
.profile-trigger { display: flex; align-items: center; gap: 10px; padding: 3px 0 3px 15px; background: transparent; border: 0; border-left: 1px solid var(--line); text-align: left; }
.avatar { display: grid; width: 38px; height: 38px; color: #5b4bc6; background: #eeeaff; border: 2px solid #f8f7ff; border-radius: 50%; font-size: 11px; font-weight: 700; place-items: center; }
.profile-copy { gap: 2px; }
.profile-name { color: #343d4c; font-size: 12px; font-weight: 700; }
.profile-role { color: #9ba3b1; font-size: 10px; }
.profile-chevron { width: 17px; height: 17px; margin-left: 2px; color: #8c95a3; }
.profile-menu { min-width: 200px; margin-top: 12px !important; padding: 8px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 35px rgba(32, 39, 55, .12); }
.profile-menu .dropdown-header { padding: 7px 10px; color: #9ba3b1; font-size: 10px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
.profile-menu .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.profile-menu .dropdown-item:hover { background: #f6f5fc; }
.profile-menu .dropdown-divider { margin: 6px 0; }
.menu-item-icon { width: 19px; color: #7e8795; font-size: 17px; line-height: 1; text-align: center; }

.admin-workspace { display: flex; min-height: calc(100vh - var(--header-height)); }
.admin-sidebar { position: sticky; top: var(--header-height); display: flex; flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); height: calc(100vh - var(--header-height)); flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); }
.admin-sidebar.offcanvas { z-index: 1045; }
.sidebar-mobile-heading { display: none; }
.sidebar-body { display: flex; overflow-y: auto; flex: 1; flex-direction: column; padding: 29px 17px 18px; }
.sidebar-heading-row { display: flex; min-height: 24px; align-items: center; justify-content: space-between; }
.sidebar-heading-row > .sidebar-section-label { display: none; }
.sidebar-collapse-toggle { display: none; width: 28px; height: 28px; align-items: center; justify-content: center; padding: 5px; color: #8690a0; background: #f6f7fa; border: 0; border-radius: 7px; }
.sidebar-collapse-toggle:hover { color: #5b4bc6; background: #f0edff; }
.sidebar-collapse-toggle svg { width: 18px; height: 18px; transition: transform .2s ease; }
.sidebar-section-label { padding: 0 12px; color: #a5adba; font-size: 9px; font-weight: 700; letter-spacing: 1.15px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 13px; }
.sidebar-link { position: relative; display: flex; min-height: 43px; align-items: center; gap: 12px; padding: 0 12px; color: #778293; border-radius: 9px; font-size: 12px; font-weight: 600; transition: color .16s ease, background .16s ease; }
.sidebar-link > svg { width: 19px; height: 19px; flex: 0 0 19px; }
.sidebar-link:hover { color: #5b4bc6; background: #f8f7fe; }
.sidebar-link.active { color: #5b4bc6; background: #f0edff; font-weight: 700; }
.sidebar-link[aria-disabled="true"], .quick-link[aria-disabled="true"], .profile-menu [aria-disabled="true"] { cursor: default; pointer-events: none; }
.sidebar-link.active::before { position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; background: #6658d3; border-radius: 0 4px 4px 0; content: ''; }
.sidebar-group-label { margin: 23px 0 3px; }
.sidebar-bottom { margin-top: auto; padding: 15px 7px 0; border-top: 1px solid #f0f2f5; }
.sidebar-status { display: flex; align-items: center; gap: 8px; color: #8792a1; font-size: 10px; }
.status-dot { width: 7px; height: 7px; background: #42bd87; border-radius: 50%; box-shadow: 0 0 0 3px #e7f8f0; }
.sidebar-version { display: block; margin-top: 9px; color: #aab1bc; font-size: 9px; }
.sidebar-version span { margin: 0 3px; }
.sidebar-mobile-heading { padding: 20px 18px 0; }

.admin-main { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 36px 40px 0; }
.content-container { width: 100%; max-width: 1440px; flex: 1; align-self: center; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 27px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #9ba4b1; font-size: 9px; font-weight: 700; letter-spacing: 1.35px; }
.eyebrow-line { width: 17px; height: 2px; background: #786be4; border-radius: 3px; }
.page-heading h1 { margin: 0; color: #202837; font-family: 'Manrope', sans-serif; font-size: clamp(24px, 3vw, 29px); font-weight: 800; letter-spacing: -.9px; }
.page-heading p { margin: 7px 0 0; color: #929baa; font-size: 12px; }
.heading-date { display: flex; align-items: center; gap: 7px; color: #8b94a3; font-size: 11px; }
.dashboard-stats { margin-bottom: 20px; }
.stat-card, .panel-card { height: 100%; background: var(--surface); border: 1px solid #eceff4; border-radius: 13px; box-shadow: 0 3px 12px rgba(28, 38, 57, .025); }
.stat-card { min-height: 142px; padding: 17px 18px 15px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-label { color: #8993a2; font-size: 11px; font-weight: 600; }
.stat-icon, .quick-link-icon { display: grid; flex: 0 0 auto; place-items: center; }
.stat-icon { width: 35px; height: 35px; border-radius: 10px; }
.stat-icon svg { width: 19px; height: 19px; }
.icon-violet { color: #6859d5; background: #f0edff; }
.icon-blue { color: #4387db; background: #eaf3ff; }
.icon-amber { color: #dd9b33; background: #fff5e5; }
.icon-green { color: #32a87a; background: #e8f8f0; }
.stat-value { margin-top: 10px; color: #263143; font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; }
.stat-foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: #a0a8b4; font-size: 10px; }
.stat-neutral-dot { width: 6px; height: 6px; background: #c7ccd5; border-radius: 50%; }
.dashboard-lower { margin-bottom: 28px; }
.panel-card { min-height: 286px; padding: 20px 21px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.panel-kicker { margin-bottom: 5px; color: #a3abb8; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.panel-heading h2 { margin: 0; color: #293344; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -.25px; }
.panel-more { width: 28px; height: 28px; color: #9ca5b2; background: #f7f8fa; border: 0; border-radius: 8px; font-size: 22px; line-height: 1; }
.empty-state { display: flex; min-height: 202px; align-items: center; justify-content: center; flex-direction: column; padding: 22px; text-align: center; }
.empty-icon { display: grid; width: 43px; height: 43px; margin-bottom: 12px; color: #7769dc; background: #f2efff; border-radius: 13px; place-items: center; }
.empty-icon svg { width: 22px; height: 22px; }
.empty-state h3 { margin: 0; color: #485365; font-size: 12px; font-weight: 700; }
.empty-state p { max-width: 290px; margin: 5px 0 0; color: #9ba4b1; font-size: 10px; line-height: 1.55; }
.quick-links { display: flex; flex-direction: column; margin-top: 14px; }
.quick-link { display: flex; min-height: 64px; align-items: center; gap: 11px; border-bottom: 1px solid #f0f2f5; }
.quick-link:last-child { border-bottom: 0; }
.quick-link-icon { width: 34px; height: 34px; border-radius: 10px; }
.quick-link-icon svg { width: 18px; height: 18px; }
.quick-link-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.quick-link-copy strong { color: #485365; font-size: 11px; font-weight: 700; }
.quick-link-copy small { overflow: hidden; color: #a0a8b4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.quick-arrow { color: #a4acb8; font-size: 16px; }
.admin-footer { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; color: #a3abb7; border-top: 1px solid #e9edf2; font-size: 9px; }
.footer-note { text-align: right; }

.merek-heading { align-items: center; }
.merek-add-button { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 15px; background: #6254cf; border-color: #6254cf; border-radius: 9px; font-size: 11px; font-weight: 700; }
.merek-add-button:hover, .merek-add-button:focus { background: #5144bb; border-color: #5144bb; }
.merek-add-button span { font-size: 18px; font-weight: 400; line-height: 1; }
.merek-panel { overflow: hidden; background: #fff; border: 1px solid #eceff4; border-radius: 13px; box-shadow: 0 3px 12px rgba(28, 38, 57, .025); }
.merek-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; }
.merek-toolbar h2 { margin: 0 0 5px; color: #293344; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 800; }
.merek-toolbar p { color: #9ba4b1; font-size: 10px; }
.merek-search-form { position: relative; width: min(100%, 280px); }
.merek-search-form svg { position: absolute; top: 50%; left: 11px; width: 16px; height: 16px; color: #9ba4b1; transform: translateY(-50%); }
.merek-search-form .form-control { min-height: 37px; padding: 7px 11px 7px 34px; border-color: #e8ebf0; border-radius: 8px; font-size: 11px; }
.merek-search-form .form-control:focus { border-color: #958ae7; box-shadow: 0 0 0 3px rgba(102, 88, 211, .1); }
.merek-table thead th { padding: 12px 22px; color: #99a2af; background: #fafbfc; border-top: 1px solid #f0f2f5; border-bottom: 1px solid #f0f2f5; font-size: 9px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
.merek-table tbody td { padding: 14px 22px; color: #566173; border-color: #f0f2f5; font-size: 11px; }
.merek-table tbody tr:last-child td { border-bottom: 0; }
.merek-name-cell { font-weight: 600; }
.merek-action-button { min-width: 54px; border-radius: 7px; font-size: 10px; }
.merek-loading, .merek-empty { height: 120px; color: #9ba4b1 !important; text-align: center; }
.merek-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; color: #929baa; border-top: 1px solid #f0f2f5; font-size: 10px; }
.merek-pagination .btn { font-size: 10px; }
.merek-modal-content { overflow: hidden; border: 1px solid #eceff4; border-radius: 14px; box-shadow: 0 16px 50px rgba(30, 37, 57, .14); }
.merek-modal-content .modal-header { padding: 19px 21px; border-bottom-color: #f0f2f5; }
.merek-modal-content .modal-title { color: #293344; font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 800; }
.merek-modal-content .modal-body { padding: 20px 21px; }
.merek-modal-content .form-label { color: #4b5667; font-size: 11px; font-weight: 700; }
.merek-modal-content .form-control { min-height: 41px; font-size: 12px; }
.merek-modal-content .modal-footer { padding: 14px 21px; border-top-color: #f0f2f5; }
.merek-modal-content .modal-footer .btn { min-width: 92px; font-size: 11px; }
.produk-modal-dialog { height: calc(100% - var(--bs-modal-margin) * 2); }
.produk-modal-dialog .modal-content { max-height: 100%; }
.produk-modal-dialog .modal-body { min-height: 0; overflow-y: auto; }
.produk-table { min-width: 760px; }
.produk-row-product { display: flex; min-width: 230px; align-items: center; gap: 11px; }
.produk-row-info { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.produk-row-info strong { overflow: hidden; color: #465164; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.produk-row-info small { max-width: 260px; overflow: hidden; color: #9ba4b1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.produk-thumb { width: 42px; height: 42px; flex: 0 0 42px; object-fit: cover; background: #f4f5f8; border: 1px solid #edf0f4; border-radius: 8px; }
.produk-thumb-empty { display: grid; color: #a4acb8; font-size: 15px; place-items: center; }
.produk-price-cell { color: #485365 !important; font-weight: 700; white-space: nowrap; }
.produk-existing-photo { width: 100px; height: 100px; object-fit: cover; background: #f4f5f8; border: 1px solid #e8ebf0; border-radius: 9px; }
.produk-cropper-wrap { max-width: 100%; overflow: hidden; padding: 10px; background: #f8f9fc; border: 1px solid #eceff4; border-radius: 10px; }
#produk-cropper { width: 300px; max-width: 100%; min-height: 200px; margin: 0 auto; }
.produk-cropper-wrap .cr-boundary { max-width: 100%; }

.auth-body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(ellipse at 14% 8%, #ebe9ff 0, transparent 32%), radial-gradient(ellipse at 88% 91%, #e7f2ff 0, transparent 28%), var(--canvas); font-family: 'DM Sans', sans-serif; }
.login-page { display: grid; min-height: 100vh; align-items: center; justify-items: center; padding: 28px 16px; }
.login-card { width: min(100%, 430px); padding: 38px 40px 27px; background: #fff; border: 1px solid #eceff4; border-radius: 18px; box-shadow: 0 20px 60px rgba(38, 45, 70, .09); }
.login-brand { min-width: 0; }
.login-heading { margin: 36px 0 27px; }
.login-eyebrow { color: #7668d9; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
.login-heading h1 { margin: 9px 0 5px; color: #202837; font-family: 'Manrope', sans-serif; font-size: 25px; font-weight: 800; letter-spacing: -.7px; }
.login-heading p { margin: 0; color: #929baa; font-size: 12px; line-height: 1.6; }
.login-form .form-label { margin-bottom: 7px; color: #4b5667; font-size: 11px; font-weight: 700; }
.login-input { min-height: 44px; padding: 10px 12px; color: #333d4d; background: #fbfcfe; border-color: #e6eaf0; border-radius: 9px; font-size: 12px; }
.login-input:focus { background: #fff; border-color: #958ae7; box-shadow: 0 0 0 3px rgba(102, 88, 211, .12); }
.login-submit { display: flex; min-height: 45px; align-items: center; justify-content: center; gap: 9px; color: #fff; background: linear-gradient(110deg, #6a5bd6, #5548c3); border: 0; border-radius: 9px; font-size: 12px; font-weight: 700; box-shadow: 0 7px 15px rgba(92, 77, 199, .19); }
.login-submit:hover, .login-submit:focus { color: #fff; background: #5144bb; }
.login-validation:empty { display: none; }
.login-validation { margin-bottom: 17px; padding: 10px 12px; font-size: 11px; }
.field-validation-error { display: block; margin-top: 5px; color: #c24148; font-size: 10px; }
.login-footnote { margin: 23px 0 0; padding-top: 17px; color: #a0a8b4; border-top: 1px solid #f0f2f5; font-size: 10px; text-align: center; }

@media (min-width: 1600px) {
    .admin-main { padding-right: 52px; padding-left: 52px; }
}

@media (min-width: 992px) {
    .admin-sidebar.offcanvas { position: sticky; top: var(--header-height); bottom: auto; display: flex; width: var(--sidebar-width); height: calc(100vh - var(--header-height)); max-width: none; visibility: visible; transform: none; border-right: 1px solid var(--line); border-radius: 0; }
    .admin-sidebar.offcanvas .offcanvas-body { overflow: visible; }
    .admin-sidebar { transition: width .2s ease, flex-basis .2s ease; }
    .sidebar-heading-row > .sidebar-section-label { display: block; }
    .sidebar-collapse-toggle { display: inline-flex; margin-left: auto; }
    .admin-shell.sidebar-collapsed .admin-sidebar { width: 70px; flex-basis: 70px; }
    .admin-shell.sidebar-collapsed .sidebar-body { padding-right: 10px; padding-left: 10px; }
    .admin-shell.sidebar-collapsed .sidebar-heading-row { justify-content: center; }
    .admin-shell.sidebar-collapsed .sidebar-heading-row > .sidebar-section-label,
    .admin-shell.sidebar-collapsed .sidebar-group-label,
    .admin-shell.sidebar-collapsed .sidebar-link > span,
    .admin-shell.sidebar-collapsed .sidebar-bottom { display: none; }
    .admin-shell.sidebar-collapsed .sidebar-collapse-toggle { margin: 0; }
    .admin-shell.sidebar-collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); }
    .admin-shell.sidebar-collapsed .sidebar-nav { margin-top: 13px; }
    .admin-shell.sidebar-collapsed .sidebar-link { justify-content: center; padding-right: 0; padding-left: 0; }
    .admin-shell.sidebar-collapsed .sidebar-link.active::before { left: -10px; }
    .admin-shell.sidebar-collapsed .sidebar-link[aria-disabled="true"] { pointer-events: auto; }
    .admin-shell.sidebar-collapsed .sidebar-link[data-tooltip]::after { position: absolute; z-index: 1070; top: 50%; left: calc(100% + 12px); padding: 7px 10px; color: #fff; background: #273244; border-radius: 6px; box-shadow: 0 5px 16px rgba(26, 34, 51, .18); content: attr(data-tooltip); font-size: 11px; font-weight: 600; line-height: 1.2; opacity: 0; pointer-events: none; transform: translate(4px, -50%); transition: opacity .12s ease, transform .12s ease, visibility .12s ease; visibility: hidden; white-space: nowrap; }
    .admin-shell.sidebar-collapsed .sidebar-link[data-tooltip]:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(0, -50%); visibility: visible; }
}

@media (max-width: 991.98px) {
    :root { --header-height: 66px; }
    .admin-header { padding-right: 22px; padding-left: 20px; }
    .brand-lockup { min-width: 0; }
    .sidebar-toggle { display: inline-flex; margin-left: 22px; }
    .header-actions { gap: 17px; }
    .admin-sidebar.offcanvas { position: fixed; z-index: 1045; top: 0; bottom: 0; left: 0; width: min(290px, 86vw); height: 100vh; height: 100dvh; max-width: 86vw; border: 0; border-radius: 0 16px 16px 0; box-shadow: 15px 0 45px rgba(29, 34, 53, .14); }
    .sidebar-mobile-heading { display: flex; }
    .sidebar-body { padding-top: 14px; }
    .admin-main { padding: 30px 25px 0; }
}

@media (max-width: 575.98px) {
    :root { --header-height: 62px; }
    .admin-header { padding-right: 15px; padding-left: 14px; }
    .brand-lockup { gap: 9px; }
    .brand-mark { width: 35px; height: 35px; border-radius: 10px; }
    .brand-mark svg { width: 21px; height: 21px; }
    .brand-name { font-size: 16px; }
    .brand-caption { font-size: 9px; }
    .sidebar-toggle { width: 35px; height: 35px; margin-left: 13px; }
    .header-actions { gap: 0; }
    .profile-trigger { gap: 0; padding-left: 11px; }
    .avatar { width: 35px; height: 35px; }
    .profile-chevron { width: 15px; margin-left: 3px; }
    .admin-main { padding: 25px 15px 0; }
    .page-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 20px; }
    .page-heading p { max-width: 310px; font-size: 11px; line-height: 1.55; }
    .stat-card { min-height: 132px; padding: 15px; }
    .panel-card { min-height: 260px; padding: 17px 15px; }
    .admin-footer { min-height: 51px; font-size: 8px; }
    .login-card { padding: 30px 23px 22px; }
    .login-heading { margin-top: 31px; }
    .merek-heading { align-items: flex-start; gap: 14px; }
    .merek-add-button { flex: 0 0 auto; min-height: 36px; padding: 0 10px; font-size: 10px; }
    .merek-toolbar { align-items: stretch; flex-direction: column; gap: 13px; padding: 16px; }
    .merek-search-form { width: 100%; }
    .merek-table thead th, .merek-table tbody td { padding-right: 13px; padding-left: 13px; }
    .merek-pagination { padding: 12px 13px; }
    .produk-row-product { min-width: 200px; }
}