/* =========================================================
   JWTCO LOGIN UI
   Modern Institutional / Corporate
   ========================================================= */

:root {
    --navy-950: #07182d;
    --navy-900: #0b2241;
    --navy-800: #102d55;
    --navy-700: #173b69;

    --indigo-700: #352c97;
    --indigo-600: #4037b8;
    --indigo-500: #4d45ce;

    --gold-500: #d0a255;
    --gold-400: #ddb773;
    --gold-300: #efd29a;

    --white: #ffffff;
    --surface: #f7f8fb;
    --surface-2: #eef1f6;

    --ink: #142136;
    --text: #445062;
    --muted: #818998;

    --border: #dbe0e8;
    --danger: #9d3544;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
}

button,
input {
    font-family: Arial, Helvetica, sans-serif;
}

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

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.login-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(520px, 50%) 1fr;
}


/* =========================================================
   LEFT PANEL
   ========================================================= */

.brand-panel {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    min-height: 100vh;
    padding: 52px 68px;

    color: #fff;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(32, 76, 135, .28) 0,
            rgba(32, 76, 135, 0) 30%
        ),
        linear-gradient(
            145deg,
            var(--navy-950) 0%,
            var(--navy-900) 55%,
            #092957 100%
        );
}

.brand-content {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 650px;
}


/* =========================================================
   OFFICIAL HEADER
   ========================================================= */

.official-header {
    display: flex;
    align-items: center;
    gap: 24px;

    margin-bottom: 62px;
}

.johor-crest {
    display: block;

    width: 118px;
    max-height: 92px;

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

.official-text {
    min-width: 0;
}

.official-main {
    margin-bottom: 8px;

    color: #f2f4f8;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
    letter-spacing: 2px;
}

.official-sub {
    color: var(--gold-400);

    font-size: 13px;
    line-height: 1.4;

    font-weight: 700;
    letter-spacing: 2px;
}


/* =========================================================
   TITLE
   ========================================================= */

.mini-accent {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 27px;
}

.mini-accent span {
    display: block;

    width: 44px;
    height: 3px;

    border-radius: 999px;

    background: var(--gold-500);
}

.mini-accent i {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--gold-400);
}

.system-title h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 3.5vw, 54px);
    line-height: 1.14;

    font-weight: 700;

    letter-spacing: -1px;
}

.system-title h2 {
    margin: 14px 0 0;

    color: var(--gold-300);

    font-size: clamp(31px, 3vw, 48px);
    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.5px;
}

.system-description {
    max-width: 540px;

    margin: 27px 0 0;

    color: rgba(255, 255, 255, .73);

    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   FEATURES
   ========================================================= */

.feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;

    margin-top: 44px;
}

.feature-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;

    min-width: 0;

    padding-right: 22px;
}

.feature-item + .feature-item {
    padding-left: 22px;

    border-left: 1px solid rgba(255, 255, 255, .12);
}

.feature-item strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 13px;
    line-height: 1.3;
}

.feature-item small {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   CSS FEATURE ICONS
   ========================================================= */

.feature-icon {
    position: relative;

    width: 34px;
    height: 34px;
}

/* Shield */

.shield-icon::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 2px;

    width: 19px;
    height: 24px;

    border: 2px solid var(--gold-500);

    clip-path: polygon(
        50% 0,
        100% 18%,
        100% 63%,
        50% 100%,
        0 63%,
        0 18%
    );
}

.shield-icon::after {
    content: "✓";

    position: absolute;

    left: 12px;
    top: 8px;

    color: var(--gold-400);

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

/* Clock */

.clock-icon {
    border: 2px solid var(--gold-500);
    border-radius: 50%;
}

.clock-icon::before {
    content: "";

    position: absolute;

    left: 15px;
    top: 7px;

    width: 2px;
    height: 9px;

    background: var(--gold-400);
}

.clock-icon::after {
    content: "";

    position: absolute;

    left: 15px;
    top: 15px;

    width: 7px;
    height: 2px;

    transform: rotate(25deg);
    transform-origin: left center;

    background: var(--gold-400);
}

/* Document */

.doc-icon::before {
    content: "";

    position: absolute;

    left: 6px;
    top: 2px;

    width: 22px;
    height: 27px;

    border: 2px solid var(--gold-500);
    border-radius: 2px;
}

.doc-icon::after {
    content: "";

    position: absolute;

    left: 11px;
    top: 10px;

    width: 12px;
    height: 2px;

    box-shadow:
        0 5px 0 var(--gold-400),
        0 10px 0 var(--gold-400);

    background: var(--gold-400);
}


/* =========================================================
   LEFT FOOTER
   ========================================================= */

.brand-footer {
    margin-top: 74px;

    color: rgba(255,255,255,.57);

    font-size: 10.5px;
    line-height: 1.55;
}

.brand-footer strong {
    display: block;

    margin-top: 4px;

    color: var(--gold-400);

    font-weight: 400;
}


/* =========================================================
   DECORATIVE PATTERN LEFT
   ========================================================= */

.dot-pattern-top {
    position: absolute;

    top: 24px;
    right: 38px;

    width: 150px;
    height: 120px;

    opacity: .14;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.65) 1px,
            transparent 1.5px
        );

    background-size: 15px 15px;
}

.wave-lines {
    position: absolute;

    right: -170px;
    bottom: -120px;

    width: 570px;
    height: 360px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.07);

    transform: rotate(-12deg);
}

.wave-lines::before,
.wave-lines::after {
    content: "";

    position: absolute;

    inset: 20px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.055);
}

.wave-lines::after {
    inset: 42px;
}


/* =========================================================
   RIGHT PANEL
   ========================================================= */

.login-panel {
    position: relative;
    overflow: hidden;

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

    min-height: 100vh;

    padding: 56px 46px 86px;

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(77,69,206,.035),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #fbfcff 0%,
            #f5f7fb 58%,
            #edf1f7 100%
        );
}


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

.login-card {
    position: relative;
    z-index: 4;

    width: min(510px, 100%);

    padding: 42px 42px 36px;

    border: 1px solid rgba(210,216,225,.82);
    border-radius: 12px;

    background: rgba(255,255,255,.94);

    box-shadow:
        0 26px 60px rgba(16,34,65,.12),
        0 5px 15px rgba(16,34,65,.04);
}

.card-accent {
    position: absolute;

    top: 0;
    left: 36px;

    width: 170px;
    height: 3px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            var(--gold-500),
            var(--gold-300)
        );
}


/* =========================================================
   KICKER
   ========================================================= */

.login-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 21px;
}

.login-kicker strong {
    color: var(--navy-900);

    font-size: 11px;

    letter-spacing: 2px;
}

.lock-mark {
    position: relative;

    display: block;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    background: #f5f0e8;
}

.lock-mark::before {
    content: "";

    position: absolute;

    left: 11px;
    top: 14px;

    width: 12px;
    height: 10px;

    border: 1.7px solid #99753c;
    border-radius: 2px;
}

.lock-mark::after {
    content: "";

    position: absolute;

    left: 13px;
    top: 8px;

    width: 8px;
    height: 8px;

    border: 1.7px solid #99753c;
    border-bottom: 0;

    border-radius: 8px 8px 0 0;
}


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

.login-heading {
    margin-bottom: 27px;
}

.login-heading h2 {
    margin: 0;

    color: var(--navy-950);

    font-size: 29px;
    line-height: 1.2;

    letter-spacing: -.4px;
}

.login-heading p {
    margin: 8px 0 0;

    color: #697386;

    font-size: 13.5px;
    line-height: 1.6;
}


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

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #27364c;

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

.input-wrap {
    position: relative;
}

.form-group input {
    width: 100%;
    height: 49px;

    padding: 0 48px;

    border: 1px solid #ccd3dd;
    border-radius: 6px;

    outline: none;

    background: #ffffff;

    color: #1d2939;

    font-size: 13.5px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.form-group input::placeholder {
    color: #9aa2af;
}

.form-group input:focus {
    border-color: #665ed5;

    box-shadow: 0 0 0 3px rgba(77,69,206,.10);
}


/* =========================================================
   INPUT ICONS
   ========================================================= */

.input-icon {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    width: 16px;
    height: 16px;

    opacity: .73;

    pointer-events: none;
}

.email-icon {
    border: 1.6px solid #364152;
    border-radius: 2px;
}

.email-icon::after {
    content: "";

    position: absolute;

    left: 2px;
    top: 2px;

    width: 8px;
    height: 8px;

    border-right: 1.4px solid #364152;
    border-bottom: 1.4px solid #364152;

    transform: rotate(45deg);
}

.password-icon::before {
    content: "";

    position: absolute;

    left: 3px;
    top: 7px;

    width: 10px;
    height: 8px;

    border: 1.6px solid #364152;
    border-radius: 2px;
}

.password-icon::after {
    content: "";

    position: absolute;

    left: 5px;
    top: 1px;

    width: 6px;
    height: 8px;

    border: 1.6px solid #364152;
    border-bottom: 0;

    border-radius: 7px 7px 0 0;
}


/* =========================================================
   PASSWORD TOGGLE
   ========================================================= */

.password-wrap input {
    padding-right: 84px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 9px;

    transform: translateY(-50%);

    height: 31px;

    padding: 0 9px;

    border: 0;
    border-radius: 4px;

    background: transparent;

    color: #384253;

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

    cursor: pointer;
}

.password-toggle:hover {
    color: var(--indigo-600);

    background: #f3f4fb;
}


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

.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    width: 100%;
    height: 50px;

    margin-top: 5px;

    padding: 0 20px;

    border: 0;
    border-radius: 6px;

    background:
        linear-gradient(
            100deg,
            #3f49c6 0%,
            #2e277f 100%
        );

    color: #ffffff;

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

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(56,48,155,.16);

    transition:
        transform .12s ease,
        box-shadow .15s ease;
}

.btn-login:hover {
    transform: translateY(-1px);

    box-shadow:
        0 11px 24px rgba(56,48,155,.23);
}

.btn-login:active {
    transform: translateY(0);
}

.btn-arrow {
    position: absolute;

    right: 18px;

    color: #ffffff;

    font-size: 19px;
    font-weight: 400;
}


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

.login-alert {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: -5px 0 20px;

    padding: 10px 12px;

    border: 1px solid #efc5cb;
    border-radius: 6px;

    background: #fff7f8;

    color: #8e3140;

    font-size: 12px;
    line-height: 1.45;
}

.alert-badge {
    display: grid;
    place-items: center;

    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: var(--danger);

    color: #fff;

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


/* =========================================================
   CARD DIVIDER
   ========================================================= */

.card-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;

    margin: 27px 0 18px;
}

.card-divider span {
    height: 1px;

    background: #e4e7ed;
}

.card-divider small {
    color: #9aa0aa;

    font-size: 10px;
}


/* =========================================================
   SUPPORT NOTE
   ========================================================= */

.support-note {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #858b96;

    font-size: 11px;
    line-height: 1.45;
}

.support-note strong {
    color: var(--indigo-600);

    font-weight: 600;
}

.support-icon {
    display: grid;
    place-items: center;

    flex: 0 0 21px;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    background: #eceef2;

    color: #667080;

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


/* =========================================================
   RIGHT FOOTER
   ========================================================= */

.system-footer {
    position: absolute;

    left: 50%;
    bottom: 29px;

    transform: translateX(-50%);

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

    color: #717887;

    white-space: nowrap;

    font-size: 10px;
}

.system-footer strong {
    color: var(--navy-900);

    letter-spacing: 1px;
}

.system-footer span {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #bdc2cb;
}

.system-footer small {
    font-size: 9px;

    letter-spacing: 1px;
}


/* =========================================================
   RIGHT DECORATIONS
   ========================================================= */

.top-decoration {
    position: absolute;

    top: -48px;
    right: -7px;

    width: 45px;
    height: 145px;

    border-radius: 0 0 999px 999px;

    transform: rotate(38deg);

    background:
        linear-gradient(
            180deg,
            var(--gold-300),
            #c89549
        );

    opacity: .7;
}

.right-dot-pattern {
    position: absolute;

    right: 17px;
    top: 41%;

    width: 95px;
    height: 105px;

    opacity: .14;

    background-image:
        radial-gradient(
            circle,
            #6e7690 1px,
            transparent 1.5px
        );

    background-size: 13px 13px;
}

.right-wave {
    position: absolute;

    right: -240px;
    bottom: -210px;

    width: 520px;
    height: 520px;

    border: 1px solid rgba(76,83,142,.08);
    border-radius: 50%;
}

.right-wave::before,
.right-wave::after {
    content: "";

    position: absolute;

    border: 1px solid rgba(76,83,142,.06);
    border-radius: 50%;
}

.right-wave::before {
    inset: 22px;
}

.right-wave::after {
    inset: 45px;
}


/* =========================================================
   BASIC DASHBOARD COMPATIBILITY
   ========================================================= */

.page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 14px 18px;

    border: 1px solid #d8dee6;
    border-radius: 7px;

    background: #fff;
}

.stat-card {
    width: 260px;

    margin-top: 18px;
    padding: 18px;

    border: 1px solid #d8dee6;
    border-left: 5px solid var(--indigo-600);
    border-radius: 7px;

    background: #fff;
}

.stat-label {
    font-weight: 700;
}

.stat-value {
    margin-top: 8px;

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

.muted {
    color: #667085;
}


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

@media (max-width: 1120px) {

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

    .brand-panel {
        min-height: auto;

        padding: 38px 40px 44px;
    }

    .brand-content {
        max-width: 760px;
    }

    .official-header {
        margin-bottom: 40px;
    }

    .brand-footer {
        margin-top: 45px;
    }

    .login-panel {
        min-height: 680px;

        padding: 50px 22px 80px;
    }

}

@media (max-width: 680px) {

    .brand-panel {
        padding: 30px 23px 36px;
    }

    .official-header {
        align-items: flex-start;

        gap: 15px;
    }

    .johor-crest {
        width: 76px;
        max-height: 68px;
    }

    .official-main {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .official-sub {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .system-title h1 {
        font-size: 30px;
    }

    .system-title h2 {
        font-size: 29px;
    }

    .feature-row {
        grid-template-columns: 1fr;

        gap: 19px;
    }

    .feature-item {
        padding: 0 !important;

        border: 0 !important;
    }

    .brand-footer {
        margin-top: 40px;
    }

    .login-panel {
        min-height: 630px;

        padding: 32px 15px 76px;
    }

    .login-card {
        padding: 34px 23px 29px;
    }

    .login-heading h2 {
        font-size: 26px;
    }

}

@media (max-height: 760px) and (min-width: 1121px) {

    .brand-panel {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .official-header {
        margin-bottom: 38px;
    }

    .feature-row {
        margin-top: 32px;
    }

    .brand-footer {
        margin-top: 42px;
    }

    .login-card {
        padding-top: 34px;
        padding-bottom: 30px;
    }

}


/* =========================================================
   JWTCO APPLICATION UI
   Dashboard / Internal Pages
   ========================================================= */

:root {
    --app-sidebar: #0b1f39;
    --app-sidebar-2: #102b4e;
    --app-purple: #5749c4;
    --app-purple-soft: #eeeafd;
    --app-gold: #d1a451;
    --app-red: #9e4359;
    --app-green: #32856a;
    --app-blue: #3978a8;
    --app-orange: #c27b35;
    --app-bg: #f3f5f8;
    --app-card: #ffffff;
    --app-border: #e1e5eb;
    --app-text: #172235;
    --app-muted: #788294;
}

.app-body {
    min-height: 100vh;
    background: var(--app-bg);
    color: var(--app-text);
}

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

.app-main {
    min-width: 0;
    min-height: 100vh;
    margin-left: 248px;
}

/* SIDEBAR */

.app-sidebar {
    position: fixed;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    width: 248px;

    padding: 24px 16px 18px;

    background:
        linear-gradient(
            180deg,
            var(--app-sidebar) 0%,
            #0d2544 60%,
            var(--app-sidebar-2) 100%
        );

    color: #ffffff;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 64px;

    margin: 0 8px 28px;
    padding-bottom: 20px;

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

.sidebar-brand img {
    width: 53px;
    height: 53px;

    object-fit: contain;
}

.sidebar-brand div {
    min-width: 0;
}

.sidebar-brand strong {
    display: block;

    color: #ffffff;

    font-size: 18px;
    letter-spacing: 1.2px;
}

.sidebar-brand small {
    display: block;

    margin-top: 3px;

    color: #d8b66d;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.sidebar-section-label {
    margin: 13px 13px 8px;

    color: rgba(255,255,255,.40);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 43px;

    padding: 0 13px;

    border-radius: 7px;

    color: rgba(255,255,255,.72);

    text-decoration: none;

    font-size: 12.5px;
    font-weight: 600;

    transition:
        color .14s ease,
        background .14s ease;
}

.nav-item:hover {
    color: #ffffff;
    background: rgba(255,255,255,.07);
}

.nav-item.active {
    position: relative;

    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            rgba(87,73,196,.60),
            rgba(87,73,196,.25)
        );
}

.nav-item.active::before {
    content: "";

    position: absolute;
    left: 0;

    width: 3px;
    height: 24px;

    border-radius: 0 3px 3px 0;

    background: var(--app-gold);
}

/* SIDEBAR CSS ICONS */

.nav-icon {
    position: relative;

    flex: 0 0 18px;

    width: 18px;
    height: 18px;

    opacity: .87;
}

.nav-dashboard::before {
    content: "";

    position: absolute;
    inset: 2px;

    border: 1.5px solid currentColor;
    border-radius: 3px;

    box-shadow:
        8px 0 0 -6px currentColor,
        0 8px 0 -6px currentColor;
}

.nav-file::before {
    content: "";

    position: absolute;
    left: 3px;
    top: 1px;

    width: 12px;
    height: 15px;

    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.nav-file::after {
    content: "";

    position: absolute;
    left: 6px;
    top: 6px;

    width: 6px;
    height: 1.5px;

    background: currentColor;

    box-shadow:
        0 4px 0 currentColor;
}

.nav-report::before {
    content: "";

    position: absolute;
    left: 2px;
    bottom: 2px;

    width: 3px;
    height: 7px;

    background: currentColor;

    box-shadow:
        5px -4px 0 currentColor,
        10px -8px 0 currentColor;
}

.nav-users::before,
.nav-user::before {
    content: "";

    position: absolute;
    left: 5px;
    top: 2px;

    width: 7px;
    height: 7px;

    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.nav-users::after,
.nav-user::after {
    content: "";

    position: absolute;
    left: 2px;
    bottom: 1px;

    width: 13px;
    height: 7px;

    border: 1.5px solid currentColor;
    border-radius: 8px 8px 2px 2px;
}

.nav-building::before {
    content: "";

    position: absolute;
    left: 2px;
    top: 2px;

    width: 14px;
    height: 14px;

    border: 1.5px solid currentColor;
    border-radius: 2px;

    background:
        linear-gradient(
            currentColor,
            currentColor
        ) 4px 4px / 2px 2px no-repeat,
        linear-gradient(
            currentColor,
            currentColor
        ) 9px 4px / 2px 2px no-repeat,
        linear-gradient(
            currentColor,
            currentColor
        ) 4px 8px / 2px 2px no-repeat,
        linear-gradient(
            currentColor,
            currentColor
        ) 9px 8px / 2px 2px no-repeat;
}

.sidebar-footer {
    margin-top: auto;
    padding: 18px 7px 0;

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

.sidebar-unit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.sidebar-unit > span {
    display: grid;
    place-items: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 7px;

    background: rgba(209,164,81,.13);

    color: #e1bd73;

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

.sidebar-unit div {
    min-width: 0;
}

.sidebar-unit small {
    display: block;

    margin-bottom: 4px;

    color: rgba(255,255,255,.34);

    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .8px;
}

.sidebar-unit strong {
    display: block;

    color: rgba(255,255,255,.64);

    font-size: 9px;
    line-height: 1.45;
    font-weight: 600;
}

/* TOPBAR */

.app-topbar {
    position: sticky;
    z-index: 50;
    top: 0;

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

    min-height: 66px;

    padding: 0 28px;

    border-bottom: 1px solid #e1e5ea;

    background: rgba(255,255,255,.96);

    backdrop-filter: blur(10px);
}

.topbar-left,
.topbar-right,
.user-block {
    display: flex;
    align-items: center;
}

.topbar-left {
    min-width: 0;
}

.topbar-system {
    color: #758092;

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

.topbar-right {
    gap: 22px;
}

.user-block {
    gap: 10px;
}

.user-avatar {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 9px;

    background: var(--app-purple-soft);

    color: var(--app-purple);

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

.user-meta {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.user-meta strong {
    max-width: 220px;

    overflow: hidden;

    color: #223047;

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

    font-size: 11.5px;
}

.user-meta span {
    margin-top: 3px;

    color: #8b93a0;

    font-size: 9.5px;
}

.logout-button {
    display: flex;
    align-items: center;
    gap: 7px;

    min-height: 34px;

    padding: 0 10px;

    border-left: 1px solid #e5e8ed;

    color: #768092;

    text-decoration: none;

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

.logout-button:hover {
    color: #9e4359;
}

.logout-icon {
    position: relative;

    width: 14px;
    height: 14px;
}

.logout-icon::before {
    content: "";

    position: absolute;
    left: 1px;
    top: 2px;

    width: 8px;
    height: 10px;

    border: 1.4px solid currentColor;
    border-right: 0;
    border-radius: 2px 0 0 2px;
}

.logout-icon::after {
    content: "→";

    position: absolute;
    right: -1px;
    top: -3px;

    font-size: 15px;
}

.mobile-menu-button {
    display: none;

    width: 34px;
    height: 34px;

    margin-right: 11px;
    padding: 8px;

    border: 0;
    border-radius: 6px;

    background: #f1f3f6;

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    height: 2px;

    margin: 3px 0;

    background: #42516a;
}

/* DASHBOARD */

.dashboard-content {
    max-width: 1640px;

    margin: 0 auto;
    padding: 26px 28px 40px;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 23px;
}

.page-kicker,
.card-kicker {
    margin-bottom: 5px;

    color: var(--app-purple);

    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.page-heading h1 {
    margin: 0;

    color: #142238;

    font-size: 27px;
    line-height: 1.15;
}

.page-heading p {
    margin: 7px 0 0;

    color: #818b9b;

    font-size: 11.5px;
}

.heading-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.heading-date small {
    margin-bottom: 4px;

    color: #969eaa;

    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.heading-date strong {
    color: #344157;

    font-size: 11.5px;
}

/* STATS */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-bottom: 18px;
}

.dashboard-stat {
    position: relative;

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

    min-height: 112px;

    padding: 18px;

    overflow: hidden;

    border: 1px solid var(--app-border);
    border-radius: 10px;

    background: var(--app-card);
}

.dashboard-stat::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 54px;
    height: 3px;

    border-radius: 0 0 0 6px;
}

.stat-total::after {
    background: var(--app-purple);
}

.stat-process::after {
    background: var(--app-blue);
}

.stat-meeting::after {
    background: var(--app-gold);
}

.stat-complete::after {
    background: var(--app-green);
}

.stat-icon {
    position: relative;

    display: grid;
    place-items: center;

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    border-radius: 10px;
}

.stat-total .stat-icon {
    background: #eeeafd;
    color: var(--app-purple);
}

.stat-process .stat-icon {
    background: #e9f3fa;
    color: var(--app-blue);
}

.stat-meeting .stat-icon {
    background: #fbf3e5;
    color: #ae7b30;
}

.stat-complete .stat-icon {
    background: #eaf5f0;
    color: var(--app-green);
}

.stat-content {
    min-width: 0;
}

.stat-content > span {
    display: block;

    color: #657084;

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

.stat-content strong {
    display: block;

    margin: 4px 0 3px;

    color: #17243a;

    font-size: 27px;
    line-height: 1;
}

.stat-content small {
    display: block;

    color: #9aa1ac;

    font-size: 8.5px;
}

/* STAT CSS ICONS */

.icon-folder,
.icon-progress,
.icon-document,
.icon-check {
    position: relative;

    display: block;

    width: 23px;
    height: 23px;
}

.icon-folder::before {
    content: "";

    position: absolute;
    left: 1px;
    top: 6px;

    width: 21px;
    height: 14px;

    border: 1.8px solid currentColor;
    border-radius: 3px;
}

.icon-folder::after {
    content: "";

    position: absolute;
    left: 3px;
    top: 3px;

    width: 9px;
    height: 5px;

    border: 1.8px solid currentColor;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}

.icon-progress {
    border: 1.8px solid currentColor;
    border-radius: 50%;
}

.icon-progress::before {
    content: "";

    position: absolute;
    left: 10px;
    top: 4px;

    width: 2px;
    height: 7px;

    background: currentColor;
}

.icon-progress::after {
    content: "";

    position: absolute;
    left: 10px;
    top: 10px;

    width: 6px;
    height: 2px;

    transform: rotate(35deg);
    transform-origin: left;

    background: currentColor;
}

.icon-document::before {
    content: "";

    position: absolute;
    left: 4px;
    top: 1px;

    width: 15px;
    height: 20px;

    border: 1.8px solid currentColor;
    border-radius: 2px;
}

.icon-document::after {
    content: "";

    position: absolute;
    left: 8px;
    top: 7px;

    width: 8px;
    height: 1.5px;

    background: currentColor;

    box-shadow:
        0 4px 0 currentColor,
        0 8px 0 currentColor;
}

.icon-check {
    border: 1.8px solid currentColor;
    border-radius: 50%;
}

.icon-check::after {
    content: "";

    position: absolute;
    left: 6px;
    top: 5px;

    width: 8px;
    height: 4px;

    border-left: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;

    transform: rotate(-45deg);
}

/* MAIN DASHBOARD GRID */

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 325px;
    gap: 18px;

    align-items: start;
}

.dashboard-card {
    border: 1px solid var(--app-border);
    border-radius: 10px;

    background: var(--app-card);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 69px;

    padding: 15px 18px;

    border-bottom: 1px solid #e8ebef;
}

.card-header h2 {
    margin: 0;

    color: #1d2a40;

    font-size: 14px;
}

.record-count {
    padding: 5px 8px;

    border-radius: 999px;

    background: #f1f2f6;

    color: #7a8392;

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

/* TABLE */

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

.dashboard-table {
    width: 100%;

    border-collapse: collapse;
    table-layout: fixed;

    font-size: 10.5px;
}

.dashboard-table th {
    padding: 10px 12px;

    border-bottom: 1px solid #e7eaf0;

    background: #fafbfc;

    color: #7c8594;

    text-align: left;

    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.dashboard-table td {
    padding: 11px 12px;

    border-bottom: 1px solid #edf0f3;

    color: #4a5669;

    vertical-align: middle;
}

.dashboard-table tbody tr:last-child td {
    border-bottom: 0;
}

.dashboard-table tbody tr:hover {
    background: #fafbfe;
}

.col-no {
    width: 42px;
}

.col-date {
    width: 92px;
}

.col-pic {
    width: 150px;
}

.col-status {
    width: 145px;
}

.table-number {
    color: #9ba2ae !important;

    text-align: center;
}

.agency-cell {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    min-width: 0;
}

.agency-code {
    flex: 0 0 auto;

    margin-top: 1px;
    padding: 3px 5px;

    border-radius: 4px;

    background: #f0edf9;

    color: #6656aa;

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

.agency-cell strong {
    display: block;

    overflow: hidden;

    color: #29384e;

    line-height: 1.35;

    text-overflow: ellipsis;
}

.subject-cell {
    display: -webkit-box;

    overflow: hidden;

    color: #596679;

    line-height: 1.4;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pic-cell {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;
}

.pic-avatar {
    display: grid;
    place-items: center;

    flex: 0 0 26px;

    width: 26px;
    height: 26px;

    border-radius: 7px;

    background: #f1f3f6;

    color: #667184;

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

.pic-cell > span:last-child {
    overflow: hidden;

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

.status-badge {
    display: inline-flex;

    max-width: 100%;

    padding: 5px 7px;

    overflow: hidden;

    border-radius: 5px;

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

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

.status-badge.success {
    background: #e7f4ee;
    color: #287259;
}

.status-badge.purple {
    background: #eeeafd;
    color: #5949b3;
}

.status-badge.warning {
    background: #fbf0df;
    color: #a96d26;
}

.status-badge.info {
    background: #e8f1f8;
    color: #36739c;
}

.status-badge.neutral {
    background: #eef0f3;
    color: #747d8b;
}

.empty-row {
    height: 120px;

    color: #949ba7 !important;

    text-align: center;
}

/* STATUS PANEL */

.status-card {
    overflow: hidden;
}

.status-list {
    padding: 9px 18px 18px;
}

.status-item {
    padding: 12px 0;

    border-bottom: 1px solid #edf0f3;
}

.status-item:last-child {
    border-bottom: 0;
}

.status-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 7px;
}

.status-top span {
    overflow: hidden;

    color: #596578;

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

    font-size: 9.5px;
}

.status-top strong {
    color: #26354b;

    font-size: 10.5px;
}

.status-track {
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: #edf0f4;
}

.status-track span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--app-purple),
            #8274dc
        );
}

.status-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #e8ebef;

    background: #fafbfc;
}

.status-summary div {
    padding: 14px 17px;
}

.status-summary div + div {
    border-left: 1px solid #e8ebef;
}

.status-summary span {
    display: block;

    margin-bottom: 4px;

    color: #959ca7;

    font-size: 8px;
    text-transform: uppercase;
}

.status-summary strong {
    color: #28364c;

    font-size: 15px;
}

.status-empty {
    padding: 50px 10px;

    color: #969eaa;

    text-align: center;

    font-size: 10px;
}

/* OVERLAY */

.sidebar-overlay {
    display: none;
}

/* RESPONSIVE */

@media (max-width: 1240px) {

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

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

    .status-card {
        max-width: none;
    }

}

@media (max-width: 900px) {

    .app-main {
        margin-left: 0;
    }

    .app-sidebar {
        transform: translateX(-102%);

        box-shadow: 18px 0 40px rgba(6,20,39,.20);

        transition: transform .2s ease;
    }

    .app-sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: fixed;
        z-index: 90;
        inset: 0;

        background: rgba(10,20,35,.42);
    }

    .sidebar-overlay.show {
        display: block;
    }

    .mobile-menu-button {
        display: block;
    }

    .app-topbar {
        padding: 0 17px;
    }

    .dashboard-content {
        padding: 22px 17px 34px;
    }

}

@media (max-width: 650px) {

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

    .page-heading {
        align-items: flex-start;
    }

    .heading-date {
        display: none;
    }

    .user-meta {
        display: none;
    }

    .logout-button span:last-child {
        display: none;
    }

    .dashboard-table {
        min-width: 900px;
    }

}


/* =========================================================
   DASHBOARD FULL WIDTH TABLE - UPDATED
   ========================================================= */

.dashboard-content {
    max-width: 1760px;
}

.full-width-card {
    width: 100%;
}

.dashboard-grid {
    display: block;
}

.dashboard-table-wide {
    table-layout: fixed;
    font-size: 12px;
}

.dashboard-table-wide th {
    padding: 13px 14px;

    font-size: 9.5px;
    line-height: 1.25;
}

.dashboard-table-wide td {
    padding: 14px 14px;

    font-size: 11.5px;
    line-height: 1.45;
}

.dashboard-table-wide .col-no {
    width: 48px;
}

.dashboard-table-wide .col-agency {
    width: 24%;
}

.dashboard-table-wide .col-subject {
    width: 34%;
}

.dashboard-table-wide .col-date {
    width: 110px;
}

.dashboard-table-wide .col-pic {
    width: 190px;
}

.dashboard-table-wide .col-status {
    width: 150px;
}

.dashboard-table-wide .agency-cell {
    gap: 10px;
}

.dashboard-table-wide .agency-code {
    margin-top: 2px;
    padding: 4px 6px;

    font-size: 8px;
}

.dashboard-table-wide .agency-cell strong {
    font-size: 11.5px;
    line-height: 1.45;
}

.dashboard-table-wide .subject-cell {
    font-size: 11.5px;
    line-height: 1.5;

    -webkit-line-clamp: 2;
}

.dashboard-table-wide .date-cell {
    color: #344157;

    font-weight: 600;
}

.dashboard-table-wide .pic-cell {
    gap: 9px;
}

.dashboard-table-wide .pic-avatar {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    font-size: 9.5px;
}

.dashboard-table-wide .pic-cell > span:last-child {
    font-size: 11px;
}

.dashboard-table-wide .status-badge {
    padding: 6px 8px;

    font-size: 9px;
}

.latest-card .card-header {
    min-height: 74px;

    padding: 17px 20px;
}

.latest-card .card-header h2 {
    font-size: 15px;
}

.latest-card .card-kicker {
    font-size: 8.5px;
}

.latest-card .record-count {
    padding: 6px 10px;

    font-size: 9px;
}

@media (max-width: 1200px) {

    .dashboard-table-wide {
        min-width: 1050px;
    }

}

@media (max-width: 900px) {

    .dashboard-table-wide {
        min-width: 1000px;
    }

}


/* =========================================================
   DASHBOARD TABLE - JABATAN DI BAWAH PERKARA + FONT BESAR
   ========================================================= */

.dashboard-table-wide {
    font-size: 14px;
}

.dashboard-table-wide th {
    padding: 15px 16px;
    font-size: 11px;
    line-height: 1.3;
}

.dashboard-table-wide td {
    padding: 16px 16px;
    font-size: 13.5px;
    line-height: 1.5;
}

.dashboard-table-wide .col-no {
    width: 52px;
}

.dashboard-table-wide .col-subject {
    width: auto;
}

.dashboard-table-wide .col-date {
    width: 125px;
}

.dashboard-table-wide .col-pic {
    width: 230px;
}

.dashboard-table-wide .col-status {
    width: 170px;
}

.subject-block {
    min-width: 0;
}

.dashboard-table-wide .subject-cell {
    display: -webkit-box;
    overflow: hidden;
    color: #24334a;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.subject-agency {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #7a8494;
    font-size: 11.5px;
    line-height: 1.4;
}

.subject-agency .agency-code {
    flex: 0 0 auto;
    margin: 0;
    padding: 3px 6px;
    border-radius: 4px;
    background: #f0edf9;
    color: #6656aa;
    font-size: 8.5px;
    font-weight: 700;
}

.dashboard-table-wide .date-cell {
    color: #344157;
    font-size: 12.5px;
    font-weight: 700;
}

.dashboard-table-wide .pic-cell {
    gap: 10px;
}

.dashboard-table-wide .pic-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: 10.5px;
}

.dashboard-table-wide .pic-cell > span:last-child {
    font-size: 12.5px;
    font-weight: 600;
}

.dashboard-table-wide .status-badge {
    padding: 7px 10px;
    font-size: 10.5px;
}

.dashboard-table-wide .table-number {
    font-size: 12.5px;
    font-weight: 700;
}

.latest-card .card-header h2 {
    font-size: 16px;
}

.latest-card .card-kicker {
    font-size: 9.5px;
}

.latest-card .record-count {
    font-size: 10px;
}

@media (max-width: 1200px) {
    .dashboard-table-wide {
        min-width: 980px;
    }
}


.status-badge.new {
    background: #edf3fb;
    color: #376ea1;
}


/* =========================================================
   JWTCO - SENARAI PERMOHONAN
   ========================================================= */

.module-content {
    max-width: 1760px;
    margin: 0 auto;
    padding: 26px 28px 42px;
}

.module-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.module-heading h1 {
    margin: 0;
    color: #142238;
    font-size: 28px;
    line-height: 1.15;
}

.module-heading p {
    margin: 7px 0 0;
    color: #7d8797;
    font-size: 13px;
}

/* FILTER */

.filter-card {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #e0e4ea;
    border-radius: 9px;
    background: #ffffff;
}

.filter-form {
    display: grid;
    grid-template-columns:
        minmax(300px, 1.8fr)
        minmax(180px, .85fr)
        minmax(160px, .7fr)
        120px
        auto;
    gap: 12px;
    align-items: end;
}

.filter-form label {
    display: block;
    margin-bottom: 6px;
    color: #5f6b7d;
    font-size: 11px;
    font-weight: 700;
}

.filter-form input,
.filter-form select {
    width: 100%;
    height: 41px;
    padding: 0 11px;
    border: 1px solid #d1d7e0;
    border-radius: 6px;
    outline: none;
    background: #ffffff;
    color: #344157;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.filter-form input:focus,
.filter-form select:focus {
    border-color: #6257c7;
    box-shadow: 0 0 0 3px rgba(87,73,196,.08);
}

.search-input-wrap {
    position: relative;
}

.search-input-wrap input {
    padding-left: 38px;
}

.search-mark {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    width: 13px;
    height: 13px;
    transform: translateY(-55%);
    border: 1.6px solid #7c8696;
    border-radius: 50%;
}

.search-mark::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 6px;
    height: 1.6px;
    transform: rotate(45deg);
    background: #7c8696;
}

.filter-buttons {
    display: flex;
    gap: 7px;
}

.filter-submit,
.filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    padding: 0 14px;
    border-radius: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.filter-submit {
    border: 1px solid #263a57;
    background: #263a57;
    color: #ffffff;
}

.filter-submit:hover {
    background: #1c2d46;
}

.filter-reset {
    border: 1px solid #d6dbe2;
    background: #f7f8fa;
    color: #687385;
}

/* TABLE CARD */

.module-card {
    overflow: hidden;
    border: 1px solid #dfe4ea;
    border-radius: 10px;
    background: #ffffff;
}

.module-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e8ed;
}

.module-card-header h2 {
    margin: 0;
    color: #1d2a40;
    font-size: 17px;
}

.module-result-count {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f0f2f5;
    color: #697386;
    font-size: 10.5px;
    font-weight: 700;
}

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

.module-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13.5px;
}

.module-table th {
    padding: 14px 15px;
    border-bottom: 1px solid #e3e7ed;
    background: #f8f9fb;
    color: #657083;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .25px;
    text-transform: uppercase;
}

.module-table td {
    padding: 16px 15px;
    border-bottom: 1px solid #e9edf1;
    color: #3f4d60;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.5;
}

.module-table tbody tr:last-child td {
    border-bottom: 0;
}

.module-table tbody tr:hover {
    background: #fafbfe;
}

.module-col-no {
    width: 55px;
}

.module-col-subject {
    width: auto;
}

.module-col-date {
    width: 130px;
}

.module-col-pic {
    width: 230px;
}

.module-col-status {
    width: 180px;
}

.module-col-action {
    width: 100px;
    text-align: center !important;
}

.module-number {
    color: #8993a2 !important;
    text-align: center;
    font-size: 12px !important;
    font-weight: 700;
}

.module-subject strong {
    display: -webkit-box;
    overflow: hidden;
    color: #24334a;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.module-agency-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #768193;
    font-size: 11.5px;
    line-height: 1.4;
}

.module-agency-code {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 4px;
    background: #f0edf9;
    color: #6758b0;
    font-size: 8.5px;
    font-weight: 700;
}

.module-date {
    color: #344157 !important;
    font-size: 12.5px !important;
    font-weight: 700;
}

.module-pic {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.module-pic-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: #eef0f4;
    color: #616d7f;
    font-size: 10px;
    font-weight: 700;
}

.module-pic > span:last-child {
    overflow: hidden;
    color: #465468;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
}

.module-table .status-badge {
    padding: 7px 10px;
    font-size: 10.5px;
}

.status-badge.new {
    background: #edf3fb;
    color: #376ea1;
}

.table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 700;
}

.table-action.view {
    border: 1px solid #d9d5f0;
    background: #f4f2fb;
    color: #594bb1;
}

.table-action.view:hover {
    border-color: #c9c2ea;
    background: #ebe8f8;
}

.module-empty {
    height: 160px;
    color: #8c95a3 !important;
    text-align: center;
}

/* PAGINATION */

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-top: 1px solid #e7eaef;
    background: #fafbfc;
}

.pagination-info {
    color: #7a8492;
    font-size: 11px;
}

.pagination-info strong {
    color: #37445a;
}

.pagination-links {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination-button,
.pagination-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    min-width: 31px;
    padding: 0 9px;
    border: 1px solid #d9dde4;
    border-radius: 5px;
    background: #ffffff;
    color: #596679;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 700;
}

.pagination-number.active {
    border-color: #5749c4;
    background: #5749c4;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1250px) {

    .filter-form {
        grid-template-columns: 2fr 1fr 1fr 120px;
    }

    .filter-buttons {
        grid-column: 1 / -1;
    }

    .module-table {
        min-width: 1020px;
    }

}

@media (max-width: 900px) {

    .module-content {
        padding: 22px 17px 36px;
    }

    .filter-form {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 620px) {

    .module-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .filter-form {
        grid-template-columns: 1fr;
    }

    .filter-buttons {
        grid-column: auto;
    }

    .pagination-bar {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   JWTCO - DETAIL PERMOHONAN (PD)
   ========================================================= */

.pd-page {
    max-width: 1680px;
    margin: 0 auto;
    padding: 26px 28px 42px;
}

/* HEADER */

.pd-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 18px;
}

.pd-header-main {
    min-width: 0;
}

.pd-back {
    display: inline-block;
    margin-bottom: 11px;
    color: #657287;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.pd-back:hover {
    color: #5046b5;
}

.pd-header h1 {
    max-width: 1120px;
    margin: 4px 0 0;
    color: #17243a;
    font-size: 25px;
    line-height: 1.4;
}

.pd-agency-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #768193;
    font-size: 12.5px;
}

.pd-category {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 5px;
    background: #eeeafd;
    color: #6254b3;
    font-size: 9px;
    font-weight: 700;
}

.pd-header-status {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    flex-direction: column;
}

.pd-header-status small {
    margin-bottom: 6px;
    color: #8c95a3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .9px;
}

.pd-header-status .status-badge {
    padding: 8px 11px;
    font-size: 10.5px;
}

/* SUMMARY */

.pd-summary {
    display: grid;
    grid-template-columns:
        minmax(140px, .8fr)
        minmax(220px, 1.25fr)
        minmax(170px, .9fr)
        minmax(150px, .75fr);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #dfe4ea;
    border-radius: 9px;
    background: #ffffff;
}

.pd-summary-item {
    min-height: 82px;
    padding: 15px 17px;
    border-right: 1px solid #e8ebef;
}

.pd-summary-item:last-child {
    border-right: 0;
}

.pd-summary-item > span {
    display: block;
    margin-bottom: 7px;
    color: #87919f;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.pd-summary-item strong {
    display: block;
    color: #314056;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.pd-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid #d8d4ed;
    border-radius: 5px;
    background: #f5f3fb;
    color: #594bb0;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 700;
}

/* CARD */

.pd-card {
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid #dfe4ea;
    border-radius: 9px;
    background: #ffffff;
}

.pd-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 13px 17px;
    border-bottom: 1px solid #e6e9ee;
}

.pd-card-header h2 {
    margin: 0;
    color: #1f2d43;
    font-size: 16px;
}

.pd-count {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f0f2f5;
    color: #727d8c;
    font-size: 9.5px;
    font-weight: 700;
}

/* DOCUMENTS */

.pd-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pd-document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 70px;
    padding: 14px 17px;
    border-right: 1px solid #ebedf1;
    border-bottom: 1px solid #ebedf1;
}

.pd-document-item:nth-child(2n) {
    border-right: 0;
}

.pd-document-item:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.pd-document-text {
    min-width: 0;
}

.pd-document-text strong {
    display: block;
    color: #344157;
    font-size: 12.5px;
    line-height: 1.4;
}

.pd-document-text span {
    display: block;
    margin-top: 4px;
    color: #87909e;
    font-size: 10.5px;
    line-height: 1.4;
}

.pd-document-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid #d7d3ec;
    border-radius: 5px;
    background: #f5f3fb;
    color: #5d4fb2;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 700;
}

.pd-document-button.is-disabled {
    border-color: #e1e4e8;
    background: #f7f8f9;
    color: #a0a7b1;
}

/* TIMELINE */

.pd-timeline {
    padding: 7px 18px 16px;
}

.pd-timeline-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 0;
}

.pd-timeline-marker {
    position: relative;
}

.pd-timeline-marker::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 7px;
    bottom: -17px;
    width: 1px;
    background: #dfe3e8;
}

.pd-timeline-item:last-child .pd-timeline-marker::after {
    display: none;
}

.pd-timeline-marker span {
    display: block;
    position: relative;
    z-index: 2;
    width: 15px;
    height: 15px;
    margin-top: 4px;
    border: 3px solid #ebe8f8;
    border-radius: 50%;
    background: #6657c3;
}

.pd-timeline-content {
    min-width: 0;
}

.pd-timeline-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 6px;
}

.pd-timeline-top strong {
    color: #344157;
    font-size: 12.5px;
}

.pd-timeline-top span {
    flex: 0 0 auto;
    color: #9098a4;
    font-size: 9.5px;
}

.pd-timeline-content p {
    margin: 0;
    color: #657083;
    font-size: 12px;
    line-height: 1.65;
}

.pd-empty {
    padding: 42px 10px;
    color: #9098a4;
    text-align: center;
    font-size: 11.5px;
}

/* RESPONSIVE */

@media (max-width: 980px) {

    .pd-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-summary-item {
        border-bottom: 1px solid #e8ebef;
    }

    .pd-summary-item:nth-child(2n) {
        border-right: 0;
    }

    .pd-summary-item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

}

@media (max-width: 760px) {

    .pd-page {
        padding: 22px 17px 36px;
    }

    .pd-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .pd-header-status {
        align-items: flex-start;
    }

    .pd-document-grid {
        grid-template-columns: 1fr;
    }

    .pd-document-item,
    .pd-document-item:nth-child(2n),
    .pd-document-item:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid #ebedf1;
    }

    .pd-document-item:last-child {
        border-bottom: 0;
    }

}

@media (max-width: 560px) {

    .pd-summary {
        grid-template-columns: 1fr;
    }

    .pd-summary-item,
    .pd-summary-item:nth-child(2n),
    .pd-summary-item:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid #e8ebef;
    }

    .pd-summary-item:last-child {
        border-bottom: 0;
    }

}


/* =========================================================
   DETAIL WORKSPACE - ORIGINAL STYLE / SIDE-BY-SIDE
   ========================================================= */
.pd-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(360px, .85fr);
    gap: 16px;
    align-items: start;
}

.pd-workspace-main,
.pd-workspace-notes {
    min-width: 0;
}

.pd-workspace .pd-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pd-workspace .pd-summary-item:nth-child(2n) {
    border-right: 0;
}

.pd-workspace .pd-summary-item:nth-child(-n+2) {
    border-bottom: 1px solid #e8ebef;
}

.pd-workspace-notes .pd-card {
    margin-bottom: 0;
}

.pd-workspace-notes .pd-timeline {
    max-height: 610px;
    overflow-y: auto;
    padding-right: 14px;
}

.pd-workspace-notes .pd-timeline::-webkit-scrollbar {
    width: 6px;
}

.pd-workspace-notes .pd-timeline::-webkit-scrollbar-thumb {
    background: #d6dbe4;
    border-radius: 10px;
}

.pd-workspace-notes .pd-timeline::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 1180px) {
    .pd-workspace {
        grid-template-columns: 1fr;
    }

    .pd-workspace-notes .pd-timeline {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 620px) {
    .pd-workspace .pd-summary {
        grid-template-columns: 1fr;
    }

    .pd-workspace .pd-summary-item,
    .pd-workspace .pd-summary-item:nth-child(2n),
    .pd-workspace .pd-summary-item:nth-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid #e8ebef;
    }

    .pd-workspace .pd-summary-item:last-child {
        border-bottom: 0;
    }
}


/* =========================================================
   STATUS DOKUMEN - VISUAL ALERT
   ========================================================= */

.pd-document-item {
    position: relative;
    padding-left: 20px;
    transition: background .18s ease, border-color .18s ease;
}

.pd-document-item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
}

.pd-document-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pd-document-state-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.pd-document-state-icon::before {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.pd-document-text strong {
    margin-bottom: 6px;
    font-size: 13px;
}

.pd-document-status-chip {
    display: inline-flex !important;
    align-items: center;
    min-height: 23px;
    width: auto !important;
    margin-top: 0 !important;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 9.5px !important;
    font-weight: 700;
}

/* BELUM SEDIA / TIDAK LENGKAP */

.pd-document-item.doc-danger {
    background: #fffafa;
}

.pd-document-item.doc-danger::before {
    background: #dc5b5b;
}

.pd-document-item.doc-danger .pd-document-state-icon {
    background: #fdecec;
    color: #c74a4a;
}

.pd-document-item.doc-danger .pd-document-state-icon::before {
    content: "!";
}

.pd-document-item.doc-danger .pd-document-status-chip {
    background: #fdeaea;
    color: #b53e3e;
}

/* DALAM TINDAKAN / DRAF / SEMAKAN */

.pd-document-item.doc-warning {
    background: #fffdf7;
}

.pd-document-item.doc-warning::before {
    background: #d9a13d;
}

.pd-document-item.doc-warning .pd-document-state-icon {
    background: #fff2d8;
    color: #b77b17;
}

.pd-document-item.doc-warning .pd-document-state-icon::before {
    content: "…";
}

.pd-document-item.doc-warning .pd-document-status-chip {
    background: #fff0cf;
    color: #a66c10;
}

/* SEDIA / LENGKAP */

.pd-document-item.doc-success {
    background: #f9fdfb;
}

.pd-document-item.doc-success::before {
    background: #3c9a70;
}

.pd-document-item.doc-success .pd-document-state-icon {
    background: #e7f5ee;
    color: #2f815d;
}

.pd-document-item.doc-success .pd-document-state-icon::before {
    content: "✓";
}

.pd-document-item.doc-success .pd-document-status-chip {
    background: #e4f4ec;
    color: #287553;
}

/* STATUS LAIN */

.pd-document-item.doc-info {
    background: #fafcff;
}

.pd-document-item.doc-info::before {
    background: #557fb6;
}

.pd-document-item.doc-info .pd-document-state-icon {
    background: #eaf1fa;
    color: #426eaa;
}

.pd-document-item.doc-info .pd-document-state-icon::before {
    content: "i";
}

.pd-document-item.doc-info .pd-document-status-chip {
    background: #e9f0f9;
    color: #3e679d;
}

/* BUTTON */

.pd-document-button.is-active {
    border-color: #cdc7eb;
    background: #f0edfb;
    color: #5446af;
    box-shadow: 0 2px 5px rgba(84,70,175,.08);
}

.pd-document-button.is-active:hover {
    border-color: #bcb4e3;
    background: #e9e5f8;
}

.pd-document-button.is-disabled {
    opacity: .78;
}

.pd-document-item:hover {
    filter: brightness(.992);
}

@media (max-width: 760px) {
    .pd-document-item {
        padding-left: 18px;
    }
}


/* =========================================================
   DETAIL HERO - STRONGER VISUAL HIERARCHY
   ========================================================= */

.pd-page {
    padding-top: 22px;
}

.pd-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid #182f51;
    border-radius: 12px;
    background:
        radial-gradient(circle at 90% 10%, rgba(91,78,190,.24), transparent 32%),
        linear-gradient(135deg, #0b1f39 0%, #102b4e 58%, #172f56 100%);
    box-shadow: 0 10px 24px rgba(20,36,62,.11);
}

.pd-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 50%;
}

.pd-hero-accent {
    height: 4px;
    background: linear-gradient(90deg, #d6a84f, #edd094 42%, transparent 78%);
}

.pd-hero-body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 21px 23px 22px;
}

.pd-hero-main {
    min-width: 0;
}

.pd-hero-back {
    display: inline-flex;
    margin-bottom: 13px;
    color: rgba(255,255,255,.67);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 700;
}

.pd-hero-back:hover {
    color: #ffffff;
}

.pd-hero-eyebrow {
    margin-bottom: 6px;
    color: #e7bd72;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.35px;
}

.pd-hero h1 {
    max-width: 1000px;
    margin: 0;
    color: #ffffff;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -.18px;
}

.pd-hero-agency {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
}

.pd-hero-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 0 8px;
    border: 1px solid rgba(226,186,111,.28);
    border-radius: 5px;
    background: rgba(218,174,92,.13);
    color: #efca88;
    font-size: 9px;
    font-weight: 700;
}

.pd-hero-agency-name {
    color: rgba(255,255,255,.72);
    font-size: 11.5px;
    font-weight: 600;
}

.pd-hero-status {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    min-width: 180px;
    padding-left: 22px;
    border-left: 1px solid rgba(255,255,255,.10);
}

.pd-hero-status-label {
    margin-bottom: 7px;
    color: rgba(255,255,255,.45);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.15px;
}

.pd-hero-status-value {
    display: inline-flex;
    align-items: center;
    min-height: 33px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 700;
}

.pd-hero-status-value.new {
    background: #e9f2fc;
    color: #356d9f;
}

.pd-hero-status-value.success {
    background: #e4f4ec;
    color: #287553;
}

.pd-hero-status-value.warning {
    background: #fff0d5;
    color: #a86b12;
}

.pd-hero-status-value.purple {
    background: #ede9fb;
    color: #5c4daf;
}

.pd-hero-status-value.info {
    background: #e8f0fa;
    color: #426b9d;
}

.pd-hero-status-value.neutral {
    background: #eef0f3;
    color: #667180;
}

.pd-hero-record {
    margin-top: 7px;
    color: rgba(255,255,255,.38);
    font-size: 8.5px;
    font-weight: 600;
}

/* SUMMARY - LESS FLAT */

.pd-workspace .pd-summary {
    border: 0;
    box-shadow: 0 4px 14px rgba(31,47,72,.055);
}

.pd-workspace .pd-summary-item {
    position: relative;
    background: #ffffff;
}

.pd-workspace .pd-summary-item::after {
    content: "";
    position: absolute;
    left: 17px;
    bottom: 0;
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: #6657c3;
    opacity: .5;
}

/* CATATAN - SHOW REAL DATA */

.pd-workspace-notes .pd-card {
    box-shadow: 0 5px 16px rgba(31,47,72,.065);
}

.pd-workspace-notes .pd-card-header {
    background: linear-gradient(180deg, #ffffff, #fafbfe);
}

.pd-timeline-item {
    padding: 13px 0;
}

.pd-timeline-content {
    padding: 10px 11px;
    border: 1px solid #eceef3;
    border-radius: 8px;
    background: #fbfcfe;
}

.pd-timeline-top {
    align-items: flex-start;
}

.pd-note-author {
    min-width: 0;
}

.pd-note-author strong {
    display: block;
    color: #28364b;
    font-size: 11px;
    line-height: 1.35;
}

.pd-note-author small {
    display: block;
    margin-top: 3px;
    color: #8a94a3;
    font-size: 8.8px;
    font-weight: 600;
}

.pd-timeline-content p {
    margin-top: 8px;
    color: #586579;
    font-size: 11.5px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .pd-hero-body {
        grid-template-columns: 1fr;
    }

    .pd-hero-status {
        align-items: flex-start;
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid rgba(255,255,255,.10);
        border-left: 0;
    }
}


/* =========================================================
   JWTCO DETAIL - CRUD CONTROLS
   ========================================================= */

.pd-alert {
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
}

.pd-alert.success {
    border-color: #c9e6d8;
    background: #edf8f2;
    color: #287553;
}

.pd-alert.danger {
    border-color: #f0c9c9;
    background: #fff0f0;
    color: #b03f3f;
}

.pd-section-help {
    color: #939ba8;
    font-size: 9.5px;
    font-weight: 600;
}

.pd-folder-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pd-mini-edit {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid #d7d3ec;
    border-radius: 5px;
    background: #f5f3fb;
    color: #594bb0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer;
}

.pd-document-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-document-edit {
    cursor: pointer;
}

.pd-notes-card {
    margin-bottom: 0;
}

.pd-note-form {
    padding: 13px 15px;
    border-bottom: 1px solid #e7eaf0;
    background: #fafbfe;
}

.pd-note-form label {
    display: block;
    margin-bottom: 6px;
    color: #536075;
    font-size: 10px;
    font-weight: 700;
}

.pd-note-form textarea,
.pd-modal-form textarea,
.pd-modal-form input,
.pd-modal-form select {
    width: 100%;
    border: 1px solid #d2d8e1;
    border-radius: 6px;
    outline: none;
    background: #ffffff;
    color: #344157;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.pd-note-form textarea,
.pd-modal-form textarea {
    resize: vertical;
    padding: 10px 11px;
    line-height: 1.5;
}

.pd-note-form textarea:focus,
.pd-modal-form textarea:focus,
.pd-modal-form input:focus,
.pd-modal-form select:focus {
    border-color: #675bc3;
    box-shadow: 0 0 0 3px rgba(103,91,195,.08);
}

.pd-note-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.pd-note-form-footer small {
    color: #929aa6;
    font-size: 8.8px;
}

.pd-primary-button,
.pd-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.pd-primary-button {
    border: 1px solid #5548b4;
    background: #5548b4;
    color: #ffffff;
}

.pd-primary-button:hover {
    background: #463b9d;
}

.pd-secondary-button {
    border: 1px solid #d5dae2;
    background: #f7f8fa;
    color: #647083;
}

.pd-note-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #eceff3;
}

.pd-note-actions form {
    margin: 0;
}

.pd-note-edit-button,
.pd-note-delete-button {
    border: 0;
    background: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.pd-note-edit-button {
    color: #5b4eb1;
}

.pd-note-delete-button {
    color: #bb5252;
}

/* MODAL */

body.pd-modal-open {
    overflow: hidden;
}

.pd-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pd-modal.is-open {
    display: flex;
}

.pd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9,21,39,.58);
    backdrop-filter: blur(2px);
}

.pd-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(520px, 100%);
    overflow: hidden;
    border: 1px solid #dfe3e9;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(15,29,49,.22);
}

.pd-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 17px;
    border-bottom: 1px solid #e7eaf0;
}

.pd-modal-header span {
    display: block;
    margin-bottom: 3px;
    color: #6556b6;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
}

.pd-modal-header h3 {
    margin: 0;
    color: #243248;
    font-size: 15px;
}

.pd-modal-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 5px;
    background: #f3f4f7;
    color: #687486;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.pd-modal-form {
    padding: 17px;
}

.pd-form-field {
    margin-bottom: 14px;
}

.pd-form-field label {
    display: block;
    margin-bottom: 6px;
    color: #58657a;
    font-size: 10px;
    font-weight: 700;
}

.pd-modal-form input,
.pd-modal-form select {
    height: 39px;
    padding: 0 10px;
}

.pd-form-field small {
    display: block;
    margin-top: 5px;
    color: #9199a5;
    font-size: 8.8px;
}

.pd-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    padding-top: 3px;
}

@media (max-width: 760px) {

    .pd-document-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .pd-folder-summary {
        align-items: flex-start;
    }

}


/* =========================================================
   JWTCO - URUS PENGGUNA
   ========================================================= */

.user-page {
    max-width: 1760px;
    margin: 0 auto;
    padding: 26px 28px 42px;
}

.user-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.user-heading h1 {
    margin: 0;
    color: #17243a;
    font-size: 27px;
}

.user-heading p {
    margin: 7px 0 0;
    color: #7d8797;
    font-size: 12.5px;
}

.user-primary-button,
.user-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    padding: 0 13px;
    border-radius: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}

.user-primary-button {
    border: 1px solid #5649b4;
    background: #5649b4;
    color: #ffffff;
}

.user-primary-button:hover {
    background: #473c9b;
}

.user-secondary-button {
    border: 1px solid #d7dce4;
    background: #f7f8fa;
    color: #667285;
}

.user-alert {
    margin-bottom: 15px;
    padding: 11px 14px;
    border: 1px solid;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
}

.user-alert.success {
    border-color: #c9e5d7;
    background: #edf8f2;
    color: #2b7756;
}

.user-alert.danger {
    border-color: #f0caca;
    background: #fff0f0;
    color: #af4141;
}

/* FILTER */

.user-filter-card {
    margin-bottom: 15px;
    padding: 14px 15px;
    border: 1px solid #e0e4ea;
    border-radius: 9px;
    background: #ffffff;
}

.user-filter-form {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 220px auto;
    gap: 11px;
    align-items: end;
}

.user-filter-form label {
    display: block;
    margin-bottom: 6px;
    color: #606c7e;
    font-size: 10.5px;
    font-weight: 700;
}

.user-filter-form input,
.user-filter-form select {
    width: 100%;
    height: 39px;
    padding: 0 10px;
    border: 1px solid #d1d7e0;
    border-radius: 6px;
    outline: none;
    background: #ffffff;
    color: #344157;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.user-filter-actions {
    display: flex;
    gap: 6px;
}

.user-filter-actions button,
.user-filter-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 39px;
    padding: 0 12px;
    border-radius: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
}

.user-filter-actions button {
    border: 1px solid #263a57;
    background: #263a57;
    color: #ffffff;
    cursor: pointer;
}

.user-filter-actions a {
    border: 1px solid #d7dce3;
    background: #f7f8fa;
    color: #687487;
}

/* TABLE */

.user-card {
    overflow: hidden;
    border: 1px solid #dfe4ea;
    border-radius: 10px;
    background: #ffffff;
}

.user-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 14px 17px;
    border-bottom: 1px solid #e6e9ee;
}

.user-card-header h2 {
    margin: 0;
    color: #1f2d43;
    font-size: 16px;
}

.user-count {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f0f2f5;
    color: #737d8d;
    font-size: 9.5px;
    font-weight: 700;
}

.user-table-wrap {
    overflow-x: auto;
}

.user-table {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
    table-layout: fixed;
}

.user-table th {
    padding: 13px 14px;
    border-bottom: 1px solid #e3e7ed;
    background: #f8f9fb;
    color: #657083;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .25px;
    text-transform: uppercase;
}

.user-table td {
    padding: 14px;
    border-bottom: 1px solid #e9edf1;
    color: #3f4d60;
    vertical-align: middle;
    font-size: 12.5px;
}

.user-table tbody tr:last-child td {
    border-bottom: 0;
}

.user-table tbody tr:hover {
    background: #fafbfe;
}

.u-no {
    width: 50px;
}

.u-action {
    width: 90px;
    text-align: center !important;
}

.user-number {
    color: #8993a2 !important;
    text-align: center;
    font-size: 11.5px !important;
    font-weight: 700;
}

.user-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.user-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    background: #eeeafd;
    color: #5b4db1;
    font-size: 10px;
    font-weight: 700;
}

.user-person div {
    min-width: 0;
}

.user-person strong,
.user-jabatan strong,
.user-position strong {
    display: block;
    color: #304057;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.user-person span,
.user-jabatan span,
.user-position span {
    display: block;
    margin-top: 3px;
    color: #8a93a1;
    font-size: 10px;
}

.user-role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 8px;
    border-radius: 5px;
    background: #f0eef9;
    color: #5f52ab;
    font-size: 9.5px;
    font-weight: 700;
}

.user-edit-button {
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid #d8d4ee;
    border-radius: 5px;
    background: #f5f3fb;
    color: #594bb0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.user-empty {
    padding: 60px 10px !important;
    color: #929aa6 !important;
    text-align: center;
}

/* MODAL */

body.user-modal-open {
    overflow: hidden;
}

.user-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.user-modal.is-open {
    display: flex;
}

.user-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9,21,39,.58);
    backdrop-filter: blur(2px);
}

.user-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(650px, 100%);
    overflow: hidden;
    border: 1px solid #dfe3e9;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(15,29,49,.22);
}

.user-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 17px;
    border-bottom: 1px solid #e7eaf0;
}

.user-modal-header span {
    display: block;
    margin-bottom: 3px;
    color: #6556b6;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
}

.user-modal-header h3 {
    margin: 0;
    color: #243248;
    font-size: 15px;
}

.user-modal-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 5px;
    background: #f3f4f7;
    color: #687486;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.user-modal-form {
    padding: 17px;
}

.user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.user-form-full {
    grid-column: 1 / -1;
}

.user-form-field label {
    display: block;
    margin-bottom: 6px;
    color: #58657a;
    font-size: 10px;
    font-weight: 700;
}

.user-form-field input,
.user-form-field select {
    width: 100%;
    height: 39px;
    padding: 0 10px;
    border: 1px solid #d2d8e1;
    border-radius: 6px;
    outline: none;
    background: #ffffff;
    color: #344157;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.user-form-field input:focus,
.user-form-field select:focus {
    border-color: #675bc3;
    box-shadow: 0 0 0 3px rgba(103,91,195,.08);
}

.user-form-field small {
    display: block;
    margin-top: 5px;
    color: #9199a5;
    font-size: 8.8px;
}

.user-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid #eceff3;
}

@media (max-width: 760px) {

    .user-page {
        padding: 22px 17px 36px;
    }

    .user-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-filter-form {
        grid-template-columns: 1fr;
    }

    .user-form-grid {
        grid-template-columns: 1fr;
    }

    .user-form-full {
        grid-column: auto;
    }

}


/* URUS PENGGUNA - TANPA FIELD JABATAN */
.user-table th:nth-child(2) { width: 32%; }
.user-table th:nth-child(3) { width: 24%; }
.user-table th:nth-child(4) { width: 28%; }

.user-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* =========================================================
   JWTCO GLOBAL TYPOGRAPHY STANDARD
   Selaraskan semua modul kepada skala yang sama.
   ========================================================= */
html, body,
button, input, select, textarea, table {
    font-family: Arial, Helvetica, sans-serif !important;
}

body {
    font-size: 14px !important;
    line-height: 1.45;
}

/* Tajuk utama setiap page */
.page-title,
.content-title,
.jab-head h1,
.pic-header h1,
.pj-header h1,
.lap-head h1,
.user-page-title,
.user-header h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

/* Penerangan di bawah tajuk */
.page-subtitle,
.jab-head p,
.pic-header p,
.pj-header p,
.lap-head p,
.user-page-subtitle,
.user-header p {
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* Isi jadual */
table,
.user-table,
.jab-table,
.pic-table,
.pj-table,
.lap-table {
    font-size: 14px !important;
}

/* Header jadual */
table thead th,
.user-table th,
.jab-table th,
.pic-table th,
.pj-table th,
.lap-table th {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

/* Isi cell */
table tbody td,
.user-table td,
.jab-table td,
.pic-table td,
.pj-table td,
.lap-table td {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Label borang */
label,
.form-label,
.user-form-field label,
.jab-field label {
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Input/filter */
input,
select,
textarea,
.form-control,
.form-select,
.user-input,
.jab-input,
.jab-select,
.jab-textarea,
.lap-select {
    font-size: 14px !important;
}

/* Semua butang */
button,
.btn,
.user-btn,
.jab-btn,
.pic-btn,
.pj-btn,
.lap-btn {
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Badge/status */
.badge,
.user-role-badge,
.jab-badge,
.pic-role,
.pj-badge,
.lap-badge,
.lap-status {
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Teks sekunder */
small,
.small,
.user-meta,
.jab-meta,
.pic-email,
.lap-agency,
.pic-owner {
    font-size: 12px !important;
}

/* Sidebar kekal padat dan seragam */
.sidebar,
.sidebar * {
    font-family: Arial, Helvetica, sans-serif !important;
}

.sidebar .nav-item,
.sidebar a {
    font-size: 13px !important;
}

.sidebar .nav-section-title,
.sidebar .nav-label {
    font-size: 10px !important;
    letter-spacing: .12em;
}


/* =========================================================
   JWTCO GLOBAL INSTITUTIONAL TABLE STANDARD
   Digunakan untuk semua jadual utama sistem.
   ========================================================= */

:root{
    --jwtco-table-navy:#172554;
    --jwtco-table-navy-border:#31446f;
    --jwtco-table-grid:#d9e0e8;
    --jwtco-table-row-alt:#fafbfd;
    --jwtco-table-row-hover:#f2f6fb;
    --jwtco-table-text:#263244;
    --jwtco-table-muted:#64748b;
}

/* Container jadual */
.module-card,
.dashboard-card,
.user-card,
.jab-card,
.pj-card,
.lap-card{
    border:1px solid #cfd8e3 !important;
    border-radius:8px !important;
    background:#fff !important;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(15,23,42,.045) !important;
}

/* Header card jadual */
.module-card-header,
.card-header,
.user-card-header,
.jab-card-head,
.pj-card-title,
.lap-card-head{
    background:#f6f8fb !important;
    border-bottom:1px solid #cfd8e3 !important;
}

/* Semua jadual utama */
.module-table,
.dashboard-table,
.user-table,
.jab-table,
.pic-table,
.pj-table,
.lap-table{
    width:100% !important;
    border-collapse:collapse !important;
    background:#fff !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:14px !important;
}

/* Header */
.module-table thead th,
.dashboard-table thead th,
.user-table thead th,
.jab-table thead th,
.pic-table thead th,
.pj-table thead th,
.lap-table thead th{
    background:var(--jwtco-table-navy) !important;
    color:#fff !important;
    border:1px solid var(--jwtco-table-navy-border) !important;
    padding:11px 12px !important;
    font-size:13px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    text-align:left;
    vertical-align:middle !important;
    text-transform:none !important;
    letter-spacing:0 !important;
}

/* Cell */
.module-table tbody td,
.dashboard-table tbody td,
.user-table tbody td,
.jab-table tbody td,
.pic-table tbody td,
.pj-table tbody td,
.lap-table tbody td{
    border:1px solid var(--jwtco-table-grid) !important;
    padding:11px 12px !important;
    color:var(--jwtco-table-text) !important;
    font-size:14px !important;
    line-height:1.4 !important;
    vertical-align:middle !important;
    background:#fff;
}

/* Alternating rows */
.module-table tbody tr:nth-child(even) td,
.dashboard-table tbody tr:nth-child(even) td,
.user-table tbody tr:nth-child(even) td,
.jab-table tbody tr:nth-child(even) td,
.pic-table tbody tr:nth-child(even) td,
.pj-table tbody tr:nth-child(even) td,
.lap-table tbody tr:nth-child(even) td{
    background:var(--jwtco-table-row-alt) !important;
}

/* Hover */
.module-table tbody tr:hover td,
.dashboard-table tbody tr:hover td,
.user-table tbody tr:hover td,
.jab-table tbody tr:hover td,
.pic-table tbody tr:hover td,
.pj-table tbody tr:hover td,
.lap-table tbody tr:hover td{
    background:var(--jwtco-table-row-hover) !important;
}

/* Header dengan ikon */
.th-wrap,
.table-th-wrap{
    display:flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
}

.th-icon,
.table-th-icon{
    width:15px;
    height:15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 15px;
    opacity:.95;
}

.th-icon svg,
.table-th-icon svg{
    width:15px;
    height:15px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Nombor / Bil */
.module-number,
.table-number,
.user-number,
.jab-number,
.pj-number,
.lap-number{
    text-align:center;
    font-weight:700 !important;
    color:#475569 !important;
}

/* Badge kategori / agensi */
.module-agency-code,
.agency-code,
.jab-badge,
.user-role-badge,
.pj-badge{
    display:inline-flex;
    align-items:center;
    padding:3px 7px !important;
    border-radius:4px !important;
    border:1px solid #d9e2ef !important;
    background:#edf2f8 !important;
    color:#334155 !important;
    font-size:11px !important;
    font-weight:700 !important;
}

/* Avatar PIC / user */
.module-pic-avatar,
.pic-avatar,
.user-avatar-table{
    width:28px !important;
    height:28px !important;
    display:grid !important;
    place-items:center !important;
    flex:0 0 28px;
    border-radius:5px !important;
    background:#eef2f7 !important;
    border:1px solid #d6dee8 !important;
    color:#172554 !important;
    font-size:11px !important;
    font-weight:700 !important;
}

/* Status badge */
.status-badge,
.lap-status{
    display:inline-flex !important;
    align-items:center;
    gap:5px;
    min-height:25px;
    padding:4px 8px !important;
    border-radius:5px !important;
    font-size:11px !important;
    font-weight:700 !important;
    white-space:nowrap;
}

.status-badge::before,
.lap-status::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
    opacity:.75;
}

/* Tindakan table */
.table-action,
.user-action,
.jab-action,
.pj-action,
.lap-action{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:30px;
    padding:6px 10px !important;
    border-radius:5px !important;
    background:#fff;
    border:1px solid #9aa9bd;
    color:#172554;
    font-size:12px !important;
    font-weight:700 !important;
    text-decoration:none !important;
    transition:.15s ease;
}

.table-action:hover,
.user-action:hover,
.jab-action:hover,
.pj-action:hover,
.lap-action:hover{
    background:#172554 !important;
    color:#fff !important;
    border-color:#172554 !important;
}

/* Wrapper */
.module-table-wrap,
.table-wrap,
.user-table-wrap,
.jab-table-wrap,
.pic-table-wrap,
.pj-table-wrap,
.lap-table-wrap{
    width:100%;
    overflow-x:auto;
}

/* Empty row */
.module-empty,
.empty-row,
.user-empty,
.jab-empty,
.pj-empty,
.lap-empty{
    text-align:center !important;
    color:#64748b !important;
    padding:28px 14px !important;
    font-size:14px !important;
}

@media(max-width:900px){
    .module-table,
    .dashboard-table,
    .user-table,
    .jab-table,
    .pic-table,
    .pj-table,
    .lap-table{
        min-width:900px;
    }
}