:root{font-family:Tahoma,Arial,sans-serif;color:#24332f;background:#f3f6f3;line-height:1.8}*{box-sizing:border-box}body{margin:0}header{background:#153e35;color:#fff;padding:18px 5%;display:flex;gap:20px;align-items:center;flex-wrap:wrap}header strong{font-size:24px}#identity{margin-inline-start:auto}main{max-width:1100px;margin:28px auto;padding:0 18px}h1{font-size:23px;margin:0 0 8px}h2{font-size:18px}p{color:#56655f}.card{background:white;border:1px solid #d5dfd8;border-radius:14px;padding:22px;margin-bottom:18px}.login{max-width:460px;margin:50px auto}label{display:grid;gap:6px;margin-bottom:14px}input,select,button{font:inherit;min-height:42px;border:1px solid #bccdc2;border-radius:8px;padding:8px 12px}input,select{width:100%;background:white}button{cursor:pointer;background:#e9f0eb;color:#153e35}button.primary{background:#185747;color:white;border-color:#185747}button:disabled{opacity:.5;cursor:wait}input:focus,button:focus,select:focus{outline:3px solid #a6cabc;outline-offset:2px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}.check{display:flex;align-items:center;gap:8px}.check input{width:18px;min-height:18px}.tag{background:#edf3ef;padding:3px 10px;border-radius:6px;font-size:12px}details{border-bottom:1px solid #d5dfd8;padding:12px 0}summary{cursor:pointer;font-weight:bold}.tools{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}footer{max-width:1100px;padding:20px;margin:auto;color:#56655f;font-size:13px}#message{max-width:1064px;margin:10px auto;padding:0 18px;color:#a02e1c}table{width:100%;border-collapse:collapse}td,th{text-align:right;padding:8px;border-bottom:1px solid #ddd}.scroll{overflow:auto}@media(max-width:600px){header{gap:10px}#identity{width:100%;margin:0}.card{padding:16px}.login{margin-top:20px}input,select{font-size:16px}}
[hidden]{display:none!important}textarea{font:inherit;width:100%;min-height:80px;border:1px solid #bccdc2;border-radius:8px;padding:8px;resize:vertical}td small{display:block;color:#56655f}.late{color:#a02e1c;font-weight:bold}small{font-size:12px}
.module{text-align:right;padding:18px;background:#fff}.module small{display:block;color:#56655f}.span-all{grid-column:1/-1}.date-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.date-strip label{max-width:240px}.purchase-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.purchase-lane{background:#f4f7f5;padding:12px;border-radius:10px}.buy-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-bottom:1px solid #bccdc2;padding:12px 0}.buy-row label:first-child{grid-column:1/-1}.buy-row label{margin:0;font-size:13px}.buy-row input,.buy-row select{min-width:0;padding:6px}.buy-row output{font-weight:bold;align-self:center}.balance{display:block;padding:10px;background:#edf3ef;border-radius:8px;font-weight:bold}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.metrics>div{padding:14px;background:#edf3ef;border-radius:10px}.metrics strong{display:block;font-size:22px}.count-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.recipe-row{display:grid;grid-template-columns:2fr 1fr auto;gap:12px;align-items:center}fieldset{border:1px solid #d5dfd8;border-radius:8px}#message:not(:empty){position:sticky;bottom:8px;background:#fff6da;border:1px solid #e5ca80;border-radius:10px;padding:12px;z-index:5}#op-content h3{font-size:16px}button{white-space:normal}td{vertical-align:top}
@media(max-width:850px){.purchase-columns{grid-template-columns:1fr}.count-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.recipe-row{grid-template-columns:1fr}.date-strip label{max-width:none;flex:1}.op-top .tools{gap:6px}.op-top .tools button{font-size:13px;padding:6px}}
@media print{@page{size:A4;margin:10mm}body{background:white;font-size:10pt}header,#message,footer,#back,.tools,button,form,.op-top .date-strip{display:none!important}main{max-width:none;margin:0;padding:0}.card{border:0;padding:5mm 0;margin:0}.scroll{overflow:visible}table{font-size:9pt}tr{break-inside:avoid}.purchase-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.count-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#op-count{display:block!important}#op-count input{border:1px solid #aaa;height:25px;min-height:25px}input,select{color:black}.metrics strong{font-size:14pt}}
.role-groups{display:grid;gap:22px}.nav-group{padding:16px;background:#f4f7f5;border:1px solid #d5dfd8;border-radius:12px}.nav-group h3{margin:0 0 12px;color:#185747}.nav-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.nav-items button{text-align:right;background:white}.nav-items button.selected{background:#185747;color:white}.section-menu{margin-top:12px}.section-menu .nav-group{margin-top:12px}.backup-link{padding:8px 12px;display:inline-block;color:#185747}@media print{.section-menu,.role-groups{display:none!important}}
.compact-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.debt-row{display:grid;grid-template-columns:2fr 1fr 1.5fr 1.2fr auto;gap:8px;align-items:center;border-bottom:1px solid #e2e9e5;padding:8px 0}.debt-row label{font-size:12px;min-width:0}.debt-row input{min-width:0;padding:6px}.meal-action{display:inline-block;background:#edf3ef;border-radius:8px;padding:8px 14px}.performance-rules .purchase-columns{grid-template-columns:1fr 1fr}@media(max-width:700px){.debt-row{grid-template-columns:1fr 1fr}.debt-row label:first-child{grid-column:1/-1}.performance-rules .purchase-columns{grid-template-columns:1fr}}@media print{body.print-rules #op-content>.card:not(.performance-rules),body.print-rules .op-top{display:none!important}.performance-rules td{font-size:8pt;padding:3px}.performance-rules .purchase-columns{grid-template-columns:1fr 1fr}}
#recipe-editor-card .recipe-row{grid-template-columns:2fr 1fr 1fr auto;border-bottom:1px solid #d5dfd8;padding:12px 0}#stock-detail{margin-top:18px}#stock-detail small{display:block}#recipe-editor-card input,#recipe-editor-card select{min-width:0}@media(max-width:700px){#recipe-editor-card .recipe-row{grid-template-columns:1fr 1fr}#recipe-editor-card .recipe-row>label:first-child{grid-column:1/-1}}
#active-stock-table .scroll,#period-editor .scroll{max-height:440px;overflow:auto}
#active-stock-table thead th,#period-editor thead th{position:sticky;top:0;background:var(--card,#fff);z-index:1}
#period-count-form input[type=number]{min-width:110px;max-width:170px}
/* Shared visual system for cashier, barista and management panels. */
@media screen {
 :root{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:15px;line-height:1.85;color:#233c38;background:#f1f5f4;font-synthesis:none;--card:#fff;--accent:#176453;--border:#dce6e2}
 body{background:radial-gradient(ellipse at top right,#e6efeb 0,transparent 55%),#f3f6f5;min-height:100vh}
 header{padding:16px max(24px,calc((100vw - 1200px)/2));background:#163e35;border-bottom:3px solid #b8d6c4;gap:14px;box-shadow:0 4px 18px #163e3512}
 header strong{font-size:27px;letter-spacing:-1px}header>span:first-of-type{color:#c8ddd3;font-size:13px}
 #identity{font-size:14px;background:#ffffff10;padding:7px 14px;border:1px solid #ffffff20;border-radius:10px}
 header button{background:transparent;color:#fff;border-color:#ffffff40;min-height:38px;font-size:13px}
 main{max-width:1200px;margin:28px auto;padding:0 24px}
 h1{font-size:25px;line-height:1.6;font-weight:700;color:#163e35;margin:0 0 12px}
 h2{font-size:20px;margin:0 0 14px;color:#214c40}h3{line-height:1.7}p{margin:8px 0 18px;color:#5b6e68;max-width:95ch}
 .card{padding:26px;border:1px solid var(--border);border-radius:18px;box-shadow:0 3px 16px #173e3505;margin-bottom:22px}
 .op-top{border-top:4px solid var(--accent)}
 label{font-size:14px;font-weight:600;color:#364f48;gap:8px;margin-bottom:12px;min-width:0}
 input,select,textarea{font:inherit;font-weight:400;color:#243d35;border:1px solid #cbdad3;background:#fbfdfc;border-radius:10px;min-width:0;min-height:46px;padding:10px 12px;transition:border-color .15s,box-shadow .15s}
 input[type=number]{font-variant-numeric:tabular-nums}textarea{min-height:100px}
 input:focus,select:focus,textarea:focus{outline:2px solid #7eb6a3;outline-offset:2px;background:white;box-shadow:0 0 0 5px #1764530b}
 button{font:inherit;font-weight:600;min-height:44px;border-radius:10px;padding:10px 17px;border-color:#cadbd2;background:#edf4f0;transition:background .15s,box-shadow .15s}
 button:hover:not(:disabled){background:#deebe4;border-color:#8eb6a4;box-shadow:0 2px 7px #173e3510}
 button.primary{background:#176453;border-color:#176453;color:white;box-shadow:0 3px 8px #17645318}
 button.primary:hover:not(:disabled){background:#104e40}button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #71ae9a;outline-offset:3px}
 button:disabled{opacity:.55;box-shadow:none}form>button.primary{margin-top:14px;min-width:160px}
 .grid{gap:20px}.compact-fields{gap:16px}.check{font-weight:400}.check input{min-height:18px;accent-color:var(--accent)}
 .date-strip{background:#f4f8f6;border:1px solid #e4ece7;border-radius:12px;padding:14px 16px;gap:18px;margin-top:18px}.date-strip label{margin:0}.date-strip>span{font-size:13px;color:#63766d}
 .nav-group{background:#f8faf9;border:1px solid #e1eae5;padding:20px;border-radius:14px}.nav-group h3{font-size:16px;margin-bottom:16px}
 .nav-items{gap:12px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}.nav-items button{padding:17px 18px;min-height:62px;background:#fff;border:1px solid #dae6df;box-shadow:0 2px 6px #163e3504;font-size:15px;border-inline-start:4px solid #bcd6c8}
 .nav-items button:hover:not(:disabled){background:#edf6f1;border-inline-start-color:#176453}.nav-items button.selected{background:#176453;color:white;border-color:#176453}
 .section-menu>summary{color:var(--accent);padding:8px 0}details{padding:14px 0;border-color:#e2ebe5}details[open]>summary{margin-bottom:16px}summary{font-size:15px;line-height:1.8}
 .scroll{border:1px solid #e0e9e3;border-radius:12px;margin:14px 0;max-width:100%}table{font-size:14px;background:white}th{background:#edf4f0;color:#35594b;font-weight:600;white-space:nowrap}td,th{padding:13px 15px;border-bottom:1px solid #e7eeea}tbody tr:nth-child(even){background:#fafcfb}tbody tr:hover{background:#f0f7f3}td{font-variant-numeric:tabular-nums}tr:last-child td{border-bottom:0}td button{font-size:13px;min-height:36px;padding:6px 12px}
 .metrics{gap:15px;margin:16px 0 22px}.metrics>div{padding:20px;background:#edf5f0;border:1px solid #dbe9e0;border-radius:13px;color:#4c665b;font-size:14px}.metrics strong{font-size:25px;color:#185b46;font-variant-numeric:tabular-nums;margin-top:8px}
 .balance{padding:15px 18px;border:1px solid #d1e4d8;background:#edf7f0;color:#23563f}.login{max-width:460px;margin:48px auto;padding:32px}.login button{width:100%}.login h1{font-size:26px}
 .catalog-group{margin:24px 0 32px}.catalog-group>h3{border-bottom:2px solid #d9e8df;padding-bottom:12px}.catalog-category h4{margin:24px 0 8px;color:#4c6b5b}
 fieldset{padding:18px;border-radius:12px;border-color:#dbe5df;margin:16px 0}legend{font-size:14px;font-weight:600;color:#3a6150;padding:0 8px}
 footer{max-width:1200px;padding:16px 24px 30px;font-size:12px;color:#6c7e74}#message:not(:empty){box-shadow:0 5px 22px #173e3512;max-width:1150px;line-height:1.8}
 @media(max-width:700px){main{padding:0 14px;margin:18px auto}header{padding:14px 18px;gap:10px}header strong{font-size:24px}#identity{font-size:13px;margin:0;flex:1 1 100%}.card{padding:18px;border-radius:14px}h1{font-size:22px}h2{font-size:18px}.grid{grid-template-columns:1fr;gap:14px}.nav-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.nav-items button{font-size:14px;padding:12px;min-height:64px}.nav-group{padding:14px}.date-strip{padding:12px}.date-strip label{flex:1 1 130px}.date-strip>span{width:100%}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics strong{font-size:21px}.compact-fields{grid-template-columns:repeat(2,minmax(0,1fr))}input,select,textarea{font-size:16px}td,th{padding:10px 12px}.login{margin:28px auto}form>button.primary{width:100%}.tools button{flex:1 1 auto}}
 @media(prefers-reduced-motion:reduce){*{transition:none!important}}
}
.search-suggestions{position:fixed;z-index:1000;overflow-y:auto;background:#fff;border:1px solid #91b7a5;border-radius:10px;box-shadow:0 8px 24px #163e3526;padding:5px;direction:rtl;font-size:15px}.search-suggestions [role=option]{padding:10px 12px;border-radius:6px;cursor:pointer;line-height:1.7}.search-suggestions [role=option]:hover,.search-suggestions [aria-selected=true]{background:#e4f1ea;color:#164e3e}.suggestion-empty{padding:12px;color:#6c766f}@media print{.search-suggestions{display:none!important}}
/* Shared phone layout for every staff role. */
@media screen and (max-width:700px){
 main,.card,.nav-group,.grid>*{min-width:0;max-width:100%}
 body{overflow-wrap:anywhere}fieldset{min-inline-size:0;max-width:100%;padding:12px}
 textarea{width:100%}.tools>button,summary{min-height:44px}
 input,select,textarea{max-width:100%;font-size:16px}
 .scroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .scroll td button{min-height:44px}.date-strip{flex-wrap:wrap}
 main{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}
@media screen and (max-width:380px){.nav-items,.compact-fields,.checks,.count-grid{grid-template-columns:minmax(0,1fr)}.nav-group{padding:10px}.card{padding:14px}main{padding-inline:10px}.tools>button{flex:1 1 100%}.metrics strong{font-size:18px}}
/* Kallooshe workspace: calm, high-contrast visual hierarchy. */
@media screen {
 :root{--accent:#165344;--border:#e3e6df;--card:#fffefb;color:#263d35;background:#f5f3ed;line-height:1.9}
 body{background:linear-gradient(135deg,#eeeee4 0,transparent 45%),#f5f3ed}
 header{background:#123d32;border-bottom:1px solid #beab7a;padding-block:20px;box-shadow:none}
 header strong{font-size:32px;font-weight:800;letter-spacing:-1.2px;color:#fff8e8}
 header>span:first-of-type{color:#d8cda9;letter-spacing:.2px}
 #identity{background:#ffffff0a;border-color:#ffffff25;border-radius:24px;padding:8px 18px}
 header button{border-radius:24px}
 body>aside.card{max-width:1152px;margin:18px auto 0;padding:11px 20px;background:#eaf0e7;color:#335448;border:1px solid #d8e1d1;font-size:13px;border-radius:12px;box-shadow:none}
 main{margin-top:24px}
 .card{background:#fffefb;border-radius:20px;border-color:#e3e6df;box-shadow:0 6px 24px #183f3205;padding:28px}
 h1{font-size:28px;letter-spacing:-.7px;color:#173f32}h2{font-size:21px;color:#254a3b;letter-spacing:-.3px}
 h3{color:#254a3b}p{color:#68736a}
 .login{margin:65px auto;max-width:480px;padding:38px;border-top:4px solid #b49d66;box-shadow:0 20px 60px #123d320c}
 .login h1{font-size:29px}.login form{margin-top:26px}.login button{width:100%}
 button{border-radius:12px;border-color:#d9e2d8;background:#f0f4ed;color:#214b39;padding:11px 18px}
 button.primary,#payroll-open-person{background:#165344;color:#fff;border-color:#165344;box-shadow:0 4px 12px #16534415}
 button.primary:hover:not(:disabled),#payroll-open-person:hover{background:#103f33;color:#fff}
 input,select,textarea{background:#fff;border-color:#d7dfd5;border-radius:11px;min-height:48px;font-size:16px}
 input:focus,select:focus,textarea:focus{outline-color:#5e9478;box-shadow:0 0 0 4px #16534409}
 label{color:#395044}.date-strip{background:#f5f5ee;border-color:#e5e7dc}
 .nav-group{background:#f7f7f0;border:1px solid #e5e8dd;border-radius:16px;padding:20px}
 .nav-group h3{color:#49624d;font-size:14px;border-bottom:1px solid #e0e6d8;padding-bottom:12px}
 .nav-items{gap:12px}.nav-items button{min-height:62px;background:#fffefb;border:1px solid #e0e6db;padding:15px 18px;text-align:right;line-height:1.7}
 .nav-items button:hover{background:#eaf1e6;border-color:#9db59c;box-shadow:0 4px 10px #123d3208}
 .op-top{border-top:3px solid #b5a06b}.section-menu{border:0}.section-menu>summary{background:#f0f3e9;padding:10px 16px;border-radius:10px;color:#335a40}
 .metrics>div{background:#f3f5eb;border:1px solid #e5e9da;padding:20px;border-radius:15px}.metrics strong{font-size:28px;color:#174e3d;font-variant-numeric:tabular-nums}
 th{background:#edf1e7;color:#49604a;font-size:13px;font-weight:600;padding:14px 12px;white-space:nowrap}
 td{padding:14px 12px;border-bottom-color:#e9ece4}tbody tr:hover{background:#f8f9f3}.scroll{border:1px solid #e6e9e0;border-radius:12px}
 #op-person{scroll-margin-top:20px}#op-person>.card{border:2px solid #afc6a9;background:#fffefb}#op-person h2{border-bottom:1px solid #e4e8dc;padding-bottom:14px}
 #op-person-create{padding:18px;background:#f5f7ef;border:1px solid #e2e7d9;border-radius:14px}
 #payroll-new-person{margin-inline-start:8px}.balance,.tag{background:#eaf1e5;color:#35553e}
 footer{border-top:1px solid #dde3d5;margin-top:35px;color:#73806d;font-size:12px}
 @media(max-width:700px){header{padding:16px 18px;gap:10px}header strong{font-size:27px}#identity{padding:6px 12px;font-size:13px}body>aside.card{margin:12px 12px 0;padding:10px 14px}main{padding:0 12px;margin-top:16px}.card{padding:18px;border-radius:16px;margin-bottom:16px}h1{font-size:23px}h2{font-size:19px}.login{margin:30px auto;padding:24px}.nav-group{padding:14px}.nav-items{grid-template-columns:minmax(0,1fr)}.nav-items button{min-height:52px}.metrics strong{font-size:23px}#payroll-open-person,#payroll-new-person{width:100%;margin:6px 0}.date-strip{padding:12px;gap:12px}footer{padding:18px}}
 @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
}