*{box-sizing:border-box}
body{margin:0;background:#f4f6f8;font-family:Arial,Helvetica,sans-serif;color:#222}
header{background:#b71c1c;color:white;padding:17px 24px;display:flex;justify-content:space-between;align-items:center;gap:15px}
header h1{margin:0;font-size:24px}
header small{opacity:.9}
.header-right{display:flex;align-items:center;gap:15px}
.header-right a{color:white;text-decoration:none;border:1px solid rgba(255,255,255,.6);padding:8px 12px;border-radius:7px}
main{max-width:1250px;margin:22px auto;padding:0 16px}
.card,.login-card{background:white;border-radius:12px;padding:20px;box-shadow:0 3px 14px rgba(0,0,0,.08);margin-bottom:18px}
.login-card{max-width:430px;margin:70px auto}
label{display:block;font-weight:700;font-size:13px;margin:13px 0 6px}
input,button{width:100%;padding:12px;border:1px solid #d8d8d8;border-radius:8px;font-size:15px}
button,.button-link{background:#b71c1c;color:white;border:none;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;padding:12px 15px;border-radius:8px;text-align:center}
.demo{margin-top:18px;background:#fff4e5;padding:13px;border-radius:8px;line-height:1.7}
.alert{background:#fff3cd;border:1px solid #ffe69c;padding:12px;border-radius:8px;margin-bottom:14px}
.topbar{display:flex;justify-content:space-between;align-items:end;gap:20px}
.topbar h2{margin:0}
.topbar p{color:#666;margin-bottom:0}
.date-form{min-width:190px}
.item-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.remaining-box{background:#fff3f3;border-left:5px solid #b71c1c;padding:15px;margin:17px 0}
.remaining-box span{display:block;color:#666;font-size:13px}
.remaining-box strong{display:block;font-size:24px;margin-top:5px}
.owner-actions{display:flex;align-items:end;gap:10px}
.owner-actions .button-link{white-space:nowrap}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:950px}
th,td{text-align:left;padding:12px;border-bottom:1px solid #eee}
th{background:#fafafa}
.status{padding:6px 9px;border-radius:15px;font-size:12px;font-weight:bold;white-space:nowrap}
.ok{background:#e8f5e9;color:#2e7d32}
.low{background:#fff3e0;color:#ef6c00}
.out{background:#ffebee;color:#c62828}
.missing{background:#eceff1;color:#455a64}
@media(max-width:750px){
    .item-grid{grid-template-columns:1fr}
    .topbar,.owner-actions{align-items:stretch;flex-direction:column}
    .date-form{width:100%}
    header{align-items:flex-start;flex-direction:column}
}

html,body{min-height:100%}
body{padding-bottom:env(safe-area-inset-bottom)}
button,input,.button-link{min-height:46px}
@media(max-width:600px){
  main{margin:12px auto;padding:0 10px}
  .card,.login-card{border-radius:10px;padding:15px}
  .login-card{margin:30px auto}
  header{padding:14px 16px}
  header h1{font-size:20px}
  .remaining-box strong{font-size:22px}
  table{font-size:13px}
}

.success-alert{
    background:#e8f5e9;
    border:1px solid #a5d6a7;
    color:#1b5e20;
    font-weight:700;
}


.stock-alert-panel{
    background:#fff3e0;
    border:2px solid #ef6c00;
    border-radius:12px;
    padding:16px;
    margin-bottom:18px;
}
.stock-alert-title{
    color:#bf360c;
    font-size:19px;
    font-weight:800;
    margin-bottom:10px;
}
.stock-alert-message{
    background:#fff;
    border-left:5px solid #e53935;
    border-radius:7px;
    padding:11px 13px;
    margin-top:8px;
    line-height:1.5;
}
.stock-ok-panel{
    background:#e8f5e9;
    border:1px solid #a5d6a7;
    color:#1b5e20;
    border-radius:10px;
    padding:14px;
    margin-bottom:18px;
    font-weight:700;
}


/* Owner graphical dashboard */
.owner-header-card{
    background:linear-gradient(135deg,#8e0000,#c62828);
    color:white;border-radius:16px;padding:22px;
    display:flex;justify-content:space-between;align-items:end;gap:20px;
    box-shadow:0 10px 28px rgba(183,28,28,.22);margin-bottom:18px;
}
.owner-header-card h2{font-size:28px;margin:4px 0 5px}
.owner-header-card p{margin:0;opacity:.88}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;opacity:.8}
.owner-header-card label{color:white}
.owner-header-card input{background:white}
.export-btn{background:#fff;color:#9b1515}
.export-btn:hover{background:#fff5f5}

.dispatch-alert{
    display:flex;gap:14px;background:#fff5e6;border:1px solid #ffcc80;
    border-left:7px solid #ef6c00;border-radius:14px;padding:17px;margin-bottom:18px;
}
.dispatch-alert-icon{font-size:30px}
.dispatch-alert-content h3{margin:0 0 10px;color:#b44a00}
.dispatch-alert-list{display:flex;flex-wrap:wrap;gap:9px}
.dispatch-chip{background:white;border-radius:9px;padding:9px 11px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.dispatch-chip span{display:block;color:#d84315;margin-top:3px;font-weight:700}
.all-good-banner{background:#e8f5e9;color:#1b5e20;padding:15px;border-radius:12px;font-weight:700;margin-bottom:18px}

.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.overview-card{border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px;color:#222;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.cheese-overview{background:linear-gradient(135deg,#fff8d6,#ffe082)}
.chicken-overview{background:linear-gradient(135deg,#ffe7dc,#ffab91)}
.overview-icon{font-size:42px}
.overview-card span{font-size:13px;color:#555}
.overview-card strong{display:block;font-size:26px;margin:4px 0}
.overview-card small{color:#666}

.product-section{background:white;border-radius:17px;padding:20px;margin-bottom:20px;box-shadow:0 5px 18px rgba(0,0,0,.07)}
.cheese-section{border-top:6px solid #f9a825}
.chicken-section{border-top:6px solid #e64a19}
.product-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}
.product-section-header h2{margin:0}
.product-section-header p{margin:3px 0 0;color:#777}
.product-title-line{display:flex;align-items:center;gap:9px}
.product-emoji{font-size:30px}
.section-total{font-size:22px;font-weight:800;background:#f6f6f6;padding:10px 14px;border-radius:10px}

.branch-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.branch-stock-card{border:1px solid #e8e8e8;border-radius:14px;padding:15px;background:#fff;transition:.2s}
.branch-stock-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.critical-card{border:2px solid #ef6c00;background:#fffaf2}
.missing-card{background:#f7f7f7;border-style:dashed}
.branch-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.branch-card-top h3{margin:0;font-size:17px}
.main-stock-value{font-size:23px;font-weight:800;margin:17px 0 10px}
.stock-progress{height:9px;background:#eceff1;border-radius:10px;overflow:hidden}
.stock-progress-fill{height:100%;border-radius:10px}
.cheese-fill{background:linear-gradient(90deg,#fbc02d,#f57f17)}
.chicken-fill{background:linear-gradient(90deg,#ff8a65,#d84315)}
.mini-metrics{display:grid;grid-template-columns:1fr;gap:7px;margin-top:14px}
.mini-metrics div{display:flex;justify-content:space-between;gap:8px;font-size:12px;border-bottom:1px solid #f0f0f0;padding-bottom:5px}
.mini-metrics span{color:#777}
.mini-metrics strong{text-align:right}
.submitted-time{font-size:10px;color:#999;margin-top:11px}
.empty-state{color:#777;text-align:center;padding:35px 5px;line-height:1.5}
.compact-table-card summary{font-weight:800;cursor:pointer;padding:4px}
.compact-table-card details[open] summary{margin-bottom:15px}

@media(max-width:1050px){
    .branch-card-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
    .owner-header-card{flex-direction:column;align-items:stretch}
    .overview-grid{grid-template-columns:1fr}
    .branch-card-grid{grid-template-columns:1fr}
    .product-section-header{align-items:flex-start;gap:12px}
    .section-total{font-size:17px}
}

.professional-login{max-width:460px;margin:45px auto;background:white;border-radius:20px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.14)}
.login-brand{background:linear-gradient(145deg,#111,#292526);color:white;text-align:center;padding:28px 24px 24px}.login-brand img{width:150px;height:150px;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.28)}.login-brand h2{margin:15px 0 4px;font-size:25px}.login-brand p{margin:0;opacity:.75;font-size:14px}.login-form{padding:25px}.password-field{position:relative}.password-field input{padding-right:75px}.show-password{position:absolute;right:7px;top:7px;width:auto;min-height:34px;padding:7px 11px;background:#ececec;color:#333;font-size:12px}.login-submit{margin-top:18px;font-size:16px}
.user-management-header{display:flex;justify-content:space-between;align-items:center;gap:18px}.user-management-header h2{margin:4px 0 5px}.user-management-header p{margin:0;color:#666}.secondary-link{background:#455a64}.user-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.user-account-card{border-top:5px solid #b71c1c}.user-account-top{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:12px}.user-account-top h3{margin:4px 0 0}.account-role{font-size:11px;font-weight:800;letter-spacing:1px;color:#b71c1c}.secure-badge{background:#e8f5e9;color:#1b5e20;border-radius:20px;padding:6px 9px;font-size:12px;font-weight:700}.security-note{margin-top:18px;background:#e3f2fd;color:#0d47a1;border-left:5px solid #1976d2;border-radius:9px;padding:14px}@media(max-width:700px){.user-management-header{flex-direction:column;align-items:stretch}.user-cards-grid{grid-template-columns:1fr}.professional-login{margin:20px auto}.login-brand img{width:125px;height:125px}}


/* Owner stock edit/delete controls */
.owner-edit-panel{
    margin-top:12px;border-top:1px solid #ececec;padding-top:10px;
}
.owner-edit-panel summary{
    cursor:pointer;font-weight:800;color:#8e0000;font-size:13px;
    padding:5px 0;
}
.owner-stock-form{
    margin-top:10px;background:#fafafa;border-radius:10px;padding:11px;
}
.owner-stock-form label{
    margin:8px 0 4px;font-size:11px;
}
.owner-stock-form input{
    min-height:40px;padding:9px;font-size:13px;
}
.owner-update-btn{
    margin-top:10px;background:#1565c0;min-height:41px;
}
.owner-update-btn:hover{background:#0d47a1}
.owner-delete-btn{
    margin-top:8px;background:#8e0000;min-height:41px;
}
.owner-delete-btn:hover{background:#5f0000}


/* V9 clearly visible owner actions */
.owner-visible-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
}
.owner-edit-visible,
.owner-delete-visible{
    min-height:42px;
    font-size:12px;
    padding:9px;
    border-radius:8px;
}
.owner-edit-visible{
    background:#1565c0;
}
.owner-edit-visible:hover{
    background:#0d47a1;
}
.owner-delete-visible{
    background:#8e0000;
}
.owner-delete-visible:hover{
    background:#5f0000;
}
.delete-inline-form{
    margin:0;
}
.delete-inline-form button{
    width:100%;
}

.stock-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:16px;
}
.stock-modal.show{
    display:flex;
}
.stock-modal-content{
    width:100%;
    max-width:470px;
    background:white;
    border-radius:16px;
    padding:22px;
    position:relative;
    box-shadow:0 22px 60px rgba(0,0,0,.3);
}
.modal-close{
    position:absolute;
    top:10px;
    right:12px;
    width:38px;
    min-height:38px;
    border-radius:50%;
    background:#eeeeee;
    color:#333;
    font-size:22px;
    padding:0;
}
.modal-heading h2{
    margin:4px 0 4px;
}
.modal-heading p{
    margin:0 0 14px;
    color:#666;
    font-weight:700;
}
.modal-note{
    margin-top:12px;
    padding:10px;
    border-radius:8px;
    background:#fff8e1;
    color:#8d5a00;
    font-size:13px;
}
.modal-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:16px;
}
.modal-cancel{
    background:#607d8b;
}
.modal-save{
    background:#1565c0;
}
@media(max-width:520px){
    .owner-visible-actions{
        grid-template-columns:1fr;
    }
    .modal-actions{
        grid-template-columns:1fr;
    }
}

.table-action-buttons{
    display:flex;
    gap:6px;
}
.table-action-buttons form{
    margin:0;
}
.table-edit-btn,.table-delete-btn{
    width:auto;
    min-height:34px;
    padding:6px 9px;
    font-size:11px;
}
.table-edit-btn{background:#1565c0}
.table-delete-btn{background:#8e0000}

/* V11 owner controls — prominent and always visible */
.owner-actions-top{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:12px 0 8px;
    padding:9px;
    background:#f3f6fb;
    border:1px solid #d9e2ef;
    border-radius:10px;
}
.owner-actions-top .owner-edit-visible,
.owner-actions-top .owner-delete-visible{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100%;
    min-height:40px;
    font-weight:800;
}
.owner-actions-top .owner-edit-visible{background:#1565c0;color:#fff;}
.owner-actions-top .owner-delete-visible{background:#b71c1c;color:#fff;}
@media(max-width:520px){
    .owner-actions-top{grid-template-columns:1fr 1fr;}
}


/* V12 detailed sheet actions */
.detail-actions{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}
.detail-delete-form{
    margin:0;
}
.detail-edit-btn,
.detail-delete-btn{
    width:auto;
    min-width:58px;
    min-height:32px;
    padding:6px 10px;
    border-radius:7px;
    font-size:11px;
}
.detail-edit-btn{
    background:#1565c0;
}
.detail-edit-btn:hover{
    background:#0d47a1;
}
.detail-delete-btn{
    background:#8e0000;
}
.detail-delete-btn:hover{
    background:#5f0000;
}

.no-entry-action{display:inline-block;padding:6px 9px;border-radius:7px;background:#eceff1;color:#607d8b;font-size:11px;font-weight:700;white-space:nowrap}
.compact-table-card th:last-child,.compact-table-card td:last-child{min-width:140px}


/* V15: graphical cards stay clean; Edit/Delete remain only in Detailed Sheet */
.owner-visible-actions{
    display:none !important;
}


/* Weekly comparison dashboard */
.view-switch{
    display:flex;
    gap:6px;
    background:rgba(255,255,255,.14);
    padding:5px;
    border-radius:10px;
}
.view-switch-btn{
    display:inline-block;
    padding:10px 13px;
    border-radius:7px;
    text-decoration:none;
    color:white;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}
.view-switch-btn.active{
    background:white;
    color:#9b1515;
}
.weekly-report-card{
    border-top:6px solid #3949ab;
    padding:20px;
}
.weekly-report-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:16px;
}
.weekly-report-heading h2{
    margin:4px 0;
}
.weekly-report-heading p{
    margin:0;
    color:#666;
}
.weekly-legend{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}
.weekly-table{
    min-width:1250px;
}
.weekly-badge{
    display:inline-block;
    padding:6px 9px;
    border-radius:20px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}
.weekly-badge.match{
    background:#e8f5e9;
    color:#1b5e20;
}
.weekly-badge.difference{
    background:#ffebee;
    color:#b71c1c;
}
.weekly-badge.missing{
    background:#eceff1;
    color:#455a64;
}
.weekly-badge.neutral{
    background:#e3f2fd;
    color:#0d47a1;
}
.weekly-difference-row{
    background:#fff7f7;
}
.weekly-match-row{
    background:#fbfffb;
}
@media(max-width:700px){
    .view-switch{
        width:100%;
    }
    .view-switch-btn{
        flex:1;
        text-align:center;
    }
    .weekly-report-heading{
        flex-direction:column;
    }
}