*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --purple:#53277C;
  --purple-dark:#3d1c5e;
  --purple-light:#f4f0f9;
  --gold:#FFC000;
  --dark:#231F20;
  --grey:#666;
  --border:#d8cce8;
  --white:#fff;
  --success:#1a7431;
  --danger:#c0392b;
}

html{
  font-size:14px;
  overflow-x:hidden;
}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:#f0ecf7;
  color:var(--dark);
  min-height:100vh;
  overflow-x:hidden;
  max-width:100vw;
}

.hidden{
  display:none!important;
}

/* LOGIN */

#login-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:linear-gradient(135deg,#3d1c5e 0%,#fff 50%,#8b5fb5 100%);
}

.login-card{
  background:var(--white);
  border-radius:10px;
  width:360px;
  box-shadow:0 8px 40px rgba(0,0,0,.25);
  overflow:hidden;
}

.login-header{
  background:var(--purple);
  color:var(--white);
  padding:24px 28px 18px;
}

.login-header h1{
  font-size:20pt;
}

.login-header p{
  font-size:9pt;
  opacity:.8;
  margin-top:2px;
}

.login-body{
  padding:28px;
}

.login-body label{
  display:block;
  font-size:9pt;
  color:var(--purple);
  font-weight:bold;
  margin-bottom:4px;
}

.login-body input{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:11pt;
  margin-bottom:14px;
}

.login-body input:focus{
  outline:2px solid var(--purple);
  border-color:var(--purple);
}

.login-error{
  background:#fde8e8;
  color:var(--danger);
  padding:9px 12px;
  border-radius:4px;
  font-size:9pt;
  margin-bottom:12px;
  display:none;
}

.btn-primary{
  background:var(--purple);
  color:var(--white);
  border:none;
  border-radius:4px;
  padding:11px 20px;
  font-size:11pt;
  cursor:pointer;
  width:100%;
  margin-top:4px;
}

.btn-primary:hover{
  background:var(--purple-dark);
}

#mfa-screen{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:linear-gradient(135deg,#3d1c5e 0%,#fff 50%,#8b5fb5 100%);
}

/* MODALS */

.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:100;
  align-items:center;
  justify-content:center;
}

.modal-overlay.open{
  display:flex;
}

.modal-box{
  background:#fff;
  border-radius:8px;
  width:360px;
  max-width:95vw;
  overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.3);
}

.modal-head{
  background:var(--purple);
  color:#fff;
  padding:14px 20px;
  font-weight:bold;
}

.modal-body{
  padding:20px;
}

.modal-foot{
  padding:0 20px 18px;
  display:flex;
  gap:10px;
}

/* APP SHELL */

#app-screen{
  display:none;
  min-height:100vh;
  flex-direction:column;
}

#app-screen.visible{
  display:flex;
}

.gold-bar{
  background:var(--gold);
  height:4px;
  flex-shrink:0;
}

.top-bar{
  background:var(--purple);
  color:var(--white);
  display:flex;
  align-items:center;
  padding:0 16px;
  height:56px;
  gap:12px;
  flex-shrink:0;
  z-index:50;
  flex-wrap:nowrap;
}

.top-bar img{
  height:36px;
  width:auto;
  object-fit:contain;
  border-radius:3px;
  flex-shrink:0;
}

.top-bar-title{
  font-size:12pt;
  font-weight:bold;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.top-bar-badge{
  background:var(--gold);
  color:var(--dark);
  font-size:8pt;
  font-weight:bold;
  padding:2px 8px;
  border-radius:10px;
}

.top-bar span.user{
  font-size:9pt;
  opacity:.8;
}

.top-bar button{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  color:var(--white);
  padding:5px 12px;
  border-radius:4px;
  cursor:pointer;
  font-size:9pt;
  white-space:nowrap;
}

.top-bar button:hover{
  background:rgba(255,255,255,.28);
}

.top-bar .top-bar-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}

.hamburger{
  display:none;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  padding:4px;
  background:none;
  border:none;
  margin-right:4px;
}

.hamburger span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
}

/* LAYOUT */

.app-body{
  display:flex;
  flex:1;
  overflow:hidden;
  min-height:calc(100vh - 60px);
}

.sidebar{
  width:210px;
  flex-shrink:0;
  background:var(--white);
  border-right:2px solid var(--border);
  padding:16px 0;
  overflow-y:auto;
  transition:transform .25s;
  z-index:40;
}

.sidebar-section{
  font-size:8pt;
  font-weight:bold;
  color:var(--grey);
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:14px 20px 5px;
}

.sidebar-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 20px;
  cursor:pointer;
  font-size:10pt;
  color:var(--dark);
  border-left:3px solid transparent;
  transition:all .1s;
  user-select:none;
}

.sidebar-item:hover{
  background:var(--purple-light);
  color:var(--purple);
}

.sidebar-item:hover .icon{
  background:var(--purple);
  color:#fff;
}

.sidebar-item.active{
  background:var(--purple-light);
  color:var(--purple);
  font-weight:bold;
  border-left-color:var(--purple);
}

.sidebar-item.active .icon{
  background:var(--purple);
  color:#fff;
}

.sidebar-item .icon{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#e9e4f1;
  color:var(--grey);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .1s,color .1s;
}

.sidebar-item .icon svg{
  width:15px;
  height:15px;
  display:block;
}

.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:39;
}

.main-content{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:32px 24px 40px;
  min-width:0;
}

.panel{
  display:none;
  width:100%;
}

.panel.active{
  display:block;
}

.page-title{
  font-size:15pt;
  font-weight:bold;
  color:var(--purple);
  margin-bottom:3px;
}

.page-sub{
  font-size:9pt;
  color:var(--grey);
  margin-bottom:20px;
}

/* CARDS */

.card{
  background:var(--white);
  border-radius:8px;
  box-shadow:0 2px 10px rgba(83,39,124,.08);
  margin-bottom:20px;
  overflow:hidden;
}

.card-head{
  background:var(--purple);
  color:var(--white);
  padding:12px 18px;
  font-size:11pt;
  font-weight:bold;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.card-body{
  padding:18px;
}

/* FORMS */

.form-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
  margin-bottom:14px;
  align-items:end;
}

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group label,
.card-body label,
.line-row label{
  display:block;
  font-size:9pt;
  color:var(--purple);
  font-weight:bold;
  margin-bottom:4px;
}

.form-group input,
.form-group select,
.form-group textarea,
.card-body input,
.card-body select,
.card-body textarea,
.modal-body input,
.modal-body select,
.modal-body textarea{
  width:100%;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:10pt;
  font-family:Arial,Helvetica,sans-serif;
  background:#fff;
  color:var(--dark);
  min-height:36px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.card-body input:focus,
.card-body select:focus,
.card-body textarea:focus,
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus{
  outline:2px solid var(--purple-light);
  border-color:var(--purple);
}

textarea,
.card-body textarea{
  min-height:48px;
  resize:vertical;
}

.section-label{
  font-size:9pt;
  font-weight:bold;
  color:var(--grey);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:8px;
  margin-top:4px;
  border-bottom:1px solid var(--border);
  padding-bottom:4px;
}

/* BUTTONS */

.btn{
  padding:9px 20px;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:10pt;
}

.btn-sm,
.btn-small{
  padding:5px 12px;
  font-size:9pt;
}

.btn-purple{
  background:var(--purple);
  color:var(--white);
}

.btn-purple:hover{
  background:var(--purple-dark);
}

.btn-gold{
  background:var(--gold);
  color:var(--dark);
}

.btn-danger{
  background:var(--danger);
  color:var(--white);
}

.btn-outline{
  background:transparent;
  border:1px solid var(--border);
  color:var(--grey);
}

.btn-outline:hover{
  border-color:var(--purple);
  color:var(--purple);
}

/* ALERTS */

.alert{
  padding:10px 14px;
  border-radius:4px;
  font-size:9pt;
  margin-bottom:12px;
  display:none;
}

.alert-success{
  background:#e8f8ea;
  color:var(--success);
  border:1px solid #a9dfb4;
}

.alert-error{
  background:#fde8e8;
  color:var(--danger);
  border:1px solid #f5b7b1;
}

/* TABLES */

table,
.table{
  width:100%;
  border-collapse:collapse;
  font-size:9pt;
}

th,
.table th{
  background:var(--purple);
  color:var(--white);
  padding:8px 10px;
  text-align:left;
}

td,
.table td{
  padding:7px 10px;
  border-bottom:1px solid #ede8f5;
  vertical-align:middle;
}

tr:nth-child(even) td{
  background:#f9f7fd;
}

tr:hover td{
  background:#f0ecf7;
}

/* ADVICE NOTE LINES */

.line-row{
  display:grid;
  grid-template-columns:minmax(260px,2fr) minmax(90px,.7fr) minmax(260px,2fr) minmax(120px,.8fr) minmax(120px,.8fr) auto;
  gap:10px;
  align-items:end;
  margin-bottom:10px;
  padding:10px;
  background:#faf8fd;
  border:1px solid #e5dcef;
  border-radius:6px;
}

.line-row .form-group{
  margin:0;
}

.line-row .btn,
.line-row button{
  min-height:36px;
  align-self:end;
}

/* USER COMPONENTS */

.ei{
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:9pt;
  font-family:Arial,Helvetica,sans-serif;
  background:#fff;
}

.ei:focus{
  outline:1px solid var(--purple);
  border-color:var(--purple);
}

.badge-active{
  background:#e8f8ea;
  color:var(--success);
  padding:2px 9px;
  border-radius:10px;
  font-size:8pt;
  font-weight:bold;
}

.badge-inactive{
  background:#f5f5f5;
  color:#999;
  padding:2px 9px;
  border-radius:10px;
  font-size:8pt;
  font-weight:bold;
}

.user-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  align-items:center;
}

.mfa-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-size:9pt;
}

.mfa-toggle input{
  accent-color:var(--purple);
  width:15px;
  height:15px;
  cursor:pointer;
}

.mfa-toggle span{
  color:var(--success);
  font-weight:bold;
}

.checkbox-field{
  justify-content:end;
}

.checkbox-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:36px!important;
  margin:0!important;
  font-size:10pt!important;
  color:var(--dark)!important;
  font-weight:normal!important;
  cursor:pointer;
  white-space:nowrap;
}

.checkbox-label input[type="checkbox"],
.card-body label input[type="checkbox"]{
  width:15px!important;
  min-width:15px!important;
  max-width:15px!important;
  height:15px!important;
  min-height:15px!important;
  max-height:15px!important;
  padding:0!important;
  margin:0!important;
  accent-color:var(--purple);
}

/* ASSETS AND PAGINATION */

.asset-table-meta{
  font-size:9pt;
  color:var(--grey);
  margin:6px 0 10px;
}

.pagination{
  margin-top:0;
}

.quote-pager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:#faf8fd;
  border-top:1px solid var(--border);
  padding:10px 12px;
  font-size:9pt;
}

.quote-pager-info{
  color:var(--grey);
  white-space:nowrap;
}

.quote-pager-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  flex-wrap:nowrap;
  margin-left:auto;
}

.quote-pager-label{
  color:var(--grey);
  margin-right:2px;
  white-space:nowrap;
}

.quote-rows-select,
.card-body .quote-rows-select,
#asset-pagination .quote-rows-select,
#notes-pagination .quote-rows-select{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  height:28px!important;
  min-height:28px!important;
  padding:3px 6px!important;
  border:1px solid var(--border);
  border-radius:4px;
  background:#fff;
  color:var(--dark);
  font-size:9pt;
}

.quote-page-btn{
  min-height:28px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--purple);
  border-radius:4px;
  padding:4px 8px;
  font-size:9pt;
  cursor:pointer;
  font-weight:bold;
  white-space:nowrap;
}

.quote-page-btn:hover:not(:disabled){
  background:var(--purple-light);
  border-color:var(--purple);
}

.quote-page-btn.active{
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
}

.quote-page-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  color:#aaa;
}

.quote-page-gap{
  color:var(--grey);
  padding:0 3px;
}

/* ADVICE NOTE ASSET AUTOCOMPLETE */

.asset-picker{
  position:relative;
}

.asset-search-results{
  display:none;
  position:absolute;
  z-index:200;
  left:0;
  right:0;
  top:calc(100% + 3px);
  max-height:260px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

.asset-search-results.open{
  display:block;
}

.asset-result{
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid #eee;
  background:#fff;
  color:var(--dark);
  text-align:left;
  padding:8px 10px;
  cursor:pointer;
  font-size:9pt;
}

.asset-result:hover,
.asset-result.highlight{
  background:var(--purple-light);
}

.asset-result strong{
  display:block;
  color:var(--purple);
  font-size:9.5pt;
}

.asset-result span{
  display:block;
  color:var(--dark);
  margin-top:2px;
}

.asset-result em{
  display:block;
  color:var(--grey);
  font-style:normal;
  font-size:8pt;
  margin-top:2px;
}

.asset-result.muted-result{
  cursor:default;
  color:var(--grey);
  background:#fafafa;
}

/* RESPONSIVE */

@media(max-width:1100px){
  .line-row{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:1024px){
  .quote-pager{
    align-items:flex-start;
    flex-direction:column;
  }

  .quote-pager-controls{
    justify-content:flex-start;
    flex-wrap:wrap;
    margin-left:0;
  }
}

@media(max-width:1024px){
  .hamburger{
    display:flex;
  }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    padding-top:110px;
    transform:translateX(-100%);
    box-shadow:4px 0 20px rgba(0,0,0,.2);
  }

  .sidebar.open{
    transform:translateX(0);
  }

  .sidebar-overlay.open{
    display:block;
  }

  .top-bar{
    height:auto;
    min-height:56px;
    flex-wrap:wrap;
    padding:8px 12px;
    row-gap:6px;
  }

  .top-bar-title{
    font-size:11pt;
    flex:1 1 auto;
  }

  .top-bar span.user{
    display:none;
  }

  .top-bar-badge{
    display:none;
  }

  .top-bar .top-bar-actions{
    order:3;
    width:100%;
    justify-content:flex-end;
    border-top:1px solid rgba(255,255,255,.15);
    padding-top:6px;
    margin-top:2px;
    flex-wrap:wrap;
  }

  .top-bar .top-bar-actions button{
    padding:6px 10px;
    font-size:9pt;
    flex:1 1 auto;
    min-width:0;
  }

  .main-content{
    padding:20px 16px 32px;
  }

  .form-row,
  .line-row{
    grid-template-columns:1fr;
  }

  td,
  th{
    padding:5px 7px;
    font-size:8.5pt;
  }
}


/* Site autocomplete */
.site-picker {
  position: relative;
}

.site-search-results {
  display: none;
  position: absolute;
  z-index: 220;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.site-search-results.open {
  display: block;
}

.site-result {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  color: var(--dark);
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 9pt;
}

.site-result:hover,
.site-result.highlight {
  background: var(--purple-light);
}

.site-result strong {
  display: block;
  color: var(--purple);
  font-size: 9.5pt;
}

.site-result span {
  display: block;
  color: var(--dark);
  margin-top: 2px;
}

.site-result em {
  display: block;
  color: var(--grey);
  font-style: normal;
  font-size: 8pt;
  margin-top: 2px;
}

.site-result.muted-result {
  cursor: default;
  color: var(--grey);
  background: #fafafa;
}

/* Final button spacing adjustments */

/* Stock Issue: give the Save button breathing room below + Add line */
#panel-advice .card-body > p {
  margin-top: 18px;
  margin-bottom: 0;
}

/* Stock Issue Log, Depots and Users: keep Refresh buttons clear of the purple card banner and table */
#panel-notes .card-body > button.btn-outline:first-child,
#panel-depots .card-body > button.btn-outline:first-child,
#panel-users .card-body > button.btn-outline:first-child {
  display: inline-block;
  margin-top: 2px;
  margin-bottom: 14px;
}

/* Stock Issue read-only date field */
#panel-advice #note-date[readonly] {
  background: #eeeeee !important;
  color: #555 !important;
  cursor: not-allowed;
  border-color: #d0d0d0 !important;
}

/* Locked Stock Issue line fields */
.stock-picker-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}

.stock-picker-wrap .asset-search-input {
  flex: 1;
}

.locked-field,
.line-desc[readonly],
.asset-search-input[readonly],
select.locked-field:disabled,
#depot-select.locked-field:disabled {
  background: #eeeeee !important;
  color: #555 !important;
  cursor: not-allowed;
  border-color: #d0d0d0 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #555 !important;
}

.stock-change-btn {
  white-space: nowrap;
}

/* Mobile/table horizontal scrolling */
.card-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.card {
  max-width: 100%;
}

.card-body table {
  min-width: 900px;
}

.card-body th,
.card-body td {
  white-space: nowrap;
}

/* Keep long description/address cells readable without forcing the whole table too wide */
.card-body td:nth-child(3),
.card-body td:nth-child(4) {
  white-space: normal;
  min-width: 180px;
}

/* Show a subtle scroll affordance on smaller screens */
@media (max-width: 1024px) {
  .card-body {
    padding-bottom: 20px;
  }

  .card-body table {
    min-width: 980px;
  }

  #panel-users table {
    min-width: 1000px;
  }

  #panel-notes table,
  #panel-depots table,
  #panel-assets table,
  #panel-stores-sites table {
    min-width: 1000px;
  }

  .user-actions {
    flex-wrap: nowrap;
  }
}

/* Stock Issue: Notes + Signature side-by-side 50/50 grid (stacks on mobile) */
.advice-sign-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 6px;
  max-width: 1200px;
}

/* Notes panel — sized to be approximately half the depth of the signature pad. */
.advice-notes-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 0;
}

.advice-notes-group textarea {
  min-height: 110px;
  height: 110px;
  resize: vertical;
  font-family: inherit;
  font-size: 10pt;
  line-height: 1.45;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.advice-notes-group textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(83, 39, 124, 0.12);
}

/* Stock Issue signature capture */
.signature-box {
  margin-top: 0;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.signature-declaration {
  font-size: 9.5pt;
  color: var(--dark);
  line-height: 1.45;
  margin: 0 0 8px;
}

.signature-instructions {
  font-size: 9pt;
  color: var(--grey);
  margin-bottom: 6px;
}

.signature-pad {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 220px;
  background: #fff;
  border: 2px dashed var(--border);
  border-radius: 6px;
  touch-action: none;
}

/* Save (left) + Clear signature (right) on one row beneath the grid. */
.advice-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  max-width: 1200px;
  flex-wrap: wrap;
}

/* Mobile/Tablet: stack the grid so we get
   Notes → Declaration → "Signature is required" → Canvas → Save + Clear.
   The declaration lives inside .signature-box, so this ordering happens
   naturally when the columns collapse to one. */
@media (max-width: 1024px) {
  .advice-sign-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .advice-notes-group textarea {
    min-height: 110px;
    height: 110px;
  }
}

/* MFA countdown — now a <span> inside the "Code expires in" line */
#mfa-countdown {
  font-weight: bold;
  color: var(--purple);
}

#mfa-countdown.expired {
  color: var(--danger);
}

/* Role visibility and panel display */
.panel {
  display: none;
}

.panel.active {
  display: block;
}

.admin-only {
  display: none;
}

body.is-admin .sidebar-item.admin-only {
  display: flex;
}

body.is-admin .panel.admin-only.active {
  display: block;
}

body.is-standard .admin-only {
  display: none !important;
}

/* Supervisor + admin visibility (Stock and Stock Issue Log). */
.supervisor-or-admin {
  display: none;
}

body.is-admin .sidebar-item.supervisor-or-admin,
body.is-supervisor .sidebar-item.supervisor-or-admin {
  display: flex;
}

body.is-admin .panel.supervisor-or-admin.active,
body.is-supervisor .panel.supervisor-or-admin.active {
  display: block;
}

body.is-standard .supervisor-or-admin {
  display: none !important;
}

/* Edit User modal: depot checklist + default depot select */
.depot-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--border, #d8cce8);
  border-radius: 4px;
  background: #fbfaff;
}

.depot-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10pt;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}

.depot-checklist-item input[type="checkbox"] {
  accent-color: var(--purple, #53277C);
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin: 0;
}

.depot-checklist-id {
  color: var(--grey, #666);
  font-size: 9pt;
  font-weight: normal;
}

.depot-checklist-empty {
  color: var(--grey, #666);
  font-size: 9.5pt;
  font-style: italic;
  padding: 4px 0;
}

/* Stock Issue qty input: avoid browser number spinner auto-repeat */
.line-qty::-webkit-outer-spin-button,
.line-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.line-qty[type="number"] {
  -moz-appearance: textfield;
}




/* Read-only profile identity fields */
.profile-readonly-field,
.readonly-field:disabled,
.readonly-field[readonly] {
  background: #f1f3f5 !important;
  color: #6b7280 !important;
  cursor: not-allowed;
  opacity: 1;
}

.profile-readonly-field:disabled {
  -webkit-text-fill-color: #6b7280;
}

/* Stock Issue Log spacing fix */
#panel-notes .card-body,
#panel-notes .panel-body,
#panel-notes .card-content {
  padding-top: 12px !important;
}

#panel-notes .stock-log-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

#panel-notes .stock-log-actions button,
#panel-notes .stock-log-actions .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#panel-notes .stock-log-actions #stock-issue-export-btn {
  margin-left: auto !important;
}

#panel-notes table {
  width: 100% !important;
  margin-top: 0 !important;
}

/* If the panel content itself is a direct child wrapper instead of card-body */
#panel-notes > .card,
#panel-notes > .panel {
  overflow: hidden;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile horizontal-scroll safety net.

   Symptom: on Stores Users and Stock Issue Log, the whole mobile page
   was scrolling horizontally because the table inside the card forced
   the layout wider than the viewport. We want the table to scroll
   INSIDE its card-body, and the page itself never to scroll sideways.

   Approach:
   1. Hard-block any horizontal scroll at the page level.
   2. Force every box in the chain (.main-content → .panel → .card →
      .card-body) to a definite width tied to the viewport, so the
      table's intrinsic width can't push the chain wider.
   3. Stores Users only has 3 short columns — let it fit naturally on
      mobile without any forced min-width, so no scroll is needed.
   4. Stock Issue Log has 7 columns; keep a sensible min-width on it
      and rely on the card-body acting as a strict scroll container.
   ───────────────────────────────────────────────────────────────────── */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.main-content,
.panel,
.card,
.card-body {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  /* Lock these panels to viewport width so nothing inside can push them. */
  #panel-stores-sites,
  #panel-notes,
  #panel-assets {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #panel-stores-sites .card,
  #panel-notes .card,
  #panel-assets .card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Stores Users (3 columns) — still uses the card-body as the scroll
     container, since it has no filter row or pagination to worry about. */
  #panel-stores-sites .card-body {
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Stock Issue Log and Stock: the card-body must NOT scroll horizontally,
     so the filter row and pagination (rows-per-page selector, page number
     buttons) stay anchored to the viewport. Only the table scrolls, inside
     .table-scroll. */
  #panel-notes .card-body,
  #panel-assets .card-body {
    overflow-x: hidden !important;
    overflow-y: visible;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Stores Users (3 columns: Name, Cost Code, Synced) — fits on mobile
     without any forced minimum width, so no horizontal scroll needed. */
  #panel-stores-sites .card-body table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }

  #panel-stores-sites .card-body th,
  #panel-stores-sites .card-body td {
    min-width: 0 !important;
    white-space: normal;
    word-break: break-word;
  }

  /* Stock Issue Log and Stock filter rows stay viewport-width on mobile. */
  #panel-notes .form-row,
  #panel-notes .stock-log-actions,
  #panel-assets .form-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Pagination on mobile: wrap so the rows-per-page select + page number
     buttons don't get bunched up against the right edge. */
  #panel-notes .pagination,
  #panel-assets .pagination {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #panel-notes .pagination .quote-pager,
  #panel-assets .pagination .quote-pager {
    flex-wrap: wrap;
    gap: 8px;
  }

  #panel-notes .pagination .quote-pager-controls,
  #panel-assets .pagination .quote-pager-controls {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* The table inside .table-scroll keeps its min-width so columns stay
     readable — the wrapper handles overflow. */
  #panel-notes .table-scroll table {
    min-width: 760px;
  }

  #panel-assets .table-scroll table {
    min-width: 760px;
  }
}

/* Dedicated horizontal scroll container for tables that have more columns
   than the viewport can show. Filters and pagination sit OUTSIDE this so
   they stay anchored. Used by Stock Issue Log; available for any future
   table that needs the same treatment. */
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.table-scroll table {
  width: 100%;
  margin: 0;
}
/* REPORTS DASHBOARD
   Admin-only analytics panel. Uses the existing theme variables so the
   dashboard matches the rest of the portal (purple cards, gold/danger accents). */
.reports-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.reports-kpi {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(83, 39, 124, .08);
  padding: 16px 18px;
}

.reports-kpi .kpi-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--purple);
}

.reports-kpi .kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grey);
  margin-top: 4px;
}

.reports-kpi.kpi-failed .kpi-value {
  color: var(--danger);
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.reports-chart-wrap {
  position: relative;
  height: 300px;
}

/* Inline error message shown under a failed Stock Issue Log row, and the
   matching cell styling. Truncates so it never blows out the row height;
   the full text is available in the cell's title tooltip. */
.stock-log-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .reports-chart-wrap {
    height: 260px;
  }
}