/* D&J'S Civil - One DJS Portal shared shell (served public at /shell/theme.css).
   Styles ONLY the shell (#djs-top, #djs-side, #djs-scrim, body.djs-shell) and the shared djs-* components,
   so it is safe to load into the Estimating and Projects portals. No bare element selectors. */
:root{--green:#00BF63;--green2:#00a856;--orange:#FA9757;--ink:#1F1F1F;--mute:#6b7280;--line:#e3e6ea;
--bg:#f5f6f8;--card:#fff;--pale:#eafbf1;--ok:#1f7a4d;--warn:#b45309;--bad:#b91c1c;
--shell-top:58px;--shell-side:232px}

body.djs-shell{padding-top:var(--shell-top);padding-left:var(--shell-side)}

/* ---- shared reset inside the shell (host pages may style bare buttons / links / lists) */
#djs-top,#djs-side,#djs-scrim{box-sizing:border-box;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
#djs-top *,#djs-side *{box-sizing:border-box;font-family:inherit;letter-spacing:normal;text-transform:none}
#djs-top button,#djs-side button{margin:0;width:auto;min-width:0;box-shadow:none;text-align:center;line-height:1.2;-webkit-appearance:none;appearance:none}
#djs-top a,#djs-side a{text-decoration:none}
#djs-top img{max-width:none;border:0}
#djs-top svg,#djs-side svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- top bar */
#djs-top{position:fixed;top:0;left:0;right:0;height:var(--shell-top);z-index:40;display:flex;align-items:center;gap:12px;
padding:0 16px 0 14px;background:var(--ink);color:#fff;border-bottom:3px solid var(--green);box-shadow:0 2px 10px rgba(15,20,32,.18)}
#djs-top .djs-brand{display:flex;align-items:center;gap:10px;color:#fff;min-width:0;border-radius:8px;padding:4px 6px 4px 2px}
#djs-top .djs-brand:hover{background:rgba(255,255,255,.06)}
#djs-top .djs-logo{width:38px;height:38px;border-radius:50%;background:#fff;padding:2px;display:block}
#djs-top .djs-name{font-size:17px;font-weight:700;letter-spacing:.4px;white-space:nowrap;color:#fff}
#djs-top .djs-app{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#djs-top .djs-app:before{content:"";width:1px;height:22px;background:rgba(255,255,255,.28);flex:none}
#djs-top .djs-sp{flex:1;min-width:8px}
#djs-top .djs-user{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;min-width:0;max-width:260px}
#djs-top .djs-user b{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#djs-top .djs-user span{font-size:12px;color:rgba(255,255,255,.62);white-space:nowrap}
#djs-top .djs-avatar{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:13.5px;
display:flex;align-items:center;justify-content:center;flex:none}
#djs-top .djs-logout{display:inline-flex;flex:none;align-items:center;gap:6px;height:36px;padding:7px 13px;border-radius:8px;cursor:pointer;
font-size:13.5px;font-weight:600;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.32)}
#djs-top .djs-logout:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);color:#fff}
#djs-top .djs-logout svg{width:16px;height:16px}
#djs-top .djs-burger{display:none;flex:none;width:42px;height:42px;padding:0;border-radius:8px;border:0;background:transparent;color:#fff;cursor:pointer;
align-items:center;justify-content:center}
#djs-top .djs-burger:hover{background:rgba(255,255,255,.1)}
#djs-top .djs-burger svg{width:24px;height:24px}
#djs-top a:focus-visible,#djs-top button:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ---- side bar */
#djs-side{position:fixed;top:var(--shell-top);left:0;bottom:0;width:var(--shell-side);z-index:39;background:#fff;
border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;padding:12px 0 18px;display:flex;flex-direction:column;color:var(--ink);
scrollbar-width:thin;scrollbar-color:#d4d8de transparent}
#djs-side::-webkit-scrollbar{width:6px}#djs-side::-webkit-scrollbar-thumb{background:#d4d8de;border-radius:3px}
#djs-side .djs-group{padding:2px 0 8px}
#djs-side .djs-group + .djs-group{border-top:1px solid #f0f1f3;padding-top:8px}
#djs-side .djs-gh{display:block;margin:6px 20px 4px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mute)}
#djs-side a.djs-item{display:flex;align-items:center;gap:11px;min-height:40px;padding:8px 16px 8px 17px;margin:1px 10px 1px 0;
border-left:3px solid transparent;border-radius:0 8px 8px 0;color:var(--ink);font-size:14.5px;line-height:1.3;background:transparent;cursor:pointer}
#djs-side a.djs-item svg{width:18px;height:18px;color:#8a919c}
#djs-side a.djs-item:hover{background:var(--pale);color:var(--ink)}
#djs-side a.djs-item:hover svg{color:var(--green2)}
#djs-side a.djs-item.on{border-left-color:var(--green);background:var(--pale);color:var(--green2);font-weight:600}
#djs-side a.djs-item.on svg{color:var(--green2)}
#djs-side a.djs-item:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
#djs-side .djs-foot{margin-top:auto;padding:14px 20px 0;font-size:12px;color:var(--mute);display:none}
#djs-side .djs-foot b{display:block;color:var(--ink);font-size:13.5px;font-weight:600}
#djs-scrim{position:fixed;inset:0;z-index:38;background:rgba(15,20,32,.42);opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}

@media (max-width:799px){
  body.djs-shell{padding-left:0}
  #djs-top{gap:6px;padding:0 10px 0 4px}
  #djs-top .djs-burger{display:inline-flex}
  #djs-top .djs-logo{width:34px;height:34px}
  #djs-top .djs-name{font-size:15.5px}
  #djs-top .djs-app{font-size:14px;gap:8px}
  #djs-top .djs-user,#djs-top .djs-avatar{display:none}
  #djs-top .djs-logout{padding:7px 10px;height:40px}
  #djs-side{width:min(84vw,300px);z-index:42;transform:translateX(-102%);transition:transform .2s ease;box-shadow:none;padding-top:10px}
  #djs-side.djs-open{transform:none;box-shadow:12px 0 32px rgba(15,20,32,.22)}
  #djs-side a.djs-item{min-height:46px;font-size:15.5px}
  #djs-side .djs-foot{display:block}
  #djs-scrim.djs-open{opacity:1;visibility:visible;z-index:41}
}
@media (max-width:380px){#djs-top .djs-logout span{display:none}#djs-top .djs-logout{padding:7px 9px}}
@media (prefers-reduced-motion:reduce){#djs-side,#djs-scrim{transition:none}}
@media print{#djs-top,#djs-side,#djs-scrim{display:none!important}body.djs-shell{padding:0}}

/* ---- notice bar (DJS.notice): a slim bar under the top bar, above page panels and dialogs */
#djs-notice{position:fixed;z-index:90;top:calc(var(--shell-top) + 10px);left:50%;width:max-content;max-width:min(680px,calc(100vw - 24px));
box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:8px 8px 8px 16px;border-radius:10px;
background:var(--ink);color:#fff;border-left:4px solid var(--green);box-shadow:0 10px 30px rgba(15,20,32,.28);
font:500 14px/1.35 "Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:normal;text-transform:none;
opacity:0;transform:translate(-50%,-8px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
#djs-notice.djs-in{opacity:1;transform:translate(-50%,0);pointer-events:auto}
body:not(.djs-shell) #djs-notice{top:10px}
#djs-notice *{box-sizing:border-box;font-family:inherit}
#djs-notice .djs-notice-text{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
#djs-notice .djs-notice-actions{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
#djs-notice .djs-notice-btn{margin:0;min-height:34px;min-width:0;width:auto;padding:6px 14px;border-radius:7px;cursor:pointer;box-shadow:none;
font:600 13.5px/1.2 "Segoe UI",system-ui,sans-serif;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.4)}
#djs-notice .djs-notice-btn:hover{background:rgba(255,255,255,.12);color:#fff}
#djs-notice .djs-notice-btn.djs-primary{background:var(--green);border-color:var(--green);color:#fff}
#djs-notice .djs-notice-btn.djs-primary:hover{background:var(--green2);border-color:var(--green2)}
#djs-notice .djs-notice-x{margin:0;width:32px;height:32px;min-width:0;padding:0;border:0;border-radius:7px;background:transparent;color:rgba(255,255,255,.75);
cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:none}
#djs-notice .djs-notice-x:hover{background:rgba(255,255,255,.12);color:#fff}
#djs-notice .djs-notice-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#djs-notice button:focus-visible{outline:3px solid #9be3bf;outline-offset:2px}
@media (max-width:799px){
  #djs-notice{top:calc(var(--shell-top) + 6px);left:8px;right:8px;width:auto;max-width:none;transform:translateY(-8px);padding:8px 8px 8px 12px}
  #djs-notice.djs-in{transform:none}
  #djs-notice .djs-notice-btn{min-height:40px;padding:8px 14px}
  #djs-notice.djs-has-actions .djs-notice-actions{width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){#djs-notice{transition:none}}
@media print{#djs-notice{display:none!important}}

/* ---- shared components (opt-in by class) */
.djs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;border-radius:8px;
border:1px solid var(--green);background:var(--green);color:#fff;font:600 14.5px/1.2 "Segoe UI",system-ui,sans-serif;cursor:pointer;text-decoration:none}
.djs-btn:hover{background:var(--green2);border-color:var(--green2);color:#fff}
.djs-btn.ghost{background:#fff;color:var(--green2)}
.djs-btn.ghost:hover{background:var(--pale)}
.djs-btn:focus-visible{outline:3px solid #9be3bf;outline-offset:2px}
.djs-btn:disabled{opacity:.45;cursor:default}
.djs-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;box-shadow:0 1px 2px rgba(15,20,32,.04)}
.djs-tile{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
color:var(--ink);text-decoration:none;box-shadow:0 1px 2px rgba(15,20,32,.04);transition:border-color .12s,box-shadow .12s,transform .12s}
a.djs-tile:hover,button.djs-tile:hover{border-color:var(--green);box-shadow:0 6px 18px rgba(15,20,32,.08);transform:translateY(-1px)}
.djs-tile:focus-visible{outline:3px solid #9be3bf;outline-offset:2px}
.djs-chip{display:inline-block;white-space:nowrap;padding:2px 10px;border-radius:20px;font-size:12.5px;font-weight:600;background:var(--pale);color:var(--green2)}
.djs-chip.red{background:#fee2e2;color:var(--bad)}
.djs-chip.amber{background:#fef3c7;color:var(--warn)}
.djs-chip.grey{background:#f3f4f6;color:#4b5563}
.djs-chip.orange{background:#ffeedf;color:#9a4a12}