/* The Sign & Workwear Co — CRM wireframe
   Design language lifted from the live admin (AdminLTE shell, #9bc217 accent).
   Wireframe only: controls are deliberately inert. */

:root{
  --wa-green:#9bc217;
  --wa-green-dark:#87aa14;
  --wa-dark:#15170f;
  --sidebar-bg:#000000;
  --sidebar-link:#b8c7ce;
  --sidebar-hover:#1a1a1a;
  --body-bg:#ecf0f5;
  --box-bg:#ffffff;
  --box-shadow:0 1px 4px 0 rgba(0,0,0,.14);
  --line:#f4f4f4;
  --input-border:#d2d6de;
  --text:#333333;
  --muted:#777777;
  --tag-bg:#dbeaf7;
  --tag-text:#1f4e79;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--body-bg);
  color:var(--text);
  font-family:"Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.42857;
}

a{color:var(--text);text-decoration:none}
a:hover{color:var(--wa-green)}

/* ---------- Shell ---------- */

.wa-header{
  position:fixed;top:0;left:0;right:0;height:53px;z-index:1030;
  background:#000;border-top:3px solid var(--wa-green);
}
.wa-logo{
  float:left;width:230px;height:50px;line-height:50px;text-align:center;
  background:#000;border-bottom:1px solid rgba(255,255,255,.06);
}
.wa-logo img{width:45px;vertical-align:middle;border-radius:2px}
.wa-navbar{margin-left:230px;height:50px;padding:0 15px;position:relative}
.wa-navbar .wa-icon{
  display:inline-block;color:#fff;font-size:17px;line-height:50px;
  padding:0 12px;cursor:pointer;
}
.wa-navbar .wa-icon:hover{background:rgba(255,255,255,.08);color:#fff}
.wa-user{
  position:absolute;right:15px;top:0;line-height:50px;color:#fff;font-size:14px;
}
.wa-avatar{
  display:inline-block;width:26px;height:26px;border-radius:50%;
  background:#d2d6de;vertical-align:middle;
}
.wa-user .wa-avatar{margin-right:8px}

.wa-sidebar{
  position:fixed;top:53px;bottom:0;left:0;width:230px;z-index:1020;
  background:var(--sidebar-bg);overflow-y:auto;
}
.wa-userpanel{padding:14px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.wa-userpanel .wa-avatar-lg{
  float:left;width:40px;height:40px;border-radius:50%;background:#d2d6de;margin-right:10px;
}
.wa-userpanel .wa-name{color:#fff;font-weight:700;padding-top:3px}
.wa-userpanel .wa-status{color:var(--wa-green);font-size:12px}
.wa-userpanel:after{content:"";display:block;clear:both}

.wa-menu{list-style:none;margin:0;padding:0}
.wa-menu > li > a{
  display:block;color:var(--sidebar-link);
  padding:12px 5px 12px 15px;border-left:3px solid transparent;position:relative;
}
.wa-menu > li > a:hover{background:var(--sidebar-hover);color:#fff;border-left-color:var(--wa-green)}
.wa-menu > li.active > a{background:var(--sidebar-hover);color:#fff;border-left-color:var(--wa-green)}
.wa-menu .wa-mi{display:inline-block;width:22px;text-align:center;margin-right:6px}
.wa-menu .wa-caret{position:absolute;right:12px;top:12px;opacity:.6;font-size:12px}

.wa-content{margin-left:230px;padding-top:53px;min-height:100vh}
.wa-content-header{padding:15px 15px 0}
.wa-content-header h1{
  font-size:24px;font-weight:700;margin:0 0 10px;color:var(--text);
}
.wa-rule{border:0;border-top:2px solid var(--wa-green);margin:0 15px 12px}
.wa-content-body{padding:0 15px 20px}

/* ---------- Boxes ---------- */

.wa-box{background:var(--box-bg);border-radius:3px;box-shadow:var(--box-shadow);margin-bottom:20px}
.wa-box-header{padding:10px 15px;border-bottom:1px solid var(--line)}
.wa-box-header h4{
  margin:0;font-size:15px;font-weight:700;color:#444;
  text-transform:uppercase;letter-spacing:.3px;
}
.wa-box-body{padding:12px 15px}

/* ---------- Filter bar (our style — not Monday's toolbar) ---------- */

.wa-filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.wa-field{flex:1 1 170px;min-width:150px}
.wa-field.wa-narrow{flex:0 0 130px}
.wa-field label{display:block;font-weight:700;font-size:14px;margin-bottom:4px}
.wa-field .wa-hint{display:block;font-size:11.9px;color:var(--muted);margin-top:3px}

.wa-input,.wa-select,.wa-textarea{
  width:100%;height:34px;padding:6px 12px;font-size:14px;color:var(--text);
  background:#fff;border:1px solid var(--input-border);border-radius:0;
  font-family:inherit;
}
.wa-textarea{height:auto;min-height:90px;resize:vertical}
.wa-input:focus,.wa-select:focus,.wa-textarea:focus{outline:0;border-color:var(--wa-green)}
.wa-input::placeholder{color:#bbb}

.wa-check{display:inline-flex;align-items:center;gap:7px;font-weight:700;cursor:pointer;user-select:none}
.wa-check input{width:16px;height:16px;accent-color:var(--wa-green);cursor:pointer}

/* ---------- Buttons ---------- */

.wa-btn{
  display:inline-block;padding:6px 12px;font-size:14px;line-height:1.42857;
  border:1px solid transparent;border-radius:3px;cursor:pointer;
  font-family:inherit;text-align:center;
}
.wa-btn-dark{background:var(--wa-dark);border-color:var(--wa-dark);color:#fff}
.wa-btn-dark:hover{background:#000;color:#fff}
.wa-btn-green{background:var(--wa-green);border-color:var(--wa-green);color:#fff}
.wa-btn-green:hover{background:var(--wa-green-dark);color:#fff}
.wa-btn-default{background:#f4f4f4;border-color:#ddd;color:#444}
.wa-btn-default:hover{background:#e7e7e7;color:#444}
.wa-btn-sm{padding:4px 10px;font-size:13px}

.wa-actions{display:flex;gap:8px;align-items:center;margin:12px 0}
.wa-actions-right{margin-left:auto}

.wa-count{margin:10px 0 8px;font-size:14px}

/* ---------- Tables ---------- */

.wa-table-wrap{overflow-x:auto}
.wa-table{width:100%;border-collapse:collapse;background:#fff}
.wa-table th{
  text-align:left;font-weight:700;font-size:14px;padding:8px;
  border-bottom:2px solid var(--line);white-space:nowrap;
}
.wa-table td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.wa-table tbody tr:nth-child(odd){background:#f9f9f9}
.wa-table tbody tr:hover{background:#f1f5e6}
.wa-table .wa-center{text-align:center}
.wa-table .wa-icon-link{color:#444;font-size:15px}
.wa-table .wa-icon-link:hover{color:var(--wa-green)}

.wa-group-title{
  font-size:17px;font-weight:700;margin:18px 0 8px;padding-left:10px;
  border-left:4px solid var(--wa-green);
}
.wa-group-title.wa-group-done{border-left-color:#00c875}
.wa-group-title.wa-group-future{border-left-color:#999}

.wa-tag{
  display:inline-block;background:var(--tag-bg);color:var(--tag-text);
  padding:2px 8px;border-radius:3px;font-size:12.5px;margin:1px 2px 1px 0;white-space:nowrap;
}
.wa-tag-more{background:#444;color:#fff}

.wa-empty{padding:18px;text-align:center;color:var(--muted)}

/* ---------- Status cells ---------- */

.wa-status{
  position:relative;padding:0;min-width:150px;
}
.wa-status-btn{
  display:block;width:100%;border:0;padding:10px 8px;cursor:pointer;
  font-family:inherit;font-size:14px;text-align:center;color:#fff;
  background:#c4c4c4;
}
.wa-status-btn:focus{outline:2px solid rgba(0,0,0,.25);outline-offset:-2px}

.wa-status-menu{
  display:none;position:absolute;z-index:900;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.22);
  padding:10px;width:340px;
}
.wa-status-menu.wa-open{display:block}
.wa-status-menu.wa-menu-narrow{width:190px}
.wa-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wa-status-menu.wa-menu-narrow .wa-status-grid{grid-template-columns:1fr}
.wa-status-opt{
  border:0;border-radius:3px;padding:9px 6px;color:#fff;font-family:inherit;font-size:13px;
  cursor:pointer;text-align:center;
}
.wa-status-opt:hover{filter:brightness(1.08)}
.wa-status-foot{
  border-top:1px solid var(--line);margin-top:9px;padding-top:8px;
  text-align:center;color:var(--muted);font-size:13px;
}

/* Status palette */
.s-not-started      {background:#808080}
.s-awaiting-prints  {background:#9cd3f0;color:#17364a}
.s-cust-collection  {background:#333333}
.s-quoted           {background:#ff158a}
.s-in-production    {background:#fdab3d;color:#4a3000}
.s-stuck            {background:#e2445c}
.s-visuals          {background:#cab641;color:#3a3200}
.s-done             {background:#00c875}
.s-blank            {background:#c4c4c4}
.s-awaiting-response{background:#ffcb00;color:#4a3d00}
.s-to-invoice       {background:#a25ddc}
.s-to-order         {background:#0086c0}
.s-deliver-customer {background:#2b76e5}
.s-awaiting-delivery{background:#1f5c66}
.s-ship-customer    {background:#bb3354}
.s-working-on-it    {background:#fdab3d;color:#4a3000}
.s-low              {background:#579bfc}

/* ---------- Dashboard widgets ---------- */

.wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wa-widget{background:#fff;border-radius:3px;box-shadow:var(--box-shadow);border-top:3px solid var(--wa-green)}
.wa-widget-head{padding:10px 15px;border-bottom:1px solid var(--line);font-size:15px}
.wa-widget-body{padding:12px 15px;min-height:120px}
.wa-brandmark{text-align:center;padding:16px 0 24px}
.wa-brandmark img{height:70px}

/* ---------- Modal (inert) ---------- */

.wa-modal-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1200;
}
.wa-modal-backdrop.wa-open{display:flex;align-items:flex-start;justify-content:center;padding-top:70px}
.wa-modal{background:#fff;border-radius:3px;width:620px;max-width:94vw;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.wa-modal-head{padding:12px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.wa-modal-head h4{margin:0;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#444}
.wa-modal-close{margin-left:auto;background:none;border:0;font-size:21px;line-height:1;cursor:pointer;color:#000;opacity:.4}
.wa-modal-close:hover{opacity:.8}
.wa-modal-body{padding:15px}
.wa-modal-foot{padding:12px 15px;border-top:1px solid var(--line);text-align:right}

.wa-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px}
.wa-form-grid .wa-span-2{grid-column:span 2}
.wa-form-grid .wa-span-4{grid-column:span 4}
.wa-modal .wa-form-grid{grid-template-columns:repeat(2,1fr)}
.wa-modal .wa-form-grid .wa-span-2,
.wa-modal .wa-form-grid .wa-span-4{grid-column:span 2}

/* ---------- Wireframe notice ---------- */

.wa-note{
  background:#fffbe6;border:1px solid #f0e2a8;color:#6b5b14;
  padding:8px 12px;border-radius:3px;margin:0 0 14px;font-size:13px;
}

/* ---------- TV screen (Today's Tasks) ---------- */

body.wa-tv{background:#fff}
.wa-tv-content{padding:0 24px 40px}
.wa-tv-head{padding:18px 24px 6px}
.wa-tv-head h1{font-size:30px;font-weight:700;margin:0}
.wa-tv .wa-table th{font-size:17px;padding:12px 10px}
.wa-tv .wa-table td{font-size:17px;padding:12px 10px}
.wa-tv .wa-status-btn{font-size:17px;padding:14px 8px}
.wa-tv .wa-group-title{font-size:22px}
.wa-tv .wa-tag{font-size:15px;padding:3px 10px}

.wa-peek{
  position:fixed;top:0;left:0;right:0;height:46px;background:#000;
  border-top:3px solid var(--wa-green);color:#fff;z-index:1500;
  transform:translateY(-100%);transition:transform .18s ease;
  display:flex;align-items:center;padding:0 16px;gap:14px;
}
.wa-peek a{color:#fff;font-size:14px}
.wa-peek a:hover{color:var(--wa-green)}
.wa-peek-zone{position:fixed;top:0;left:0;right:0;height:14px;z-index:1499}
.wa-peek-zone:hover + .wa-peek,.wa-peek:hover{transform:translateY(0)}
.wa-peek .wa-peek-clock{margin-left:auto;opacity:.8}

@media (max-width:1100px){
  .wa-grid{grid-template-columns:1fr}
  .wa-form-grid{grid-template-columns:repeat(2,1fr)}
}