:root{
    --bg:#120813;
    --panel:#241126;
    --panel-2:#1b0d1e;
    --line:#5f3b68;
    --text:#fff9fc;
    --muted:#c9b7d7;
    --orange:#8f1658;
    --orange-2:#b72b82;
    --orange-3:#6f0d44;
    --good:#8e6ba4;
    --warn:#c8aaf0;
    --bad:#a62a68;
    --shadow:0 10px 28px rgba(0,0,0,.34);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
  button,input,select,textarea{font:inherit}
  .app{min-height:100vh;display:grid;grid-template-columns:178px minmax(0,1fr)}
  .sidebar{
    background:var(--panel-2);
    border-right:1px solid var(--line);
    padding:18px;
  }
  .brand{
    font-size:22px;
    font-weight:700;
    margin-bottom:4px;
  }
  .brand-sub{
    color:var(--muted);
    font-size:13px;
    margin-bottom:18px;
  }
  .nav-btn{
    width:100%;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--text);
    border-radius:12px;
    padding:12px 14px;
    text-align:left;
    cursor:pointer;
    margin-bottom:10px;
  }
  .nav-btn.active{
    border-color:var(--orange);
    box-shadow:inset 0 0 0 1px var(--orange);
  }
  .content{
    padding:20px;
  }
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
  }
  .page-title{
    font-size:28px;
    font-weight:700;
  }
  .sub{
    color:var(--muted);
    font-size:13px;
  }
  .card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    box-shadow:var(--shadow);
  }
  .grid{
    display:grid;
    gap:16px;
  }
  .grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .grid-2{grid-template-columns:1.2fr 1fr}
  .metrics .metric-num{
    font-size:30px;
    font-weight:700;
    margin-bottom:6px;
  }
  .hidden{display:none !important}
  .row{display:flex;gap:12px;flex-wrap:wrap}
  .field{flex:1 1 220px}
  label{
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-bottom:6px;
  }
  input,select,textarea{
    width:100%;
    border:1px solid var(--line);
    background:#fffaf7;
    color:var(--text);
    border-radius:12px;
    padding:10px 12px;
  }
  textarea{
    min-height:90px;
    resize:vertical;
  }
  .btn{
    border:none;
    border-radius:12px;
    padding:11px 14px;
    cursor:pointer;
    background:var(--orange);
    color:white;
    font-weight:600;
  }
  .btn.secondary{
    background:#f2e7df;
    color:var(--text);
    border:1px solid var(--line);
  }
  .btn.danger {
    background: #c62828;
    color: #ffffff;
    border: 1px solid #c62828;
}

.btn.danger:hover {
    background: #a91f1f;
    color: #ffffff;
    border-color: #a91f1f;
}
  .btn.good{background:#166534}
  .section-title{
    font-size:20px;
    font-weight:700;
    margin:0 0 12px 0;
  }
  table{width:100%;border-collapse:collapse}
  th,td{
    text-align:left;
    padding:10px 8px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
  }
  th{color:var(--muted);font-size:13px}
  .pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:110px;
    padding:5px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    font-size:12px;
    font-weight:700;
    background:#fffaf7;
  }
  .status-Created{color:#fed7aa;border-color:#9a5a2a}
  .status-InProgress{color:#fdba74;border-color:#b16a29}
  .status-WaitingforParts{color:#fcd34d;border-color:#a7790a}
  .status-Completed{color:#86efac;border-color:#267043}
  .status-Cancelled{color:#fca5a5;border-color:#9c3b3b}
  .workorders-shell{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .workorders-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:22px 24px 18px 24px;
  }
  .workorders-divider{
    border-top:1px solid var(--line);
  }
  .wo-stats-strip{
    display:grid;
    grid-template-columns:repeat(6, minmax(95px,1fr));
    gap:0;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    min-width:690px;
    background:#f4ece6;
  }
  .wo-stat{
    padding:10px 14px;
    text-align:center;
    border-right:1px solid var(--line);
  }
  .wo-stat:last-child{border-right:none}
  .wo-stat-num{
    font-size:20px;
    font-weight:700;
    margin-bottom:4px;
  }
  .wo-stat-label{
    font-size:12px;
    color:var(--text);
    line-height:1.1;
  }
  .wo-filter-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:18px;
    padding:16px 24px 12px 24px;
    flex-wrap:wrap;
  }
  .wo-filter-left{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .wo-filter-field{
    min-width:230px;
  }
  .wo-filter-field label{
    display:none;
  }
  .wo-filter-field select,
  .wo-filter-field input{
    background:#fbf6f2;
    border:1px solid var(--line);
    border-radius:12px;
    padding:13px 16px;
    min-height:50px;
  }
  .wo-add-btn{
    min-width:210px;
    min-height:52px;
    border-radius:12px;
    font-size:16px;
  }
  .wo-list{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:10px 24px 12px 24px;
  }
  .wo-header,
  .wo-row{
    display:grid;
    grid-template-columns:1.8fr 190px 190px 170px;
    gap:0;
    align-items:center;
  }
  .wo-header{
    background:#f1dccb;
    border:1px solid var(--line);
    border-bottom:none;
    border-radius:12px 12px 0 0;
    font-weight:700;
    font-size:15px;
  }
  .wo-header > div,
  .wo-row > div{
    padding:12px 16px;
    border-right:1px solid rgba(216,200,188,.7);
  }
  .wo-header > div:last-child,
  .wo-row > div:last-child{
    border-right:none;
  }
  .wo-row{
    background:#f8f2ee;
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    cursor:pointer;
    min-height:50px;
  }
  .wo-row:last-child{
    border-radius:0 0 12px 12px;
  }
  .wo-row:hover{
    background:#f4ece6;
  }
  .wo-title{
    font-weight:400;
    font-size:14px;
    line-height:1.2;
    margin-bottom:0;
  }
  .pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:110px;
    padding:6px 12px;
    border-radius:10px;
    border:none;
    font-size:12px;
    font-weight:700;
    background:#ead8c9;
    color:#5a3e2b;
  }
  .status-Created{background:#ebb865;color:#5b3414}
  .status-InProgress{background:#e8bd6f;color:#5b3414}
  .status-WaitingforParts{background:#d7ccc3;color:#43362d}
  .status-Completed{background:#d7ccc3;color:#3d3129}
  .status-Cancelled{background:#c56622;color:#fffaf6}
  .wo-column-config{
    padding:0 24px 10px 24px;
  }
  .wo-column-config-box{
    border:1px solid var(--line);
    border-radius:12px;
    background:#fbf6f2;
    padding:12px;
  }
  .wo-column-config-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:10px;
    margin-top:10px;
  }
  .wo-col-item{
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px;
    background:#fffaf7;
  }
  .wo-col-item label{
    display:block;
    margin-bottom:6px;
    font-size:12px;
  }
  .wo-col-row{
    display:grid;
    grid-template-columns:1fr 90px;
    gap:8px;
  }
  .wo-column-config-toggle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-weight:700;
  }
  .wo-column-config.hidden-panel .wo-column-config-box-body{
    display:none;
  }
  .wo-location-summary-wrap{
    padding:8px 24px 18px 24px;
  }
  .wo-location-summary-title{
    font-size:16px;
    font-weight:700;
    margin:8px 0 10px 0;
  }
  .wo-location-summary-table{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(120px, 160px);
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    width:max-content;
    max-width:100%;
    background:#f8f2ee;
  }
  .wo-location-col{
    border-right:1px solid var(--line);
  }
  .wo-location-col:last-child{border-right:none}
  .wo-location-head,
  .wo-location-num{
    padding:10px 14px;
    text-align:center;
  }
  .wo-location-head{
    border-bottom:1px solid var(--line);
    background:#f4ece6;
    font-size:14px;
  }
  .wo-location-num{
    font-size:18px;
    font-weight:700;
  }
  .tiny{font-size:12px;color:var(--muted)}
  .modal-backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:100;
  }
  .modal{
    width:min(680px, 100%);
    max-height:90vh;
    overflow:auto;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow);
  }
  .detail-header{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
    margin-bottom:14px;
  }
  .status-buttons{
    display:flex;
    gap:16px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .status-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size:12px;
    color:var(--muted);
    min-width:68px;
  }
  .status-item button{
    width:40px;
    height:40px;
    border-radius:50%;
    border:2px solid var(--orange);
    background:transparent;
    color:var(--orange);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:16px;
    line-height:1;
  }
  .status-item.active button{
    background:var(--orange);
    color:white;
  }
  .status-item span{
    margin-top:6px;
    text-align:center;
  }
  .log-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
  }
  .log-item{
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
    background:#f9f3ef;
  }
  .by-location{
    display:grid;
    gap:12px;
  }
  .location-box{
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px;
    background:#f9f3ef;
  }
  .location-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:10px;
    margin-top:10px;
  }
  .location-stat{
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
    background:#fffaf7;
  }
  .location-stat strong{
    display:block;
    font-size:20px;
    margin-bottom:4px;
  }
  .toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
  }
  .right{display:flex;gap:10px;flex-wrap:wrap}
  .empty{
    color:var(--muted);
    padding:10px 0;
  }
  @media (max-width: 980px){
    .app{grid-template-columns:110px minmax(0,1fr)}
    .sidebar{border-right:1px solid var(--line);border-bottom:none}
    .grid-2{grid-template-columns:1fr}
    .workorders-top{flex-direction:column}
    .wo-stats-strip{min-width:0;width:100%;grid-template-columns:repeat(5,1fr)}
    .wo-filter-row{align-items:stretch}
    .wo-filter-left{width:100%}
    .wo-filter-field{min-width:0;flex:1 1 100%}
    .wo-add-btn{width:100%}
    .wo-header,
    .wo-row{grid-template-columns:1fr}
    .detail-header{flex-direction:column}
    .status-buttons{justify-content:flex-start}
  }

  /* ClawCrazy Work Orders tab */
  .ccwo-shell{
    width:100%;
    background:#241126;
    border:1px solid #5f3b68;
    border-radius:20px;
    color:#fff9fc;
    overflow:visible;
    box-shadow:0 10px 28px rgba(0,0,0,.28);
  }
  .ccwo-top{
    display:block;
    padding:14px 24px;
  }
  .ccwo-brand{
    flex:0 0 165px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
  }
  .ccwo-brand img{
    display:block;
    width:155px;
    max-width:100%;
    height:auto;
  }
  .ccwo-stats{
    width:100%;
    display:grid;
    grid-template-columns:repeat(5,minmax(110px,1fr));
    min-width:0;
    overflow:hidden;
    border:1px solid #5f3b68;
    border-radius:12px;
    background:#261229;
  }
  .ccwo-stat{
    padding:10px 12px;
    text-align:center;
    border-right:1px solid #5f3b68;
    background:#321936;
  }
  .ccwo-stat:last-child{border-right:none}
  .ccwo-stat strong{display:block;font-size:20px;margin-bottom:4px}
  .ccwo-stat span{font-size:12px}
  .ccwo-divider{border-top:1px solid #5f3b68}
  .ccwo-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:16px 24px 12px;
  }
  .ccwo-filters,.ccwo-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .ccwo-filter{position:relative}
  .ccwo-filter-btn{
    min-width:145px;
    min-height:44px;
    padding:10px 14px;
    border:1px solid #5f3b68;
    border-radius:12px;
    background:#321936;
    color:#fff9fc;
    cursor:pointer;
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .ccwo-filter-btn::after{content:"▾";color:#c9b7d7}
  .ccwo-filter-btn.active{
    border-color:#c8aaf0;
    box-shadow:0 0 0 1px #c8aaf0;
  }
  .ccwo-menu{
    display:none;
    position:absolute;
    z-index:250;
    top:calc(100% + 7px);
    left:0;
    width:270px;
    max-height:340px;
    overflow:auto;
    padding:10px;
    border:1px solid #5f3b68;
    border-radius:14px;
    background:#2b152f;
    box-shadow:0 10px 25px rgba(0,0,0,.3);
  }
  .ccwo-filter.open .ccwo-menu{display:block}
  .ccwo-menu-title{font-size:12px;color:#c9b7d7;margin:2px 4px 8px}
  .ccwo-menu-search{
    width:100%;
    margin:0 0 8px;
    padding:9px 10px;
    border:1px solid #5f3b68;
    border-radius:9px;
    background:#321936;
    color:#fff9fc;
    outline:none;
  }
  .ccwo-menu-search:focus{
    border-color:#c8aaf0;
    box-shadow:0 0 0 1px #c8aaf0;
  }
  .ccwo-check{
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 6px;
    border-radius:8px;
    cursor:pointer;
  }
  .ccwo-check:hover{background:#3a2040}
  .ccwo-check input{accent-color:#b72b82}
  .ccwo-menu-empty{
    display:none;
    padding:8px 6px;
    color:#c9b7d7;
    font-size:12px;
  }
  .ccwo-menu-actions{
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding-top:9px;
    margin-top:6px;
    border-top:1px solid #5f3b68;
  }
  .ccwo-link{
    border:none;
    background:transparent;
    color:#efb6d8;
    cursor:pointer;
    padding:6px;
  }
  .ccwo-primary,.ccwo-secondary{
    min-height:44px;
    border-radius:12px;
    padding:11px 16px;
    cursor:pointer;
    font-weight:700;
  }
  .ccwo-primary{border:none;background:#8f1658;color:#fff9fc}
  .ccwo-secondary{border:1px solid #5f3b68;background:#3b2042;color:#fff9fc}
  .ccwo-filter-summary{
    min-height:28px;
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    padding:0 24px 10px;
  }
  .ccwo-chip{
    padding:5px 9px;
    border:1px solid #8e6ba4;
    border-radius:999px;
    background:#4b2553;
    font-size:12px;
  }
  .ccwo-hint{padding:0 24px 8px;color:#c9b7d7;font-size:12px}
  .ccwo-table-wrap{padding:8px 24px 18px;overflow-x:auto}
  .ccwo-table{
    width:100%;
    min-width:900px;
    overflow:hidden;
    border-radius:12px;
  }
  .ccwo-row{display:flex;align-items:stretch}
  .ccwo-header{
    color:#fff9fc;
    background:#4a2450;
    border:1px solid #5f3b68;
    border-radius:12px 12px 0 0;
    font-weight:700;
    user-select:none;
  }
  .ccwo-data-row{
    min-height:49px;
    cursor:pointer;
    background:#2b152f;
    border-left:1px solid #5f3b68;
    border-right:1px solid #5f3b68;
    border-bottom:1px solid #5f3b68;
  }
  .ccwo-data-row:last-child{border-radius:0 0 12px 12px}
  .ccwo-data-row:hover{background:#3a2040}
  .ccwo-cell{
    flex:0 0 auto;
    min-width:55px;
    padding:11px 14px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    border-right:1px solid rgba(95,59,104,.85);
  }
  .ccwo-cell:last-child{border-right:none}
  .ccwo-header-cell{
    position:relative;
    display:flex;
    align-items:center;
    padding-right:18px;
    cursor:grab;
  }
  .ccwo-header-cell.dragging{opacity:.45}
  .ccwo-header-cell.drop-before{box-shadow:inset 3px 0 0 #c8aaf0}
  .ccwo-header-cell.drop-after{box-shadow:inset -3px 0 0 #c8aaf0}
  .ccwo-sort{
    width:100%;
    border:none;
    background:transparent;
    color:inherit;
    font-weight:700;
    text-align:left;
    cursor:pointer;
    padding:0;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .ccwo-sort-arrow{font-size:12px;color:#efb6d8}
  .ccwo-unsorted .ccwo-sort-arrow{color:#c9b7d7}
  .ccwo-resizer{
    position:absolute;
    right:-5px;
    top:0;
    width:10px;
    height:100%;
    cursor:col-resize;
    z-index:5;
  }
  .ccwo-resizer::after{
    content:"";
    position:absolute;
    left:4px;
    top:8px;
    bottom:8px;
    width:1px;
    background:#6b4778;
  }
  .ccwo-resizer:hover::after,.ccwo-resizer.active::after{
    width:2px;
    background:#c8aaf0;
  }
  .ccwo-empty{
    padding:22px;
    text-align:center;
    color:#c9b7d7;
    border:1px solid #5f3b68;
    border-radius:12px;
  }
  @media(max-width:1100px){
    .ccwo-top{flex-direction:column}
    .ccwo-brand{flex-basis:auto}
    .ccwo-stats{width:100%;grid-template-columns:repeat(3,1fr)}
  }


  /* Global ClawCrazy theme */
  body{
    background:#120813;
    color:#fff9fc;
  }
  .app{
    background:#120813;
  }
  .sidebar{
    background:#1b0d1e;
    border-right-color:#5f3b68;
  }
  .brand{color:#fff9fc}
  .brand-sub,.sub,.tiny,label{color:#c9b7d7}
  .nav-btn{
    background:#2b152f;
    color:#fff9fc;
    border-color:#5f3b68;
  }
  .nav-btn:hover{
    background:#3a2040;
  }
  .nav-btn.active{
    background:#4a2450;
    border-color:#c8aaf0;
    box-shadow:inset 0 0 0 1px #c8aaf0;
  }
  .content{
    background:#120813;
  }
  .global-brand-header{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    margin:0 0 14px 0;
    min-height:88px;
  }
  .global-brand-header img{
    display:block;
    width:155px;
    max-width:100%;
    height:auto;
  }
  .page-title,.section-title{color:#fff9fc}
  .card{
    background:#241126;
    border-color:#5f3b68;
    color:#fff9fc;
    box-shadow:0 10px 28px rgba(0,0,0,.25);
  }
  .metric-num{color:#fff9fc}
  .log-item{
    background:#2b152f;
    border-color:#5f3b68;
  }
  input,select,textarea{
    background:#321936;
    color:#fff9fc;
    border-color:#5f3b68;
  }
  input::placeholder,textarea::placeholder{
    color:#a993ba;
  }
  input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:#c8aaf0;
    box-shadow:0 0 0 1px #c8aaf0;
  }
  .btn{
    background:#8f1658;
    color:#fff9fc;
  }
  .btn:hover{
    background:#a5206d;
  }
  .btn.secondary{
    background:#3b2042;
    color:#fff9fc;
    border-color:#5f3b68;
  }
  .btn.good{
    background:#6f0d44;
  }
  .btn.danger {
    background: #c62828;
    color: #ffffff;
    border: 1px solid #c62828;
}

.btn.danger:hover {
    background: #a91f1f;
    color: #ffffff;
    border-color: #a91f1f;
}
  table{color:#fff9fc}
  th,td{
    border-bottom-color:#5f3b68;
  }
  th{color:#c9b7d7}
  .modal-backdrop{
    background:rgba(5,1,8,.72);
  }
  .modal{
    background:#241126;
    border-color:#5f3b68;
    color:#fff9fc;
  }
  .status-item{
    color:#c9b7d7;
  }
  .status-item button{
    border-color:#c8aaf0;
    color:#c8aaf0;
  }
  .status-item.active button{
    background:#8f1658;
    border-color:#8f1658;
    color:#fff9fc;
  }
  pre{color:#fff9fc !important}
  .empty{color:#c9b7d7}
  .wo-column-config-box,.wo-col-item{
    background:#2b152f;
    border-color:#5f3b68;
  }
  .wo-header{
    background:#4a2450;
    border-color:#5f3b68;
  }
  .wo-row{
    background:#2b152f;
    border-color:#5f3b68;
  }
  .wo-row:hover{
    background:#3a2040;
  }
  @media(max-width:980px){
    .global-brand-header{
      justify-content:center;
      min-height:0;
    }
  }


  .detail-panel{
    width:100%;
    margin-left:0;
    margin-right:0;
    padding:16px;
    background:#2b152f;
    border:1px solid #5f3b68;
    border-radius:14px;
    box-shadow:none;
  }
  .detail-panel .section-title{
    color:#fff9fc;
  }
  .detail-panel #detailDescription{
    color:#fff9fc;
    line-height:1.45;
  }
  .detail-panel .row{
    align-items:flex-start;
    gap:12px;
  }
  .detail-panel textarea,
  .detail-panel select{
    background:#321936;
    border-color:#5f3b68;
    color:#fff9fc;
  }


  .detail-note-field{
    flex:1 1 100%;
    width:100%;
  }
  .detail-note-field textarea{
    width:100%;
  }


  /* Repair global select/dropdown styling */
  select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-color:#321936;
    color:#fff9fc;
    border:1px solid #5f3b68;
    border-radius:10px;
    padding:10px 38px 10px 12px;
    line-height:1.2;
    background-image:
      linear-gradient(45deg, transparent 50%, #efb6d8 50%),
      linear-gradient(135deg, #efb6d8 50%, transparent 50%);
    background-position:
      calc(100% - 16px) 50%,
      calc(100% - 11px) 50%;
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
  }
  select:hover{
    border-color:#8e6ba4;
    background-color:#3a2040;
  }
  select:focus{
    outline:none;
    border-color:#c8aaf0;
    box-shadow:0 0 0 1px #c8aaf0;
  }
  select option{
    background:#241126;
    color:#fff9fc;
  }


  /* Fix multi-select filter checklist layout */
  .ccwo-check-list{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .ccwo-check{
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    align-items:center;
    justify-content:start;
    gap:10px;
    width:100%;
    min-height:36px;
    padding:7px 6px;
    text-align:left;
  }
  .ccwo-check input[type="checkbox"]{
    appearance:auto;
    -webkit-appearance:checkbox;
    width:18px;
    height:18px;
    min-width:18px;
    margin:0;
    padding:0;
    justify-self:start;
    accent-color:#b72b82;
    cursor:pointer;
  }
  .ccwo-check span{
    display:block;
    width:auto;
    min-width:0;
    margin:0;
    padding:0;
    text-align:left;
    white-space:normal;
    line-height:1.25;
    color:#fff9fc;
  }
  .ccwo-menu{
    width:270px;
  }


  /* Work order split view */
  .workorders-workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr) 0;
    gap:0;
    width:100%;
    align-items:start;
    transition:grid-template-columns .22s ease, gap .22s ease;
  }
  .workorders-workspace.detail-open{
    grid-template-columns:minmax(0,52fr) minmax(520px,48fr);
    gap:14px;
  }
  .workorders-list-pane{
    min-width:0;
    width:100%;
  }
  .workorder-detail-panel{
    min-width:0;
    width:100%;
    height:calc(100vh - 125px);
    position:sticky;
    top:16px;
    overflow:hidden;
    background:#241126;
    border:1px solid #5f3b68;
    border-radius:20px;
    box-shadow:0 10px 28px rgba(0,0,0,.34);
    color:#fff9fc;
  }
  .workorder-detail-panel.hidden{
    display:block !important;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }
  .workorders-workspace.detail-open .workorder-detail-panel{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:opacity .18s ease .08s;
  }
  .detail-panel-scroll{
    height:100%;
    overflow-y:auto;
    padding:16px;
    scrollbar-color:#8e6ba4 #241126;
    scrollbar-width:thin;
  }
  .detail-panel-toolbar{
    position:sticky;
    top:-16px;
    z-index:12;
    margin:-16px -16px 14px;
    padding:16px;
    background:#241126;
    border-bottom:1px solid #5f3b68;
  }
  .workorder-detail-panel .detail-header{
    gap:18px;
  }
  .workorder-detail-panel .status-buttons{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:8px;
  }
  .workorder-detail-panel .status-item{
    min-width:0;
    flex:1 1 0;
  }
  .workorder-detail-panel .status-item button{
    width:40px;
    height:40px;
  }
  .workorder-detail-panel .status-item span{
    white-space:nowrap;
    font-size:12px;
  }
  .workorders-workspace.detail-open .ccwo-stats{
    grid-template-columns:repeat(3,minmax(90px,1fr));
  }
  .workorders-workspace.detail-open .ccwo-toolbar{
    align-items:stretch;
  }
  .workorders-workspace.detail-open .ccwo-actions{
    width:100%;
    justify-content:flex-end;
  }
  @media(max-width:1350px){
    .workorder-detail-panel .detail-header{
      flex-direction:column;
    }
    .workorder-detail-panel .status-buttons{
      justify-content:flex-start;
    }
  }
  @media(max-width:980px){
    .workorders-workspace,
    .workorders-workspace.detail-open{
      display:block;
    }
    .workorders-list-pane{
      width:100%;
    }
    .workorder-detail-panel{
      position:fixed;
      inset:12px;
      z-index:500;
      width:auto;
      height:auto;
    }
  }


  /* Sidebar logo and large navigation */
  .app{
    min-height:100vh;
    height:100vh;
    overflow:hidden;
  }
  .sidebar{
    width:178px;
    min-width:178px;
    height:100vh;
    padding:12px 10px 14px;
    overflow-y:auto;
  }
  .sidebar-logo-wrap{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    padding:0 4px 12px;
    margin-bottom:8px;
    border-bottom:1px solid #5f3b68;
  }
  .sidebar-logo{
    display:block;
    width:148px;
    max-width:100%;
    height:auto;
  }
  .nav{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .nav-btn{
    width:100%;
    min-height:76px;
    padding:10px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    text-align:center;
    border-radius:12px;
  }
  .nav-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    font-size:29px;
    line-height:1;
    color:#efb6d8;
  }
  .nav-label{
    display:block;
    font-size:13px;
    font-weight:700;
    line-height:1.1;
  }
  .nav-btn.active .nav-icon{
    color:#fff9fc;
  }

  /* Let page content use the full available vertical space */
  .content{
    height:100vh;
    min-width:0;
    min-height:0;
    padding:14px 14px 0;
    overflow:hidden;
  }
  .page{
    height:calc(100vh - 28px);
    min-height:0;
    overflow:auto;
  }
  #page-workorders{
    overflow:hidden;
  }
  .workorders-workspace{
    height:100%;
    min-height:0;
  }
  .workorders-list-pane{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .ccwo-top,
  .ccwo-divider,
  .ccwo-toolbar,
  .ccwo-filter-summary,
  .ccwo-hint{
    flex:0 0 auto;
  }
  .ccwo-table-wrap{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding-bottom:14px;
  }
  .workorder-detail-panel{
    height:100%;
    max-height:100%;
    top:0;
  }

  @media(max-width:980px){
    .sidebar{
      width:110px;
      min-width:110px;
    }
    .sidebar-logo{
      width:92px;
    }
    .nav-btn{
      min-height:66px;
    }
    .nav-icon{
      width:30px;
      height:30px;
      font-size:25px;
    }
    .nav-label{
      font-size:11px;
    }
  }


  .detail-game-status{
    display:block;
    width:100%;
    max-width:220px;
    margin:0 0 10px;
  }


  .detail-title-group{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .workorder-flag-button{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border:1px solid #5f3b68;
    border-radius:10px;
    background:#321936;
    color:#c9b7d7;
    font-size:22px;
    line-height:1;
    cursor:pointer;
  }
  .workorder-flag-button:hover{
    border-color:#ef4b6f;
    color:#ef4b6f;
    background:#3a2040;
  }
  .workorder-flag-button.active{
    color:#ff365f;
    border-color:#ff365f;
    background:#4b1730;
    box-shadow:0 0 0 1px rgba(255,54,95,.25);
  }
  .ccwo-title-cell{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .ccwo-title-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .ccwo-row-flag{
    flex:0 0 auto;
    color:#ff365f;
    font-size:18px;
    line-height:1;
  }


  /* Dashboard overview windows */
  #page-dashboard{
    overflow:auto;
    padding-right:4px;
  }
  .dashboard-overview-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(320px,1fr));
    gap:14px;
    align-items:start;
  }
  .dashboard-window{
    min-width:0;
    background:#241126;
    border:1px solid #5f3b68;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 22px rgba(0,0,0,.22);
    transition:all .2s ease;
  }
  .dashboard-window.expanded{
    grid-column:1 / -1;
  }
  .dashboard-window-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 16px;
    background:#321936;
    border-bottom:1px solid #5f3b68;
    cursor:pointer;
  }
  .dashboard-window-header:hover{
    background:#3a2040;
  }
  .dashboard-window-title{
    font-size:18px;
    font-weight:700;
    color:#fff9fc;
  }
  .dashboard-window-subtitle{
    margin-top:3px;
    color:#c9b7d7;
    font-size:12px;
  }
  .dashboard-window-link{
    flex:0 0 auto;
    color:#efb6d8;
    font-size:12px;
    font-weight:700;
  }
  .dashboard-window-body{
    padding:12px 16px;
  }
  .dashboard-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:32px;
    border-bottom:1px solid rgba(95,59,104,.55);
  }
  .dashboard-summary-row:last-child{
    border-bottom:none;
  }
  .dashboard-summary-row span{
    color:#c9b7d7;
  }
  .dashboard-summary-row strong{
    color:#fff9fc;
    font-size:17px;
  }
  .dashboard-expanded-content{
    display:none;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #5f3b68;
  }
  .dashboard-window.expanded .dashboard-expanded-content{
    display:block;
  }
  .dashboard-list-title{
    margin-bottom:8px;
    color:#fff9fc;
    font-size:13px;
    font-weight:700;
  }
  .dashboard-mini-row{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:9px 10px;
    margin-bottom:6px;
    border:1px solid #5f3b68;
    border-radius:9px;
    background:#2b152f;
    color:#fff9fc;
    text-align:left;
  }
  button.dashboard-mini-row{
    cursor:pointer;
  }
  button.dashboard-mini-row:hover{
    background:#3a2040;
    border-color:#8e6ba4;
  }
  .dashboard-mini-row small{
    color:#c9b7d7;
  }
  .dashboard-window-footer{
    display:flex;
    justify-content:flex-end;
    padding:0 16px 14px;
  }
  .dashboard-expand-btn{
    min-width:88px;
    padding:8px 12px;
    border:1px solid #5f3b68;
    border-radius:9px;
    background:#3b2042;
    color:#fff9fc;
    cursor:pointer;
    font-weight:700;
  }
  .dashboard-expand-btn:hover{
    border-color:#c8aaf0;
    background:#4a2450;
  }
  .dashboard-empty{
    padding:10px;
    color:#c9b7d7;
    text-align:center;
  }
  @media(max-width:1100px){
    .dashboard-overview-grid{
      grid-template-columns:1fr;
    }
    .dashboard-window.expanded{
      grid-column:auto;
    }
  }


  .create-asset-search-wrap{
    position:relative;
    width:100%;
  }
  .create-asset-results{
    position:absolute;
    z-index:700;
    top:calc(100% + 6px);
    left:0;
    right:0;
    max-height:260px;
    overflow-y:auto;
    padding:7px;
    background:#241126;
    border:1px solid #5f3b68;
    border-radius:11px;
    box-shadow:0 12px 28px rgba(0,0,0,.38);
  }
  .create-asset-results.hidden{
    display:none;
  }
  .create-asset-result{
    display:block;
    width:100%;
    padding:10px 11px;
    border:none;
    border-radius:8px;
    background:transparent;
    color:#fff9fc;
    text-align:left;
    cursor:pointer;
  }
  .create-asset-result:hover,
  .create-asset-result:focus{
    outline:none;
    background:#3a2040;
  }
  .create-asset-search-message{
    padding:10px 11px;
    color:#c9b7d7;
    font-size:13px;
  }
  #createAssetSearch.asset-selected{
    border-color:#c8aaf0;
  }


  .cancel-workorder-modal{
    max-width:560px;
  }
  .cancel-dialog-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:14px;
  }


  /* Assets list and detail workspace */
  .assets-workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr) 0;
    gap:0;
    width:100%;
    height:100%;
    min-height:0;
    transition:grid-template-columns .22s ease, gap .22s ease;
  }
  .assets-workspace.detail-open{
    grid-template-columns:minmax(500px,3fr) minmax(480px,2fr);
    gap:14px;
  }
  .assets-list-pane{
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
  }
  .assets-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:0 0 14px;
  }
  .asset-list-card{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    background:#241126;
    border:1px solid #5f3b68;
    border-radius:16px;
  }
  .asset-list-header,
  .asset-list-row{
    display:grid;
    grid-template-columns:minmax(220px,1.6fr) minmax(150px,1fr) minmax(110px,.7fr) minmax(130px,.9fr) minmax(135px,.8fr);
    align-items:center;
  }
  .asset-list-header{
    position:sticky;
    top:0;
    z-index:4;
    min-height:44px;
    background:#4a2450;
    border-bottom:1px solid #5f3b68;
    font-weight:700;
  }
  .asset-list-header > div,
  .asset-list-row > span{
    min-width:0;
    padding:11px 14px;
    border-right:1px solid rgba(95,59,104,.85);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:left;
  }
  .asset-list-header > div:last-child,
  .asset-list-row > span:last-child{
    border-right:none;
  }
  .asset-list-row{
    width:100%;
    min-height:54px;
    border:none;
    border-bottom:1px solid #5f3b68;
    background:#2b152f;
    color:#fff9fc;
    cursor:pointer;
  }
  .asset-list-row:hover{
    background:#3a2040;
  }
  .asset-list-name{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
  }
  .asset-list-name img,
  .asset-list-photo-placeholder{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:8px;
    object-fit:cover;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#321936;
    border:1px solid #5f3b68;
  }
  .asset-detail-panel{
    width:100%;
    height:100%;
    min-width:0;
    overflow:hidden;
    background:#241126;
    border:1px solid #5f3b68;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(0,0,0,.34);
  }
  .asset-detail-panel.hidden{
    display:block !important;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }
  .assets-workspace.detail-open .asset-detail-panel{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  .asset-detail-scroll{
    height:100%;
    overflow-y:auto;
    padding:16px;
  }
  .asset-detail-toolbar{
    position:sticky;
    top:-16px;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:-16px -16px 16px;
    padding:16px;
    background:#241126;
    border-bottom:1px solid #5f3b68;
  }
  .asset-detail-grid{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:18px;
    align-items:start;
  }
  .asset-photo-column{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .asset-photo-preview{
    aspect-ratio:1 / 1;
    width:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #5f3b68;
    border-radius:14px;
    background:#2b152f;
    color:#c9b7d7;
  }
  .asset-photo-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .asset-photo-button{
    position:relative;
    overflow:hidden;
    text-align:center;
  }
  .asset-photo-button input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
  }
  .asset-fields-column{
    display:grid;
    gap:12px;
  }
  .asset-detail-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:4px;
  }
  .asset-workorders-section{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #5f3b68;
  }
  .asset-workorders-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
  }
  .asset-status-filter-field{
    flex:0 0 220px;
  }
  .asset-workorders-list{
    display:flex;
    flex-direction:column;
    border:1px solid #5f3b68;
    border-radius:12px;
    overflow:hidden;
  }
  .asset-workorder-row{
    display:grid;
    grid-template-columns:minmax(180px,1.5fr) minmax(110px,.8fr) minmax(130px,.9fr) minmax(110px,.7fr);
    align-items:center;
    width:100%;
    min-height:46px;
    padding:0;
    border:none;
    border-bottom:1px solid #5f3b68;
    background:#2b152f;
    color:#fff9fc;
    cursor:pointer;
    text-align:left;
  }
  .asset-workorder-row:last-child{
    border-bottom:none;
  }
  .asset-workorder-row:hover{
    background:#3a2040;
  }
  .asset-workorder-row > span{
    min-width:0;
    padding:10px 12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .asset-workorder-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
  }
  .asset-empty-state{
    padding:20px;
    color:#c9b7d7;
    text-align:center;
  }
  .add-asset-modal{
    max-width:650px;
  }
  .asset-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:14px;
  }
  .new-asset-photo-preview{
    margin-top:10px;
    width:140px;
    height:140px;
    overflow:hidden;
    border:1px solid #5f3b68;
    border-radius:12px;
    background:#2b152f;
  }
  .new-asset-photo-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  @media(max-width:1250px){
    .assets-workspace.detail-open{
      grid-template-columns:minmax(420px,1fr) minmax(430px,1fr);
    }
    .asset-detail-grid{
      grid-template-columns:140px minmax(0,1fr);
    }
  }
  @media(max-width:980px){
    .assets-workspace,
    .assets-workspace.detail-open{
      display:block;
    }
    .asset-detail-panel{
      position:fixed;
      inset:12px;
      z-index:500;
      width:auto;
      height:auto;
    }
    .asset-list-header,
    .asset-list-row{
      grid-template-columns:minmax(200px,1.4fr) minmax(100px,.7fr);
    }
    .asset-list-header > div:nth-child(3),
    .asset-list-header > div:nth-child(4),
    .asset-list-row > span:nth-child(3),
    .asset-list-row > span:nth-child(4){
      display:none;
    }
  }


  .asset-status-filter{
    position:relative;
    width:100%;
  }
  .asset-status-filter-button{
    width:100%;
    min-height:42px;
    padding:10px 36px 10px 12px;
    border:1px solid #5f3b68;
    border-radius:10px;
    background:#321936;
    color:#fff9fc;
    text-align:left;
    cursor:pointer;
    position:relative;
  }
  .asset-status-filter-button::after{
    content:"▾";
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    color:#efb6d8;
  }
  .asset-status-filter-button.active{
    border-color:#c8aaf0;
    box-shadow:0 0 0 1px #c8aaf0;
  }
  .asset-status-filter-menu{
    position:absolute;
    z-index:650;
    top:calc(100% + 6px);
    right:0;
    width:270px;
    max-height:320px;
    overflow:auto;
    padding:10px;
    border:1px solid #5f3b68;
    border-radius:12px;
    background:#241126;
    box-shadow:0 12px 28px rgba(0,0,0,.35);
  }
  .asset-status-filter-menu.hidden{
    display:none;
  }
  .asset-status-filter-title{
    margin:2px 4px 8px;
    color:#c9b7d7;
    font-size:12px;
  }
  .asset-status-filter-options{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .asset-status-option{
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    align-items:center;
    gap:10px;
    min-height:36px;
    padding:7px 6px;
    border-radius:8px;
    cursor:pointer;
  }
  .asset-status-option:hover{
    background:#3a2040;
  }
  .asset-status-option input{
    width:18px;
    height:18px;
    margin:0;
    accent-color:#b72b82;
  }
  .asset-status-option span{
    color:#fff9fc;
    text-align:left;
  }
  .asset-status-filter-actions{
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding-top:9px;
    margin-top:6px;
    border-top:1px solid #5f3b68;
  }


  /* Refined dashboard */
  #page-dashboard{
    overflow:auto;
    padding:6px 8px 18px;
  }
  .dashboard-hero{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 0 16px;
  }
  .dashboard-hero-logo{
    width:300px;
    max-width:min(55vw,300px);
    height:auto;
    display:block;
  }
  .dashboard-hero-divider{
    height:1px;
    margin:0 0 18px;
    background:linear-gradient(90deg,transparent,#8e6ba4 18%,#c8aaf0 50%,#8e6ba4 82%,transparent);
  }
  .dashboard-overview-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(260px,1fr));
    grid-auto-rows:260px;
    gap:16px;
    align-items:stretch;
  }
  .dashboard-window{
    height:260px;
    min-height:260px;
    display:flex;
    flex-direction:column;
    background:
      radial-gradient(circle at top right,rgba(183,43,130,.16),transparent 42%),
      #241126;
    border:1px solid #5f3b68;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(0,0,0,.24);
  }
  .dashboard-window.expanded{
    grid-column:1 / -1;
    height:auto;
    min-height:360px;
  }
  .dashboard-window-header{
    min-height:72px;
    flex:0 0 auto;
    padding:14px 16px;
    background:linear-gradient(180deg,#3a2040,#321936);
  }
  .dashboard-window-body{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:16px;
  }
  .dashboard-window-footer{
    flex:0 0 auto;
    padding:0 16px 14px;
  }
  .dashboard-primary-metric{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin-bottom:16px;
  }
  .dashboard-primary-metric strong{
    font-size:42px;
    line-height:1;
    color:#fff9fc;
  }
  .dashboard-primary-metric span{
    margin-top:7px;
    color:#c9b7d7;
    font-size:13px;
  }
  .dashboard-mini-metrics{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .dashboard-mini-metrics > div{
    min-height:58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:8px;
    border:1px solid #5f3b68;
    border-radius:11px;
    background:#2b152f;
    text-align:center;
  }
  .dashboard-mini-metrics strong{
    font-size:21px;
    color:#fff9fc;
  }
  .dashboard-mini-metrics span{
    margin-top:3px;
    color:#c9b7d7;
    font-size:11px;
  }
  .dashboard-expanded-content{
    display:none;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #5f3b68;
  }
  .dashboard-window.expanded .dashboard-expanded-content{
    display:block;
  }
  .dashboard-window.expanded .dashboard-window-body{
    justify-content:flex-start;
  }
  @media(max-width:1400px){
    .dashboard-overview-grid{
      grid-template-columns:repeat(2,minmax(280px,1fr));
    }
  }
  @media(max-width:850px){
    .dashboard-overview-grid{
      grid-template-columns:1fr;
      grid-auto-rows:250px;
    }
    .dashboard-window{
      height:250px;
      min-height:250px;
    }
    .dashboard-window.expanded{
      grid-column:auto;
      min-height:350px;
    }
    .dashboard-hero-logo{
      width:240px;
    }
  }


  @media(max-width:700px){
    .app{
      grid-template-columns:88px minmax(0,1fr);
    }
    .sidebar{
      width:88px;
      min-width:88px;
      padding-left:6px;
      padding-right:6px;
    }
    .sidebar-logo{
      width:76px;
    }
    .content{
      padding-left:8px;
      padding-right:8px;
    }
  }

  /* =========================
   USERS PAGE
========================= */

.users-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-height: calc(100vh - 48px);
}

.users-workspace.detail-open {
  grid-template-columns: minmax(0, 52fr) minmax(520px, 48fr);
}

.users-list-pane {
  min-width: 0;
}

.users-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.users-list-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}

.users-list-header,
.user-list-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.4fr)
    minmax(120px, 1fr)
    minmax(180px, 1.5fr)
    minmax(120px, 1fr)
    minmax(120px, 1fr)
    minmax(90px, 0.7fr);
  align-items: center;
  gap: 0;
}

.users-list-header {
  padding: 14px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}

.user-list-row {
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.user-list-row:last-child {
  border-bottom: 0;
}

.user-list-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.user-list-row > span {
  min-width: 0;
  padding: 14px 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-list-name {
  font-weight: 700;
}

.user-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.user-status-pill.active {
  background: rgba(54, 180, 110, 0.16);
  color: #79e3a4;
  border: 1px solid rgba(54, 180, 110, 0.4);
}

.user-status-pill.disabled {
  background: rgba(200, 80, 90, 0.14);
  color: #ff9ca7;
  border: 1px solid rgba(200, 80, 90, 0.4);
}

.user-detail-panel {
  min-width: 0;
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}

.user-detail-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
}

.user-detail-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.user-profile-card,
.user-security-card,
.user-record-card {
  margin-bottom: 14px;
}

.user-detail-actions,
.new-user-actions,
.change-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.user-record-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.user-record-row:last-child {
  border-bottom: 0;
}

.password-field-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.password-field-wrap input {
  min-width: 0;
}

.password-toggle-button {
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.password-toggle-button:hover {
  background: var(--accent);
}

.new-user-modal,
.change-password-modal {
  width: min(760px, calc(100vw - 32px));
}

@media (max-width: 1250px) {
  .users-workspace.detail-open {
    grid-template-columns: minmax(420px, 1fr) minmax(500px, 1fr);
  }

  .users-list-header,
  .user-list-row {
    grid-template-columns:
      minmax(140px, 1.3fr)
      minmax(110px, 1fr)
      minmax(150px, 1.3fr)
      minmax(110px, 1fr)
      minmax(110px, 1fr)
      90px;
  }
}

@media (max-width: 980px) {
  .users-workspace,
  .users-workspace.detail-open {
    display: block;
  }

  .users-list-header,
  .user-list-row {
    grid-template-columns:
      minmax(140px, 1.3fr)
      minmax(110px, 1fr)
      minmax(150px, 1.3fr)
      minmax(110px, 1fr)
      minmax(110px, 1fr)
      90px;
  }

  .users-list-card {
    overflow-x: auto;
  }

  .users-list-header,
  .user-list-row {
    min-width: 850px;
  }

  .user-detail-panel {
    position: fixed;
    inset: 12px;
    z-index: 1000;
    max-height: none;
  }
}

@media (max-width: 700px) {
  .users-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .users-topbar .btn {
    width: 100%;
  }

  .user-detail-toolbar {
    flex-direction: column;
  }

  .user-detail-toolbar .btn {
    width: 100%;
  }

  .user-detail-actions,
  .new-user-actions,
  .change-password-actions {
    flex-direction: column;
  }

  .user-detail-actions .btn,
  .new-user-actions .btn,
  .change-password-actions .btn {
    width: 100%;
  }
}

.users-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.disabled-users-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}

.disabled-users-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.disabled-users-switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 44px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.disabled-users-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.18s ease;
}

.disabled-users-switch input:checked + .disabled-users-switch-track {
  background: var(--accent);
  border-color: var(--accent);
}

.disabled-users-switch input:checked + .disabled-users-switch-track::after {
  transform: translateX(20px);
}

.disabled-users-switch input:focus-visible + .disabled-users-switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.disabled-users-switch-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .users-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

.user-account-history{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:260px;
    overflow-y:auto;
    padding-right:4px;
}

.user-history-entry{
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(255,255,255,.03);
}

.user-history-note{
    font-weight:600;
    color:#fff;
}

.user-history-date{
    margin-top:4px;
    font-size:.82rem;
    color:var(--muted);
}

/* ==========================================================
   LOGIN SCREEN
   ========================================================== */

.login-screen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #120716;
    z-index: 10000;
}

.login-container {
    width: 460px;
    max-width: calc(100vw - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-logo {
    width: 320px;
    height: auto;
    margin-bottom: 36px;
}

.login-form {
    width: 100%;
}

.login-field {
    margin-bottom: 22px;
}

.login-field label {
    display: block;
    margin-bottom: 8px;
    color: #dddddd;
    font-size: 14px;
    font-weight: 600;
}

.login-field input {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid #4d2958;
    background: #24102c;
    color: white;
    font-size: 16px;
    box-sizing: border-box;
}

.login-field input:focus {
    outline: none;
    border-color: #b449c6;
    box-shadow: 0 0 10px rgba(180,73,198,.4);
}

.login-button {
    width: 100%;
    height: 54px;
    margin-top: 10px;
    font-size: 17px;
}

.login-error {
    color: #ff8b8b;
    text-align: center;
    margin-bottom: 18px;
    min-height: 20px;
}

/* ==========================================================
   SIDEBAR LOGOUT
   ========================================================== */

.sidebar {
  position: relative;
}

.sidebar-logout {
  position: static;
  width: 100%;

  height: 42px;

  border: 1px solid #ff6b6b;
  border-radius: 10px;

  background: #b71c1c;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  font-size: 15px;
  font-weight: 700;

  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.sidebar-logout:hover {
  background: #d32f2f;
}

.sidebar-logout:active {
  transform: translateY(1px);
}

.sidebar-logout svg {
  width: 18px;
  height: 18px;
}

.forgot-password-link {
  display: block;
  margin: -6px 0 18px 0;
  padding: 0;

  border: none;
  background: none;

  color: #d85a9d;
  font-size: 15px;
  font-weight: 600;

  cursor: pointer;
  text-align: left;
}

.forgot-password-link:hover {
  color: #f07fbb;
  text-decoration: underline;
}

/* ==========================================================
   PASSWORD RECOVERY
   ========================================================== */

.recovery-page {
  width: 100%;
}

.recovery-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.recovery-subtitle {
  font-size: 15px;
  color: #c9b8ce;
  margin-bottom: 22px;
}

.recovery-card {
  width: 100%;
  display: block;
  text-align: left;

  padding: 18px 20px;
  margin-bottom: 14px;

  border: 1px solid #4d2958;
  border-radius: 12px;

  background: #24102c;
  color: #fff;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.recovery-card:hover {
  border-color: #9c3f78;
  background: #2b1234;
}

.recovery-card.selected {
  border-color: #d85a9d;
  background: #32152f;
  box-shadow: 0 0 0 1px rgba(216, 90, 157, 0.25);
}

.recovery-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.recovery-card.selected .recovery-card-title {
  color: #f072b5;
}

.recovery-card-text {
  font-size: 14px;
  line-height: 1.4;
  color: #c9b8ce;
}

.recovery-actions {
  margin-top: 20px;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.recovery-back-button {
  border: none;
  background: none;
  padding: 10px 4px;

  color: #d85a9d;
  font-size: 15px;
  font-weight: 600;

  cursor: pointer;
}

.recovery-back-button:hover {
  color: #f07fbb;
  text-decoration: underline;
}

/* ==========================================================
   ROLES PAGE
   ========================================================== */

#page-roles {
  padding: 0;
}

.roles-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;

  width: 100%;
  min-height: 620px;
}


/* ==========================================================
   LEFT ROLE PANEL
   ========================================================== */

.roles-sidebar {
  display: flex;
  flex-direction: column;

  background: #1b0d21;
  border: 1px solid #46254f;
  border-radius: 14px;

  overflow: hidden;
}


.roles-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 16px;

  background: #3b1d43;
  border-bottom: 1px solid #56305e;
}


.roles-sidebar-title {
  color: #ffffff;

  font-size: 24px;
  font-weight: 700;
}


.roles-add-button {
  width: 40px;
  height: 40px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  font-size: 22px;
  line-height: 1;
}


.roles-list {
  display: flex;
  flex-direction: column;

  padding: 12px;
  gap: 8px;

  flex: 1;
}


.role-list-item {
  width: 100%;

  border: 1px solid transparent;
  border-radius: 9px;

  padding: 12px 14px;

  background: transparent;

  color: #d8c9dd;

  font-size: 15px;
  font-weight: 600;

  text-align: left;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}


.role-list-item:hover {
  background: #2a1531;
  border-color: #55305e;

  color: #ffffff;
}


.role-list-item.active {
  background: #2a1531;
  border-color: #ffffff;

  color: #ffffff;
}


/* ==========================================================
   RIGHT ROLE EDITOR
   ========================================================== */

.role-editor {
  min-width: 0;
  min-height: 620px;

  background: #1b0d21;
  border: 1px solid #46254f;
  border-radius: 14px;

  padding: 0;
  overflow: hidden;
}


/* Right pane header */

.role-editor-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 72px;

  padding: 16px 20px;

  background: #3b1d43;
  border-bottom: 1px solid #56305e;
}

.role-editor-title {
  color: #ffffff;

  font-size: 24px;
  font-weight: 700;
}


/* Empty editor */

.role-editor .empty-state {
  min-height: 570px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #a995af;
  font-size: 15px;
}


/* Permissions */

.role-permissions-list {
  display: flex;
  flex-direction: column;

  gap: 12px;

  padding: 18px 20px;
}

.role-permission-row {
  display: flex;
  align-items: center;

  width: 100%;

  padding: 10px 14px;

  background: #24132a;
  border: 1px solid #3f2548;
  border-radius: 8px;
}

.role-permission-label {
  order: 1;

  color: #f2e8f5;

  font-size: 15px;
  font-weight: 500;

  white-space: nowrap;
  cursor: pointer;
}

.role-permission-checkbox {
  order: 2;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;

  margin: 0 0 0 auto;
  padding: 0;

  transform: scale(1.4);

  flex: 0 0 auto;

  cursor: pointer;
}

.role-permission-description {
  display: none;
}


/* Editor buttons */

.role-editor-actions {
  padding: 0 20px 20px;
}


/* Left-panel empty message */

.roles-list .empty-state {
  padding: 18px 12px;

  color: #a995af;
  font-size: 14px;

  text-align: center;
}

.sidebar-bottom {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
}

.sidebar-current-user {
  padding: 0 0 10px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--muted);
}

/* ==========================================================
   DASHBOARD - WORK ORDER AVAILABILITY CARD
   ========================================================== */

.dashboard-overview-grid {
  grid-auto-rows: auto;
}

.dashboard-window {
  min-height: 260px;
}

.dashboard-window[data-dashboard-window="workorders"] {
  height: 390px;
  min-height: 390px;
}

.dashboard-window[data-dashboard-window="workorders"].expanded {
  height: auto;
  min-height: 500px;
}

.dashboard-window[data-dashboard-window="workorders"] .dashboard-window-body {
  justify-content: flex-start;
  padding-top: 14px;
}

.dashboard-availability-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-availability-tile {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #5f3b68;
  border-radius: 14px;
  text-align: center;
  background: #2b152f;
}

.dashboard-availability-tile strong {
  font-size: 36px;
  line-height: 1;
  color: #fff9fc;
}

.dashboard-availability-tile span {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-down-tile {
  border-color: #b84a5a;
  background:
    linear-gradient(
      180deg,
      rgba(198, 40, 40, .18),
      rgba(43, 21, 47, .92)
    );
}

.dashboard-down-tile span {
  color: #ff9da8;
}

.dashboard-online-tile {
  border-color: #417f59;
  background:
    linear-gradient(
      180deg,
      rgba(22, 101, 52, .20),
      rgba(43, 21, 47, .92)
    );
}

.dashboard-online-tile span {
  color: #9fe1b4;
}

.dashboard-online-health {
  display: flex;
  justify-content: center;
  padding: 8px 0 0;
}

.dashboard-gauge {
  position: relative;
  width: min(260px, 90%);
  height: 122px;
}

.dashboard-gauge-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dashboard-gauge-track,
.dashboard-gauge-value {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
}

.dashboard-gauge-track {
  stroke: #4a3150;
}

.dashboard-gauge-value {
  stroke-dashoffset: 0;
}

.dashboard-gauge-good .dashboard-gauge-value {
  stroke: #48b86b;
}

.dashboard-gauge-warn .dashboard-gauge-value {
  stroke: #d6ad49;
}

.dashboard-gauge-bad .dashboard-gauge-value {
  stroke: #d94a5d;
}

.dashboard-gauge-reading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.dashboard-gauge-reading strong {
  font-size: 30px;
  line-height: 1;
  color: #fff9fc;
}

.dashboard-gauge-reading span {
  margin-top: 5px;
  font-size: 13px;
  color: #c9b7d7;
}

.dashboard-workorder-breakdown {
  margin-top: 4px;
  padding-top: 14px;
}

.dashboard-status-list {
  display: grid;
  gap: 8px;
}

.dashboard-status-row {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr)
    60px
    minmax(120px, 150px)
    24px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid #5f3b68;
  border-radius: 11px;
  background: #2b152f;
  color: #fff9fc;
  text-align: left;
  cursor: pointer;
}

.dashboard-status-row:hover {
  border-color: #8e6ba4;
  background: #3a2040;
}

.dashboard-status-name {
  font-weight: 700;
}

.dashboard-status-count {
  justify-self: center;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #4a2450;
  text-align: center;
  font-weight: 700;
}

.dashboard-status-age {
  justify-self: end;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-age-good {
  color: #8dd7a5;
}

.dashboard-age-warn {
  color: #e1c16b;
}

.dashboard-age-bad {
  color: #ff8f9d;
}

.dashboard-status-arrow {
  justify-self: end;
  color: #efb6d8;
  font-size: 18px;
}

@media (max-width: 850px) {
  .dashboard-window[data-dashboard-window="workorders"] {
    height: 390px;
    min-height: 390px;
  }

  .dashboard-window[data-dashboard-window="workorders"].expanded {
    min-height: 500px;
  }
}

@media (max-width: 560px) {
  .dashboard-availability-tiles {
    gap: 8px;
  }

  .dashboard-availability-tile {
    min-height: 84px;
  }

  .dashboard-availability-tile strong {
    font-size: 31px;
  }

  .dashboard-status-row {
    grid-template-columns: minmax(120px, 1fr) 44px 110px 18px;
    gap: 7px;
    padding-left: 9px;
    padding-right: 9px;
  }

  .dashboard-status-age {
    font-size: 11px;
  }
}



/* ==========================================================
   DASHBOARD - ASSETS SUMMARY
   ========================================================== */

.dashboard-assets-total{
  padding:20px 0 8px;
}

.dashboard-assets-total strong{
  font-size:52px;
}

.dashboard-asset-type-row small{
  min-width:44px;
  font-size:18px;
  font-weight:700;
  color:#fff9fc;
  text-align:right;
}



/* Dashboard static summary rows */
.dashboard-mini-row.static{
  cursor:default;
}

.dashboard-mini-row.static:hover{
  background:#2b152f;
  border-color:#5f3b68;
}


/* ==========================================================
   REPORTS - GAME REPORT
   ========================================================== */

.report-page-layout{
  display:grid;
  gap:16px;
}

.game-report-control-card{
  padding:22px;
}

.game-report-control-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.game-report-download-button{
  min-width:170px;
  white-space:nowrap;
}

.game-report-download-button:disabled{
  opacity:.7;
  cursor:wait;
}

.game-report-info-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(140px,1fr));
  gap:12px;
  margin-top:22px;
}

.game-report-info-strip > div{
  border:1px solid var(--line);
  border-radius:14px;
  background:#321936;
  padding:16px;
  text-align:center;
}

.game-report-info-strip strong{
  display:block;
  font-size:30px;
  line-height:1;
  margin-bottom:7px;
}

.game-report-info-strip span{
  color:var(--muted);
  font-size:13px;
}

.game-report-preview-card{
  padding:22px;
}

.game-report-preview-header{
  margin-bottom:18px;
}

.game-report-preview{
  display:grid;
  gap:22px;
}

.game-report-preview-section{
  display:grid;
  gap:12px;
}

.game-report-preview-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:2px solid var(--orange);
  padding-bottom:8px;
  font-size:18px;
  font-weight:700;
}

.game-report-preview-section-title strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:28px;
  padding:0 9px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-size:13px;
}

.game-report-preview-item{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#2b152f;
}

.game-report-preview-machine{
  padding:12px 15px;
  background:#3a1c3f;
  border-bottom:1px solid var(--line);
  font-size:16px;
  font-weight:700;
}

.game-report-preview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  border-bottom:1px solid var(--line);
}

.game-report-preview-grid > div{
  padding:12px 14px;
  border-right:1px solid var(--line);
}

.game-report-preview-grid > div:last-child{
  border-right:none;
}

.game-report-preview-grid span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:5px;
}

.game-report-preview-grid strong{
  display:block;
  font-size:13px;
}

.game-report-preview-workorder{
  padding:14px 15px 10px;
}

.game-report-preview-workorder > strong{
  display:block;
  font-size:15px;
  margin-bottom:7px;
}

.game-report-preview-workorder p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.game-report-preview-note-count{
  padding:0 15px 14px;
  color:var(--muted);
  font-size:12px;
}

.game-report-preview-empty{
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  padding:18px;
  text-align:center;
}

@media (max-width: 900px){
  .game-report-control-header{
    flex-direction:column;
  }

  .game-report-download-button{
    width:100%;
  }

  .game-report-info-strip{
    grid-template-columns:1fr;
  }

  .game-report-preview-grid{
    grid-template-columns:1fr 1fr;
  }

  .game-report-preview-grid > div:nth-child(2){
    border-right:none;
  }

  .game-report-preview-grid > div:nth-child(-n+2){
    border-bottom:1px solid var(--line);
  }
}

@media (max-width: 560px){
  .game-report-preview-grid{
    grid-template-columns:1fr;
  }

  .game-report-preview-grid > div{
    border-right:none;
    border-bottom:1px solid var(--line);
  }

  .game-report-preview-grid > div:last-child{
    border-bottom:none;
  }
}


/* ==========================================================
   WORK ORDER DETAIL - STATUS BUTTON SPACING FIX
   ========================================================== */

.workorder-detail-panel .status-buttons{
  display:grid;
  grid-template-columns:repeat(5, minmax(92px, 1fr));
  gap:18px;
  width:100%;
  justify-content:stretch;
  align-items:start;
}

.workorder-detail-panel .status-item{
  min-width:92px;
  width:100%;
  flex:none;
}

.workorder-detail-panel .status-item button{
  width:44px;
  height:44px;
  margin:0 auto;
}

.workorder-detail-panel .status-item span{
  display:block;
  width:100%;
  margin-top:8px;
  padding:0 4px;
  white-space:normal;
  text-align:center;
  line-height:1.2;
  font-size:12px;
}

@media(max-width:1350px){
  .workorder-detail-panel .status-buttons{
    grid-template-columns:repeat(5, minmax(88px, 1fr));
    gap:14px;
  }
}

@media(max-width:1100px){
  .workorder-detail-panel .status-buttons{
    grid-template-columns:repeat(3, minmax(100px, 1fr));
  }
}

@media(max-width:700px){
  .workorder-detail-panel .status-buttons{
    grid-template-columns:repeat(2, minmax(110px, 1fr));
  }
}


/* ==========================================================
   WORK ORDER DETAIL - CONNECTED COLOR STATUS BAR
   ========================================================== */

.workorder-detail-panel .status-buttons{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:0;
  width:100%;
  overflow:hidden;
  border:1px solid #5f3b68;
  border-radius:14px;
  background:#1f0f22;
}

.workorder-detail-panel .status-item{
  min-width:0;
  width:100%;
  min-height:94px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 8px;
  border-right:1px solid rgba(255,255,255,.14);
  color:#fff;
  transition:
    filter .15s ease,
    background .15s ease;
}

.workorder-detail-panel .status-item:last-child{
  border-right:none;
}

/* Make the existing circular button visually part of the box. */
.workorder-detail-panel .status-item button{
  width:42px;
  height:42px;
  margin:0;
  flex:0 0 42px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:rgba(0,0,0,.14);
  color:#fff;
  box-shadow:none;
}

.workorder-detail-panel .status-item span{
  display:block;
  width:100%;
  margin:0;
  padding:0 4px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.15;
  text-align:center;
  white-space:normal;
}

/* New - Claw Crazy pink */
.workorder-detail-panel .status-item:nth-child(1){
  background:#6f1d4a;
}

/* In Progress - blue */
.workorder-detail-panel .status-item:nth-child(2){
  background:#244d78;
}

/* Waiting for Parts - yellow/gold */
.workorder-detail-panel .status-item:nth-child(3){
  background:#8a6a16;
}

/* Completed - green */
.workorder-detail-panel .status-item:nth-child(4){
  background:#25613d;
}

/* Cancelled - red */
.workorder-detail-panel .status-item:nth-child(5){
  background:#7a292d;
}

/* Hover makes the entire status box react. */
.workorder-detail-panel .status-item:hover{
  filter:brightness(1.16);
}

/* Current status is brighter and gets an inset white outline. */
.workorder-detail-panel .status-item.active{
  filter:brightness(1.22);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.82);
  position:relative;
  z-index:1;
}

.workorder-detail-panel .status-item.active button{
  background:rgba(255,255,255,.18);
  border-color:#ffffff;
  color:#ffffff;
}

/* Keep the connected bar usable on narrower detail panels. */
@media(max-width:1100px){
  .workorder-detail-panel .status-buttons{
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }

  .workorder-detail-panel .status-item{
    min-height:88px;
    padding:10px 5px;
  }

  .workorder-detail-panel .status-item button{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .workorder-detail-panel .status-item span{
    font-size:11px;
  }
}

@media(max-width:700px){
  .workorder-detail-panel .status-buttons{
    grid-template-columns:1fr;
    border-radius:12px;
  }

  .workorder-detail-panel .status-item{
    min-height:68px;
    display:grid;
    grid-template-columns:46px 1fr;
    justify-items:start;
    padding:10px 14px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.14);
  }

  .workorder-detail-panel .status-item:last-child{
    border-bottom:none;
  }

  .workorder-detail-panel .status-item span{
    width:auto;
    text-align:left;
    font-size:12px;
  }
}


/* ==========================================================
   WORK ORDER DETAIL - CONNECTED UNIFIED STATUS BAR
   ========================================================== */

.workorder-detail-panel .status-buttons{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:0;
  width:100%;
  overflow:hidden;
  border:1px solid #5f3b68;
  border-radius:14px;
  background:#321936;
}

.workorder-detail-panel .status-item{
  min-width:0;
  width:100%;
  min-height:94px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 8px;
  border-right:1px solid rgba(255,255,255,.10);
  background:#321936;
  color:#fff9fc;
  transition:
    background .15s ease,
    filter .15s ease;
}

.workorder-detail-panel .status-item:last-child{
  border-right:none;
}

.workorder-detail-panel .status-item button{
  width:42px;
  height:42px;
  margin:0;
  flex:0 0 42px;
  border:2px solid #c8aaf0;
  border-radius:50%;
  background:transparent;
  color:#c8aaf0;
  box-shadow:none;
}

.workorder-detail-panel .status-item span{
  display:block;
  width:100%;
  margin:0;
  padding:0 4px;
  color:#fff9fc;
  font-size:12px;
  font-weight:700;
  line-height:1.15;
  text-align:center;
  white-space:normal;
}

.workorder-detail-panel .status-item:hover{
  background:#3a2040;
}

.workorder-detail-panel .status-item.active{
  background:#241126;
}

.workorder-detail-panel .status-item.active button{
  background:#4a2450;
  border-color:#c8aaf0;
  color:#fff9fc;
}

@media(max-width:1100px){
  .workorder-detail-panel .status-item{
    min-height:88px;
    padding:10px 5px;
  }

  .workorder-detail-panel .status-item button{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .workorder-detail-panel .status-item span{
    font-size:11px;
  }
}

@media(max-width:700px){
  .workorder-detail-panel .status-buttons{
    grid-template-columns:1fr;
    border-radius:12px;
  }

  .workorder-detail-panel .status-item{
    min-height:68px;
    display:grid;
    grid-template-columns:46px 1fr;
    justify-items:start;
    padding:10px 14px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.10);
  }

  .workorder-detail-panel .status-item:last-child{
    border-bottom:none;
  }

  .workorder-detail-panel .status-item span{
    width:auto;
    text-align:left;
    font-size:12px;
  }
}


/* ==========================================================
   FINAL STATUS COLOR OVERRIDE
   Forces every connected status box to use the same purple.
   This intentionally overrides the older nth-child colors.
   ========================================================== */

.workorder-detail-panel .status-buttons .status-item:nth-child(1),
.workorder-detail-panel .status-buttons .status-item:nth-child(2),
.workorder-detail-panel .status-buttons .status-item:nth-child(3),
.workorder-detail-panel .status-buttons .status-item:nth-child(4),
.workorder-detail-panel .status-buttons .status-item:nth-child(5){
  background:#321936;
}

.workorder-detail-panel .status-buttons .status-item:nth-child(1):hover,
.workorder-detail-panel .status-buttons .status-item:nth-child(2):hover,
.workorder-detail-panel .status-buttons .status-item:nth-child(3):hover,
.workorder-detail-panel .status-buttons .status-item:nth-child(4):hover,
.workorder-detail-panel .status-buttons .status-item:nth-child(5):hover{
  background:#3a2040;
}

.workorder-detail-panel .status-buttons .status-item.active:nth-child(1),
.workorder-detail-panel .status-buttons .status-item.active:nth-child(2),
.workorder-detail-panel .status-buttons .status-item.active:nth-child(3),
.workorder-detail-panel .status-buttons .status-item.active:nth-child(4),
.workorder-detail-panel .status-buttons .status-item.active:nth-child(5){
  background:#241126;
}

.workorder-detail-panel .status-buttons .status-item:nth-child(1) button,
.workorder-detail-panel .status-buttons .status-item:nth-child(2) button,
.workorder-detail-panel .status-buttons .status-item:nth-child(3) button,
.workorder-detail-panel .status-buttons .status-item:nth-child(4) button,
.workorder-detail-panel .status-buttons .status-item:nth-child(5) button{
  background:transparent;
  border-color:#c8aaf0;
  color:#c8aaf0;
}

.workorder-detail-panel .status-buttons .status-item.active:nth-child(1) button,
.workorder-detail-panel .status-buttons .status-item.active:nth-child(2) button,
.workorder-detail-panel .status-buttons .status-item.active:nth-child(3) button,
.workorder-detail-panel .status-buttons .status-item.active:nth-child(4) button,
.workorder-detail-panel .status-buttons .status-item.active:nth-child(5) button{
  background:#4a2450;
  border-color:#c8aaf0;
  color:#fff9fc;
}