/* =============================================================
   App chrome — header + sidebar for ALL pages (new Figma design)
   =============================================================
   Figma: BAKTI_Dahboard → Header (node 4090:53021) & Side Main Menu.
   Loaded globally via partials/head.php (after custom.css).

   Dashboard pages keep their .dn-body overrides (dark background
   image, transparent sidebar, tighter content padding) in
   dashboard-new.css — higher specificity, loaded later.

   Header: 72px — logo block 200px | hamburger (left of date) | date
   | profile (name, role badge, avatar). Sidebar: 200px, dark navy,
   48px menu rows, active #FEBF10, logout pill.
   ============================================================= */

/* =============================================================
   Header (Figma Header INSTANCE — 1920x72, fill #F9FAFB)
   Translucent + blur so the page background shows through.
   ============================================================= */
.bg-navbar {
    height: 72px;
    padding: 0;
    background: rgba(249, 250, 251, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bg-navbar #dateNow {
    margin-left: 16px;
    font-size: 12px;
    font-weight: 400;
    color: #202529 !important; /* beat .bg-navbar span in custom.css */
}

.dn-navbar-logo {
    width: 200px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* design: 'Main Logo' frame has a solid #F9FAFB fill */
    background: #f9fafb;
}

.dn-navbar-logo img {
    height: 32px;
    width: auto;
}

/* Hamburger / menu toggle — left of the date (Figma "Menu" 40×40,
   icon 14×14 #108A86). Rendered by partials/buttons.php dn_btn_menu(). */
.dn-navbar-toggler {
    width: 40px;
    height: 40px;
    margin-left: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E8ECF0;
    border: none !important;
    border-radius: 8px;
    padding: 0 !important;
}

.dn-navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2.5H13M1 7H13M1 11.5H13' stroke='%23108A86' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Profile block (design: name 12px, role badge 700, avatar) */
.profile-navbar {
    gap: 12px;
    margin: 0 1rem;
}

.profile-navbar > .profileNavbar {
    margin-right: 0;
    color: #202529 !important;
    font-size: 12px;
    font-weight: 400;
}

.dn-navbar-role {
    font-size: 12px;
    font-weight: 700;
    color: #202529;
    background: #E8ECF0;
    border-radius: 99px;
    padding: 2px 10px;
    white-space: nowrap;
}

.dn-navbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #108A86;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma "Group 241": solid circle + #65BDB0 user silhouette */
}

/* =============================================================
   Page background — dark navy + image, like the dashboard page
   (Figma frames, e.g. "Admin Vendor", use the same IMAGE fill
   02bb4760 behind the header + sidebar). The login page has its
   own background and is excluded via .login-page on <body>.
   ============================================================= */
body {
    background-color: #10222b;
}

body:not(.login-page)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #10222b url('/assets/images/dashboard-bg.png') no-repeat center top / cover;
    pointer-events: none;
}

/* Fixed chrome sits above the background layer; .main enters the
   normal flow above it as a white content panel spanning the width
   beside the sidebar (Figma Frame 5829) */
.bg-navbar,
.sidenav {
    z-index: 1040;
}

.main {
    position: relative;
    z-index: 1;
    background: #ffffff;
}

/* Dashboard pages keep the transparent content area (their own
   dn-body layout draws on the page background image) */
.dn-body .main {
    background: transparent;
}

/* Title bar shows the same dashboard-bg.png as the page background;
   background-attachment: fixed keeps the image aligned with the body
   image at every breakpoint */
.main-title {
    background: #10222b url('/assets/images/dashboard-bg.png') no-repeat center top / cover;
    background-attachment: fixed;
    -webkit-background-attachment: fixed;
}

/* =============================================================
   Sidebar (Figma Side Main Menu — 200px, below the header)
   Transparent over the dark page background, exactly like the
   dashboard page.
   ============================================================= */
.sidenav {
    width: 200px;
    top: 72px;
    height: calc(100% - 72px);
    background: transparent;
    padding: 8px 0 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidenav-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Logo block lives in the header now */
.sidenav > a.logo {
    display: none !important;
}

.sidenav-menu > a {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-size: 18px;
    color: #8FD6C8;
    text-decoration: none;
    white-space: nowrap;
}

.sidenav a.active {
    background: #FEBF10;
    color: #F9FAFB;
    font-weight: 700;
}

.sidenav-menu > a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* Submenu rows (Daftar Pekerjaan, Laporan, Kontraktual, …) */
.menu-item-submenu {
    position: relative;
}

.menu-item-submenu > .menu-link {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-size: 18px;
    color: #8FD6C8;
    text-decoration: none;
}

.menu-item-submenu > .menu-link .menu-bullet {
    display: none;
}

.menu-item-submenu > .menu-link .menu-arrow {
    color: #8FD6C8;
    margin-right: 24px;
    right: 0;
}

.menu-submenu {
    background: rgba(16, 138, 134, .22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 12px;
    margin: 4px 12px;
    padding: 6px;
}

.menu-subnav {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.menu-submenu .menu-item > .menu-link {
    color: #8FD6C8;
    font-size: 15px;
    padding: 8px 14px;
}

.menu-submenu .menu-item > .menu-link:hover {
    color: #fff;
}

.menu-submenu .menu-item.active > .menu-link {
    color: #fff;
    font-weight: 700;
}

/* Logout button (Figma Button/ Reguler — #3AA398 pill) */
.sidenav > .logout {
    margin: 8px 24px;
    width: 152px;
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #3AA398;
    border-radius: 99px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.sidenav > .logout:hover {
    background: #108A86;
    color: #fff;
}

/* =============================================================
   Page offsets — desktop only (custom.css defines these inside
   the same media query; this file loads after, so it wins).
   Header grew 40px → 72px and sidebar 190px → 200px.
   ============================================================= */
@media only screen and (min-width: 901px) {
    /* White content panel — spans the remaining width beside the
       200px sidebar (Figma Frame 5829) */
    .main {
        margin-left: 200px;
        min-height: 100vh;
        padding: 144px 40px 40px; /* 72 header + 72 title bar */
    }

    .dn-body .main {
        margin-left: 0;
        min-height: auto;
    }

    /* Title bar (Figma "Title" INSTANCE — 72px) spans the content
       column; the dashboard-bg.png image shows through it, aligned
       with the page background via background-attachment: fixed */
    .main-title {
        top: 72px;
        left: 200px;
        right: 0;
        width: auto;
        height: 72px;
        display: flex;
        align-items: center;
        padding: 0 40px;
        box-shadow: none;
    }

    /* Filter bars sit below the title bar, inside the content panel */
    .fixed-header {
        left: 200px;
        right: 0;
        width: auto;
        margin-top: 148px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Title label (Figma "Label" — 20px/700 white on the image bar).
   Strips the legacy white pill from custom.css so the label sits
   directly on the dashboard-bg.png background */
.main-title h5 {
    color: #fff;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* =============================================================
   Responsive — tablet / mobile
   ============================================================= */
@media (max-width: 900px) {
    .bg-navbar {
        height: 64px;
    }

    .sidenav {
        top: 64px;
        height: calc(100% - 64px);
        width: 240px;
        /* hidden by default on mobile; the hamburger (bootstrap
           collapse) adds .show — respect that like the rest of the app */
        display: none;
    }

    .sidenav.show {
        display: flex;
    }

    .dn-navbar-logo {
        width: auto;
        padding: 0 12px;
        height: 64px;
    }

    .dn-navbar-logo img {
        height: 28px;
    }

    .bg-navbar #dateNow {
        margin-left: 12px;
    }

    .profile-navbar > .profileNavbar,
    .dn-navbar-role {
        display: none;
    }

    .fixed-header {
        margin-top: 84px;
    }
}