/* =========================================================================
   STRUCTRAX Dashboard — styles
   Palette: dark navy sidebar, LIGHT top banner (for logo readability),
   orange accent (#f4661e).
   ========================================================================= */

:root{
    --navy:        #0e1a2b;   /* sidebar */
    --navy-2:      #16273c;   /* sidebar hover */
    --accent:      #f4661e;   /* brand orange */
    --accent-soft: #fdece2;

    --bg:          #f4f6f9;   /* app background */
    --card:        #ffffff;
    --line:        #e6eaf0;
    --line-2:      #eef1f5;

    --text:        #1e2a38;
    --muted:       #6b7684;
    --muted-2:     #9aa5b1;

    --radius:      14px;
    --shadow:      0 1px 2px rgba(16,26,43,.04), 0 4px 16px rgba(16,26,43,.05);

    --sidebar-w:   232px;
    --topbar-h:    92px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }
h1{ font-size:26px; font-weight:800; letter-spacing:-.02em; }
h2{ font-size:16px; font-weight:700; }
h3{ font-size:16px; font-weight:700; }

.app{ display:flex; min-height:100vh; }

/* ----------------------------- SIDEBAR ---------------------------------- */
.sidebar{
    width:var(--sidebar-w);
    flex-shrink:0;
    background:var(--navy);
    padding-top:calc(var(--topbar-h) + 10px);
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
}
.side-nav{ display:flex; flex-direction:column; padding:0 12px 24px; gap:2px; }
.nav-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px;
    border-radius:9px;
    color:#aab6c6;
    font-weight:500;
    font-size:13.5px;
    transition:background .15s, color .15s;
}
.nav-item i{ width:18px; text-align:center; font-size:15px; }
.nav-item:hover{ background:var(--navy-2); color:#fff; }
.nav-item.is-active{ background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(244,102,30,.35); }

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:#24374f; border-radius:6px; }

/* ------------------------------- MAIN ----------------------------------- */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }

/* --------- TOP BANNER : lightened so the logo reads clearly ------------- */
.topbar{
    height:var(--topbar-h);
    background:#ffffff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:0 24px;
    position:sticky;
    top:0;
    z-index:20;
}
.brand{
    flex-shrink:0;
    display:flex;
    align-items:center;
}
.brand-logo{ height:70px; width:auto; display:block; }
.brand-fallback{ font-weight:800; font-size:22px; letter-spacing:.04em; color:var(--text); }
.brand-fallback::first-letter{ color:var(--accent); }

.search{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:min(44%,540px);
    display:flex; align-items:center; gap:10px;
    background:#f1f4f8;
    border:1px solid var(--line);
    border-radius:10px;
    padding:0 14px;
    height:42px;
}
.search i{ color:var(--muted-2); font-size:14px; }
.search input{ border:0; background:transparent; outline:0; width:100%; font-size:14px; color:var(--text); }
.search input::placeholder{ color:var(--muted-2); }

.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.icon-btn{
    position:relative;
    width:40px; height:40px;
    border:0; background:transparent; cursor:pointer;
    border-radius:10px;
    color:var(--muted);
    font-size:17px;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s, color .15s;
}
.icon-btn:hover{ background:#f1f4f8; color:var(--text); }
.badge{
    position:absolute; top:5px; right:5px;
    background:var(--accent); color:#fff;
    font-size:10px; font-weight:700;
    min-width:16px; height:16px; padding:0 4px;
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff;
}
.user{ display:flex; align-items:center; gap:10px; padding-left:10px; cursor:pointer; }
.user-meta{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.user-name{ font-weight:700; font-size:13.5px; }
.user-role{ color:var(--muted); font-size:12px; }
.avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.caret{ color:var(--muted-2); font-size:12px; }

/* ------------------------------ CONTENT --------------------------------- */
.content{ padding:26px 28px 40px; }

.page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.subtle{ color:var(--muted); }
.small{ font-size:12px; }
.page-head .subtle{ margin-top:4px; }
.page-filters{ display:flex; gap:12px; }
.select{
    display:flex; align-items:center; gap:10px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:9px 14px;
    font-size:13.5px; font-weight:500;
    color:var(--text);
    box-shadow:var(--shadow);
    cursor:pointer;
}
.select i{ color:var(--muted-2); font-size:12px; }

/* KPI cards */
.stat-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
    margin-bottom:20px;
}
.stat-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
    display:flex; gap:14px;
}
.stat-icon{
    width:44px; height:44px; flex-shrink:0;
    border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
}
.stat-body{ display:flex; flex-direction:column; min-width:0; }
.stat-label{ color:var(--muted); font-size:13px; font-weight:500; }
.stat-value{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:1px 0 4px; }
.stat-link{ color:var(--muted); font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:5px; }
.stat-link:hover{ color:var(--accent); }
.stat-link i{ font-size:10px; }

/* icon tones */
.tone-blue{   background:#e8f0fe; color:#2f6bff; }
.tone-green{  background:#e6f6ee; color:#12a05a; }
.tone-orange{ background:var(--accent-soft); color:var(--accent); }
.tone-purple{ background:#efeafe; color:#7c53e6; }
.tone-teal{   background:#e2f6f5; color:#12a5a0; }

/* ------------------------------- CARDS ---------------------------------- */
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.head-link{ color:var(--muted); font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.head-link:hover{ color:var(--accent); }
.pill{
    background:var(--accent); color:#fff; font-size:11px; font-weight:700;
    padding:1px 8px; border-radius:20px; margin-left:6px; vertical-align:middle;
}

.grid-3{
    display:grid;
    grid-template-columns:1.15fr 1fr 1.05fr;
    gap:18px;
    margin-bottom:20px;
}
.stack{ display:flex; flex-direction:column; gap:18px; }

/* Project overview */
.project-hero{ border-radius:11px; overflow:hidden; aspect-ratio:16/9; background:#dfe4ea; }
.project-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-hero.no-img{
    background:linear-gradient(135deg,#c9d2dc,#aab6c6);
    position:relative;
}
.project-hero.no-img::after{
    content:"\f1ad"; font-family:"Font Awesome 6 Free"; font-weight:900;
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.7); font-size:34px;
}
.project-info{ padding-top:14px; }
.project-info h3{ margin-bottom:3px; }
.progress-row{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.progress{ flex:1; height:8px; background:#eef1f5; border-radius:20px; overflow:hidden; }
.progress-fill{ height:100%; background:#12a05a; border-radius:20px; }
.progress-pct{ font-weight:700; font-size:13px; }

/* Activity */
.activity{ list-style:none; display:flex; flex-direction:column; }
.activity li{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.activity li:last-child{ border-bottom:0; }
.act-icon{ width:38px; height:38px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; }
.act-body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.act-title{ font-weight:600; font-size:13.5px; }
.act-time{ white-space:nowrap; }

/* Map */
.map{ position:relative; border-radius:11px; overflow:hidden; aspect-ratio:16/10; background:#e2e7ee; }
.map img{ width:100%; height:100%; object-fit:cover; display:block; }
.map.no-img{ background:repeating-linear-gradient(45deg,#e2e7ee,#e2e7ee 12px,#dfe4ea 12px,#dfe4ea 24px); }
.map-ctrl{ position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:6px; }
.map-ctrl button{
    width:32px; height:32px; border:1px solid var(--line);
    background:#fff; border-radius:8px; cursor:pointer;
    color:var(--text); font-size:13px; box-shadow:var(--shadow);
}
.map-ctrl button:hover{ background:#f1f4f8; }

/* Weather */
.weather-now{ display:flex; align-items:center; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--line-2); }
.weather-ico{ font-size:34px; color:#f5b715; }
.weather-now > div{ display:flex; flex-direction:column; }
.weather-temp{ font-size:28px; font-weight:800; letter-spacing:-.02em; }
.forecast{ display:flex; justify-content:space-between; padding-top:14px; }
.fc-day{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.fc-day i{ color:#f5b715; font-size:16px; }
.fc-day .fa-cloud, .fc-day .fa-cloud-sun-rain{ color:#9aa5b1; }

/* Tasks table */
.table-wrap{ overflow-x:auto; }
.tasks{ width:100%; border-collapse:collapse; }
.tasks th{
    text-align:left; font-size:12px; font-weight:600; text-transform:none;
    color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line);
    background:#fafbfc;
}
.tasks th:first-child{ border-top-left-radius:8px; }
.tasks th:last-child{ border-top-right-radius:8px; }
.tasks td{ padding:13px 14px; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.tasks tbody tr:hover{ background:#fafbfc; }
.tasks .strong{ font-weight:600; }

.tag{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.pri-high{   background:#fde7e7; color:#d63b3b; }
.pri-medium{ background:#fff1de; color:#c07a12; }
.pri-low{    background:#e9eef4; color:#5b6b7e; }
.st-in-progress{ background:#e8f0fe; color:#2f6bff; }
.st-pending{     background:#fff1de; color:#c07a12; }
.st-not-started{ background:#eef1f5; color:#6b7684; }
.st-scheduled{   background:#efeafe; color:#7c53e6; }
.st-completed{   background:#e6f6ee; color:#12a05a; }

/* ----------------------------- RESPONSIVE ------------------------------- */
@media (max-width:1200px){
    .stat-row{ grid-template-columns:repeat(3,1fr); }
    .grid-3{ grid-template-columns:1fr 1fr; }
    .grid-3 .stack{ grid-column:1 / -1; flex-direction:row; }
    .grid-3 .stack > .card{ flex:1; }
}
@media (max-width:900px){
    .sidebar{ display:none; }
    .brand{ width:auto; }
    .stat-row{ grid-template-columns:repeat(2,1fr); }
    .grid-3{ grid-template-columns:1fr; }
    .grid-3 .stack{ flex-direction:column; }
    .search{ position:static; transform:none; width:auto; flex:1; }
    .user-meta{ display:none; }
}