@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');*{box-sizing:border-box}body{font-family:'Be Vietnam Pro',sans-serif;margin:0}.app-shell{display:flex;min-height:100vh}.sidebar{width:260px;background:linear-gradient(180deg,#073b35,#0b6b5a);color:#d5f5eb;display:flex;flex-direction:column;flex-shrink:0}.sidebar-brand{height:82px;padding:20px 22px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #ffffff18}.sidebar-brand b{display:block;color:white;font-size:16px}.sidebar-brand small,.sidebar-user small{display:block;color:#a7d8ca;font-size:11px;margin-top:2px}.logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff;color:#0b6b5a;font-size:13px;font-weight:800}.sidebar-user{margin:22px 16px;padding:13px;border-radius:13px;background:#ffffff12;display:flex;align-items:center;gap:11px}.sidebar-user strong{display:block;color:white;font-size:13px}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#68c9ad;color:#073b35;font-weight:800}.side-nav{padding:0 12px;flex:1}.nav-label{display:block;color:#85bcad;font-size:10px;font-weight:700;letter-spacing:1px;margin:19px 12px 7px}.side-link,.logout-link{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border-radius:9px;color:#c8e9df;text-decoration:none;font-size:13px;font-weight:600;border:0;background:transparent;text-align:left;cursor:pointer}.side-link:hover,.side-link.active,.logout-link:hover{background:#ffffff18;color:#fff}.sidebar-bottom{padding:16px 12px;border-top:1px solid #ffffff18}.main-area{flex:1;min-width:0}.content{max-width:1200px;margin:auto;padding:38px 42px;min-height:calc(100vh - 70px)}footer{text-align:center;color:#94a3b8;font-size:11px;padding:20px}.mobile-header{display:none}.close-sidebar{display:none}.alert-success,.alert-error{border-radius:12px;padding:13px 16px;margin-bottom:20px;font-size:14px;font-weight:600}.alert-success{background:#ecfdf5;color:#047857}.alert-error{background:#fff1f2;color:#be123c}h1{font-size:28px!important;font-weight:800!important;color:#073b35!important}h2{font-weight:800!important;color:#073b35}input,select,textarea{border:1px solid #dbe4ea!important;border-radius:10px!important;min-height:44px;padding:9px 12px!important}.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border-radius:10px;background:#0f8b73;color:white!important;font-weight:700;text-decoration:none;border:0}.btn-primary:hover{background:#073b35}.card,.shadow{border:1px solid #e7edf2!important;border-radius:16px!important;box-shadow:0 8px 25px #0f172a08!important}.table{background:white;border-radius:14px;overflow:hidden}.table th{background:#f0faf7;color:#35645c;font-size:12px;border:0}.table td{vertical-align:middle;border-color:#eef2f4;font-size:14px}.hamburger{border:0;background:none;font-size:22px;color:#0b6b5a}.page-heading{margin-bottom:24px}.smart-select{position:relative;min-width:0;flex:1}.smart-select .product-search{padding-left:38px!important;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:13px;top:10px;color:#94a3b8;font-size:20px;z-index:2;line-height:24px}.product-dropdown{display:none;position:absolute;z-index:10;left:0;right:0;top:50px;background:white;border:1px solid #dbe4ea;border-radius:12px;padding:6px;box-shadow:0 12px 28px #0f172a20;max-height:230px;overflow:auto}.product-dropdown.show{display:block}.product-option{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:white;border-radius:8px;padding:10px 11px;text-align:left;color:#334155;font-size:13px;cursor:pointer}.product-option:hover{background:#eefbf7;color:#0b6b5a}.product-option small{color:#94a3b8;margin-left:10px}.no-result{padding:12px;color:#94a3b8;font-size:13px;text-align:center}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1px;color:#0f8b73;margin:0 0 8px}.entry-card{background:#fff;border:1px solid #e7edf2;border-radius:18px;padding:26px;box-shadow:0 8px 25px #0f172a08;max-width:900px}.field-label{display:block;color:#334155;font-size:13px;font-weight:700;margin-bottom:7px}.date-field{max-width:260px;margin-bottom:30px}.items-title{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eef2f4;padding-top:24px}.items-title h2{font-size:18px;margin:0 0 4px}.items-title p{color:#94a3b8;font-size:12px;margin:0}.count-badge{background:#eefbf7;color:#0b6b5a;border-radius:20px;padding:7px 11px;font-size:11px;font-weight:700}.items-head{display:grid;grid-template-columns:minmax(0,1fr) 82px 35px;gap:12px;padding:20px 9px 8px;color:#64748b;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.item-row{display:grid;grid-template-columns:minmax(0,1fr) 82px 35px;gap:12px;align-items:center;margin-bottom:10px}.product-wrap{display:flex;align-items:center;min-width:0;gap:9px}.row-number{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:7px;background:#f1f5f9;color:#64748b;font-size:11px;font-weight:700}.product-select{width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qty-input{width:100%;text-align:right}.remove-item{border:0;background:#fff1f2;color:#e11d48;border-radius:8px;height:38px;font-size:20px}.add-item{border:1px dashed #9adccc;background:#f5fdfa;color:#0b6b5a;border-radius:9px;padding:10px 15px;font-size:13px;font-weight:700;margin-top:5px}.note-field{border-top:1px solid #eef2f4;margin-top:28px;padding-top:22px;width:100%}.note-field textarea{width:100%;display:block}.form-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #eef2f4;margin-top:24px;padding-top:22px}.btn-outline{min-height:42px;padding:0 16px;border:1px solid #cbd5e1;border-radius:10px;background:white;color:#475569;font-weight:700}.btn-outline:hover{background:#f8fafc}@media(max-width:800px){.items-head{grid-template-columns:minmax(0,1fr) 72px 30px}.item-row{grid-template-columns:minmax(0,1fr) 72px 30px;gap:7px}.entry-card{padding:18px 14px}.qty-input{text-align:center;padding-left:4px!important;padding-right:4px!important}.sidebar{position:fixed;z-index:40;inset:0 auto 0 0;transform:translateX(-100%);transition:.25s;width:280px}.sidebar.open{transform:translateX(0)}#overlay{display:block;position:fixed;inset:0;background:#052e2a88;z-index:30;opacity:0;pointer-events:none;transition:.25s}#overlay.show{opacity:1;pointer-events:auto}.close-sidebar{display:block;margin-left:auto;border:0;background:none;color:#bde8dc;font-size:28px}.mobile-header{height:64px;background:white;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:15px;padding:0 18px;position:sticky;top:0;z-index:20}.mobile-header .hamburger{order:1}.mobile-header>b{order:2}.mobile-header #notificationBell{order:3;margin-left:auto;display:inline-flex;align-items:center;white-space:nowrap;font-size:20px;color:#0b6b5a}.mobile-header #notificationCount{font-size:11px;margin-left:3px;background:#dc2626;color:#fff;border-radius:999px;padding:2px 6px}.mobile-header #themeToggle{order:4}.mobile-header b{color:#073b35}.mobile-dot{margin-left:auto;width:9px;height:9px;border-radius:50%;background:#16a085}.content{padding:25px 17px}.production-list-mobile .table{display:block;background:transparent}.production-list-mobile .table thead{display:none}.production-list-mobile .table tbody,.production-list-mobile .table tr,.production-list-mobile .table td{display:block;width:100%}.production-list-mobile .table tr{background:#fff;border:1px solid #e7edf2;border-radius:14px;margin-bottom:12px;padding:9px}.production-list-mobile .table td{display:flex;justify-content:space-between;border:0!important;padding:7px 5px!important}.production-list-mobile .table td:before{content:attr(data-label);font-weight:700;color:#64748b}}
.stat-card{background:#fff;border:1px solid #e7edf2;border-radius:16px;padding:18px;position:relative;box-shadow:0 8px 25px #0f172a08}.stat-card small{display:block;color:#64748b;font-size:12px;font-weight:600;margin:8px 0 5px}.stat-card strong{display:block;color:#073b35;font-size:28px;line-height:1.2}.stat-card em{font-style:normal;color:#94a3b8;font-size:11px}.stat-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:800}.stat-icon.green{background:#d5f5eb;color:#0b6b5a}.stat-icon.amber{background:#fef3c7;color:#b45309}.stat-icon.blue{background:#dbeafe;color:#2563eb}.stat-icon.red{background:#ffe4e6;color:#e11d48}.recent-card{background:#fff;border:1px solid #e7edf2;border-radius:16px;overflow:hidden;box-shadow:0 8px 25px #0f172a08}.btn-table{border:0;background:#eefbf7;color:#0b6b5a;border-radius:8px;width:34px;height:34px;margin-left:8px;font-size:17px;line-height:34px;padding:0;cursor:pointer}.btn-table:hover{background:#d5f5eb}.btn-table.delete{background:#fff1f2;color:#e11d48}.btn-table.delete:hover{background:#ffe4e6}.btn-danger-solid{border:0;background:#e11d48;color:white;border-radius:9px;padding:10px 15px;font-weight:700}.status{display:inline-block;padding:5px 9px;border-radius:20px;font-size:11px;font-weight:700}.status-banNhap{background:#f1f5f9;color:#64748b}.status-chopheduyet{background:#fef3c7;color:#b45309}.status-dapheduyet{background:#d1fae5;color:#047857}.status-tuchoi{background:#ffe4e6;color:#be123c}.status-dahuy{background:#e2e8f0;color:#475569}
.icon-action,.btn-table{display:inline-flex;align-items:center;justify-content:center;border:0;background:#eefbf7;color:#0b6b5a;border-radius:8px;width:34px;height:34px;margin-left:10px;font-size:17px;cursor:pointer}.btn-table.delete{background:#fff1f2;color:#e11d48}.btn-table.lock{background:#fff7ed;color:#c2410c}.icon-action:hover,.btn-table:hover{filter:brightness(.96)}.inline{display:inline}
.dashboard-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px}.dashboard-head h1{margin:0 0 8px}.dashboard-head p{color:#64748b;margin:0}.dashboard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}.dashboard-stat{background:#fff;border:1px solid #e7edf2;border-radius:16px;padding:18px;display:flex;gap:13px;align-items:flex-start;box-shadow:0 8px 25px #0f172a08}.dashboard-stat small{display:block;color:#64748b;font-size:12px;font-weight:600;margin-bottom:5px}.dashboard-stat strong{display:block;color:#073b35;font-size:28px;line-height:1.2}.dashboard-stat em{font-style:normal;color:#94a3b8;font-size:11px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h2{font-size:18px;margin:0}.section-heading a{color:#0f8b73;font-weight:700;font-size:13px;text-decoration:none}.empty-state{text-align:center;padding:38px!important;color:#94a3b8}.dashboard-table a{color:#0f8b73;font-weight:700;text-decoration:none}@media(max-width:900px){.dashboard-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){
  /* Product administration remains a native table; its wrapper scrolls horizontally. */
  #productTable{display:table!important;min-width:820px!important;width:max-content!important}
  #productTable thead{display:table-header-group!important}
  #productTable tbody{display:table-row-group!important}
  #productTable tr{display:table-row!important;background:transparent!important;border:0!important;margin:0!important;padding:0!important;box-shadow:none!important}
  #productTable th,#productTable td{display:table-cell!important;white-space:nowrap!important;padding:9px 10px!important;vertical-align:middle!important}
  #productTable td:before{display:none!important;content:none!important}
}

/* FINAL MOBILE CARD OVERRIDE - must remain the last CSS rules. */
@media (max-width: 600px) {
  .products-mobile-cards #productTable,
  .staff-mobile-cards #staffTable {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  .products-mobile-cards #productTable thead,
  .staff-mobile-cards #staffTable thead { display: none !important; }
  .products-mobile-cards #productTable tbody,
  .staff-mobile-cards #staffTable tbody { display: block !important; width: 100% !important; }
  .products-mobile-cards #productTable tbody tr,
  .staff-mobile-cards #staffTable tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
    padding: 9px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .products-mobile-cards #productTable td,
  .staff-mobile-cards #staffTable td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 3px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: 11px !important;
  }
  .products-mobile-cards #productTable td:nth-child(1) { grid-column:1; grid-row:1; color:#0b6b5a; font-weight:700; }
  .products-mobile-cards #productTable td:nth-child(2) { grid-column:1 / -1; grid-row:2; color:#073b35; font-size:14px !important; font-weight:700; }
  .products-mobile-cards #productTable td:nth-child(3),
  .products-mobile-cards #productTable td:nth-child(4),
  .products-mobile-cards #productTable td:nth-child(5) { grid-column:1 / -1; grid-row:auto; }
  .products-mobile-cards #productTable td:last-child { grid-column:1 / -1; grid-row:auto; display:flex !important; gap:5px; border-top:1px solid #eef2f4 !important; margin-top:4px; padding-top:7px !important; }
  .staff-mobile-cards #staffTable td:nth-child(1) { grid-column:1; grid-row:1; color:#64748b; }
  .staff-mobile-cards #staffTable td:nth-child(2) { grid-column:1 / -1; grid-row:2; color:#073b35; font-size:14px !important; font-weight:700; }
  .staff-mobile-cards #staffTable td:nth-child(3),
  .staff-mobile-cards #staffTable td:nth-child(4),
  .staff-mobile-cards #staffTable td:nth-child(5),
  .staff-mobile-cards #staffTable td:nth-child(6) { grid-column:1 / -1; grid-row:auto; }
  .staff-mobile-cards #staffTable td:last-child { grid-column:1 / -1; display:flex !important; gap:5px; border-top:1px solid #eef2f4 !important; margin-top:4px; padding-top:7px !important; }
  .products-mobile-cards .btn-table,
  .staff-mobile-cards .btn-table { width:30px !important; min-width:30px !important; height:30px !important; margin:0 !important; font-size:14px !important; }
}
.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dt-length{margin-bottom:10px}.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dt-search{width:100%;margin-bottom:14px}.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dt-search input{width:calc(100% - 70px);margin-left:6px!important}.dashboard-head{display:block;margin-bottom:24px}.dashboard-head .btn-primary{margin-top:18px;width:100%}.dashboard-stats{gap:10px}.dashboard-stat{padding:13px;gap:8px}.dashboard-stat strong{font-size:23px}.dashboard-stat small{font-size:11px}.dashboard-stat em{font-size:10px}.section-heading h2{font-size:16px}}
/* Compact mobile layout: retain card layout on phones. */
@media(max-width:600px){
.content{padding:16px 10px}.mobile-header{height:54px;padding:0 12px}.page-heading{margin-bottom:14px}.page-heading h1,h1{font-size:21px!important}.dashboard-head{margin-bottom:16px}.dashboard-head h1{font-size:21px!important}.dashboard-head .btn-primary{width:auto;min-height:34px;padding:0 10px;margin-top:10px;font-size:12px}.dashboard-stats{gap:7px;margin-bottom:18px}.dashboard-stat{padding:9px;gap:7px;border-radius:10px}.dashboard-stat strong{font-size:19px}.dashboard-stat small{font-size:9px;white-space:nowrap}.dashboard-stat em{font-size:8px}.stat-icon{width:26px;height:26px;font-size:12px;border-radius:7px}.section-heading h2{font-size:14px}.section-heading a{font-size:11px}
/* Cards remain stacked on mobile, but use tighter spacing and typography. */
.production-list-mobile .table{display:block;background:transparent;min-width:0!important}.production-list-mobile .table thead{display:none!important}.production-list-mobile .table tbody,.production-list-mobile .table tr,.production-list-mobile .table td{display:block;width:100%}.production-list-mobile .table tr{background:#fff;border:1px solid #e7edf2;border-radius:10px;margin-bottom:8px;padding:6px;box-shadow:0 3px 10px #0f172a08}.production-list-mobile .table td{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0!important;padding:5px 3px!important;font-size:11px!important;min-height:25px}.production-list-mobile .table td:before{content:attr(data-label);font-weight:700;color:#64748b}.dashboard-table .table td:before{display:none}.dashboard-table .table td{display:flex}.dashboard-table .table td:nth-child(1):before{content:'Mã phiếu'}.dashboard-table .table td:nth-child(2):before{content:'Ngày sản xuất'}.dashboard-table .table td:nth-child(3):before{content:'Số mặt hàng'}.dashboard-table .table td:nth-child(4):before{content:'Trạng thái'}.dashboard-table .table td:nth-child(5):before{content:''}.dashboard-table .table td:nth-child(1){font-weight:700;color:#0b6b5a}.dashboard-table .table td:nth-child(5){justify-content:flex-end}
.card,.entry-card{border-radius:11px!important;padding:12px!important}.form-label,.field-label{font-size:11px;margin-bottom:4px}.form-control,input,select,textarea{min-height:34px!important;padding:6px 8px!important;border-radius:7px!important;font-size:12px!important}.row.g-3{--bs-gutter-x:.5rem;--bs-gutter-y:.5rem}.row.g-3 .col-md-4{width:50%}.row.g-3 .col-md-4:last-child{width:100%}.row.g-3 button{min-height:34px;padding:0 12px;font-size:12px}.date-field{max-width:100%;margin-bottom:16px}.btn-primary,.btn-outline,.btn-danger-solid{min-height:34px;padding:0 10px;border-radius:7px;font-size:11px}.form-actions{gap:6px;margin-top:15px;padding-top:14px}.items-title{padding-top:14px}.items-title h2{font-size:15px}.items-title p{font-size:10px}.items-head{padding:12px 5px 5px;font-size:9px;grid-template-columns:minmax(0,1fr) 62px 26px}.item-row{grid-template-columns:minmax(0,1fr) 62px 26px;gap:5px}.remove-item{height:32px;font-size:17px}.add-item{padding:7px 10px;font-size:11px}.count-badge{padding:5px 8px;font-size:9px}.dataTables_wrapper .dt-search input,.dataTables_wrapper .dataTables_filter input{min-height:32px!important;font-size:11px!important}.dataTables_wrapper .dt-length select{min-height:30px!important;padding:3px!important}
/* Admin/report tables stay native tables on mobile; only their wrapper scrolls horizontally. */
@media(max-width:800px){.table-responsive{width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.table-responsive:not(.production-list-mobile)>.table{min-width:760px!important;width:max-content!important}.table-responsive:not(.production-list-mobile)>.table th,.table-responsive:not(.production-list-mobile)>.table td{white-space:nowrap!important}.table-responsive>.table#productTable{min-width:820px!important}.table-responsive>.table#staffTable{min-width:980px!important}.table-responsive>.table#productionTable{min-width:720px!important}}

}

/* Production cards on mobile: compact two-row layout, no horizontal scrolling. */
@media (max-width: 600px) {
  #productionTable { display: block !important; min-width: 0 !important; width: 100%; }
  #productionTable thead { display: none !important; }
  #productionTable tbody { display: block !important; }
  #productionTable tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 24px 25px;
    align-items: center;
    gap: 0 8px;
    width: 100%;
    min-height: 57px;
    margin: 0 0 7px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    overflow: hidden;
  }
  #productionTable tbody td {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    height: 25px;
    padding: 2px 0 !important;
    border: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px !important;
    line-height: 21px;
  }
  #productionTable tbody td::before { display: none !important; }
  #productionTable tbody td:nth-child(1) {
    grid-column: 1; grid-row: 1;
    font-weight: 800; color: #073b35;
    font-size: 12px !important;
  }
  #productionTable tbody td:nth-child(2) {
    grid-column: 2; grid-row: 1;
    color: #64748b; text-align: right;
  }
  #productionTable tbody td:nth-child(3) {
    grid-column: 1; grid-row: 2;
    color: #475569;
  }
  #productionTable tbody td:nth-child(3)::after { content: ' mặt hàng'; }
  #productionTable tbody td:nth-child(4) {
    grid-column: 1; grid-row: 2;
    margin-left: 76px;
    overflow: visible;
  }
  #productionTable tbody td:nth-child(4) .status,
  #productionTable tbody td:nth-child(5) .status {
    padding: 2px 6px !important;
    font-size: 9px !important;
    line-height: 17px !important;
    white-space: nowrap;
  }
  #productionTable tbody td:nth-child(5) {
    grid-column: 1; grid-row: 2;
    margin-left: 175px;
    overflow: visible;
  }
  #productionTable tbody td:nth-child(6) {
    grid-column: 2; grid-row: 2;
    text-align: right;
    overflow: visible;
  }
  #productionTable tbody td:nth-child(6) a {
    font-size: 10px !important;
    font-weight: 700;
    white-space: nowrap;
  }
  #productionTable tbody td:nth-child(6) form,
  #productionTable tbody td:nth-child(6) button { font-size: 10px !important; }
  .status { padding: 2px 6px !important; font-size: 9px !important; }
}

/* App-style mobile administration screens: this block intentionally comes last
   so older table rules above cannot override the new card layout. */
@media (max-width: 600px) {
  .admin-page-head { display:block !important; margin-bottom:12px !important; }
  .admin-page-head h1 { margin:0 0 3px !important; font-size:21px !important; }
  .admin-page-head p:not(.eyebrow) { margin:0 !important; font-size:11px !important; }
  .admin-page-head > .btn-primary { width:100% !important; margin-top:10px !important; min-height:36px !important; }

  .full-width-admin-card,
  .products-mobile-cards,
  .staff-mobile-cards,
  .management-mobile-cards {
    width:100% !important; max-width:none !important; padding:8px !important;
    overflow:visible !important; border-radius:10px !important;
  }
  .admin-table-card .table-responsive { overflow:visible !important; }
  .admin-table-card table,
  .admin-table-card table#productTable,
  .admin-table-card table#staffTable { display:block !important; width:100% !important; min-width:0 !important; }
  .admin-table-card table thead { display:none !important; }
  .admin-table-card table tbody { display:block !important; width:100% !important; }
  .admin-table-card table tbody tr {
    display:grid !important; width:100% !important; min-width:0 !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:2px 8px !important; margin:0 0 6px !important; padding:8px !important;
    border:1px solid #e7edf2 !important; border-radius:9px !important;
    background:#fff !important; box-shadow:none !important;
  }
  .admin-table-card table td {
    display:block !important; width:auto !important; min-width:0 !important;
    height:auto !important; min-height:0 !important; padding:2px 0 !important;
    border:0 !important; white-space:normal !important; overflow:visible !important;
    font-size:11px !important; line-height:1.25 !important;
  }
  .admin-table-card table td:first-child { grid-column:1; grid-row:1; color:#64748b; font-weight:700; }
  .admin-table-card table td:nth-child(2) { grid-column:1; grid-row:2; color:#073b35; font-weight:700; font-size:13px !important; }
  .products-mobile-cards table td:nth-child(2) { grid-column:1; grid-row:2; text-align:left; }
  .products-mobile-cards table td:nth-child(3),
  .products-mobile-cards table td:nth-child(4),
  .products-mobile-cards table td:nth-child(5),
  .staff-mobile-cards table td:nth-child(3),
  .staff-mobile-cards table td:nth-child(4),
  .staff-mobile-cards table td:nth-child(5),
  .staff-mobile-cards table td:nth-child(6) { grid-column:1 / -1 !important; grid-row:auto !important; font-weight:400; }
  .admin-table-card table td:last-child { grid-column:1 / -1 !important; grid-row:auto !important; display:flex !important; gap:4px; padding-top:6px !important; margin-top:3px; border-top:1px solid #eef2f4 !important; }
  .admin-table-card .btn-table { width:30px !important; height:30px !important; min-width:30px !important; margin:0 !important; font-size:14px !important; line-height:30px !important; }
  .admin-table-card table td:last-child form { display:inline-flex !important; margin:0 !important; }
  .management-mobile-cards table td:nth-child(2) { grid-column:1; grid-row:2; }
  .management-mobile-cards table td:last-child { grid-column:2 !important; grid-row:1 / span 2 !important; align-items:center; border:0 !important; margin:0 !important; padding:0 !important; }
  .management-mobile-cards .flex.items-center.justify-between { margin-bottom:6px !important; }
  .management-mobile-cards .btn-primary { min-height:30px !important; padding:0 9px !important; font-size:11px !important; }
}

/* Final scoped mobile cards for administration tables.
   Do not widen/narrow the desktop table and do not use global table selectors. */
@media (max-width: 600px) {
  .admin-page-head { display:block !important; margin-bottom:14px !important; }
  .admin-page-head .eyebrow { margin-bottom:4px !important; }
  .admin-page-head h1 { margin-bottom:4px !important; }
  .admin-page-head > .btn-primary { width:100% !important; margin-top:10px !important; min-height:36px !important; font-size:12px !important; }
  .full-width-admin-card { width:100% !important; }

  .admin-table-card,
  .admin-table-card .dt-container,
  .admin-table-card .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .admin-table-card .dt-layout-row,
  .admin-table-card .dt-layout-cell {
    width: 100% !important;
    min-width: 0 !important;
  }

  .admin-table-card table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .admin-table-card tbody tr {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  /* Products: code/name on top, description/unit/status below, actions last. */
  .products-mobile-cards table tbody tr,
  .staff-mobile-cards table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
  }
  .products-mobile-cards table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .products-mobile-cards table td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .products-mobile-cards table td:nth-child(3),
  .products-mobile-cards table td:nth-child(4),
  .products-mobile-cards table td:nth-child(5) { grid-column: 1 / -1; grid-row: auto; font-weight: 400; font-size: 11px !important; }
  .products-mobile-cards table td:nth-child(2) { font-size: 13px !important; }
  .products-mobile-cards table td:last-child { grid-column: 1 / -1; }

  /* Staff: name/account on top, department/position/status below, actions last. */
  .staff-mobile-cards table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .staff-mobile-cards table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .staff-mobile-cards table td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  .staff-mobile-cards table td:nth-child(4),
  .staff-mobile-cards table td:nth-child(5),
  .staff-mobile-cards table td:nth-child(6) { grid-column: 1 / -1; grid-row: auto; font-weight: 400; }
  .staff-mobile-cards table td:nth-child(2) { font-size: 13px !important; }
  .staff-mobile-cards table td:last-child { grid-column: 1 / -1; }

  /* Read-only lists: the final cell is content, not an action toolbar. */
  .departments-mobile-cards table td:last-child,
  .positions-mobile-cards table td:last-child {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding-top: 2px !important;
    border-top: 0 !important;
  }
  .audit-mobile-cards table td:last-child {
    display: block !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding-top: 2px !important;
    border-top: 0 !important;
  }
  .audit-mobile-cards table td:last-child a {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: #eefbf7;
    color: #0b6b5a;
    font-weight: 700;
    text-decoration: none;
  }
}

/* Compact action buttons on mobile only. Desktop styles remain unchanged. */
@media (max-width: 600px) {
  .d-flex.justify-content-between.align-items-center.mb-3 {
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap;
  }
  .d-flex.justify-content-between.align-items-center.mb-3 h1 {
    width: 100%;
    margin-bottom: 2px !important;
  }
  .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex {
    width: 100%;
    display: flex !important;
    gap: 8px !important;
    align-items: center;
  }
  .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex form {
    flex: 1 1 auto;
    min-width: 0;
  }
  .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex .btn-success,
  .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex .btn-primary {
    min-height: 42px !important;
    height: 42px !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 16px !important;
    white-space: normal;
    width: auto !important;
  }
  .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex .btn-success {
    width: 100% !important;
  }
  .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex > .btn-primary {
    flex: 0 0 auto;
  }
  /* Links/forms inside compact production cards */
  #productionTable .btn-link,
  #productionTable td a:not(.details-modal-link),
  #productionTable .details-modal-link,
  #productionTable button {
    min-height: 28px !important;
    height: auto !important;
    padding: 3px 6px !important;
    margin: 0 2px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    line-height: 18px !important;
  }
  #productionTable .status {
    padding: 2px 6px !important;
    font-size: 10px !important;
    line-height: 17px !important;
  }
}

/* Production report mobile: keep its intentionally compact native 4-column table. */
@media (max-width:600px){
  .production-report-table{width:100%;table-layout:fixed;border-collapse:collapse}
  .production-report-table th,.production-report-table td{display:table-cell!important;padding:6px!important;white-space:normal!important;overflow-wrap:anywhere}
  .production-report-table th:nth-child(1),.production-report-table td:nth-child(1){width:10%;text-align:center}
  .production-report-table th:nth-child(2),.production-report-table td:nth-child(2){width:45%}
  .production-report-table th:nth-child(3),.production-report-table td:nth-child(3){width:25%}
  .production-report-table th:nth-child(4),.production-report-table td:nth-child(4){width:20%;text-align:right}
}

/* Mobile sidebar: only the sidebar scrolls; page content stays fixed. */
@media (max-width:800px){
  .sidebar{
    height:100vh;
    max-height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }
  .side-nav{overflow:visible;flex:0 0 auto;}
  .sidebar-bottom{margin-top:auto;flex-shrink:0;}
  #overlay{touch-action:none;}
}

/* Compact recent production cards on mobile. */
@media (max-width:600px){
  .recent-card{border-radius:10px!important}
  .dashboard-table .table{margin:0!important}
  .dashboard-table .table tr{margin-bottom:5px!important;padding:5px 7px!important;border-radius:9px!important;box-shadow:0 2px 8px #0f172a08!important}
  .dashboard-table .table td{padding:3px 2px!important;min-height:22px!important;font-size:11px!important;line-height:1.25!important}
  .dashboard-table .table td:nth-child(1){font-size:11px!important;font-weight:700!important}
  .dashboard-table .table td:nth-child(2){font-size:10px!important}
  .dashboard-table .table td:nth-child(3){font-size:10px!important}
  .dashboard-table .table td:nth-child(4){font-size:10px!important}
  .dashboard-table .table td:nth-child(5){padding-top:2px!important}
  .dashboard-table .table td:nth-child(5) a{font-size:10px!important;padding:2px 4px!important;line-height:16px!important}
  .recent-card .status{padding:2px 5px!important;font-size:9px!important;line-height:16px!important}
}

/* Recent production cards: compact two-column mobile arrangement. */
@media (max-width:600px){
  .dashboard-table .table{display:block!important;min-width:0!important;width:100%!important}
  .dashboard-table .table thead{display:none!important}
  .dashboard-table .table tbody{display:block!important}
  .dashboard-table .table tr{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:24px 24px;
    gap:0 8px;align-items:center;width:100%;min-height:0!important;
    margin:0 0 6px!important;padding:5px 8px!important;border:1px solid #e7edf2;
    border-radius:9px!important;background:#fff;box-shadow:0 2px 8px #0f172a08!important;
  }
  .dashboard-table .table td{display:block!important;width:auto!important;height:24px;min-height:0!important;padding:2px 0!important;border:0!important;line-height:20px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px!important}
  .dashboard-table .table td:before{display:none!important}
  .dashboard-table .table td:nth-child(1){grid-column:1;grid-row:1;font-weight:800!important;color:#073b35}
  .dashboard-table .table td:nth-child(2){grid-column:2;grid-row:1;text-align:right;color:#64748b;font-size:10px!important}
  .dashboard-table .table td:nth-child(3){grid-column:1;grid-row:2;color:#475569;font-size:10px!important}
  .dashboard-table .table td:nth-child(4){grid-column:1;grid-row:2;margin-left:78px;overflow:visible}
  .dashboard-table .table td:nth-child(4) .status{padding:2px 5px!important;font-size:9px!important;line-height:16px!important;white-space:nowrap}
  .dashboard-table .table td:nth-child(5){grid-column:2;grid-row:2;text-align:right;overflow:visible}
  .dashboard-table .table td:nth-child(5) a{font-size:10px!important;line-height:16px!important;padding:2px 4px!important;white-space:nowrap}
}

/* Production list sync-status badges */
.status-daduyet{background:#d1fae5;color:#047857;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;display:inline-block;line-height:1.2}
.status-chuaday{background:#fef3c7;color:#b45309;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;display:inline-block;line-height:1.2}
.status-dangday{background:#dbeafe;color:#1d4ed8;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;display:inline-block;line-height:1.2}
.status-loi{background:#ffe4e6;color:#be123c;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;display:inline-block;line-height:1.2}
@media(max-width:600px){.status-daduyet,.status-chuaday,.status-dangday,.status-loi{padding:3px 7px;font-size:10px}}

/* Production approval-status badges */
.status-banNhap{background:#f1f5f9!important;color:#475569!important;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;display:inline-block;line-height:1.2}
.status-chopheduyet{background:#fef3c7!important;color:#b45309!important;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;display:inline-block;line-height:1.2}
.status-dapheduyet{background:#d1fae5!important;color:#047857!important;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;display:inline-block;line-height:1.2}
.status-tuchoi{background:#ffe4e6!important;color:#be123c!important;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;display:inline-block;line-height:1.2}
.status-dahuy{background:#e2e8f0!important;color:#475569!important;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;display:inline-block;line-height:1.2}
@media(max-width:600px){.status-banNhap,.status-chopheduyet,.status-dapheduyet,.status-tuchoi,.status-dahuy{padding:3px 7px;font-size:10px}} /* production item rows */
#items{display:block;width:100%}#items .item-row{display:grid!important;grid-template-columns:minmax(0,1fr) 82px 36px!important;align-items:center!important;gap:10px!important;width:100%!important}.item-row .product-wrap{display:flex!important;min-width:0!important;width:100%!important}.item-row .smart-select{min-width:0!important;width:100%!important}.item-row .qty-input{display:block!important;width:100%!important;min-width:0!important}.item-row .remove-item{display:block!important;width:36px!important;min-width:36px!important}.add-item{display:inline-flex!important;width:auto!important;clear:both!important}@media(max-width:800px){#items .item-row{grid-template-columns:minmax(0,1fr) 68px 32px!important;gap:6px!important}.item-row .remove-item{width:32px!important;min-width:32px!important}}

/* Scoped mobile card lists for admin screens.
   Desktop keeps the original table. Only these named containers change on phones. */
@media (max-width: 600px) {
  .admin-table-card {
    overflow: visible !important;
    border-radius: 12px !important;
  }
  .admin-table-card > .table-responsive {
    overflow: visible !important;
  }
  .admin-table-card > .table-responsive > table,
  .admin-table-card > table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    background: transparent !important;
  }
  .admin-table-card table thead { display: none !important; }
  .admin-table-card table tbody { display: block !important; }
  .admin-table-card table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 3px 8px;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 9px 10px !important;
    border: 1px solid #e7edf2 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px #0f172a08 !important;
  }
  .admin-table-card table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 2px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .admin-table-card table td:first-child { grid-column: 1; grid-row: 1; color: #64748b; font-weight: 700; }
  .admin-table-card table td:nth-child(2) { grid-column: 1; grid-row: 2; color: #073b35; font-weight: 700; font-size: 13px !important; }
  .admin-table-card table td:nth-child(n+3):not(:last-child) { grid-column: 1; }
  .admin-table-card table td:last-child {
    grid-column: 1 / -1;
    grid-row: auto;
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 6px !important;
    margin-top: 3px;
    border-top: 1px solid #eef2f4 !important;
  }
  .admin-table-card table td:last-child:empty { display: none !important; }
  .admin-table-card .btn-table {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 34px !important;
  }
  .admin-table-card table td:last-child form { display: inline-flex !important; margin: 0 !important; }
  .admin-table-card .status { font-size: 10px !important; padding: 3px 7px !important; }
  .admin-table-card.management-mobile-cards table td:nth-child(3):not(:last-child) { grid-column: 1 / -1; }
  .admin-table-card.audit-mobile-cards table td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .admin-table-card.audit-mobile-cards table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .admin-table-card.audit-mobile-cards table td:nth-child(3),
  .admin-table-card.audit-mobile-cards table td:nth-child(4),
  .admin-table-card.audit-mobile-cards table td:nth-child(5),
  .admin-table-card.audit-mobile-cards table td:nth-child(6) { grid-column: 1 / -1; grid-row: auto; font-weight: 400; font-size: 11px !important; }
  .admin-table-card.audit-mobile-cards table td:last-child { border-top: 0 !important; }
  .admin-table-card.audit-mobile-cards code { overflow-wrap: anywhere; }

  /* Compact, full-width cards for the small reference lists. */
  .management-mobile-cards,
  .departments-mobile-cards,
  .positions-mobile-cards {
    width: 100% !important;
    max-width: none !important;
    padding: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .management-mobile-cards .flex.items-center.justify-between,
  .departments-mobile-cards + *,
  .positions-mobile-cards + * {
    min-width: 0;
  }
  .management-mobile-cards .flex.items-center.justify-between {
    margin-bottom: 7px !important;
  }
  .management-mobile-cards .flex.items-center.justify-between h2 {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .management-mobile-cards .flex.items-center.justify-between .btn-primary {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    line-height: 20px !important;
  }
  .management-mobile-cards table tbody tr,
  .departments-mobile-cards table tbody tr,
  .positions-mobile-cards table tbody tr {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 1px 8px !important;
    margin-bottom: 5px !important;
    padding: 7px 9px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .management-mobile-cards table td,
  .departments-mobile-cards table td,
  .positions-mobile-cards table td {
    line-height: 1.2 !important;
  }
  .management-mobile-cards table td:nth-child(2),
  .departments-mobile-cards table td:last-child,
  .positions-mobile-cards table td:last-child {
    font-size: 12px !important;
  }
}

/* LAST OVERRIDE: product list must render as cards on phones. */
@media screen and (max-width: 600px) {
  .products-mobile-cards #productTable,
  .products-mobile-cards #productTable tbody { display: block !important; width: 100% !important; min-width: 0 !important; }
  .products-mobile-cards #productTable thead { display: none !important; }
  .products-mobile-cards #productTable tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    width: 100% !important; min-width: 0 !important;
    margin: 0 0 8px !important; padding: 9px 10px !important;
    border: 1px solid #e2e8f0 !important; border-radius: 10px !important;
    background: #fff !important; box-shadow: none !important;
  }
  .products-mobile-cards #productTable tbody td {
    display: block !important; width: auto !important; min-width: 0 !important;
    height: auto !important; padding: 3px 0 !important; border: 0 !important;
    white-space: normal !important; overflow: visible !important;
  }
  .products-mobile-cards #productTable tbody td:nth-child(1) { grid-column: 1; grid-row: 1; color: #0b6b5a; font-weight: 700; font-size: 11px !important; }
  .products-mobile-cards #productTable tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: #073b35; font-weight: 700; font-size: 14px !important; }
  .products-mobile-cards #productTable tbody td:nth-child(3),
  .products-mobile-cards #productTable tbody td:nth-child(4),
  .products-mobile-cards #productTable tbody td:nth-child(5) { grid-column: 1 / -1; grid-row: auto; font-size: 11px !important; }
  .products-mobile-cards #productTable tbody td:last-child { grid-column: 1 / -1; grid-row: auto; display: flex !important; gap: 5px; margin-top: 4px; padding-top: 7px !important; border-top: 1px solid #eef2f4 !important; }
}

/* Production list: mobile-first responsive controls and compact pagination. */
.production-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.production-actions{display:flex;gap:8px;align-items:stretch}
.production-actions form,.production-actions a{margin:0;display:flex;align-items:center}
.production-actions button,.production-actions a{white-space:nowrap}
.production-filter-form{border:1px solid #e5e7eb;border-radius:10px}
.production-filter-form .form-label{font-size:12px;font-weight:600;margin-bottom:4px;color:#475569}
.production-filter-form .form-control,.production-filter-form .form-select,.production-filter-form .btn{min-height:38px}
.production-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:#64748b;font-size:12px}
.production-pagination .pagination{display:flex;flex-wrap:nowrap;gap:3px}
.production-pagination .page-link{min-width:32px;height:32px;padding:5px 8px;text-align:center;border-radius:6px}
@media(max-width:600px){
 .production-heading{align-items:stretch;gap:10px}
 .production-heading h1{font-size:1.35rem}
 .production-actions{width:100%;gap:8px}
 .production-actions form,.production-actions a{flex:1 1 0;min-width:0}
 .production-actions button,.production-actions a{width:100%;padding:9px 6px;font-size:12px;line-height:1.2;white-space:normal}
 .production-filter-form{padding:10px!important}
 .production-filter-form .form-label{font-size:10px}
 .production-filter-form .form-control,.production-filter-form .form-select,.production-filter-form .btn{min-height:34px;font-size:11px;padding:5px 7px}
 .production-pagination{align-items:flex-start;flex-direction:column;gap:8px;font-size:10px}
 .production-pagination>nav{width:100%;overflow-x:auto;overflow-y:hidden}
 .production-pagination .pagination{width:max-content}
 .production-pagination .page-link{min-width:28px;height:28px;padding:4px 6px;font-size:10px}
}

/* Production report filters: one balanced row on desktop, compact responsive layout. */
.report-filter-row{display:flex!important;flex-wrap:nowrap!important;align-items:flex-end!important}
.report-filter-row .report-date-field{flex:0 0 18%!important;width:auto!important}
.report-filter-row .report-employee-field{flex:1 1 27%!important;width:auto!important}
.report-filter-row .report-pagesize-field{flex:0 0 16%!important;width:auto!important}
.report-filter-row .report-submit-field{flex:0 0 90px!important;width:auto!important}
@media(max-width:600px){
 .report-filter-row{gap:8px!important;flex-wrap:wrap!important}
 .report-filter-row .report-date-field{flex:0 0 calc(50% - 4px)!important;width:calc(50% - 4px)!important;padding:0!important}
 .report-filter-row .report-employee-field{flex:1 1 0!important;width:auto!important;padding:0!important}
 .report-filter-row .report-pagesize-field{flex:0 0 82px!important;width:82px!important;padding:0!important}
 .report-filter-row .report-submit-field{flex:0 0 52px!important;width:52px!important;padding:0!important}
 .report-filter-row .form-label{font-size:10px!important;white-space:nowrap}
 .report-filter-row .form-control,.report-filter-row .form-select,.report-filter-row button{width:100%!important;font-size:10px!important;padding:5px 4px!important}
}

.production-entry-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.production-back-button{white-space:nowrap;text-decoration:none}
@media(max-width:600px){.production-entry-heading{align-items:stretch;gap:8px}.production-entry-heading>div{min-width:0}.production-back-button{align-self:flex-start;padding:8px 10px;font-size:11px}.production-list-mobile .table td[data-label="Thao tác"]{display:flex!important;flex-wrap:wrap;justify-content:flex-start;gap:3px;white-space:normal;overflow:visible}.production-list-mobile .table td[data-label="Thao tác"]:before{flex:0 0 100%;margin-bottom:2px}.production-list-mobile .table td[data-label="Trạng thái"],.production-list-mobile .table td[data-label="Google Sheet"]{white-space:normal;overflow:visible}.production-list-mobile .table td[data-label="Trạng thái"] .status,.production-list-mobile .table td[data-label="Google Sheet"] .status{white-space:nowrap}}

/* Production list mobile: let every field and action remain readable. */
@media (max-width:600px){
  #productionTable tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto!important;min-height:0!important;height:auto!important;align-items:center!important;}
  #productionTable tbody td{height:auto!important;min-height:28px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35!important;}
  #productionTable tbody td:nth-child(1){grid-column:1;grid-row:1}
  #productionTable tbody td:nth-child(2){grid-column:2;grid-row:1;text-align:right}
  #productionTable tbody td:nth-child(3){grid-column:1;grid-row:2}
  #productionTable tbody td:nth-child(4){grid-column:2;grid-row:2;text-align:right}
  #productionTable tbody td:nth-child(5){grid-column:1 / -1;grid-row:3;text-align:left}
  #productionTable tbody td:last-child{grid-column:1 / -1;grid-row:4;display:flex!important;flex-wrap:wrap;justify-content:flex-start;gap:2px;border-top:1px solid #eef2f4!important;margin-top:3px;padding-top:6px!important}
  #productionTable tbody td:last-child:before{flex:0 0 100%;content:attr(data-label);font-weight:700;color:#64748b}
  #productionTable tbody td:last-child a,#productionTable tbody td:last-child button{display:inline-block!important;padding:2px 5px!important;font-size:11px!important;line-height:1.4!important;white-space:nowrap!important}
  #productionTable tbody td:last-child form{display:inline!important;margin:0!important}
}

/* Exact mobile production card layout: code/date/items, statuses, then actions. */
@media (max-width:600px){
  #productionTable tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-auto-rows:auto!important;gap:2px 10px!important;height:auto!important;min-height:0!important;padding:8px 9px!important;overflow:visible!important}
  #productionTable tbody td{display:block!important;width:auto!important;height:auto!important;min-height:0!important;padding:3px 0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35!important}
  #productionTable tbody td:before{display:none!important}
  #productionTable tbody td:nth-child(1){grid-column:1;grid-row:1;font-weight:800;color:#073b35;font-size:12px!important}
  #productionTable tbody td:nth-child(2){grid-column:2;grid-row:1;text-align:right;color:#64748b}
  #productionTable tbody td:nth-child(3){grid-column:1;grid-row:2;color:#475569}
  #productionTable tbody td:nth-child(4){grid-column:2;grid-row:2;text-align:right}
  #productionTable tbody td:nth-child(5){grid-column:1 / -1;grid-row:3;text-align:left}
  #productionTable tbody td:last-child{grid-column:1 / -1;grid-row:4;display:flex!important;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:3px;border-top:1px solid #eef2f4!important;margin-top:4px;padding-top:7px!important}
  #productionTable tbody td:last-child:before{display:block!important;content:'Thao tác';flex:0 0 100%;font-size:10px;font-weight:700;color:#64748b;margin-bottom:1px}
  #productionTable tbody td:last-child a,#productionTable tbody td:last-child button{display:inline-flex!important;align-items:center!important;width:auto!important;min-width:0!important;height:28px!important;min-height:28px!important;margin:0!important;padding:3px 7px!important;border-radius:6px!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important}
  #productionTable tbody td:last-child form{display:inline-flex!important;margin:0!important;padding:0!important}
  #productionTable tbody td:last-child .text-danger{color:#dc2626!important}
  #productionTable tbody td:nth-child(4) .status,#productionTable tbody td:nth-child(5) .status{white-space:nowrap!important}
}

/* Mobile production card: requested order: code/date/items, sync/status, actions. */
@media (max-width:600px){
 #productionTable tbody tr{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.9fr)!important;grid-auto-rows:auto!important;gap:2px 8px!important}
 #productionTable tbody td:nth-child(1){grid-column:1;grid-row:1;text-align:left}
 #productionTable tbody td:nth-child(2){grid-column:2;grid-row:1;text-align:center}
 #productionTable tbody td:nth-child(3){grid-column:3;grid-row:1;text-align:right}
 #productionTable tbody td:nth-child(4){grid-column:1;grid-row:2;text-align:left}
 #productionTable tbody td:nth-child(5){grid-column:2 / 4;grid-row:2;text-align:left}
 #productionTable tbody td:last-child{grid-column:1 / -1;grid-row:3}
 #productionTable tbody td:nth-child(4) .status,#productionTable tbody td:nth-child(5) .status{display:inline-block;white-space:nowrap!important}
 #productionTable tbody td:last-child:before{content:none!important;display:none!important}
 #productionTable tbody td:last-child{border-top:1px solid #eef2f4!important;margin-top:4px;padding-top:7px!important}
}

/* Final mobile production card correction. Statuses use the whole card background, not small pills. */
@media (max-width:600px){
  #productionTable tbody tr{background:#f1f3f5!important;border-color:#dfe3e6!important}
  #productionTable tbody td:nth-child(4) .status,#productionTable tbody td:nth-child(5) .status{background:transparent!important;color:#475569!important;padding:0!important;border-radius:0!important;font-weight:700!important}
  #productionTable:not(.has-google-status) tbody td:nth-child(4){grid-column:1 / -1!important;grid-row:2!important;text-align:left!important}
  #productionTable:not(.has-google-status) tbody td:nth-child(5){grid-column:1 / -1!important;grid-row:3!important}
  #productionTable.has-google-status tbody td:nth-child(4){grid-column:1!important;grid-row:2!important;text-align:left!important}
  #productionTable.has-google-status tbody td:nth-child(5){grid-column:2 / 4!important;grid-row:2!important;text-align:left!important}
  #productionTable.has-google-status tbody td:last-child{grid-column:1 / -1!important;grid-row:3!important}
  #productionTable tbody td:last-child{border-top:1px solid #d7dcdf!important}
}

/* Final requested order on mobile: Chưa đẩy first, Bản nháp second. */
@media (max-width:600px){
 #productionTable.has-google-status tbody td:nth-child(4){grid-column:2 / 4!important;grid-row:2!important;text-align:left!important}
 #productionTable.has-google-status tbody td:nth-child(5){grid-column:1!important;grid-row:2!important;text-align:left!important}
 #productionTable tbody tr{background:#f1f3f5!important}
}

/* Production mobile card: white information row + one full-width gray status/action row. */
@media (max-width:600px){
  #productionTable tbody tr{
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,auto)!important;
    grid-template-rows:auto auto!important;
    gap:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  #productionTable tbody td{margin:0!important;border:0!important;background:#fff!important;padding:8px 7px!important;min-height:0!important}
  #productionTable tbody td:nth-child(1){grid-column:1;grid-row:1;text-align:left}
  #productionTable tbody td:nth-child(2){grid-column:2;grid-row:1;text-align:center}
  #productionTable tbody td:nth-child(3){grid-column:3;grid-row:1;text-align:right}
  #productionTable tbody td:nth-child(4),
  #productionTable tbody td:nth-child(5),
  #productionTable tbody td:last-child{background:#f1f3f5!important}
  #productionTable tbody td:nth-child(4){grid-column:1;grid-row:2;text-align:left}
  #productionTable.has-google-status tbody td:nth-child(5){grid-column:2;grid-row:2;text-align:left}
  #productionTable tbody td:last-child{grid-column:3;grid-row:2;display:flex!important;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:3px;padding:6px 7px!important;border:0!important;white-space:nowrap}
  #productionTable tbody td:last-child:before{display:none!important;content:none!important}
  #productionTable tbody td:last-child a,#productionTable tbody td:last-child button{height:27px!important;min-height:27px!important;padding:3px 5px!important;font-size:10px!important;margin:0!important}
  #productionTable tbody td:last-child form{display:inline-flex!important;margin:0!important}
  #productionTable tbody td:nth-child(4) .status,#productionTable tbody td:nth-child(5) .status{display:inline-block!important;padding:4px 8px!important;border-radius:20px!important;font-size:10px!important;white-space:nowrap!important}
  /* Preserve the original colored status pills. */
  #productionTable tbody td:nth-child(4) .status.status-banNhap{background:#f1f5f9!important;color:#64748b!important}
  #productionTable tbody td:nth-child(5) .status.status-chuaday{background:#f1f5f9!important;color:#64748b!important}
}

/* Mobile production cards: six full-width bands, first three white then three gray. */
@media (max-width:600px){
  #productionTable tbody tr{display:block!important;padding:0!important;background:transparent!important;border:1px solid #e2e8f0!important;overflow:hidden!important}
  #productionTable tbody td{display:flex!important;align-items:center!important;width:100%!important;min-height:30px!important;height:auto!important;padding:6px 9px!important;margin:0!important;border:0!important;border-bottom:1px solid #e5e7eb!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-align:left!important;background:#fff!important}
  #productionTable tbody td:nth-child(1),#productionTable tbody td:nth-child(2),#productionTable tbody td:nth-child(3){background:#fff!important}
  #productionTable tbody td:nth-child(4),#productionTable tbody td:nth-child(5),#productionTable tbody td:last-child{background:#f1f3f5!important}
  #productionTable tbody td:nth-child(1){font-weight:800;color:#073b35;font-size:12px!important}
  #productionTable tbody td:nth-child(2),#productionTable tbody td:nth-child(3){color:#475569;font-size:11px!important}
  #productionTable tbody td:nth-child(4),#productionTable tbody td:nth-child(5){justify-content:flex-start}
  #productionTable tbody td:last-child{display:flex!important;flex-wrap:wrap;gap:3px;border-bottom:0!important}
  #productionTable tbody td:last-child:before{display:none!important;content:none!important}
  #productionTable tbody td:last-child a,#productionTable tbody td:last-child button{display:inline-flex!important;width:auto!important;height:28px!important;min-height:28px!important;margin:0!important;padding:3px 7px!important;font-size:11px!important;white-space:nowrap!important}
  #productionTable tbody td:last-child form{display:inline-flex!important;margin:0!important}
  #productionTable tbody td .status{display:inline-block!important;white-space:nowrap!important;padding:4px 9px!important;border-radius:999px!important}
}

/* Mobile production card — six full-width rows: 3 white information rows, 3 gray rows. */
@media (max-width:600px){
  #productionTable tbody tr{display:block!important;padding:0!important;background:transparent!important;border:1px solid #dfe4e8!important;border-radius:10px!important;overflow:hidden!important}
  #productionTable tbody td{display:flex!important;width:100%!important;box-sizing:border-box!important;min-height:30px!important;height:auto!important;margin:0!important;padding:6px 9px!important;border:0!important;border-bottom:1px solid #e1e5e8!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;white-space:normal!important;overflow:visible!important;background:#fff!important}
  #productionTable tbody td:nth-child(1),#productionTable tbody td:nth-child(2),#productionTable tbody td:nth-child(3){background:#fff!important}
  #productionTable tbody td:nth-child(4),#productionTable tbody td:nth-child(5),#productionTable tbody td:last-child{background:#f1f3f5!important}
  #productionTable tbody td:nth-child(1){font-weight:800!important;color:#073b35!important}
  #productionTable tbody td:nth-child(2),#productionTable tbody td:nth-child(3){color:#475569!important}
  #productionTable tbody td:last-child{border-bottom:0!important;display:flex!important;flex-wrap:wrap!important;gap:4px!important;padding-top:7px!important;padding-bottom:7px!important}
  #productionTable tbody td:last-child:before{display:none!important;content:none!important}
  #productionTable tbody td:last-child a,#productionTable tbody td:last-child button{display:inline-flex!important;width:auto!important;height:28px!important;min-height:28px!important;margin:0!important;padding:3px 8px!important;white-space:nowrap!important;font-size:11px!important;line-height:1!important}
  #productionTable tbody td:last-child form{display:inline-flex!important;margin:0!important}
  /* Preserve the original rounded status colors. */
  #productionTable tbody td:nth-child(4) .status,#productionTable tbody td:nth-child(5) .status{display:inline-block!important;border-radius:999px!important;padding:4px 9px!important;white-space:nowrap!important;font-weight:700!important}
  #productionTable tbody td:nth-child(4) .status-banNhap{background:#f1f5f9!important;color:#64748b!important}
  #productionTable tbody td:nth-child(4) .status-chopheduyet{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td:nth-child(4) .status-dapheduyet{background:#d1fae5!important;color:#047857!important}
  #productionTable tbody td:nth-child(5) .status-chuaday{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td:nth-child(5) .status-daduyet{background:#d1fae5!important;color:#047857!important}
  #productionTable tbody td:nth-child(5) .status-dangday{background:#dbeafe!important;color:#1d4ed8!important}
  #productionTable tbody td:nth-child(5) .status-loi{background:#ffe4e6!important;color:#be123c!important}
}

/* Exact requested mobile card: white info row; status badges on one gray row; actions right on gray row. */
@media (max-width:600px){
  #productionTable tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;grid-auto-rows:auto!important;gap:0!important;padding:0!important;background:#fff!important;border:1px solid #e1e5e8!important;border-radius:10px!important;overflow:hidden!important}
  #productionTable tbody td{display:flex!important;align-items:center!important;width:auto!important;min-height:32px!important;height:auto!important;margin:0!important;padding:7px 8px!important;border:0!important;background:#fff!important;white-space:nowrap!important;overflow:visible!important}
  #productionTable tbody td:nth-child(1){grid-column:1;grid-row:1;justify-content:flex-start;font-weight:800!important;color:#073b35!important}
  #productionTable tbody td:nth-child(2){grid-column:2;grid-row:1;justify-content:center;color:#475569!important}
  #productionTable tbody td:nth-child(3){grid-column:3;grid-row:1;justify-content:flex-end;color:#475569!important}
  #productionTable tbody td.production-status-cell{grid-column:1;grid-row:2;background:#f1f3f5!important;justify-content:flex-start}
  #productionTable tbody td.production-sync-cell{grid-column:2;grid-row:2;background:#f1f3f5!important;justify-content:flex-start}
  #productionTable tbody td.production-actions-cell{grid-column:1 / -1;grid-row:3;background:#f1f3f5!important;justify-content:flex-end;flex-wrap:nowrap;gap:4px;border-top:1px solid #e0e4e7!important}
  #productionTable tbody td.production-actions-cell:before{display:none!important;content:none!important}
  #productionTable tbody td.production-actions-cell a,#productionTable tbody td.production-actions-cell button{display:inline-flex!important;align-items:center!important;width:auto!important;height:28px!important;min-height:28px!important;margin:0!important;padding:3px 8px!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important}
  #productionTable tbody td.production-actions-cell form{display:inline-flex!important;margin:0!important}
  #productionTable tbody td.production-status-cell .status,#productionTable tbody td.production-sync-cell .status{display:inline-block!important;padding:4px 9px!important;border-radius:999px!important;white-space:nowrap!important}
  /* Keep original badge colors: draft gray, not pushed yellow, approved green. */
  #productionTable tbody td.production-status-cell .status-banNhap{background:#f1f5f9!important;color:#64748b!important}
  #productionTable tbody td.production-status-cell .status-chopheduyet{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td.production-status-cell .status-dapheduyet{background:#d1fae5!important;color:#047857!important}
  #productionTable tbody td.production-sync-cell .status-chuaday{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td.production-sync-cell .status-daduyet{background:#d1fae5!important;color:#047857!important}
  #productionTable tbody td.production-sync-cell .status-dangday{background:#dbeafe!important;color:#1d4ed8!important}
  #productionTable tbody td.production-sync-cell .status-loi{background:#ffe4e6!important;color:#be123c!important}
  #productionTable:not(.has-google-status) tbody td.production-status-cell{grid-column:1 / -1!important}
  #productionTable:not(.has-google-status) tbody td.production-actions-cell{grid-row:3!important}
}

/* Final requested mobile card layout: one compact card, white information/actions, subtle status strip. */
@media (max-width:600px){
  #productionTable tbody tr{
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    gap:0!important;
    padding:0!important;
    background:#fff!important;
    border:1px solid #e2e8f0!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  #productionTable tbody td{
    display:flex!important;
    align-items:center!important;
    width:auto!important;
    min-height:32px!important;
    height:auto!important;
    margin:0!important;
    padding:7px 8px!important;
    border:0!important;
    background:#fff!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  /* Mã phiếu – Ngày – Số mặt hàng: balanced on one white row. */
  #productionTable tbody td:nth-child(1){grid-column:1;grid-row:1;justify-content:flex-start;font-weight:800!important;color:#073b35!important}
  #productionTable tbody td:nth-child(2){grid-column:2;grid-row:1;justify-content:center;color:#475569!important}
  #productionTable tbody td:nth-child(3){grid-column:3;grid-row:1;justify-content:flex-end;color:#475569!important;padding-right:10px!important}
  /* Both badges share one subtle status row; do not color the whole card. */
  #productionTable tbody td.production-status-cell,
  #productionTable tbody td.production-sync-cell{
    grid-row:2!important;
    background:#f8fafc!important;
    justify-content:flex-start!important;
    border-top:1px solid #eef2f4!important;
    border-bottom:1px solid #eef2f4!important;
  }
  #productionTable tbody td.production-status-cell{grid-column:1!important}
  #productionTable tbody td.production-sync-cell{grid-column:2 / 4!important}
  /* Actions remain on a white row, aligned right. */
  #productionTable tbody td.production-actions-cell{
    grid-column:1 / -1!important;grid-row:3!important;
    justify-content:flex-end!important;flex-wrap:nowrap!important;gap:4px!important;
    background:#fff!important;border:0!important;
    padding:6px 8px!important;
  }
  #productionTable tbody td.production-actions-cell:before{display:none!important;content:none!important}
  #productionTable tbody td.production-actions-cell a,
  #productionTable tbody td.production-actions-cell button{
    display:inline-flex!important;align-items:center!important;width:auto!important;height:28px!important;min-height:28px!important;
    margin:0!important;padding:3px 7px!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important;
  }
  #productionTable tbody td.production-actions-cell form{display:inline-flex!important;margin:0!important}
  #productionTable tbody td.production-status-cell .status,
  #productionTable tbody td.production-sync-cell .status{
    display:inline-block!important;padding:4px 9px!important;border-radius:999px!important;white-space:nowrap!important;font-weight:700!important;font-size:10px!important;
  }
  /* Original badge palette: draft gray, not pushed yellow, approved green. */
  #productionTable tbody td.production-status-cell .status-banNhap{background:#f1f5f9!important;color:#64748b!important}
  #productionTable tbody td.production-status-cell .status-chopheduyet{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td.production-status-cell .status-dapheduyet{background:#d1fae5!important;color:#047857!important}
  #productionTable tbody td.production-sync-cell .status-chuaday{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td.production-sync-cell .status-daduyet{background:#d1fae5!important;color:#047857!important}
  #productionTable tbody td.production-sync-cell .status-dangday{background:#dbeafe!important;color:#1d4ed8!important}
  #productionTable tbody td.production-sync-cell .status-loi{background:#ffe4e6!important;color:#be123c!important}
}

/* Last visual correction: card and all rows stay white; only the first info row may be very light blue. */
@media (max-width:600px){
  #productionTable tbody tr{display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;gap:0!important;padding:0!important;background:#fff!important;border:1px solid #e2e8f0!important;border-radius:10px!important;overflow:hidden!important}
  #productionTable tbody td{display:flex!important;align-items:center!important;min-height:32px!important;height:auto!important;margin:0!important;border:0!important;background:#fff!important;color:#475569!important;padding:7px 8px!important;white-space:nowrap!important;overflow:visible!important}
  #productionTable tbody td:nth-child(1){grid-column:1;grid-row:1;justify-content:flex-start;background:#f8fbff!important;color:#073b35!important;font-weight:800!important}
  #productionTable tbody td:nth-child(2){grid-column:2;grid-row:1;justify-content:center;background:#f8fbff!important}
  #productionTable tbody td:nth-child(3){grid-column:3;grid-row:1;justify-content:flex-end;background:#f8fbff!important;padding-right:12px!important}
  #productionTable tbody td.production-status-cell{grid-column:1;grid-row:2;justify-content:flex-start}
  #productionTable tbody td.production-sync-cell{grid-column:2 / 4;grid-row:2;justify-content:flex-start}
  #productionTable tbody td.production-actions-cell{grid-column:1 / -1;grid-row:3;justify-content:flex-end;gap:4px;border-top:1px solid #eef2f4!important;flex-wrap:nowrap}
  #productionTable tbody td.production-actions-cell:before{display:none!important}
  #productionTable tbody td.production-actions-cell a,#productionTable tbody td.production-actions-cell button{display:inline-flex!important;width:auto!important;height:28px!important;min-height:28px!important;margin:0!important;padding:3px 8px!important;font-size:11px!important;white-space:nowrap!important}
  #productionTable tbody td.production-actions-cell form{display:inline-flex!important;margin:0!important}
  #productionTable tbody td .status{display:inline-block!important;border-radius:999px!important;padding:4px 9px!important;white-space:nowrap!important;font-size:10px!important}
  #productionTable tbody td.production-status-cell .status-banNhap{background:#f1f5f9!important;color:#64748b!important}
  #productionTable tbody td.production-sync-cell .status-chuaday{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td.production-status-cell .status-chopheduyet{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td.production-status-cell .status-dapheduyet,#productionTable tbody td.production-sync-cell .status-daduyet{background:#d1fae5!important;color:#047857!important}
}

/* VERIFIED FINAL OVERRIDE: production cards are completely white. */
@media (max-width:600px){
  .production-list-mobile,
  .production-list-mobile table,
  .production-list-mobile tbody,
  .production-list-mobile tbody tr,
  .production-list-mobile tbody td,
  #productionTable,
  #productionTable tbody,
  #productionTable tbody tr,
  #productionTable tbody td,
  #productionTable.table-striped>tbody>tr:nth-of-type(odd)>*,
  #productionTable.table-striped>tbody>tr:nth-of-type(even)>*{
    background-color:#fff!important;
    background:#fff!important;
  }
  #productionTable tbody tr{border:1px solid #e2e8f0!important;border-radius:10px!important;box-shadow:none!important}
  #productionTable tbody td.production-status-cell,
  #productionTable tbody td.production-sync-cell{background:#fff!important;border-top:1px solid #f1f5f9!important;border-bottom:1px solid #f1f5f9!important}
  #productionTable tbody td.production-actions-cell{background:#fff!important;border-top:1px solid #f1f5f9!important}
  #productionTable tbody td .status-banNhap{background:#f1f5f9!important;color:#64748b!important}
  #productionTable tbody td .status-chopheduyet{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td .status-dapheduyet{background:#d1fae5!important;color:#047857!important}
  #productionTable tbody td .status-chuaday{background:#fef3c7!important;color:#b45309!important}
  #productionTable tbody td .status-daduyet{background:#d1fae5!important;color:#047857!important}
}

/* Highest-specificity white surface for production mobile cards. */
@media (max-width:600px){
  main.content .production-list-mobile,
  main.content .production-list-mobile > table,
  main.content .production-list-mobile > table > tbody,
  main.content .production-list-mobile > table > tbody > tr,
  main.content .production-list-mobile > table > tbody > tr > td,
  main.content .production-list-mobile > table.table-striped > tbody > tr:nth-of-type(odd) > td,
  main.content .production-list-mobile > table.table-striped > tbody > tr:nth-of-type(even) > td{
    background:#fff!important;background-color:#fff!important;
  }
  main.content .production-list-mobile > table > tbody > tr > td.production-status-cell,
  main.content .production-list-mobile > table > tbody > tr > td.production-sync-cell{
    background:#fff!important;background-color:#fff!important;
  }
  main.content .production-list-mobile > table > tbody > tr > td.production-actions-cell{
    background:#fff!important;background-color:#fff!important;
  }
}

/* Audit filter matches Production/Report filter: compact card, aligned controls. */
.audit-filter-form{border:1px solid #e5e7eb;border-radius:10px}
.audit-filter-row{display:flex!important;flex-wrap:nowrap!important;align-items:flex-end!important}
.audit-filter-row .audit-search-field{flex:1 1 30%!important;width:auto!important}
.audit-filter-row .audit-date-field{flex:0 0 18%!important;width:auto!important}
.audit-filter-row .audit-pagesize-field{flex:0 0 15%!important;width:auto!important}
.audit-filter-row .audit-submit-field{flex:0 0 75px!important;width:auto!important}
.audit-filter-row .form-label{font-size:12px;font-weight:600;margin-bottom:4px;color:#475569}
.audit-filter-row .form-control,.audit-filter-row .form-select,.audit-filter-row .btn{min-height:38px}
@media(max-width:600px){
 .audit-filter-row{flex-wrap:wrap!important;gap:8px!important}
 .audit-filter-row .audit-search-field{flex:0 0 100%!important;width:100%!important;padding:0!important}
 .audit-filter-row .audit-date-field{flex:0 0 calc(50% - 4px)!important;width:calc(50% - 4px)!important;padding:0!important}
 .audit-filter-row .audit-pagesize-field{flex:1 1 0!important;width:auto!important;padding:0!important}
 .audit-filter-row .audit-submit-field{flex:0 0 52px!important;width:52px!important;padding:0!important}
 .audit-filter-row .form-label{font-size:10px!important;white-space:nowrap}
 .audit-filter-row .form-control,.audit-filter-row .form-select,.audit-filter-row .btn{min-height:34px!important;font-size:11px!important;padding:5px 7px!important}
}
#notificationWrap{position:relative;margin-left:auto}#notificationBell{border:0;background:transparent;color:#0b6b5a;font-size:20px;cursor:pointer;padding:6px}#notificationCount{background:#dc2626;color:#fff;border-radius:999px;padding:2px 6px;font-size:10px}.notification-panel{display:block}#notificationPanel{position:absolute;right:0;top:42px;width:340px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 12px 30px #0f172a25;z-index:100;padding:8px}.notification-panel-head{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #eef2f4}.notification-panel-head button{border:0;background:none;font-size:20px}.notification-item{padding:10px;border-bottom:1px solid #eef2f4;cursor:pointer}.notification-item:hover,.notification-item.unread{background:#f0faf7}.notification-item p{margin:4px 0;font-size:12px}.notification-item small{color:#94a3b8;font-size:10px}#notificationMore{width:100%;border:0;background:#f8fafc;padding:9px;color:#0b6b5a;font-weight:700;cursor:pointer}
@media(min-width:801px){.mobile-header{display:flex;height:64px;background:#fff;border-bottom:1px solid #e2e8f0;align-items:center;padding:0 28px;position:sticky;top:0;z-index:20}.mobile-header .hamburger{display:none}.mobile-header>b{display:none}.mobile-header #themeToggle{margin-left:12px}.mobile-header #notificationWrap{margin-left:auto}}
@media(max-width:800px){
  .mobile-header #notificationWrap{order:3!important;margin-left:auto!important;display:flex!important;align-items:center!important;position:relative!important;z-index:25!important;flex:0 0 auto!important}
  .mobile-header #notificationBell{display:inline-flex!important;align-items:center!important;justify-content:center!important;visibility:visible!important;opacity:1!important;width:42px!important;height:42px!important;padding:4px!important}
  .mobile-header #themeToggle{order:4!important;flex:0 0 auto!important;margin-left:0!important}
  .mobile-header{padding-left:12px!important;padding-right:8px!important;gap:4px!important}
  #notificationPanel{right:0!important;top:44px!important}
}

.mobile-only {
    display: none !important;
}

@media (max-width: 800px) {
    .mobile-only {
        display: block !important;
    }
}

/* Hiện trên desktop, ẩn trên mobile */
.desktop-only {
    display: block !important;
}

@media (max-width: 800px) {
    .desktop-only {
        display: none !important;
    }
}


.font-14{
    font-size:14px;
}

.pd-0{
    padding-left:0
}