:root{--bp:#3b5bfd;--ink:#172033;--muted:#667085;--bg:#f5f7fb;--line:#e6eaf1}body{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.app-container{max-width:1480px;padding-left:clamp(1rem,3vw,3rem);padding-right:clamp(1rem,3vw,3rem)}.navbar{min-height:70px}.navbar-brand{color:var(--ink)}.brand-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#253ccf,#6f8cff);color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(59,91,253,.28)}.brand-mark-sm{width:36px;height:36px;border-radius:11px;font-size:.85rem}.page-title{font-size:clamp(1.7rem,2.4vw,2.45rem);font-weight:750;letter-spacing:-.035em}.section-title{font-size:1.05rem;font-weight:750;margin-bottom:1rem}.metric-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.15rem;display:flex;align-items:center;gap:1rem;height:100%}.metric-card i{width:44px;height:44px;border-radius:14px;background:#eef1ff;color:var(--bp);display:grid;place-items:center;font-size:1.25rem}.metric-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.metric-value{font-size:1.35rem;font-weight:800}.project-card{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.4rem;text-decoration:none;color:inherit;min-height:230px;transition:.2s ease}.project-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(31,42,77,.1);border-color:#cfd6ff}.project-card h2{font-size:1.2rem;font-weight:750;margin:1.3rem 0 .35rem}.project-card p{color:var(--muted);min-height:40px}.priority{font-size:.78rem;color:var(--muted)}.progress{height:8px;background:#e9ecf5}.progress-lg{height:12px}.progress-bar{background:linear-gradient(90deg,#3b5bfd,#6b8cff)}.card{border-radius:20px}.form-control,.form-select{border-color:#dce1ea;border-radius:11px;padding:.72rem .85rem}.form-control:focus,.form-select:focus{border-color:#94a4ff;box-shadow:0 0 0 .22rem rgba(59,91,253,.12)}.btn{border-radius:11px;font-weight:650}.btn-primary{background:var(--bp);border-color:var(--bp)}.spec-box{background:#f8f9fc;border:1px solid var(--line);border-radius:14px;padding:1rem;white-space:normal;line-height:1.7}.lead-sm{font-size:1.03rem;line-height:1.75}.milestone{border:1px solid var(--line);border-radius:16px;padding:1rem}.comment{border-left:3px solid #cbd3ff;padding:.25rem 0 .25rem 1rem}.facts{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:0}.facts dt{color:var(--muted);font-weight:500}.facts dd{text-align:right;font-weight:700;margin:0}.team-person{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--line)}.team-person:last-child{border:0}.team-person small{display:block;color:var(--muted)}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#edf0ff;color:#354fdf;font-weight:800}.activity-list>div{display:flex;gap:.75rem;position:relative}.activity-list>div>span{width:10px;height:10px;border-radius:50%;background:#6c84ff;margin-top:.35rem;flex:0 0 auto}.activity-list p{font-size:.9rem;margin:0 0 1rem}.activity-list small{display:block;color:var(--muted);margin-top:.2rem}.empty-state{background:#fff;border:1px dashed #cfd6e6;border-radius:20px;padding:3rem;text-align:center;color:var(--muted)}.empty-state.compact{padding:1.5rem}.login-page{min-height:100vh;background:radial-gradient(circle at 15% 10%,#dfe5ff 0,transparent 36%),radial-gradient(circle at 90% 80%,#d8f3ff 0,transparent 35%),#f7f8fc}.login-shell{min-height:100vh;display:grid;place-items:center;padding:1rem}.login-card{width:min(100%,460px);border-radius:24px}.table>:not(caption)>*>*{padding:1rem}@media(max-width:767px){.app-container{padding-left:1rem;padding-right:1rem}.facts{grid-template-columns:1fr}.facts dd{text-align:left;margin-bottom:.5rem}}

/* ===== Full-screen responsive layout ===== */

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

/* Remove the previous 1480px width restriction */
.app-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(12px, 2vw, 32px) !important;
    padding-right: clamp(12px, 2vw, 32px) !important;
}

/* Main content fills the available screen */
main.app-container {
    width: 100%;
    min-height: calc(100vh - 70px);
}

/* Navbar also uses the complete browser width */
.navbar > .app-container {
    width: 100%;
    max-width: none !important;
}

/* Keep dashboard elements responsive */
.row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.metric-card,
.project-card,
.card {
    width: 100%;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Prevent long project specifications from widening the page */
.spec-box,
.comment,
.card-body,
.project-card {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Tablet layout */
@media (max-width: 991.98px) {
    .app-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    main.app-container {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .page-title {
        font-size: 1.8rem;
    }
}

/* Mobile layout */
@media (max-width: 575.98px) {
    .app-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    main.app-container {
        padding-top: 16px !important;
        padding-bottom: 20px !important;
    }

    .card-body {
        padding: 16px !important;
    }

    .project-card {
        padding: 16px;
        min-height: auto;
    }

    .metric-card {
        padding: 14px;
    }

    .page-title {
        font-size: 1.55rem;
    }

    .navbar {
        min-height: 62px;
    }

    .navbar-brand strong {
        font-size: 0.95rem;
    }

    .brand-mark-sm {
        width: 34px;
        height: 34px;
    }

    .facts {
        grid-template-columns: 1fr;
    }

    .facts dd {
        text-align: left;
    }

    .btn {
        white-space: normal;
    }
}