/* Same plain, functional look as the sibling modules. */
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, "Segoe UI", Helvetica, Arial,
       sans-serif; color: #1c2733; background: #f4f5f7; }

.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 20px;
          background: #1c2733; color: #fff; flex-wrap: wrap; }
.brand { color: #fff; font-weight: 700; font-size: 18px;
         text-decoration: none; letter-spacing: 1px; }
.tagline { color: #9fb0c0; font-size: 13px; }
.mainnav { display: flex; gap: 14px; margin-left: 12px; }
.mainnav a { color: #d7e0e8; text-decoration: none; padding: 4px 2px; }
.mainnav a:hover { color: #fff; }
.signout { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.whoami { color: #9fb0c0; font-size: 13px; }

.wrap { max-width: 1080px; margin: 24px auto; padding: 0 20px; }
h1 { font-size: 22px; margin: 8px 0 14px; }
h2 { font-size: 17px; margin: 26px 0 8px; }
small, .muted { color: #64748b; }

.flash { padding: 9px 13px; border-radius: 6px; margin-bottom: 12px; }
.flash-info { background: #e2efda; color: #2e5b2e; }
.flash-error { background: #fbe3e4; color: #8f2430; }

table { border-collapse: collapse; width: 100%; background: #fff;
        border: 1px solid #dde3ea; border-radius: 6px; overflow: hidden; }
th, td { text-align: left; padding: 7px 11px;
         border-bottom: 1px solid #eceff3; vertical-align: middle; }
th { background: #f0f2f5; font-size: 12px; text-transform: uppercase;
     letter-spacing: .4px; color: #4a5a6a; }
tr:last-child td { border-bottom: none; }
tr.over td { background: #fff4f2; }
tr.muted td { color: #94a3b2; }

.cards { display: grid; grid-template-columns: repeat(auto-fit,
         minmax(200px, 1fr)); gap: 14px; margin: 14px 0 8px; }
.card { display: block; background: #fff; border: 1px solid #dde3ea;
        border-radius: 8px; padding: 14px 16px; color: inherit;
        text-decoration: none; }
.card-warn { border-color: #e2a4a4; background: #fff8f7; }
.card .big { font-size: 30px; font-weight: 700; }

.panel { background: #fff; border: 1px solid #dde3ea; border-radius: 8px;
         padding: 14px 16px; margin-bottom: 18px; }
form { margin: 0; }
label { display: block; margin: 6px 0; }
label.inline { display: inline; margin: 0 6px; font-size: 13px; }
input, select { font: inherit; padding: 5px 8px; border: 1px solid #c4cdd6;
        border-radius: 5px; }
button { font: inherit; padding: 6px 14px; border: none; border-radius: 5px;
         background: #2456a4; color: #fff; cursor: pointer; }
button:hover { background: #1c4585; }
button.danger { background: #fff; color: #8f2430;
                border: 1px solid #d9a0a5; padding: 3px 10px; }
button.danger:hover { background: #fbe3e4; }
td form { display: inline-flex; gap: 6px; align-items: center; }

.pill { background: #8f2430; color: #fff; border-radius: 10px;
        font-size: 12px; padding: 1px 8px; vertical-align: middle; }

.login-card { max-width: 340px; margin: 10vh auto; background: #fff;
              border: 1px solid #dde3ea; border-radius: 8px;
              padding: 22px 26px; }
.login-card h1 { letter-spacing: 2px; }
.login-card input { width: 100%; }
.login-card button { width: 100%; margin-top: 12px; }

/* ------------------------------------------------------------- gantt */
.g-toolbar { display: flex; align-items: baseline; gap: 18px;
             flex-wrap: wrap; }
.g-nav a { margin-right: 10px; }
.g-zoom button { padding: 3px 10px; border-radius: 4px; background: #fff;
                color: #1c2733; border: 1px solid #c4cdd6; }
.g-zoom button.on { background: #1c2733; color: #fff; border-color: #1c2733; }
.g-layout { display: grid; grid-template-columns: 1fr 230px; gap: 16px;
            align-items: start; }
@media (max-width: 900px) { .g-layout { grid-template-columns: 1fr; } }

.gantt { display: grid; grid-template-columns: 230px 1fr;
         background: #fff; border: 1px solid #dde3ea; border-radius: 8px;
         overflow: hidden; }
.g-corner { padding: 6px 10px; font-size: 12px; color: #4a5a6a;
            border-bottom: 1px solid #dde3ea; background: #f0f2f5; }
.g-head { overflow: hidden; display: flex; border-bottom: 1px solid #dde3ea;
          background: #f0f2f5; }
.g-hcell { flex: 0 0 var(--dw); width: var(--dw); font-size: 10px;
           color: #4a5a6a; text-align: center; padding: 4px 0 2px;
           position: relative; min-height: 34px; overflow: visible; }
.g-day { display: inline-block; margin-top: 11px; }
.g-wk { position: absolute; top: 14px; left: 2px; font-size: 9px;
        white-space: nowrap; color: #4a5a6a; }
.g-hcell .g-month { position: absolute; top: 1px; left: 2px; font-size: 9px;
                    font-weight: 700; color: #1c2733; white-space: nowrap;
                    text-align: left; }
.g-hcell.g-sun { background: #e8ebef; color: #b6bfc9; }
.g-hcell.g-sat { background: #f6f7f9; }
.g-hcell.g-nwdcol { background: #fdeeee; }
.g-hcell.g-today { box-shadow: inset 0 -3px 0 #2456a4; }

.g-side { border-right: 1px solid #dde3ea; }
.g-joblabel { height: 26px; padding: 4px 10px 0; font-size: 11px;
              font-weight: 700; text-transform: uppercase;
              letter-spacing: .4px; color: #4a5a6a; background: #f7f8fa;
              white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.g-rowlabel { height: 40px; padding: 4px 10px; font-size: 14px;
              white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; border-top: 1px solid #f0f2f5; }
.g-rowlabel small { display: block; font-size: 10px; color: #64748b;
                    margin-top: -3px; }
.g-rowlabel a { color: inherit; text-decoration: none; }
.g-rowlabel a:hover { text-decoration: underline; }
.g-loadlabel { height: 52px; padding: 20px 10px 0; font-size: 11px;
               color: #4a5a6a; border-top: 2px solid #dde3ea; }

.g-body { overflow-x: auto; position: relative; }
.g-jobtrack { height: 26px; background: #f7f8fa;
              width: calc(var(--dw) * var(--ndays)); }
.g-track { height: 40px; position: relative; border-top: 1px solid #f0f2f5;
           width: calc(var(--dw) * var(--ndays)); }
.g-loadtrack { height: 52px; position: relative; border-top: 2px solid #dde3ea;
               width: calc(var(--dw) * var(--ndays)); }
.g-col { position: absolute; top: 0; bottom: 0; width: var(--dw);
         pointer-events: none; z-index: 0; }
.g-colsun { background: rgba(28, 39, 51, 0.07); }
.g-colnwd { background: rgba(199, 66, 66, 0.08); }
.g-todayline { position: absolute; top: 0; bottom: 0; width: 2px;
               background: #2456a4; z-index: 1; pointer-events: none; }

.g-bar { position: absolute; top: 6px; height: 28px; border-radius: 5px;
         background: #4a76c4; color: #fff; font-size: 12px;
         line-height: 28px; padding: 0 8px; white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis; cursor: grab;
         user-select: none; z-index: 2; touch-action: none; }
.g-bar:active { cursor: grabbing; }
.g-in_progress { background: #2b8a5b; }
.g-complete { background: #9aa8b6; }
.g-pinnedbar { box-shadow: inset 0 0 0 2px #1c2733; }
.g-pin { margin-left: 4px; }
.g-clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0;
            border-left: 3px dotted #fff; }
.g-clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0;
            border-right: 3px dotted #fff; }

.g-loadcell { position: absolute; bottom: 4px; width: calc(var(--dw) - 2px);
              margin-left: 1px; background: #9db8dd; border-radius: 2px; }
.g-loadcell.g-over { background: #c74242; }

.g-backlog { background: #fff; border: 1px solid #dde3ea; border-radius: 8px;
             padding: 12px 14px; }
.g-backlog h2 { margin: 0 0 10px; }
.g-bl { border: 1px solid #dde3ea; border-radius: 6px; padding: 6px 10px;
        margin-bottom: 8px; cursor: grab; background: #f7f8fa; }
.g-bl:active { cursor: grabbing; }
.g-bl a { text-decoration: none; color: inherit; font-weight: 600; }
.g-bl small { display: block; color: #64748b; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit,
               minmax(280px, 1fr)); gap: 14px; align-items: start; }
.detail-grid .panel { margin-bottom: 0; }
.detail-grid form.panel label input { width: 100%; }
.fields { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }


/* ------------------------------------------------- gantt zoom + layout */
.wrap.wide { max-width: none; margin: 18px 22px; }

/* what each zoom density shows: day numbers, weekly markers, or months */
.zoom-day .g-wk { display: none; }
.zoom-week .g-day, .zoom-month .g-day, .zoom-year .g-day { display: none; }
.zoom-month .g-wk, .zoom-year .g-wk { display: none; }
.zoom-month .g-bar span, .zoom-year .g-bar span { display: none; }
.zoom-month .g-bar, .zoom-year .g-bar { padding: 0; }
.zoom-year .g-hcell.g-sat, .zoom-year .g-hcell.g-sun { background: none; }

/* pan empty grid space by dragging */
.g-track, .g-jobtrack, .g-loadtrack { cursor: grab; }
.g-body.g-panning, .g-body.g-panning .g-track { cursor: grabbing; }