:root {
    --brand: #005a4b;
    --brand2: #06483f;
    --gold: #b58a3a;
    --bg: #f4f7f6;
    --surface: #fff;
    --text: #17312d;
    --muted: #7b8a87;
    --line: #dfe8e5;
    --shadow: 0 8px 26px rgba(0,56,47,.08);
    --arabic-font: 'Tajawal',sans-serif
}

[data-bs-theme="dark"] {
    --bg: #0e1716;
    --surface: #162220;
    --text: #edf5f3;
    --muted: #9eb0ac;
    --line: #2b3b38;
    --shadow: 0 8px 26px rgba(0,0,0,.22)
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--arabic-font);
    transition: .25s
}

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

.sidebar {
    width: 270px;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg,#005a4b,#003f37);
    color: white;
    padding: 22px 12px;
    z-index: 20;
    display: flex;
    flex-direction: column
}

.brand img {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    object-fit: cover;
    margin-bottom: 10px
}

.brand strong, .brand small {
    display: block
}

.brand small {
    font-size: 11px;
    opacity: .75
}

.sidebar .nav {
    margin-top: 26px
}

.sidebar .nav-link {
    color: #eef8f5;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: center
}

    .sidebar .nav-link:hover, .sidebar .nav-link.active {
        background: rgba(17,151,126,.55)
    }

        .sidebar .nav-link.active i {
            color: #d5a84e
        }

.sidebar-footer {
    margin-top: auto;
    text-align: center;
    color: #e5c77f;
    font-size: 13px;
    padding: 20px 4px
}

.main-area {
    margin-right: 270px;
    width: calc(100% - 270px);
    min-height: 100vh
}

.topbar {
    height: 92px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    position: sticky;
    top: 0;
    z-index: 10
}

.authority-title {
    display: flex;
    align-items: center;
    gap: 10px
}

    .authority-title img {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        object-fit: cover
    }

    .authority-title small, .authority-title b {
        display: block
    }

    .authority-title small {
        font-size: 10px;
        color: var(--muted)
    }

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

    .top-actions select {
        width: 150px;
        background: var(--surface);
        color: var(--text);
        border-color: var(--line)
    }

.icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px
}

.user-box {
    display: flex;
    gap: 8px;
    align-items: center
}

    .user-box small, .user-box b {
        display: block
    }

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e8efed;
    color: #60706d
}

.page-content {
    padding: 28px
}

.page-head h1 {
    font-size: 27px;
    font-weight: 800
}

    .page-head h1 i {
        color: var(--brand)
    }

.page-head p, .breadcrumb-lite {
    color: var(--muted)
}

.breadcrumb-lite {
    font-size: 13px;
    margin-bottom: 8px
}

.btn-primary-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

    .btn-primary-brand:hover {
        background: var(--brand2);
        color: #fff
    }

.btn-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff
}

.card-ui {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow)
}

.toolbar {
    margin: 18px 0;
    padding: 12px;
    display: flex;
    gap: 14px;
    align-items: center
}

.view-buttons {
    display: flex;
    gap: 6px
}

    .view-buttons .btn {
        color: var(--text);
        border: 1px solid var(--line)
    }

        .view-buttons .btn.active {
            background: var(--brand);
            color: white
        }

.search-box {
    height: 42px;
    flex: 1;
    max-width: 440px;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    margin-inline-start: auto
}

    .search-box input {
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--text);
        width: 100%
    }

.tool-icons {
    display: flex;
    gap: 6px
}

    .tool-icons button {
        width: 42px;
        height: 42px;
        border: 1px solid var(--line);
        background: var(--surface);
        color: var(--text);
        border-radius: 9px
    }

.org-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 18px
}

.tree-panel {
    min-height: 650px;
    padding: 30px;
    overflow: auto
}

.details-panel {
    padding: 18px
}

.panel-title {
    font-weight: 800;
    font-size: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
    display: flex;
    justify-content: space-between
}

.unit-badge {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 22px 0
}

.round-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f2eee3;
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 30px
}

.unit-badge h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 7px
}

.status {
    font-size: 12px;
    background: #dcf5e8;
    color: #16734d;
    padding: 4px 9px;
    border-radius: 20px
}

    .status i {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #1c9c68
    }

.details-panel h4 {
    font-size: 15px;
    font-weight: 800;
    margin: 18px 0 10px
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

    .info-grid > div {
        background: var(--bg);
        padding: 10px;
        border-radius: 8px
    }

    .info-grid .full {
        grid-column: 1/-1
    }

    .info-grid label, .info-grid span {
        display: block
    }

    .info-grid label {
        color: var(--muted);
        font-size: 12px
    }

.description {
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted)
}

.tree-wrap {
    min-width: 760px;
    text-align: center
}

.tree-level {
    display: flex;
    justify-content: center;
    gap: 16px;
    position: relative;
    margin-top: 26px
}

.tree-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

    .tree-branch > .tree-level:before {
        content: "";
        position: absolute;
        top: -26px;
        left: 50%;
        height: 26px;
        border-left: 1px solid #7d9690
    }

.org-node {
    min-width: 190px;
    max-width: 230px;
    min-height: 76px;
    padding: 12px 15px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: #f6f1e7;
    color: #183d36;
    font-family: inherit;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,.04)
}

    .org-node i {
        display: block;
        margin-bottom: 6px;
        color: var(--brand)
    }

    .org-node.root {
        background: var(--gold);
        color: white;
        border-color: var(--gold);
        min-width: 300px
    }

        .org-node.root i {
            color: white
        }

    .org-node.sector {
        background: var(--brand);
        color: white
    }

        .org-node.sector i {
            color: #e8c779
        }

    .org-node.unit:hover, .org-node.selected {
        outline: 2px solid #43a487;
        background: #e6f4ed
    }

.depth-2 .org-node, .depth-3 .org-node {
    min-width: 155px
}

.empty-state {
    padding: 150px 20px;
    color: var(--muted)
}

    .empty-state i {
        font-size: 55px;
        color: var(--brand);
        margin-bottom: 14px
    }

footer {
    text-align: center;
    color: var(--muted);
    padding: 16px;
    font-size: 12px
}

.modal-content {
    background: var(--surface);
    color: var(--text)
}

.form-control, .form-select {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--line)
}

@media(max-width:1100px) {
    .sidebar {
        width: 86px
    }

        .sidebar .brand strong, .sidebar .brand small, .sidebar .nav-link span, .sidebar-footer {
            display: none
        }

    .brand img {
        width: 54px;
        height: 54px
    }

    .sidebar .nav-link {
        justify-content: center;
        font-size: 19px
    }

    .main-area {
        margin-right: 86px;
        width: calc(100% - 86px)
    }

    .org-layout {
        grid-template-columns: 1fr
    }

    .details-panel {
        order: -1
    }

    .topbar {
        padding: 10px 16px
    }

    .authority-title small {
        display: none
    }
}

@media(max-width:700px) {
    .sidebar {
        display: none
    }

    .main-area {
        margin: 0;
        width: 100%
    }

    .page-content {
        padding: 14px
    }

    .topbar {
        height: auto;
        flex-wrap: wrap
    }

    .authority-title b {
        font-size: 13px
    }

    .top-actions select, .user-box {
        display: none
    }

    .toolbar {
        flex-wrap: wrap
    }

    .search-box {
        order: 3;
        max-width: none;
        width: 100%
    }

    .view-buttons {
        overflow: auto
    }

    .org-layout {
        display: block
    }

    .details-panel {
        margin-bottom: 14px
    }

    .tree-panel {
        padding: 18px
    }

    .page-head .d-flex {
        width: 100%
    }

    .page-head .btn {
        flex: 1
    }

    .tree-wrap {
        min-width: 680px
    }
}



/* Organizational structure interactive views */
.view-pane {
    display: none
}

    .view-pane.active {
        display: block
    }

.list-wrap, .detail-wrap {
    min-height: 560px
}

.org-table {
    color: var(--text)
}

    .org-table thead th {
        background: var(--bg);
        border-color: var(--line);
        white-space: nowrap
    }

    .org-table td {
        border-color: var(--line)
    }

.panel-title {
    width: 100%;
    background: transparent;
    color: var(--text);
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: right
}

.dropdown-menu {
    background: var(--surface);
    border-color: var(--line)
}

.dropdown-item {
    color: var(--text)
}

    .dropdown-item:hover {
        background: var(--bg);
        color: var(--text)
    }
/* Every group of siblings is laid out horizontally. Nested levels remain centered under their parent. */
.tree-wrap {
    min-width: 1180px;
    padding: 0 12px 30px
}

.tree-level {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
    position: relative;
    margin-top: 26px;
    width: max-content;
    min-width: 100%;
    margin-inline: auto
}

.tree-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 auto
}

    .tree-branch > .tree-level {
        min-width: 0;
        width: max-content
    }

        .tree-branch > .tree-level:before {
            content: "";
            position: absolute;
            top: -26px;
            left: 50%;
            height: 26px;
            border-left: 2px solid #7d9690
        }

.tree-level > .tree-branch:not(:only-child):before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    border-top: 2px solid #7d9690
}

.tree-level > .tree-branch:first-child:before {
    left: 50%
}

.tree-level > .tree-branch:last-child:before {
    right: 50%
}

.tree-level > .tree-branch:after {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    height: 14px;
    border-left: 2px solid #7d9690
}

.depth-0 > .tree-branch:before, .depth-0 > .tree-branch:after {
    display: none
}

.org-node {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 210px;
    max-width: 250px
}

    .org-node small {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        opacity: .9
    }

    .org-node.executive {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
        min-width: 270px
    }

        .org-node.executive i {
            color: #e8c779
        }

    .org-node.sector {
        background: #f6f1e7;
        color: #183d36;
        border-color: #e3ded2;
        min-width: 220px
    }

        .org-node.sector i {
            color: var(--brand)
        }

.depth-3 .org-node, .depth-4 .org-node, .depth-5 .org-node {
    min-width: 205px;
    max-width: 235px;
    background: #f8fafb
}

.search-muted {
    opacity: .14 !important;
    filter: grayscale(.7)
}

.search-hit {
    outline: 3px solid #d4a84f !important
}

.selected-detail-card {
    max-width: 760px;
    margin: 60px auto;
    text-align: center;
    padding: 35px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow)
}

.detail-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 15px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef5f2;
    color: var(--brand);
    font-size: 30px
}

.detail-tags {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 15px 0
}

    .detail-tags span {
        background: var(--bg);
        padding: 7px 12px;
        border-radius: 20px;
        font-size: 13px
    }

.detail-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 25px
}

    .detail-stats > div {
        padding: 16px;
        background: var(--bg);
        border-radius: 12px
    }

    .detail-stats b, .detail-stats small {
        display: block
    }

    .detail-stats b {
        font-size: 18px
    }

    .detail-stats small {
        color: var(--muted);
        margin-top: 5px
    }

.detail-empty > i {
    font-size: 48px;
    color: var(--brand);
    margin-top: 55px
}

.detail-empty {
    text-align: center;
    color: var(--muted)
}

#orgWorkspace:fullscreen {
    background: var(--bg);
    padding: 20px;
    overflow: auto
}

.tool-icons button:hover, .view-buttons .btn:hover {
    border-color: var(--brand);
    color: var(--brand)
}

[data-bs-theme="dark"] .org-node.sector, [data-bs-theme="dark"] .depth-3 .org-node, [data-bs-theme="dark"] .depth-4 .org-node, [data-bs-theme="dark"] .depth-5 .org-node {
    background: #21302d;
    color: #eef7f4;
    border-color: #344a45
}

@media(max-width:1100px) {
    .tree-wrap {
        min-width: 1100px
    }

    .org-node {
        min-width: 190px
    }

    .detail-stats {
        grid-template-columns: 1fr
    }
}

/* ===== Organizational chart viewport: the chart stays completely inside its panel ===== */
.org-fit-viewport {
    position: relative;
    min-width: 0 !important;
    width: 100%;
    height: clamp(560px, 68vh, 820px);
    padding: 0 !important;
    overflow: hidden !important;
    text-align: initial;
}

.org-chart-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: block;
}

.org-chart-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: max-content;
    min-width: max-content;
    height: auto;
    transform-origin: top left;
    will-change: transform;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.org-chart-stage > .tree-level {
    min-width: 0;
    width: max-content;
    margin-inline: 0;
}

.org-chart-controls {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 8;
    display: flex;
    align-items: center;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
    direction: ltr;
}

.org-chart-controls button {
    min-width: 38px;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-inline-end: 1px solid var(--line);
    background: transparent;
    color: var(--text);
}
.org-chart-controls button:last-child { border-inline-end: 0; }
.org-chart-controls button:hover { color: var(--brand); background: var(--bg); }
.org-chart-controls .fit-btn { display:flex; align-items:center; gap:7px; font-weight:700; }

@media (max-width:700px) {
    .org-fit-viewport { height:560px; }
    .org-chart-controls .fit-btn span { display:none; }
}

/* ===== Dedicated print layout: ONE A3 landscape page ===== */
#orgPrintHost { display:none; }
#orgPrintCanvas { position:absolute; direction:rtl; }
#orgPrintLines { position:absolute; inset:0; overflow:visible; pointer-events:none; }
#orgPrintLines .print-connector { stroke:#78928c; stroke-width:2; vector-effect:non-scaling-stroke; }
#orgPrintCanvas .print-org-node {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-sizing:border-box; padding:9px 12px; border-radius:9px;
    font-family:var(--arabic-font); font-weight:700; text-align:center;
    box-shadow:none !important; overflow:hidden;
}
#orgPrintCanvas .print-org-node i { display:block; margin-bottom:4px; }
#orgPrintCanvas .print-org-node small { display:block; margin-top:3px; font-size:11px; }

@media print {
    @page { size:A3 landscape; margin:5mm; }
    html,body { margin:0!important; padding:0!important; width:100%!important; height:100%!important; overflow:hidden!important; background:#fff!important; -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
    body > * { display:none!important; }
    body > #orgPrintHost { display:block!important; position:fixed!important; left:0!important; top:0!important; width:var(--print-page-w)!important; height:var(--print-page-h)!important; margin:0!important; padding:0!important; overflow:hidden!important; background:#fff!important; }
    #orgPrintCanvas { display:block!important; position:absolute!important; margin:0!important; padding:0!important; page-break-inside:avoid!important; break-inside:avoid-page!important; }
    #orgPrintLines { display:block!important; }
    #orgPrintCanvas .print-org-node { page-break-inside:avoid!important; break-inside:avoid!important; -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
}

/* ===== Users & permissions ===== */
.user-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.stat-card{padding:18px;display:flex;align-items:center;gap:14px}.stat-icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(0,90,75,.1);color:var(--brand);font-size:20px}.stat-card small,.stat-card b{display:block}.stat-card small{color:var(--muted);font-size:12px}.stat-card b{font-size:25px;margin-top:3px}.users-toolbar{flex-wrap:wrap}.users-filter{width:210px}.users-table-card{padding:10px 16px}.user-cell{display:flex;align-items:center;gap:10px;min-width:220px}.user-cell b,.user-cell small{display:block}.user-cell small{color:var(--muted);font-size:11px}.user-mini-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e7f1ee;color:var(--brand)}.role-pill{display:inline-block;padding:5px 9px;border-radius:20px;background:rgba(181,138,58,.13);color:#9b742d;font-size:12px;font-weight:700}.roles-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px;margin-top:20px}.roles-list{padding:12px;align-self:start}.roles-list-head{padding:8px 8px 15px;border-bottom:1px solid var(--line)}.roles-list-head b,.roles-list-head small{display:block}.roles-list-head small{color:var(--muted);margin-top:4px}.role-list-item{display:flex;align-items:center;gap:10px;padding:12px;margin-top:6px;border-radius:10px;color:var(--text);text-decoration:none}.role-list-item:hover,.role-list-item.active{background:var(--bg);color:var(--text)}.role-list-item.active{border-right:3px solid var(--brand)}.role-list-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(0,90,75,.1);color:var(--brand)}.role-list-item b,.role-list-item small{display:block}.role-list-item small{color:var(--muted);font-size:11px;margin-top:3px}.permission-panel{padding:20px}.permission-head{display:flex;justify-content:space-between;gap:15px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:15px}.permission-head h3{font-size:20px;font-weight:800;margin:0}.permission-head p{color:var(--muted);margin:5px 0 0}.permission-count{background:var(--bg);padding:7px 12px;border-radius:20px;font-size:12px}.permission-module{padding:18px 0;border-bottom:1px solid var(--line)}.permission-module-title{font-weight:800;margin-bottom:12px;color:var(--brand)}.permission-module-title i{margin-left:7px}.permission-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.permission-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer}.permission-item input{width:18px;height:18px}.permission-item b,.permission-item small{display:block}.permission-item b{font-size:13px}.permission-item small{font-size:10px;color:var(--muted);direction:ltr;text-align:right}.permission-footer{padding-top:18px;text-align:left}
@media(max-width:1100px){.user-stats-grid{grid-template-columns:repeat(2,1fr)}.roles-layout{grid-template-columns:1fr}.roles-list{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.roles-list-head{grid-column:1/-1}}
@media(max-width:700px){.user-stats-grid{grid-template-columns:1fr 1fr}.users-filter{width:100%}.permission-items{grid-template-columns:1fr}.roles-list{grid-template-columns:1fr}.stat-card{padding:12px}.stat-card b{font-size:20px}}

/* ===== Task management ===== */
.task-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.tasks-toolbar{flex-wrap:wrap}.task-main{min-width:230px}.task-main b,.task-main small{display:block}.task-main small{color:var(--muted);font-size:11px;margin-top:4px}.assignment-names{max-width:300px;line-height:1.7}.priority-pill,.shared-badge,.task-status{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}.priority-low{background:#eef2f1;color:#65736f}.priority-normal{background:#e8f3f0;color:#126c5b}.priority-high{background:#fff1d8;color:#9a6414}.priority-urgent{background:#fde7e7;color:#a52a2a}.shared-badge{background:rgba(181,138,58,.14);color:#936c25}.task-status{background:var(--bg);color:var(--text)}.task-actions{display:flex;gap:5px}.assignment-box{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--bg)}.assignment-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.assignment-title i{color:var(--brand);font-size:18px}.assignment-title small{color:var(--muted);width:100%;padding-right:28px}.shared-area{border-top:1px dashed var(--line);margin-top:14px}.shared-area select{min-height:155px}.task-table td{vertical-align:middle}
@media(max-width:1100px){.task-stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.task-stats-grid{grid-template-columns:1fr 1fr}.task-actions{min-width:90px}}

/* Task assignment & distribution */
.assignment-row .role-pill i{margin-left:5px}.assignment-row td{vertical-align:middle}.assignment-row .task-actions{justify-content:flex-start}.assignment-row .task-main{min-width:240px}
@media(max-width:700px){.assignment-row .task-main{min-width:190px}}

/* ===== Authentication / Login ===== */
.login-page{margin:0;min-height:100vh;background:#f4f7f6;font-family:'Tajawal',sans-serif;color:#17342f}.login-page form{min-height:100vh}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,42%) minmax(480px,58%)}.login-brand-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:60px;background:linear-gradient(145deg,#063f36,#006453);overflow:hidden;color:#fff}.login-brand-panel:before,.login-brand-panel:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%}.login-brand-panel:before{width:520px;height:520px;right:-240px;top:-180px}.login-brand-panel:after{width:420px;height:420px;left:-230px;bottom:-180px}.login-brand-content{position:relative;z-index:1;max-width:510px;text-align:center}.login-logo{width:122px;height:122px;object-fit:contain;margin-bottom:24px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.16))}.login-authority{font-size:20px;font-weight:700;color:#e6d4aa}.login-brand-content h1{font-size:38px;font-weight:800;margin:13px 0}.login-brand-content p{font-size:16px;line-height:2;color:rgba(255,255,255,.78);margin:0 auto;max-width:450px}.login-brand-line{width:54px;height:3px;border-radius:4px;background:#c9a45c;margin:27px auto 18px}.login-brand-content small{font-size:10px;letter-spacing:1.5px;color:rgba(255,255,255,.58)}.login-form-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px 8%;position:relative}.login-card{width:100%;max-width:480px;background:#fff;border:1px solid #e1e8e6;border-radius:22px;padding:38px;box-shadow:0 20px 55px rgba(21,66,58,.09)}.login-heading{display:flex;align-items:center;gap:15px;margin-bottom:28px}.login-heading h2{font-size:26px;font-weight:800;margin:0}.login-heading p{color:#7c8e89;font-size:13px;margin:5px 0 0}.login-lock{width:52px;height:52px;border-radius:15px;background:#e7f2ef;color:#006453;display:grid;place-items:center;font-size:21px}.login-card .form-label{font-size:13px;font-weight:700;margin-bottom:7px}.login-input{position:relative}.login-input>i{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:2;color:#80928d}.login-input .form-control{height:50px;border-radius:11px;padding-right:42px;padding-left:43px;border-color:#dbe4e1}.login-input .form-control:focus{border-color:#3b8b7d;box-shadow:0 0 0 .2rem rgba(0,100,83,.1)}.password-toggle{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:35px;height:35px;border:0;background:transparent;color:#80928d}.login-submit{width:100%;height:51px;border:0;border-radius:11px;margin-top:20px;background:#006453;font-weight:800}.login-submit:hover,.login-submit:focus{background:#004f42}.login-alert{font-size:13px;border-radius:10px}.login-security{display:flex;align-items:flex-start;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid #edf1f0;color:#879691;font-size:11px;line-height:1.7}.login-security i{color:#b58a3a;margin-top:3px}.login-footer{position:absolute;bottom:20px;color:#98a5a1;font-size:11px}.login-mobile-brand{display:none}.user-box em{display:block;font-size:10px;font-style:normal;color:var(--muted);margin-top:1px}.logout-btn{text-decoration:none;display:grid;place-items:center;color:var(--text)}.logout-btn:hover{color:#a52a2a}
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-panel{min-height:100vh;padding:30px 20px}.login-mobile-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:28px;color:#006453}.login-mobile-brand img{width:48px;height:48px;object-fit:contain}.login-card{padding:30px}.login-footer{position:static;margin-top:25px}.login-heading h2{font-size:23px}}
@media(max-width:480px){.login-card{padding:24px 20px;border-radius:16px}.login-form-panel{padding:20px 14px}.login-heading{align-items:flex-start}.login-lock{width:46px;height:46px;flex:0 0 46px}}

/* Task lifecycle */
.lifecycle-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:start}.lifecycle-tasks{position:sticky;top:18px;max-height:calc(100vh - 140px);overflow:hidden}.life-task-list{overflow:auto;max-height:calc(100vh - 270px);padding:0 10px 12px}.life-task-item{display:grid;grid-template-columns:1fr auto;gap:7px 10px;padding:13px;border-radius:14px;text-decoration:none;color:var(--text-color);border:1px solid transparent;margin-bottom:8px;background:var(--surface-2,#f8faf9)}.life-task-item:hover,.life-task-item.active{border-color:rgba(177,139,55,.45);box-shadow:0 5px 16px rgba(0,0,0,.06)}.life-task-item.active{background:rgba(177,139,55,.09)}.life-task-item b{display:block;font-size:.92rem}.life-task-item small{font-size:.72rem;color:var(--muted)}.life-list-status{font-size:.68rem;font-weight:700;padding:4px 7px;border-radius:20px;height:max-content}.life-mini-progress{grid-column:1/-1;height:4px;border-radius:10px;background:rgba(0,0,0,.08);overflow:hidden}.life-mini-progress i{display:block;height:100%;background:var(--brand-green,#0d594c)}.life-due{grid-column:1/-1}.count-chip{background:rgba(177,139,55,.12);color:var(--gold,#a87d24);padding:4px 9px;border-radius:20px;font-weight:800}.life-empty{min-height:520px;border:1px dashed rgba(0,0,0,.14);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);background:var(--surface,#fff)}.life-empty i{font-size:3.4rem;color:var(--gold,#a87d24);margin-bottom:18px}.life-hero{display:flex;justify-content:space-between;gap:25px;align-items:center;padding:26px;border-radius:20px;background:linear-gradient(135deg,rgba(7,77,65,.98),rgba(10,103,85,.92));color:#fff;box-shadow:0 12px 30px rgba(5,69,58,.16)}.life-hero-main{min-width:0}.life-hero h2{font-size:1.55rem;font-weight:800}.life-hero p{opacity:.82;margin:10px 0 16px}.life-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.82rem}.life-meta span{display:flex;gap:7px;align-items:center}.life-status-badge,.life-weight-badge{display:inline-flex;padding:5px 10px;border-radius:20px;font-size:.75rem;font-weight:800;background:rgba(255,255,255,.15)}.life-weight-badge{background:rgba(211,173,78,.2);color:#ffe3a0}.progress-ring{--p:0;width:116px;height:116px;flex:0 0 116px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#d7b45d calc(var(--p)*1%),rgba(255,255,255,.18) 0);position:relative}.progress-ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:#075448}.progress-ring div{position:relative;text-align:center}.progress-ring b{display:block;font-size:1.45rem}.progress-ring small{font-size:.72rem;opacity:.8}.workflow-strip{display:flex;align-items:flex-start;margin:20px 0;padding:18px 22px;background:var(--surface,#fff);border-radius:18px;border:1px solid var(--border-color,#e7ebe9)}.workflow-step{position:relative;flex:1;text-align:center;color:var(--muted)}.workflow-step:not(:last-child):after{content:"";position:absolute;top:17px;right:50%;width:100%;height:3px;background:#e4e8e6;z-index:0}.workflow-step span{position:relative;z-index:1;display:grid;place-items:center;margin:0 auto 8px;width:36px;height:36px;border-radius:50%;background:#e8ecea;color:#9ba5a1}.workflow-step b{font-size:.78rem}.workflow-step.done span,.workflow-step.current span{background:#0b6b59;color:#fff}.workflow-step.done:not(:last-child):after{background:#0b6b59}.workflow-step.current b{color:#0b6b59}.life-actions{margin-bottom:0}.timeline-wrap{padding:8px 20px 22px}.timeline-item{display:grid;grid-template-columns:18px 1fr;gap:13px;position:relative;padding:16px 0}.timeline-item:not(:last-child):before{content:"";position:absolute;right:7px;top:32px;bottom:-16px;width:2px;background:#e3e8e6}.timeline-dot{width:16px;height:16px;border:4px solid rgba(10,104,86,.18);background:#0a6856;border-radius:50%;margin-top:4px;z-index:1}.timeline-head{display:flex;justify-content:space-between;gap:10px}.timeline-head time,.timeline-item small{color:var(--muted);font-size:.72rem}.timeline-item p{margin:7px 0 0;padding:8px 11px;border-radius:10px;background:var(--surface-2,#f7f9f8);font-size:.82rem}.timeline-progress{display:inline-block;margin-top:6px;font-size:.7rem;font-weight:800;color:#0a6856}.comment-item{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--border-color,#eee)}.comment-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(10,104,86,.1);color:#0a6856}.comment-item b,.comment-item small{display:block}.comment-item small{color:var(--muted);font-size:.68rem}.comment-item p{margin:5px 0 0;font-size:.82rem}.attachment-item{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit;padding:11px;border-radius:12px;background:var(--surface-2,#f7f9f8);margin-top:9px}.attachment-item>i{font-size:1.3rem;color:#a87d24}.attachment-item b,.attachment-item small{display:block}.attachment-item small{color:var(--muted);font-size:.68rem}.life-success{background:#e5f6ef!important;color:#167553!important}.life-warning{background:#fff4dc!important;color:#946300!important}.life-gold{background:#f7ecd1!important;color:#8a6416!important}.life-danger{background:#fde8e8!important;color:#a63838!important}.life-progress{background:#e3f1ff!important;color:#2369a1!important}.life-new,.life-muted{background:#edf0ef!important;color:#67736f!important}@media(max-width:1100px){.lifecycle-layout{grid-template-columns:1fr}.lifecycle-tasks{position:static;max-height:none}.life-task-list{max-height:330px}}@media(max-width:700px){.life-hero{align-items:flex-start;flex-direction:column}.progress-ring{align-self:center}.workflow-strip{padding:14px 5px}.workflow-step b{font-size:.65rem}.life-meta{flex-direction:column;gap:7px}}

/* Task execution tracking */
.tracking-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px;align-items:start}.tracking-sidebar{position:sticky;top:18px;max-height:calc(100vh - 120px);overflow:hidden}.tracking-task-list{max-height:calc(100vh - 245px);overflow:auto}.tracking-task-item{display:block;padding:14px 16px;border-top:1px solid var(--border-color);color:inherit;text-decoration:none;transition:.18s}.tracking-task-item:hover,.tracking-task-item.active{background:rgba(11,91,73,.07)}.tracking-task-item.active{box-shadow:inset -4px 0 0 var(--primary)}.tracking-task-head,.tracking-task-foot,.obstacle-head,.feed-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.tracking-task-head span{min-width:0}.tracking-task-head b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tracking-task-head small,.tracking-task-foot,.feed-head small{font-size:.76rem;color:var(--muted)}.tracking-task-head em{font-style:normal;font-weight:800;color:var(--primary)}.tracking-task-foot{margin-top:7px}.tracking-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px;border-radius:22px;background:linear-gradient(135deg,rgba(8,78,63,.98),rgba(16,112,88,.93));color:#fff;box-shadow:0 16px 35px rgba(0,0,0,.08)}.tracking-hero h2{font-weight:800}.tracking-meta{display:flex;gap:18px;flex-wrap:wrap;opacity:.9}.tracking-meta span{display:flex;gap:7px;align-items:center}.tracking-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.tracking-kpi{background:var(--card-bg);border:1px solid var(--border-color);border-radius:17px;padding:17px;display:flex;align-items:center;gap:13px}.tracking-kpi>i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(11,91,73,.09);color:var(--primary);font-size:1.1rem}.tracking-kpi span{display:flex;flex-direction:column}.tracking-kpi small{color:var(--muted)}.tracking-kpi b{font-size:1.05rem}.tracking-feed{padding:8px 18px 18px}.tracking-feed-item{display:grid;grid-template-columns:42px 1fr;gap:13px;padding:16px 0;border-bottom:1px solid var(--border-color)}.tracking-feed-item:last-child{border-bottom:0}.feed-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center}.feed-icon.update{background:rgba(11,91,73,.1);color:var(--primary)}.feed-icon.action{background:rgba(191,151,70,.12);color:#9c741e}.tracking-feed-item p{margin:7px 0;white-space:pre-line}.next-steps{margin-top:8px;padding:9px 11px;border-radius:10px;background:rgba(11,91,73,.06);font-size:.88rem}.obstacle-list{padding:8px 16px 16px}.obstacle-item{padding:14px;border:1px solid var(--border-color);border-radius:14px;margin-top:10px}.obstacle-item.open{border-right:4px solid #dc3545}.obstacle-item.resolved{opacity:.7}.obstacle-item p{margin:7px 0;font-size:.9rem;white-space:pre-line}.severity,.resolved-chip{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:.72rem;font-weight:800}.severity-critical{background:#7a1020;color:#fff}.severity-high{background:#fde2e5;color:#b42332}.severity-medium{background:#fff0cc;color:#8a6412}.severity-low{background:#dff4ea;color:#16714f}.resolved-chip{margin-top:8px;background:#dff4ea;color:#16714f}.live-timer{font-size:.78rem;font-weight:800;color:var(--primary)}.timer-running{display:flex;gap:12px;align-items:center;padding:12px;border-radius:13px;background:rgba(25,135,84,.08)}.timer-running i{font-size:1.4rem;color:#198754}.timer-running div{display:flex;flex-direction:column}.time-list{margin-top:12px;max-height:260px;overflow:auto}.time-entry{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-color)}.time-entry i{color:var(--primary);margin-top:4px}.time-entry div{display:flex;flex-direction:column}.time-entry small{color:var(--muted);font-size:.76rem}.comment-item.compact{padding:10px 0}.comment-item.compact p{margin-bottom:0}@media(max-width:1200px){.tracking-kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:991px){.tracking-layout{grid-template-columns:1fr}.tracking-sidebar{position:static;max-height:none}.tracking-task-list{max-height:360px}.tracking-hero{align-items:flex-start}.tracking-kpis{grid-template-columns:1fr 1fr}}@media(max-width:600px){.tracking-kpis{grid-template-columns:1fr}.tracking-hero{flex-direction:column}.tracking-meta{gap:9px}}

/* Task review and final approval */
.review-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.review-stat{background:var(--bs-body-bg);border:1px solid var(--border-color,#e7e9e8);border-radius:18px;padding:18px;display:flex;align-items:center;gap:14px;box-shadow:0 8px 25px rgba(0,0,0,.04)}.review-stat>span{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(15,92,76,.09);color:var(--brand,#0f5c4c);font-size:20px}.review-stat b{font-size:25px;display:block}.review-stat small{color:var(--bs-secondary-color)}.review-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px}.review-list-panel{overflow:hidden}.review-task-list{max-height:760px;overflow:auto}.review-task-item{display:block;text-decoration:none;color:inherit;padding:15px 17px;border-top:1px solid var(--border-color,#eee);transition:.2s}.review-task-item:hover,.review-task-item.active{background:rgba(15,92,76,.07)}.review-task-item b{display:block;margin-bottom:3px}.review-task-item small{color:var(--bs-secondary-color)}.review-status{display:inline-block;margin:8px 0 7px;padding:4px 9px;border-radius:20px;background:rgba(191,148,55,.13);color:#8a681f;font-size:12px;font-weight:700}.review-hero{padding:24px;display:flex;justify-content:space-between;align-items:center;gap:25px}.review-hero h2{font-weight:800}.review-hero p{color:var(--bs-secondary-color);max-width:800px}.review-progress{width:112px;height:112px;flex:0 0 112px;border-radius:50%;border:9px solid rgba(15,92,76,.12);display:flex;flex-direction:column;align-items:center;justify-content:center}.review-progress b{font-size:25px;color:var(--brand,#0f5c4c)}.review-progress small{font-size:12px}.review-rule{border:1px solid var(--border-color,#e8e8e8);border-radius:15px;padding:16px;display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:8px}.review-rule i{color:var(--brand,#0f5c4c)}.review-rule span{font-weight:800}.review-history{padding:8px 18px 18px}.review-history-item{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--border-color,#eee)}.review-history-item>span{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;background:rgba(15,92,76,.1);color:var(--brand,#0f5c4c)}.review-history-item b,.review-history-item small{display:block}.review-history-item small{color:var(--bs-secondary-color);margin-top:2px}.review-history-item p{margin:8px 0 0}.review-history-item em{font-size:12px;color:var(--bs-secondary-color)}
@media(max-width:1100px){.review-layout{grid-template-columns:1fr}.review-task-list{max-height:340px}}@media(max-width:700px){.review-stats{grid-template-columns:1fr}.review-hero{align-items:flex-start;flex-direction:column}.review-progress{width:90px;height:90px;flex-basis:90px}}