/* HYRAPOS × Spark Admin — shared design system */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
:root{
 --bs-body-bg:#F4F6F5;--bs-body-font-family:'Plus Jakarta Sans',sans-serif;
 --brand-forest-dark:#051C12;--brand-forest-medium:#072F1F;--brand-forest-light:#1A3E30;
 --brand-lime:#B4F105;--brand-lime-hover:#c1f824;--brand-lime-translucent:rgba(180,241,5,.15);
 --text-main:#0B130F;--text-muted-green:#6C7E75;--text-sidebar-muted:#879A91;
 --card-background:#fff;--border-light:#E9EFEF;--border-dark-green:rgba(255,255,255,.1);
 --sys-green:#22C55E;--sys-red:#EF4444;--sys-orange:#F97316;
 --hyra-sidebar-width:280px;--hyra-navbar-height:80px;
 --radius-xxl:24px;--radius-xl:18px;--radius-lg:14px;--radius-md:10px;--radius-sm:6px;
 --shadow-sm:0 2px 8px rgba(11,19,15,.02);--shadow-md:0 10px 30px rgba(11,19,15,.04);--shadow-lg:0 20px 50px rgba(11,19,15,.08)
}
html{scroll-behavior:smooth}
body{font-family:var(--bs-body-font-family)!important;background:var(--bs-body-bg)!important;color:var(--text-main)!important;font-size:14px!important;font-weight:500;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
body :where(button,input,select,textarea){font-family:inherit}
body :where(h1,h2,h3,h4,h5,h6){font-family:inherit;color:var(--text-main);font-weight:700;letter-spacing:-.025em}
body :where(a){transition:color .2s ease,background .2s ease,border-color .2s ease}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#94A3B8}
/* Shared application shell */
.hyra-topbar{height:var(--hyra-navbar-height)!important;min-height:var(--hyra-navbar-height)!important;padding:0 30px!important;background:rgba(244,246,245,.94)!important;color:var(--text-main)!important;border:0!important;border-bottom:1px solid rgba(11,19,15,.06)!important;box-shadow:0 3px 18px rgba(11,19,15,.035)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:1100!important}
.hyra-brand-copy h1{font-family:inherit!important;color:var(--brand-forest-dark)!important;font-size:20px!important;font-weight:800!important;letter-spacing:-.5px!important}
.hyra-brand-copy span{font-family:inherit!important;color:var(--text-muted-green)!important;font-size:10px!important;letter-spacing:.45px!important}
.hyra-brand-logo{border-radius:12px!important;box-shadow:var(--shadow-sm)!important}
.hyra-menu-toggle{background:var(--brand-forest-dark)!important;color:#fff!important;border-radius:10px!important;box-shadow:none!important}
.hyra-user-chip{background:#fff!important;border:1px solid var(--border-light)!important;border-radius:50px!important;color:var(--text-main)!important;padding:7px 12px!important;font-size:12px!important}
.hyra-user-avatar{background:var(--brand-forest-dark)!important;color:var(--brand-lime)!important}
.hyra-role{color:var(--text-muted-green)!important}
.hyra-logout{background:var(--brand-forest-dark)!important;color:#fff!important;border:1px solid var(--brand-forest-dark)!important;border-radius:10px!important;font-size:12px!important;font-weight:700!important;padding:9px 14px!important}
.hyra-logout:hover{background:var(--brand-forest-medium)!important;color:var(--brand-lime)!important}
.hyra-side-menu{top:var(--hyra-navbar-height)!important;width:var(--hyra-sidebar-width)!important;padding:28px 20px 24px!important;background:var(--brand-forest-dark)!important;border-right:1px solid var(--border-dark-green)!important;box-shadow:none!important;color:#fff!important}
.hyra-side-section{font-family:inherit!important;color:var(--text-sidebar-muted)!important;font-size:10px!important;font-weight:700!important;letter-spacing:1.35px!important;padding:15px 12px 9px!important}
.hyra-side-link{font-family:inherit!important;min-height:44px!important;padding:11px 13px!important;margin:3px 0!important;border-radius:10px!important;color:var(--text-sidebar-muted)!important;font-size:13px!important;font-weight:500!important;gap:13px!important}
.hyra-side-link .hyra-side-icon{color:var(--text-sidebar-muted)!important;font-size:15px!important}
.hyra-side-link:hover{background:rgba(255,255,255,.055)!important;color:#fff!important;transform:none!important}
.hyra-side-link:hover .hyra-side-icon{color:var(--brand-lime)!important}
.hyra-side-link.is-active{background:rgba(255,255,255,.065)!important;color:#fff!important;box-shadow:inset 3px 0 var(--brand-lime)!important;font-weight:700!important}
.hyra-side-link.is-active .hyra-side-icon{color:var(--brand-lime)!important}
.hyra-side-user{border-top:1px solid var(--border-dark-green)!important;color:var(--text-sidebar-muted)!important;font-size:11px!important;padding:18px 10px 5px!important}
.hyra-side-user-avatar{background:rgba(180,241,5,.13)!important;color:var(--brand-lime)!important}
.hyra-side-user strong{color:#fff!important;font-size:12px!important}
.hyra-side-overlay{inset:var(--hyra-navbar-height) 0 0!important;background:rgba(5,28,18,.55)!important;backdrop-filter:blur(2px)}
main.main,main.wrap,.main-wrapper,main.container-fluid{box-sizing:border-box!important;margin-left:var(--hyra-sidebar-width)!important;padding:calc(var(--hyra-navbar-height) + 28px) 34px 36px!important;width:auto!important;max-width:none!important;min-height:100vh!important}
main.main{padding-top:calc(var(--hyra-navbar-height) + 28px)!important}
main.wrap{padding-top:calc(var(--hyra-navbar-height) + 28px)!important}
.hyra-page-content{max-width:none!important;width:100%!important}
.page-title{margin-bottom:24px!important}
.page-title h1,.page-title h2,.head h1{font-size:clamp(21px,2vw,28px)!important;font-weight:800!important;letter-spacing:-.7px!important;color:var(--text-main)!important}
.page-title p,.page-subtitle,.text-muted{color:var(--text-muted-green)}
/* Spark card language */
body .card,body .panel,body .stat-card,body .dashboard-card,body .content-card,.hyra-page-content .card{
 background:#fff;border:1px solid var(--border-light)!important;border-radius:var(--radius-xl)!important;box-shadow:var(--shadow-md)!important
}
body .card-header{background:#fff;border-bottom:1px solid var(--border-light);font-weight:700}
body .btn{font-family:inherit;font-weight:650;border-radius:10px;transition:all .2s ease}
body .btn-primary{background:var(--brand-forest-medium);border-color:var(--brand-forest-medium)}
body .btn-primary:hover,body .btn-primary:focus{background:var(--brand-forest-dark);border-color:var(--brand-forest-dark)}
body .btn-success{background:#15803d;border-color:#15803d}
body .form-control,body .form-select,body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),body select,body textarea{font-family:inherit;font-size:13px;border:1px solid #DCE6E1;border-radius:10px;min-height:40px;color:var(--text-main);box-shadow:none}
body .form-control:focus,body .form-select:focus,body input:focus,body select:focus,body textarea:focus{border-color:#7C9A89;box-shadow:0 0 0 3px rgba(7,47,31,.08);outline:0}
body table{font-family:inherit;font-size:13px}
body table thead th{background:#F7FAF8;color:#52665C;font-size:11px;font-weight:800;letter-spacing:.035em;text-transform:uppercase;border-bottom:1px solid var(--border-light)}
body table td,body table th{vertical-align:middle}
body .table-responsive,body .table-wrap,body .tablewrap{border-radius:12px}
body .modal-content{border:1px solid var(--border-light);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
body .modal-header,body .modal-footer{border-color:var(--border-light)}
body .modal-title{font-weight:800;letter-spacing:-.3px}
body .dropdown-menu{border:1px solid var(--border-light);border-radius:12px;box-shadow:var(--shadow-lg);padding:7px}
body .dropdown-item{border-radius:8px;font-size:13px;padding:9px 12px}
body .alert{border:0;border-radius:12px;font-size:13px}
body .badge{font-weight:700;letter-spacing:.01em}
body .footer{color:#879A91!important;border-top:1px solid var(--border-light)!important;font-size:11px!important}
/* Responsive viewport and spacing */
@media(max-width:1100px){main.main,main.wrap,.main-wrapper,main.container-fluid{padding-left:24px!important;padding-right:24px!important}}
@media(max-width:900px){
 .hyra-topbar{padding:0 16px!important}
 .hyra-side-menu{top:var(--hyra-navbar-height)!important;width:min(300px,86vw)!important;transform:translateX(-105%);transition:transform .25s ease}
 body.hyra-side-open .hyra-side-menu{transform:translateX(0)}
 main.main,main.wrap,.main-wrapper,main.container-fluid{margin-left:0!important;padding:calc(var(--hyra-navbar-height) + 22px) 20px 28px!important}
}
@media(max-width:600px){
 :root{--hyra-navbar-height:68px}
 .hyra-topbar{height:68px!important;min-height:68px!important;padding:0 10px!important;gap:8px!important}
 .hyra-brand{gap:8px!important}
 .hyra-brand-logo{width:36px!important;height:36px!important;flex-basis:36px!important}
 .hyra-brand-copy h1{font-size:16px!important}
 .hyra-brand-copy span{font-size:8px!important;max-width:34vw!important}
 .hyra-user-chip{max-width:118px!important;font-size:10px!important;padding:5px 7px!important}
 .hyra-logout{min-height:32px!important;padding:0 9px!important;font-size:10px!important}
 main.main,main.wrap,.main-wrapper,main.container-fluid{padding:calc(var(--hyra-navbar-height) + 16px) 12px 22px!important}
 .page-title{margin-bottom:17px!important}
 .page-title h1,.page-title h2,.head h1{font-size:21px!important}
 body .card,body .panel,body .stat-card,body .dashboard-card,body .content-card{border-radius:14px!important}
 body table{font-size:12px}
}
@media(max-width:380px){.hyra-brand-copy span{display:none!important}.hyra-user-chip{max-width:92px!important}}
/* Cashier and customer ordering pages: typography + shared controls only; retain purpose-built layouts */
body.hyra-space-app,body.qr-order-page{font-family:var(--bs-body-font-family)!important}