:root {
    --gsi-blue: #163d75;
    --gsi-blue-dark: #0f2c57;
    --gsi-blue-soft: #eaf1fb;
    --gsi-accent: #2078d4;
    --gsi-bg: #f5f7fb;
    --gsi-border: #e1e6ef;
    --gsi-text: #172033;
    --gsi-muted: #778197;
    --sidebar-width: 260px;
}


/* ============================================================
   GENERAL
============================================================ */

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--gsi-bg);
    color: var(--gsi-text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

a {
    text-decoration: none;
}


/* ============================================================
   APP SHELL
============================================================ */

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


/* ============================================================
   SIDEBAR
============================================================ */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: var(--sidebar-width);

    background:
        linear-gradient(
            180deg,
            #123765 0%,
            #0c284d 100%
        );

    color: white;

    display: flex;
    flex-direction: column;

    z-index: 1000;
}


.brand {
    height: 84px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);
}


.brand-mark {
    width: 43px;
    height: 43px;

    border-radius: 11px;

    background: white;
    color: var(--gsi-blue);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: -1px;
}


.brand-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.4px;
}


.brand-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}


.sidebar-nav {
    flex: 1;
    overflow-y: auto;

    padding:
        18px
        14px;
}


.nav-section {
    color: rgba(255, 255, 255, 0.40);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;

    margin:
        18px
        12px
        7px;
}


.nav-section:first-child {
    margin-top: 0;
}


.nav-item {
    min-height: 43px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        0
        13px;

    border-radius: 9px;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 14px;
    font-weight: 500;

    margin-bottom: 3px;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}


.nav-item:hover {
    background:
        rgba(255, 255, 255, 0.08);

    color: white;
}


.nav-item.active {
    background:
        rgba(255, 255, 255, 0.14);

    color: white;
}


.nav-item.disabled {
    opacity: 0.46;
    pointer-events: none;
}


.nav-icon {
    width: 21px;
    text-align: center;
    font-size: 17px;
}


.sidebar-footer {
    padding: 14px;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);
}


.user-card {
    display: flex;
    align-items: center;
    gap: 10px;

    padding:
        8px
        7px;
}


.user-card-info {
    min-width: 0;
}


.user-card-name {
    color: white;
    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.user-card-role {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
}


.logout-link {
    display: block;

    color:
        rgba(255, 255, 255, 0.60);

    font-size: 12px;

    padding:
        5px
        7px;
}


.logout-link:hover {
    color: white;
}


/* ============================================================
   AVATAR
============================================================ */

.avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #dce8f9;
    color: var(--gsi-blue);

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;
}


.avatar-small {
    width: 35px;
    height: 35px;
}


.avatar-table {
    width: 36px;
    height: 36px;
    font-size: 13px;
}


/* ============================================================
   MAIN AREA
============================================================ */

.main-area {
    width:
        calc(
            100% - var(--sidebar-width)
        );

    margin-left:
        var(--sidebar-width);

    min-height: 100vh;
}


.topbar {
    height: 84px;

    background: white;

    border-bottom:
        1px solid var(--gsi-border);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0
        28px;

    position: sticky;
    top: 0;
    z-index: 900;
}


.topbar-title {
    font-size: 18px;
    font-weight: 800;
}


.topbar-subtitle {
    color: var(--gsi-muted);
    font-size: 12px;
    margin-top: 3px;
}


.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}


.topbar-user {
    text-align: right;
}


.topbar-user-name {
    font-size: 13px;
    font-weight: 700;
}


.topbar-user-meta {
    font-size: 11px;
    color: var(--gsi-muted);
}


.content-area {
    padding: 28px;
}


/* ============================================================
   PANELS
============================================================ */

.panel-card {
    background: white;

    border:
        1px solid var(--gsi-border);

    border-radius: 14px;

    padding: 22px;

    box-shadow:
        0
        4px
        14px
        rgba(28, 39, 61, 0.035);
}


.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


.panel-heading h5 {
    margin: 0 0 4px;
    font-weight: 800;
}


.panel-heading p {
    color: var(--gsi-muted);
    font-size: 13px;
    margin: 0;
}


.page-narrow {
    max-width: 580px;
}


/* ============================================================
   BUTTONS
============================================================ */

.btn-primary {
    background: var(--gsi-blue);
    border-color: var(--gsi-blue);
}


.btn-primary:hover,
.btn-primary:focus {
    background: var(--gsi-blue-dark);
    border-color: var(--gsi-blue-dark);
}


/* ============================================================
   DASHBOARD
============================================================ */

.welcome-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 24px;
}


.welcome-row h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}


.welcome-row p {
    margin: 0;
    color: var(--gsi-muted);
}


.metric-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.metric-card {
    background: white;

    border:
        1px solid var(--gsi-border);

    border-radius: 14px;

    padding: 20px;
}


.metric-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;

    color: var(--gsi-muted);
}


.metric-value {
    font-size: 31px;
    font-weight: 800;

    margin:
        8px
        0
        3px;
}


.metric-caption {
    color: var(--gsi-muted);
    font-size: 12px;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.empty-state {
    text-align: center;

    padding:
        48px
        20px;
}


.empty-icon {
    width: 56px;
    height: 56px;

    border-radius: 50%;

    background: var(--gsi-blue-soft);
    color: var(--gsi-blue);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;
    font-weight: 800;

    margin:
        0
        auto
        14px;
}


.empty-state p {
    color: var(--gsi-muted);
}


/* ============================================================
   PROJECT BOARD
============================================================ */

.board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 19px;
}


.board-header h2 {
    font-size: 23px;
    font-weight: 800;
    margin-bottom: 4px;
}


.board-header p {
    margin: 0;
    color: var(--gsi-muted);
}


.board-actions {
    display: flex;
    gap: 8px;
}


.board-tabs {
    display: flex;
    gap: 6px;

    margin-bottom: 18px;
}


.board-tab {
    padding:
        8px
        15px;

    background: white;

    border:
        1px solid var(--gsi-border);

    border-radius: 8px;

    color: #5a6476;

    font-size: 13px;
    font-weight: 600;
}


.board-tab.active {
    color: var(--gsi-blue);

    background:
        var(--gsi-blue-soft);

    border-color:
        #c9d9f1;
}


.kanban-wrapper {
    overflow-x: auto;
    padding-bottom: 14px;
}


.kanban-board {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    min-width: max-content;
}


.kanban-column {
    width: 285px;

    flex:
        0
        0
        285px;

    background:
        #f0f3f8;

    border:
        1px solid #e1e6ef;

    border-radius: 13px;

    overflow: hidden;
}


.kanban-column-header {
    min-height: 57px;

    padding:
        0
        15px;

    background: white;

    border-bottom:
        1px solid #e2e6ed;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.column-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
}


.column-title {
    font-size: 13px;
    font-weight: 800;
}


.column-count {
    min-width: 25px;
    height: 25px;

    padding:
        0
        7px;

    border-radius: 13px;

    background: #eff2f6;
    color: #707b8e;

    font-size: 11px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
}


.column-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}


.status-prospek {
    background: #878f9d;
}


.status-persiapan {
    background: #dcaa37;
}


.status-lapangan {
    background: #2576d2;
}


.status-data {
    background: #6657cc;
}


.status-draft {
    background: #b65bc6;
}


.status-review {
    background: #e17827;
}


.status-final {
    background: #1c9b85;
}


.status-selesai {
    background: #32a451;
}


.kanban-column-body {
    padding: 11px;

    min-height: 470px;
}


.kanban-placeholder {
    color: #9aa2af;
    text-align: center;

    padding:
        28px
        12px;

    font-size: 12px;
}


.kanban-empty-card {
    background: white;

    border:
        1px dashed #cfd6e1;

    border-radius: 10px;

    padding: 16px;

    display: flex;
    gap: 12px;
    align-items: center;

    color: #727d90;
}


.kanban-empty-card strong {
    display: block;
    color: #394255;
    font-size: 13px;
}


.kanban-empty-card span {
    display: block;

    color: #8e97a7;
    font-size: 11px;

    margin-top: 3px;
}


.empty-project-icon {
    width: 36px;
    height: 36px;

    border-radius: 8px;

    background:
        var(--gsi-blue-soft);

    color:
        var(--gsi-blue);

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    font-size: 21px;
}


/* ============================================================
   USER MANAGEMENT
============================================================ */

.user-list-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}


.user-list-profile strong {
    display: block;
    font-size: 13px;
}


.user-list-profile span {
    display: block;

    color: var(--gsi-muted);
    font-size: 11px;
}


.role-badge {
    display: inline-flex;

    padding:
        5px
        9px;

    border-radius: 7px;

    background:
        var(--gsi-blue-soft);

    color:
        var(--gsi-blue);

    font-size: 11px;
    font-weight: 700;
}


.status-badge {
    display: inline-flex;

    padding:
        5px
        9px;

    border-radius: 7px;

    font-size: 10px;
    font-weight: 800;
}


.status-active {
    background: #e4f5eb;
    color: #21834a;
}


.status-inactive {
    background: #f4e8e8;
    color: #a43e3e;
}


.user-table thead th {
    color: #737d8f;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;

    border-bottom:
        1px solid #e6eaf0;
}


.user-table tbody td {
    font-size: 13px;

    border-bottom:
        1px solid #edf0f4;
}


/* ============================================================
   LOGIN
============================================================ */

.login-page {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(460px, 42%)
        1fr;

    background: white;
}


.login-panel {
    display: flex;
    flex-direction: column;

    padding:
        42px
        64px;
}


.login-brand {
    display: flex;
    align-items: center;

    gap: 12px;
}


.login-brand-mark {
    width: 48px;
    height: 48px;

    border-radius: 12px;

    color: white;

    background:
        var(--gsi-blue);

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 900;
}


.login-brand-title {
    color:
        var(--gsi-blue-dark);

    font-size: 15px;
    font-weight: 900;

    letter-spacing: 0.5px;
}


.login-brand-subtitle {
    color:
        var(--gsi-muted);

    font-size: 11px;
}


.login-card {
    width: 100%;
    max-width: 420px;

    margin:
        auto;
}


.login-heading {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 5px;
}


.login-description {
    color:
        var(--gsi-muted);

    margin-bottom: 28px;
}


.login-card .form-control {
    min-height: 50px;

    border-radius: 9px;

    border-color:
        #d9dee7;

    font-size: 14px;
}


.login-card .btn {
    min-height: 50px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
}


.login-help {
    text-align: center;

    color:
        var(--gsi-muted);

    font-size: 12px;

    margin-top: 22px;
}


.login-footer {
    color:
        #a1a7b2;

    font-size: 11px;
}


.login-visual {
    margin: 14px;

    border-radius: 23px;

    background:
        linear-gradient(
            135deg,
            #102f5d 0%,
            #1a4e8b 58%,
            #2476bd 100%
        );

    color: white;

    display: flex;
    align-items: center;

    overflow: hidden;

    position: relative;
}


.login-visual::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

    right: -280px;
    top: -190px;
}


.login-visual-content {
    position: relative;
    z-index: 2;

    max-width: 680px;

    padding: 70px;
}


.visual-label {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;

    color:
        rgba(255, 255, 255, 0.68);

    margin-bottom: 18px;
}


.login-visual h1 {
    max-width: 570px;

    font-size: 42px;
    line-height: 1.14;

    font-weight: 800;

    margin-bottom: 19px;
}


.login-visual p {
    max-width: 520px;

    color:
        rgba(255, 255, 255, 0.70);

    font-size: 15px;
}


.visual-grid {
    margin-top: 40px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}


.visual-card {
    min-height: 90px;

    padding: 16px;

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid rgba(255, 255, 255, 0.11);

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.visual-card strong {
    font-size: 12px;
    letter-spacing: 0.7px;
}


.visual-card span {
    color:
        rgba(255, 255, 255, 0.62);

    font-size: 11px;

    margin-top: 5px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1050px) {

    .metric-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .login-page {
        grid-template-columns: 1fr;
    }

    .login-visual {
        display: none;
    }

    .login-panel {
        min-height: 100vh;
    }

}


@media (max-width: 800px) {

    :root {
        --sidebar-width: 76px;
    }

    .brand {
        justify-content: center;
        padding: 0;
    }

    .brand > div:last-child {
        display: none;
    }

    .nav-section {
        display: none;
    }

    .nav-item {
        justify-content: center;
        padding: 0;
    }

    .nav-item {
        font-size: 0;
    }

    .nav-icon {
        font-size: 18px;
    }

    .user-card-info,
    .logout-link {
        display: none;
    }

    .sidebar-footer {
        display: flex;
        justify-content: center;
    }

}


@media (max-width: 600px) {

    .content-area {
        padding: 17px;
    }

    .topbar {
        padding:
            0
            17px;
    }

    .topbar-user {
        display: none;
    }

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

    .welcome-row,
    .board-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .login-panel {
        padding:
            30px
            22px;
    }

}


/* ============================================================
   LOGO IMAGE
============================================================ */

.brand-logo-wrap {
    width: 52px;
    height: 52px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.08);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    flex: 0 0 auto;
}

.brand-logo {
    max-width: 42px;
    max-height: 42px;
    width: auto;
    height: auto;
    display: block;
}

.login-brand-logo-wrap {
    width: 58px;
    height: 58px;

    border-radius: 14px;

    background: #f3f6fb;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    flex: 0 0 auto;
}

.login-brand-logo {
    max-width: 46px;
    max-height: 46px;
    width: auto;
    height: auto;
    display: block;
}

/* ============================================================
   FINAL GSI LOGO OVERRIDE
============================================================ */

.login-brand {
    display: flex;
    align-items: center;
    gap: 20px;
}

.login-brand-logo-wrap {
    width: 190px !important;
    height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 190px !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
}

.login-brand-logo {
    width: 180px !important;
    max-width: 180px !important;

    height: auto !important;
    max-height: 68px !important;

    object-fit: contain !important;
    object-position: left center !important;

    display: block !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* SIDEBAR */

.brand-logo-wrap {
    width: 90px !important;
    height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 90px !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    padding: 0 !important;
}

.brand-logo {
    width: 86px !important;
    max-width: 86px !important;

    height: auto !important;
    max-height: 45px !important;

    object-fit: contain !important;
    object-position: left center !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* ============================================================
   GSI LOGIN FINAL BRANDING
============================================================ */

.login-page {
    grid-template-columns:
        minmax(560px, 45%)
        1fr;
}


.login-panel {
    padding:
        46px
        78px
        30px;

    display: flex;
    flex-direction: column;

    background: #ffffff;
}


.login-brand-new {
    width: 100%;
    max-width: 525px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-bottom: 54px;
}


.login-company-logo {
    width: 245px;
    height: auto;

    max-height: 90px;

    object-fit: contain;
    object-position: left center;

    display: block;

    background: transparent;

    margin-bottom: 20px;
}


.workhub-identity {
    border-left: 4px solid #173f78;

    padding-left: 15px;
}


.workhub-name {
    color: #123765;

    font-size: 19px;
    font-weight: 850;

    letter-spacing: 0.7px;

    line-height: 1.2;
}


.workhub-description {
    color: #7c879a;

    font-size: 13px;

    margin-top: 5px;
}


.login-card {
    width: 100%;
    max-width: 525px;

    margin: 0;
}


.login-heading {
    font-size: 36px;
    line-height: 1.15;

    font-weight: 800;

    color: #14213a;

    margin-bottom: 8px;
}


.login-description {
    font-size: 16px;

    color: #818aa0;

    margin-bottom: 34px;
}


.login-card .form-label {
    font-size: 14px;
    font-weight: 600;

    color: #222b3b;

    margin-bottom: 8px;
}


.login-card .form-control {
    min-height: 58px;

    border-radius: 10px;

    border:
        1px solid #d6dce6;

    padding:
        0
        18px;

    font-size: 14px;

    box-shadow: none;
}


.login-card .form-control:focus {
    border-color: #8eb7e9;

    box-shadow:
        0
        0
        0
        4px
        rgba(57, 126, 207, 0.12);
}


.login-card .form-check {
    margin-top: 4px;
}


.login-card .form-check-label {
    font-size: 14px;

    color: #31394a;
}


.login-card .btn-primary {
    min-height: 58px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.4px;

    background: #173f78;

    border-color: #173f78;
}


.login-card .btn-primary:hover {
    background: #102f5e;

    border-color: #102f5e;
}


.login-help {
    margin-top: 24px;

    text-align: center;

    color: #8992a5;

    font-size: 12px;
}


.login-footer {
    margin-top: auto;

    padding-top: 30px;

    color: #9aa3b3;

    font-size: 11px;
}


.login-visual {
    margin:
        16px
        16px
        16px
        0;

    border-radius: 26px;
}


/* sembunyikan style brand lama */

.login-brand,
.login-brand-logo-wrap,
.login-brand-logo,
.login-brand-mark {
    display: none !important;
}


@media (max-width: 1100px) {

    .login-page {
        grid-template-columns:
            minmax(500px, 48%)
            1fr;
    }

    .login-panel {
        padding:
            42px
            55px
            28px;
    }

    .login-company-logo {
        width: 220px;
    }

}


@media (max-width: 800px) {

    .login-page {
        grid-template-columns: 1fr;
    }

    .login-panel {
        padding:
            34px
            28px
            24px;
    }

    .login-brand-new,
    .login-card {
        max-width: 100%;
    }

    .login-company-logo {
        width: 210px;
    }

}



/* ============================================================
   LOGIN 1 SCREEN FINAL FIX
============================================================ */

html,
body {
    height: 100%;
}

body {
    overflow-x: hidden;
}


/* khusus halaman login */

.login-page {
    height: 100vh !important;
    min-height: 100vh !important;

    display: grid !important;

    grid-template-columns:
        minmax(540px, 45%)
        1fr !important;

    overflow: hidden !important;

    background: #ffffff;
}


.login-panel {
    height: 100vh !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    padding:
        30px
        72px
        22px !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


.login-brand-new {
    width: 100%;
    max-width: 525px;

    margin-bottom: 28px !important;

    flex: 0 0 auto;
}


.login-company-logo {
    width: 235px !important;

    max-height: 76px !important;

    margin-bottom: 14px !important;
}


.workhub-name {
    font-size: 18px !important;
}


.workhub-description {
    font-size: 12px !important;
}


.login-card {
    width: 100%;
    max-width: 525px;

    margin: 0 !important;

    flex: 0 0 auto;
}


.login-heading {
    font-size: 34px !important;

    margin-bottom: 6px !important;
}


.login-description {
    font-size: 15px !important;

    margin-bottom: 24px !important;
}


.login-card .mb-3 {
    margin-bottom: 16px !important;
}


.login-card .mb-4 {
    margin-bottom: 18px !important;
}


.login-card .form-label {
    margin-bottom: 6px !important;
}


.login-card .form-control {
    min-height: 52px !important;
    height: 52px !important;
}


.login-card .btn-primary {
    min-height: 54px !important;
    height: 54px !important;
}


.login-help {
    margin-top: 18px !important;
}


.login-footer {
    margin-top: auto !important;

    padding-top: 12px !important;

    flex: 0 0 auto;
}


/* panel kanan */

.login-visual {
    height:
        calc(
            100vh - 24px
        ) !important;

    min-height: 0 !important;

    margin:
        12px
        12px
        12px
        0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border-radius: 24px !important;
}


.login-visual-content {
    padding:
        50px
        68px !important;

    max-width: 680px;

    box-sizing: border-box;
}


.login-visual h1 {
    font-size: 38px !important;

    line-height: 1.12 !important;

    margin-bottom: 16px !important;
}


.login-visual p {
    font-size: 14px !important;

    margin-bottom: 0 !important;
}


.visual-grid {
    margin-top: 28px !important;

    gap: 10px !important;
}


.visual-card {
    min-height: 78px !important;

    padding: 13px !important;
}


/* ============================================================
   LAPTOP HEIGHT
============================================================ */

@media (max-height: 850px) and (min-width: 801px) {

    .login-panel {
        padding:
            22px
            64px
            16px !important;
    }

    .login-brand-new {
        margin-bottom: 18px !important;
    }

    .login-company-logo {
        width: 210px !important;
        max-height: 66px !important;
        margin-bottom: 10px !important;
    }

    .workhub-name {
        font-size: 17px !important;
    }

    .workhub-description {
        font-size: 11px !important;
    }

    .login-heading {
        font-size: 31px !important;
    }

    .login-description {
        margin-bottom: 18px !important;
    }

    .login-card .mb-3 {
        margin-bottom: 12px !important;
    }

    .login-card .mb-4 {
        margin-bottom: 14px !important;
    }

    .login-card .form-control {
        height: 48px !important;
        min-height: 48px !important;
    }

    .login-card .btn-primary {
        height: 50px !important;
        min-height: 50px !important;
    }

    .login-help {
        margin-top: 13px !important;
    }

    .login-footer {
        padding-top: 8px !important;
    }

    .login-visual-content {
        padding:
            38px
            55px !important;
    }

    .login-visual h1 {
        font-size: 34px !important;
    }

    .visual-grid {
        margin-top: 22px !important;
    }

    .visual-card {
        min-height: 68px !important;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 800px) {

    body {
        overflow-y: auto;
    }

    .login-page {
        height: auto !important;
        min-height: 100vh !important;

        grid-template-columns: 1fr !important;

        overflow: visible !important;
    }

    .login-panel {
        height: auto !important;
        min-height: 100vh !important;

        padding:
            28px
            24px !important;

        overflow: visible !important;
    }

    .login-visual {
        display: none !important;
    }

}



/* ============================================================
   PROJECT CARD
============================================================ */

.project-card {
    background: #ffffff;

    border:
        1px solid
        #dde3ec;

    border-radius: 11px;

    margin-bottom: 10px;

    box-shadow:
        0
        2px
        5px
        rgba(20, 35, 60, 0.04);

    cursor: grab;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.project-card:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0
        5px
        13px
        rgba(20, 35, 60, 0.08);
}


.project-card.dragging {
    opacity: 0.45;
}


.project-card-link {
    display: block;

    color: inherit;

    padding: 14px;
}


.project-card-link:hover {
    color: inherit;
}


.project-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}


.project-number {
    font-size: 12px;

    font-weight: 850;

    color:
        #173f78;

    margin-bottom: 4px;
}


.project-name {
    font-size: 13px;

    line-height: 1.4;

    font-weight: 750;

    color:
        #20293a;
}


.project-card-menu {
    color: #8a93a3;
}


.project-client {
    color:
        #687386;

    font-size: 11px;

    margin-top: 9px;
}


.project-category {
    display: inline-flex;

    margin-top: 9px;

    padding:
        4px
        8px;

    border-radius: 6px;

    background:
        #eaf2fb;

    color:
        #2468ae;

    font-size: 10px;
    font-weight: 750;
}


.project-progress-row {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 14px;
}


.project-progress-row > span {
    width: 34px;

    font-size: 10px;

    text-align: right;

    color:
        #707b8f;
}


.project-progress-track {
    flex: 1;

    height: 6px;

    background:
        #e9edf3;

    border-radius: 999px;

    overflow: hidden;
}


.project-progress-fill {
    height: 100%;

    background:
        #2582dd;

    border-radius: 999px;
}


.project-card-footer {
    margin-top: 13px;

    padding-top: 11px;

    border-top:
        1px solid #edf0f4;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.project-deadline {
    color:
        #747f91;

    font-size: 10px;
}


.project-people {
    display: flex;
    align-items: center;
}


.mini-avatar {
    width: 27px;
    height: 27px;

    border-radius: 50%;

    background:
        #173f78;

    color: white;

    border:
        2px solid white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 9px;
    font-weight: 800;

    margin-left: -5px;
}


.mini-avatar:first-child {
    margin-left: 0;
}


.mini-avatar-secondary {
    background:
        #5486b8;
}


/* ============================================================
   DRAG DROP
============================================================ */

.kanban-column-body.drag-over {
    background:
        #e7eff9;

    outline:
        2px dashed
        #5a91cf;

    outline-offset:
        -5px;
}


/* ============================================================
   PROJECT FORM
============================================================ */

.project-form-page {
    max-width: 1300px;
}


.project-form-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}


.project-form-header h2 {
    font-size: 24px;
    font-weight: 800;

    margin-bottom: 4px;
}


.project-form-header p {
    color:
        var(--gsi-muted);

    margin: 0;
}


.form-section-title {
    font-size: 15px;

    font-weight: 800;

    margin-bottom: 20px;
}


.project-form-info {
    color:
        var(--gsi-muted);

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 22px;
}


/* ============================================================
   PROJECT DETAIL
============================================================ */

.project-detail-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    margin-bottom: 22px;
}


.project-back-link {
    color:
        #718096;

    font-size: 12px;
}


.project-detail-header h2 {
    margin:
        10px
        0
        4px;

    font-size: 25px;

    font-weight: 800;
}


.project-detail-client {
    color:
        #748095;

    font-size: 13px;
}


.project-detail-progress {
    width: 260px;

    text-align: right;
}


.project-detail-progress strong {
    display: block;

    margin-bottom: 8px;

    font-size: 18px;
}


.project-detail-tabs {
    display: flex;

    gap: 25px;

    background: white;

    border:
        1px solid
        var(--gsi-border);

    border-radius: 11px;

    padding:
        0
        20px;

    margin-bottom: 22px;
}


.project-detail-tabs span {
    padding:
        15px
        0;

    color:
        #7a8597;

    font-size: 12px;

    font-weight: 600;
}


.project-detail-tabs span.active {
    color:
        #173f78;

    border-bottom:
        3px solid
        #173f78;
}


.project-info-list {
    margin-top: 18px;
}


.project-info-list > div {
    display: grid;

    grid-template-columns:
        130px
        1fr;

    gap: 10px;

    padding:
        10px
        0;

    border-bottom:
        1px solid #edf0f4;
}


.project-info-list span {
    color:
        #8490a3;

    font-size: 11px;
}


.project-info-list strong {
    font-size: 12px;
}


.activity-list {
    margin-top: 20px;
}


.activity-item {
    display: flex;

    gap: 13px;

    padding:
        13px
        0;

    border-bottom:
        1px solid #edf0f4;
}


.activity-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        #2782d8;

    margin-top: 5px;

    flex: 0 0 auto;
}


.activity-item strong {
    font-size: 12px;
}


.activity-description {
    color:
        #556176;

    font-size: 12px;

    margin:
        3px
        0;
}


.activity-item span {
    color:
        #9aa3b2;

    font-size: 10px;
}


/* ============================================================
   SORTABLE KANBAN
============================================================ */

.project-sortable {
    min-height: 470px;
}


.project-card {
    cursor: grab;
    user-select: none;
}


.project-card:active {
    cursor: grabbing;
}


.project-card-content {
    padding: 14px;
}


.project-card-menu {
    border: none;
    background: transparent;

    color: #8a93a3;

    font-size: 20px;
    line-height: 1;

    padding: 0 3px;

    cursor: pointer;
}


.kanban-ghost {
    opacity: 0.30;

    background: #dceafb !important;

    border:
        2px dashed
        #4385cb !important;
}


.kanban-chosen {
    box-shadow:
        0
        10px
        25px
        rgba(19, 55, 101, 0.16);
}


.kanban-drag {
    opacity: 0.95;
}


body.kanban-dragging {
    cursor: grabbing !important;
}


body.kanban-dragging * {
    cursor: grabbing !important;
}


/* ============================================================
   PROJECT TEAM
============================================================ */

.project-detail-actions {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}


.sticky-project-action {
    position: sticky;
    top: 110px;
}


.project-team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
}


.project-team-header h5 {
    margin: 0;

    font-weight: 800;
}


.project-team-header span {
    display: block;

    margin-top: 3px;

    color: #8590a2;

    font-size: 11px;
}


.project-team-list {
    display: flex;
    flex-direction: column;
}


.project-team-member {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        11px
        0;

    border-bottom:
        1px solid
        #edf0f4;
}


.team-avatar {
    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    border-radius: 50%;

    background:
        #e5effb;

    color:
        #173f78;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 800;
}


.team-member-info {
    min-width: 0;
    flex: 1;
}


.team-member-info strong {
    display: block;

    font-size: 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.team-member-info span {
    display: block;

    color:
        #4c6f9e;

    font-size: 10px;

    margin-top: 2px;
}


.team-member-info small {
    display: block;

    color:
        #929cad;

    font-size: 9px;

    margin-top: 2px;
}


.team-remove-btn {
    width: 28px;
    height: 28px;

    border: none;

    border-radius: 7px;

    background:
        #f7ecec;

    color:
        #b55454;

    font-size: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}


.team-remove-btn:hover {
    background:
        #efdada;
}


.team-add-form {
    padding-top: 18px;
}


.team-add-title {
    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing:
        0.7px;

    color:
        #6f7a8d;

    margin-bottom: 10px;
}


.mini-avatar-more {
    background:
        #edf1f6;

    color:
        #526075;

    font-size: 8px;
}


/* ============================================================
   PROJECT DETAIL TABS LINK
============================================================ */

.project-detail-tabs a {
    padding:
        15px
        0;

    color:
        #7a8597;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;
}


.project-detail-tabs a:hover {
    color:
        #173f78;
}


.project-detail-tabs a.active {
    color:
        #173f78;

    border-bottom:
        3px solid
        #173f78;
}


/* ============================================================
   TASK METRICS
============================================================ */

.task-metric-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 13px;

    margin-bottom: 20px;
}


.task-metric-card {
    background: white;

    border:
        1px solid
        var(--gsi-border);

    border-radius: 11px;

    padding:
        15px
        17px;
}


.task-metric-card span {
    display: block;

    color:
        #818b9d;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing:
        0.5px;
}


.task-metric-card strong {
    display: block;

    margin-top: 5px;

    font-size: 23px;

    color:
        #1e293b;
}


.task-metric-done strong {
    color:
        #278553;
}


/* ============================================================
   TASK PANEL
============================================================ */

.task-panel-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.task-panel-header h5 {
    margin: 0;

    font-weight: 800;
}


.task-panel-header p {
    margin:
        4px
        0
        0;

    color:
        #8490a3;

    font-size: 11px;
}


.task-progress-label {
    color:
        #173f78;

    font-size: 20px;

    font-weight: 850;
}


.task-main-progress {
    margin:
        17px
        0
        6px;

    height: 8px;
}


/* ============================================================
   TASK LIST
============================================================ */

.task-list {
    margin-top: 18px;
}


.task-row {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 74px;

    padding:
        12px
        2px;

    border-bottom:
        1px solid
        #edf0f4;
}


.task-row:last-child {
    border-bottom: none;
}


.task-row-done {
    opacity: 0.72;
}


.task-row-done .task-title {
    text-decoration:
        line-through;

    color:
        #768196;
}


.task-check-button {
    width: 27px;
    height: 27px;

    flex:
        0
        0
        27px;

    border:
        2px solid
        #c6cfdb;

    border-radius: 7px;

    background:
        white;

    color:
        white;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;
}


.task-check-button:hover {
    border-color:
        #3b7dc2;
}


.task-check-button.checked {
    border-color:
        #23885a;

    background:
        #23885a;
}


.task-row-main {
    flex: 1;

    min-width: 0;
}


.task-title {
    color:
        #263044;

    font-size: 13px;

    font-weight: 750;
}


.task-description {
    margin-top: 4px;

    color:
        #7c8799;

    font-size: 11px;

    line-height: 1.45;
}


.task-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        7px
        15px;

    margin-top: 7px;
}


.task-meta span {
    color:
        #8a94a5;

    font-size: 9px;
}


.task-row-status {
    flex:
        0
        0
        125px;
}


.task-status-select {
    width: 100%;

    min-height: 34px;

    border:
        1px solid transparent;

    border-radius: 7px;

    padding:
        0
        8px;

    font-size: 10px;

    font-weight: 750;

    cursor: pointer;
}


.task-status-todo {
    background:
        #edf0f4;

    color:
        #586477;
}


.task-status-in_progress {
    background:
        #e7f1fc;

    color:
        #236caf;
}


.task-status-review {
    background:
        #fff2d8;

    color:
        #986a13;
}


.task-status-done {
    background:
        #e3f5ea;

    color:
        #237b49;
}


.task-delete-button {
    width: 29px;
    height: 29px;

    border: none;

    border-radius: 7px;

    background:
        transparent;

    color:
        #a4acb9;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 18px;

    cursor: pointer;
}


.task-delete-button:hover {
    background:
        #f6e8e8;

    color:
        #b24c4c;
}


/* ============================================================
   TASK EMPTY
============================================================ */

.task-empty-state {
    text-align: center;

    padding:
        55px
        20px;
}


.task-empty-icon {
    width: 48px;
    height: 48px;

    margin:
        0
        auto
        12px;

    border-radius: 50%;

    background:
        #e9f1fb;

    color:
        #236caf;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 20px;

    font-weight: 850;
}


.task-empty-state h5 {
    margin-bottom: 4px;
}


.task-empty-state p {
    color:
        #8993a4;

    font-size: 12px;
}


/* ============================================================
   TASK RESPONSIVE
============================================================ */

@media (
    max-width: 1100px
) {

    .task-metric-grid {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

}


@media (
    max-width: 700px
) {

    .task-metric-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

    .task-row {
        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }

    .task-row-status {
        flex:
            1
            1
            100%;
    }

}


/* ============================================================
   CHAT
============================================================ */

.chat-layout {
    height:
        calc(
            100vh - 140px
        );

    min-height: 620px;

    display: grid;

    grid-template-columns:
        320px
        minmax(0, 1fr);

    background: white;

    border:
        1px solid
        var(--gsi-border);

    border-radius: 14px;

    overflow: hidden;
}


.chat-sidebar {
    background:
        #f7f9fc;

    border-right:
        1px solid
        #e1e6ee;

    overflow-y: auto;

    padding:
        18px
        12px;
}


.chat-sidebar-title {
    padding:
        0
        10px
        16px;

    font-size: 20px;

    font-weight: 850;

    color:
        #172033;
}


.chat-section-label {
    padding:
        8px
        10px;

    color:
        #8a94a6;

    font-size: 9px;

    font-weight: 850;

    letter-spacing:
        0.9px;
}


.chat-direct-label {
    margin-top: 20px;
}


.chat-room-list,
.chat-user-list {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.chat-room-item,
.chat-user-item {
    min-height: 57px;

    padding:
        9px
        10px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        #283346;

    text-decoration: none;
}


.chat-room-item:hover,
.chat-user-item:hover {
    background:
        #eaf0f8;

    color:
        #18283e;
}


.chat-room-item.active {
    background:
        #dfeafb;

    color:
        #173f78;
}


.chat-room-avatar,
.chat-user-avatar {
    width: 37px;
    height: 37px;

    flex:
        0
        0
        37px;

    border-radius: 50%;

    background:
        #dfe9f7;

    color:
        #174379;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 850;
}


.chat-room-info {
    flex: 1;

    min-width: 0;
}


.chat-room-info strong,
.chat-user-item strong {
    display: block;

    font-size: 11px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.chat-room-info span,
.chat-user-item span {
    display: block;

    margin-top: 2px;

    color:
        #8b95a7;

    font-size: 9px;
}


.chat-unread-badge,
.sidebar-unread-badge {
    min-width: 20px;
    height: 20px;

    padding:
        0
        6px;

    border-radius: 999px;

    background:
        #dc3d50;

    color: white;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    font-weight: 850;
}


.sidebar-unread-badge {
    margin-left: auto;
}


.chat-sidebar-empty {
    padding:
        15px
        10px;

    color:
        #949ead;

    font-size: 11px;
}


/* ============================================================
   CHAT MAIN
============================================================ */

.chat-main {
    min-width: 0;

    display: flex;

    flex-direction: column;

    background:
        #ffffff;
}


.chat-header {
    min-height: 72px;

    padding:
        0
        22px;

    border-bottom:
        1px solid
        #e7eaf0;

    display: flex;

    align-items: center;
}


.chat-header h3 {
    margin: 0;

    font-size: 16px;

    font-weight: 800;
}


.chat-header span {
    display: block;

    margin-top: 3px;

    color:
        #8993a5;

    font-size: 10px;
}


.chat-messages {
    flex: 1;

    overflow-y: auto;

    padding:
        22px;

    background:
        #fbfcfe;
}


.chat-message {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    max-width: 780px;

    margin-bottom: 18px;
}


.chat-message.own-message {
    margin-left: auto;

    flex-direction: row-reverse;
}


.message-avatar {
    width: 36px;
    height: 36px;

    flex:
        0
        0
        36px;

    border-radius: 50%;

    background:
        #e0eaf7;

    color:
        #173f78;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 850;
}


.message-body {
    min-width: 0;

    max-width: 650px;

    padding:
        10px
        13px;

    border:
        1px solid
        #e3e7ed;

    border-radius:
        4px
        12px
        12px
        12px;

    background:
        white;

    box-shadow:
        0
        2px
        4px
        rgba(
            20,
            35,
            55,
            0.025
        );
}


.own-message .message-body {
    background:
        #eaf2fc;

    border-color:
        #d6e4f6;

    border-radius:
        12px
        4px
        12px
        12px;
}


.message-meta {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 5px;
}


.message-meta strong {
    font-size: 10px;
}


.message-meta span {
    color:
        #9aa3b2;

    font-size: 8px;
}


.message-text {
    color:
        #303a4d;

    font-size: 12px;

    line-height: 1.55;

    white-space: pre-wrap;

    word-break: break-word;
}


/* ============================================================
   ATTACHMENT
============================================================ */

.message-attachment {
    margin-top: 9px;

    min-width: 260px;

    padding:
        10px;

    border:
        1px solid
        #dce3ed;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 9px;

    background:
        #f8fafc;

    color:
        #314056;

    text-decoration: none;
}


.message-attachment:hover {
    background:
        #f0f5fa;

    color:
        #173f78;
}


.message-file-icon {
    font-size: 21px;
}


.message-attachment strong {
    display: block;

    max-width: 300px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 10px;
}


.message-attachment span {
    display: block;

    margin-top: 2px;

    color:
        #9099a8;

    font-size: 8px;
}


/* ============================================================
   CHAT COMPOSER
============================================================ */

.chat-composer {
    min-height: 70px;

    padding:
        11px
        15px;

    border-top:
        1px solid
        #e4e8ef;

    display: flex;

    align-items: flex-end;

    gap: 9px;

    background:
        white;
}


.chat-composer textarea {
    flex: 1;

    min-height: 44px;

    max-height: 120px;

    resize: none;

    border:
        1px solid
        #d8dee8;

    border-radius: 9px;

    padding:
        11px
        13px;

    outline: none;

    font-family: inherit;

    font-size: 12px;
}


.chat-composer textarea:focus {
    border-color:
        #76a4da;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            43,
            117,
            201,
            0.09
        );
}


.chat-attachment-button {
    width: 43px;
    height: 43px;

    flex:
        0
        0
        43px;

    border-radius: 9px;

    background:
        #f0f3f7;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;
}


.chat-attachment-button:hover {
    background:
        #e3eaf3;
}


.chat-send-button {
    width: 44px;
    height: 44px;

    flex:
        0
        0
        44px;

    border: none;

    border-radius: 9px;

    background:
        #17447e;

    color: white;

    cursor: pointer;

    font-size: 17px;
}


.chat-send-button:hover {
    background:
        #102f5e;
}


.chat-selected-file {
    min-height: 23px;

    padding:
        3px
        70px
        7px;

    color:
        #68768a;

    font-size: 9px;

    background:
        white;
}


/* ============================================================
   CHAT EMPTY
============================================================ */

.chat-empty,
.chat-no-room {
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color:
        #8b95a6;
}


.chat-empty-icon {
    width: 62px;
    height: 62px;

    margin-bottom: 12px;

    border-radius: 50%;

    background:
        #e9f1fb;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;
}


.chat-empty h4,
.chat-no-room h3 {
    color:
        #324058;

    margin-bottom: 5px;
}


.chat-empty p,
.chat-no-room p {
    font-size: 11px;
}


/* ============================================================
   CHAT RESPONSIVE
============================================================ */

@media (
    max-width: 900px
) {

    .chat-layout {
        grid-template-columns:
            250px
            minmax(0, 1fr);
    }

}


@media (
    max-width: 700px
) {

    .chat-layout {
        height: auto;

        grid-template-columns:
            1fr;
    }

    .chat-sidebar {
        max-height: 300px;
    }

    .chat-main {
        min-height: 620px;
    }

}