/* =========================================================
   ZATRAK GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f7fb;
    color: #111827;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


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

.zatrak-login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: #f8fafc;
}

/* LEFT BRAND */

.zatrak-login-brand {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.08), transparent 28%),
        linear-gradient(145deg, #12372a 0%, #0d2b21 55%, #081d16 100%);
    color: #fff;
}

.zatrak-brand-content {
    min-height: 100vh;
    max-width: 760px;
    margin: 0 auto;
    padding: 55px 70px;
    display: flex;
    flex-direction: column;
}

.zatrak-login-logo,
.zatrak-mobile-logo {
    display: flex;
    align-items: center;
    gap: 13px;
}

.zatrak-logo-mark {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #f5d98b;
}

.zatrak-logo-name {
    font-size: 23px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.5px;
}

.zatrak-logo-subtitle {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 2px;
    opacity: .65;
}

.zatrak-login-message {
    margin-top: auto;
    margin-bottom: 28px;
}

.zatrak-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 2px;
    color: #f5d98b;
}

.zatrak-login-message h1 {
    max-width: 570px;
    margin: 0;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 400;
}

.zatrak-login-message h1 strong {
    color: #f5d98b;
    font-weight: 800;
}

.zatrak-login-message p {
    max-width: 530px;
    margin: 22px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 1.8;
}

/* TREE VISUAL */

.zatrak-tree-visual {
    position: relative;
    height: 155px;
    margin-bottom: 28px;
}

.tree-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(245,217,139,.5);
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5d98b;
    font-size: 13px;
    font-weight: 700;
}

.tree-circle-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.tree-circle-main {
    width: 58px;
    height: 58px;
    background: rgba(245,217,139,.12);
}

.tree-circle-main span {
    font-size: 18px;
}

.tree-branch-row {
    position: absolute;
    top: 76px;
    left: 50%;
    width: 240px;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tree-line {
    position: absolute;
    top: 55px;
    width: 90px;
    height: 1px;
    background: rgba(245,217,139,.35);
}

.tree-line-left {
    left: calc(50% - 120px);
    transform: rotate(28deg);
    transform-origin: right;
}

.tree-line-right {
    right: calc(50% - 120px);
    transform: rotate(-28deg);
    transform-origin: left;
}

.tree-branch-line {
    position: absolute;
    top: 76px;
    left: 50%;
    width: 1px;
    height: 40px;
    background: rgba(245,217,139,.35);
}

.tree-generation {
    position: absolute;
    top: 125px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 35px;
}

.tree-generation span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(245,217,139,.55);
}

.zatrak-brand-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255,255,255,.4);
    font-size: 11px;
}

/* LOGIN FORM SIDE */

.zatrak-login-form-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px;
    background: #f8fafc;
}

.zatrak-login-container {
    width: 100%;
    max-width: 440px;
}

.zatrak-mobile-logo {
    display: none;
}

.zatrak-login-card {
    width: 100%;
    padding: 42px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(15,23,42,.08);
}

.zatrak-login-header {
    margin-bottom: 32px;
    text-align: center;
}

.zatrak-login-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 15px;
    background: #edf7f1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zatrak-login-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #12372a;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-login-header h2 {
    margin: 0;
    color: #111827;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.7px;
}

.zatrak-login-header p {
    margin: 8px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.zatrak-login-field {
    margin-bottom: 21px;
}

.zatrak-login-field label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

.zatrak-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.zatrak-label-row a {
    color: #176b4d;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.zatrak-label-row a:hover {
    text-decoration: underline;
}

.zatrak-input-wrapper {
    position: relative;
    width: 100%;
}

.zatrak-input-wrapper > svg {
    position: absolute;
    left: 15px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: #9ca3af;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.zatrak-input-wrapper input {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 46px;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font-size: 14px;
    line-height: 1;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.zatrak-input-wrapper input::placeholder {
    color: #a1a7b0;
}

.zatrak-input-wrapper input:focus {
    border-color: #176b4d;
    box-shadow: 0 0 0 4px rgba(23,107,77,.09);
}

.zatrak-password-toggle {
    position: absolute;
    right: 9px;
    top: 50%;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zatrak-password-toggle:hover {
    background: #f3f4f6;
}

.zatrak-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #9ca3af;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-field-error {
    margin-top: 7px;
    color: #b42318;
    font-size: 12px;
    line-height: 1.4;
}

.zatrak-login-options {
    margin: 2px 0 24px;
}

.zatrak-checkbox {
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
}

.zatrak-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #176b4d;
}

.zatrak-login-button {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #12372a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.zatrak-login-button:hover {
    background: #0d2b21;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(18,55,42,.18);
}

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

.zatrak-login-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-register {
    margin-top: 28px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.zatrak-register a {
    margin-left: 5px;
    color: #176b4d;
    font-weight: 700;
    text-decoration: none;
}

.zatrak-register a:hover {
    text-decoration: underline;
}

.zatrak-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    color: #9ca3af;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.zatrak-security-note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: #9ca3af;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   ZATRAK APPLICATION LAYOUT
========================================================= */

.zatrak-app {
    min-height: 100vh;
    display: flex;
    background: #f5f7fb;
}

.zatrak-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 250px;
    height: 100vh;
    padding: 24px 16px 18px;
    background: #12372a;
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto;
}

.zatrak-sidebar .zatrak-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px 25px;
}

.zatrak-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5d98b;
    font-size: 19px;
    font-weight: 800;
}

.zatrak-brand-name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

.zatrak-brand-subtitle {
    margin-top: 4px;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    letter-spacing: 1px;
}

.zatrak-sidebar-nav {
    flex: 1;
}

.zatrak-nav-section {
    padding: 18px 12px 8px;
    color: rgba(255,255,255,.38);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.zatrak-nav-section-space {
    margin-top: 6px;
}

.zatrak-nav-link {
    min-height: 44px;
    margin: 3px 0;
    padding: 0 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.70);
    text-decoration: none;
    font-size: 13px;
    transition: background .18s ease, color .18s ease;
}

.zatrak-nav-link svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-nav-link:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
}

.zatrak-nav-link.active {
    background: rgba(245,217,139,.13);
    color: #f5d98b;
}

.zatrak-sidebar-user {
    margin-top: 15px;
    padding: 14px 8px 4px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 10px;
}

.zatrak-user-avatar,
.zatrak-topbar-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #f5d98b;
    color: #12372a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}

.zatrak-user-details {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.zatrak-user-details strong {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zatrak-user-details span {
    margin-top: 3px;
    color: rgba(255,255,255,.45);
    font-size: 10px;
}

.zatrak-user-more {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.55);
    font-size: 20px;
    cursor: pointer;
}

.zatrak-main {
    min-width: 0;
    min-height: 100vh;
    margin-left: 250px;
    flex: 1;
}

.zatrak-topbar {
    height: 76px;
    padding: 0 30px;
    background: #fff;
    border-bottom: 1px solid #e9edf2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

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

.zatrak-topbar-left {
    gap: 14px;
}

.zatrak-topbar-right {
    gap: 18px;
}

.zatrak-mobile-menu {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.zatrak-mobile-menu svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #374151;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.zatrak-page-title {
    color: #111827;
    font-size: 18px;
    font-weight: 800;
}

.zatrak-page-subtitle {
    margin-top: 3px;
    color: #9ca3af;
    font-size: 11px;
}

.zatrak-icon-button {
    position: relative;
    width: 38px;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.zatrak-icon-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-notification-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b42318;
}

.zatrak-topbar-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zatrak-topbar-profile-info {
    display: flex;
    flex-direction: column;
}

.zatrak-topbar-profile-info strong {
    color: #1f2937;
    font-size: 12px;
}

.zatrak-topbar-profile-info span {
    margin-top: 3px;
    color: #9ca3af;
    font-size: 10px;
}

.zatrak-content {
    min-height: calc(100vh - 76px);
    padding: 30px;
}


/* =========================================================
   COMMON
========================================================= */

.zatrak-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(15,23,42,.05);
}

.zatrak-button {
    border: 0;
    border-radius: 10px;
    padding: 11px 16px;
    background: #12372a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.zatrak-button:hover {
    background: #0d2b21;
}

.zatrak-link {
    color: #176b4d;
    text-decoration: none;
    font-weight: 700;
}

.zatrak-link:hover {
    text-decoration: underline;
}


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

@media (max-width: 1000px) {
    .zatrak-login-page {
        grid-template-columns: 1fr;
    }

    .zatrak-login-brand {
        display: none;
    }

    .zatrak-login-form-section {
        min-height: 100vh;
        padding: 35px 20px;
    }

    .zatrak-mobile-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }

    .zatrak-mobile-logo .zatrak-logo-mark {
        background: #12372a;
        color: #f5d98b;
    }

    .zatrak-mobile-logo .zatrak-logo-name {
        color: #12372a;
    }

    .zatrak-mobile-logo .zatrak-logo-subtitle {
        color: #6b7280;
        opacity: 1;
    }

    .zatrak-sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

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

    .zatrak-mobile-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 700px) {
    .zatrak-topbar {
        height: 68px;
        padding: 0 18px;
    }

    .zatrak-content {
        min-height: calc(100vh - 68px);
        padding: 20px 15px;
    }

    .zatrak-topbar-profile-info {
        display: none;
    }

    .zatrak-page-subtitle {
        display: none;
    }
}

@media (max-width: 520px) {
    .zatrak-login-form-section {
        padding: 20px 14px;
    }

    .zatrak-login-container {
        max-width: 100%;
    }

    .zatrak-login-card {
        padding: 28px 21px;
        border-radius: 20px;
    }

    .zatrak-login-header {
        margin-bottom: 27px;
    }

    .zatrak-login-header h2 {
        font-size: 24px;
    }

    .zatrak-login-header p {
        font-size: 13px;
    }

    .zatrak-label-row {
        align-items: flex-start;
    }

    .zatrak-security-note {
        padding: 0 10px;
    }
}


/* =========================================================
   ZATRAK PAGE / FAMILY TREE / FAMILY MEMBERS
========================================================= */

.zatrak-page {
    width: 100%;
}

.zatrak-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 4px;
}

.zatrak-page-header > div {
    min-width: 0;
}

.zatrak-page-header .zatrak-page-title {
    margin: 0;
}

.zatrak-page-header .zatrak-page-subtitle {
    margin: 5px 0 0;
}

.zatrak-page-title {
    color: #111827;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.4px;
}

.zatrak-page-subtitle {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.zatrak-btn {
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: .18s ease;
}

.zatrak-btn-primary {
    background: #12372a;
    border-color: #12372a;
    color: #fff;
}

.zatrak-btn-primary:hover {
    background: #0d2b21;
    border-color: #0d2b21;
    color: #fff;
}

.zatrak-btn-secondary {
    background: #fff;
    border-color: #dfe3e8;
    color: #374151;
}

.zatrak-btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #12372a;
}

.zatrak-input {
    height: 44px;
    padding: 0 13px;
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #111827;
    font-size: 13px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.zatrak-input::placeholder {
    color: #9ca3af;
}

.zatrak-input:focus {
    border-color: #176b4d;
    box-shadow: 0 0 0 3px rgba(23,107,77,.08);
}

/* MODALS */

.zatrak-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    padding: 25px;
    background: rgba(15,23,42,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    backdrop-filter: blur(3px);
}

.zatrak-modal {
    width: 100%;
    max-width: 650px;
    max-height: calc(100vh - 50px);
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(15,23,42,.20);
    display: flex;
    flex-direction: column;
}

.zatrak-modal-header {
    min-height: 70px;
    padding: 18px 22px;
    border-bottom: 1px solid #edf0f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.zatrak-modal-title {
    color: #111827;
    font-size: 17px;
    font-weight: 800;
}

.zatrak-modal-subtitle {
    margin-top: 4px;
    color: #9ca3af;
    font-size: 11px;
}

.zatrak-modal-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 0;
    border-radius: 9px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.zatrak-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.zatrak-modal-body {
    padding: 24px;
    overflow-y: auto;
}

.zatrak-modal-footer {
    padding: 15px 22px;
    border-top: 1px solid #edf0f3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.zatrak-form-section-title {
    padding-bottom: 8px;
    border-bottom: 1px solid #edf0f3;
    color: #12372a;
    font-size: 13px;
    font-weight: 800;
}

/* FAMILY TREE SEARCH RESULT */

#family-tree-canvas {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

#family-tree-canvas::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#family-tree-canvas::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

#family-tree-content {
    will-change: transform;
}

/* MOBILE */

@media (max-width: 700px) {
    .zatrak-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-page-title {
        font-size: 21px;
    }

    .zatrak-page-header .zatrak-btn {
        width: 100%;
    }

    .zatrak-modal-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .zatrak-modal {
        max-height: calc(100vh - 24px);
        border-radius: 16px;
    }

    .zatrak-modal-body {
        padding: 18px;
    }

    .zatrak-modal-footer {
        padding: 13px 18px;
    }
}

@media (max-width: 520px) {
    .zatrak-page-title {
        font-size: 19px;
    }

    .zatrak-modal-body {
        padding: 16px;
    }

    .zatrak-modal-footer {
        flex-direction: column-reverse;
    }

    .zatrak-modal-footer .zatrak-btn {
        width: 100%;
    }
}


/* =========================================================
   ZATRAK — FAMILY MEMBERS MODULE
   Covers:
   - Index
   - Statistics
   - Search / Filter
   - Table
   - View
   - Create
   - Edit
   - Archive / Restore
   - Forms
   - Relationships
   - Responsive
========================================================= */


/* =========================================================
   1. FAMILY MEMBERS PAGE
========================================================= */

.zatrak-members-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px;
    color: #172033;
}


/* =========================================================
   2. PAGE HEADER
========================================================= */

.zatrak-members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.zatrak-members-title h1 {
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: #172033;
}

.zatrak-members-title p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   3. BUTTONS
========================================================= */

.zatrak-btn {
    appearance: none;
    border: 0;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
    white-space: nowrap;
}

.zatrak-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-btn:active {
    transform: translateY(1px);
}

.zatrak-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.zatrak-btn-primary {
    background: #1f6f5b;
    color: #fff;
    box-shadow: 0 3px 10px rgba(31, 111, 91, .16);
}

.zatrak-btn-primary:hover {
    background: #185b4a;
    box-shadow: 0 5px 15px rgba(31, 111, 91, .22);
}

.zatrak-btn-secondary {
    background: #fff;
    color: #344054;
    border: 1px solid #d0d5dd;
}

.zatrak-btn-secondary:hover {
    background: #f8fafc;
    border-color: #98a2b3;
}

.zatrak-add-member-btn {
    min-height: 43px;
    padding: 0 18px;
}

.zatrak-add-member-btn svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   4. STATISTICS
========================================================= */

.zatrak-member-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.zatrak-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 17px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .035);
    overflow: hidden;
}

.zatrak-stat-card::after {
    content: "";
    position: absolute;
    right: -25px;
    bottom: -35px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(31, 111, 91, .035);
}

.zatrak-stat-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef7f3;
    color: #1f6f5b;
}

.zatrak-stat-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.zatrak-stat-label {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}

.zatrak-stat-value {
    color: #172033;
    font-size: 23px;
    font-weight: 750;
    line-height: 1;
}

.zatrak-stat-card.success .zatrak-stat-icon {
    background: #ecfdf3;
    color: #079455;
}

.zatrak-stat-card.danger .zatrak-stat-icon {
    background: #fef3f2;
    color: #d92d20;
}

.zatrak-stat-card.warning .zatrak-stat-icon {
    background: #fffaeb;
    color: #dc6803;
}


/* =========================================================
   5. MEMBERS CARD
========================================================= */

.zatrak-members-card {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 13px;
    box-shadow: 0 3px 12px rgba(16, 24, 40, .035);
    overflow: hidden;
}


/* =========================================================
   6. TOOLBAR
========================================================= */

.zatrak-member-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 18px;
    border-bottom: 1px solid #eaecf0;
    background: #fff;
}

.zatrak-search-box {
    position: relative;
    flex: 1;
    max-width: 650px;
}

.zatrak-search-box svg {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    fill: none;
    stroke: #98a2b3;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.zatrak-search-box input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 39px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #172033;
    font-size: 13px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.zatrak-search-box input::placeholder {
    color: #98a2b3;
}

.zatrak-search-box input:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, .09);
}

.zatrak-status-filter {
    width: 190px;
    height: 42px;
    padding: 0 34px 0 12px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #344054;
    font-size: 13px;
    cursor: pointer;
}

.zatrak-status-filter:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, .09);
}


/* =========================================================
   7. TABLE
========================================================= */

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

.zatrak-member-table {
    width: 100%;
    min-width: 920px;
    border-collapse: separate;
    border-spacing: 0;
}

.zatrak-member-table thead th {
    height: 46px;
    padding: 0 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eaecf0;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.zatrak-member-table tbody td {
    height: 68px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f5;
    color: #344054;
    font-size: 12px;
    vertical-align: middle;
}

.zatrak-member-table tbody tr {
    transition: background-color .15s ease;
}

.zatrak-member-table tbody tr:hover {
    background: #fbfdfc;
}

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


/* =========================================================
   8. MEMBER NAME / AVATAR
========================================================= */

.zatrak-member-name {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
}

.zatrak-member-avatar {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9f5f0;
    color: #1f6f5b;
    font-size: 13px;
    font-weight: 750;
    border: 1px solid #d7eee5;
}

.zatrak-member-name-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.zatrak-member-name-text strong {
    display: block;
    max-width: 220px;
    color: #172033;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zatrak-member-name-text span {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 10px;
}


/* =========================================================
   9. BADGES
========================================================= */

.zatrak-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.zatrak-badge-success {
    color: #027a48;
    background: #ecfdf3;
    border: 1px solid #abefc6;
}

.zatrak-badge-danger {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
}

.zatrak-badge-primary {
    color: #175cd3;
    background: #eff8ff;
    border: 1px solid #b2ddff;
}

.zatrak-badge-warning {
    color: #b54708;
    background: #fffaeb;
    border: 1px solid #fedf89;
}


/* =========================================================
   10. ROW ACTIONS
========================================================= */

.zatrak-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.zatrak-action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
    background: #fff;
    color: #667085;
    cursor: pointer;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.zatrak-action-btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-action-btn:hover {
    background: #f8fafc;
    border-color: #98a2b3;
    color: #344054;
}

.zatrak-action-btn.danger {
    color: #d92d20;
}

.zatrak-action-btn.danger:hover {
    background: #fef3f2;
    border-color: #fecdca;
}


/* =========================================================
   11. EMPTY STATE
========================================================= */

.zatrak-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 260px;
    padding: 35px;
    text-align: center;
}

.zatrak-empty-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 50%;
    background: #f2f4f7;
    color: #98a2b3;
}

.zatrak-empty-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-empty-state h3 {
    margin: 0;
    color: #344054;
    font-size: 14px;
    font-weight: 700;
}

.zatrak-empty-state p {
    margin: 6px 0 0;
    color: #98a2b3;
    font-size: 12px;
}


/* =========================================================
   12. PAGINATION
========================================================= */

.zatrak-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 18px;
    border-top: 1px solid #eaecf0;
}

.zatrak-pagination nav {
    display: flex;
    align-items: center;
}

.zatrak-pagination svg {
    width: 15px;
    height: 15px;
}

.zatrak-pagination a,
.zatrak-pagination button,
.zatrak-pagination span {
    min-width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 11px;
}


/* =========================================================
   13. MODAL OVERLAY
========================================================= */

.zatrak-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    overflow-y: auto;
    animation: zatrakModalFade .18s ease;
}

@keyframes zatrakModalFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   14. MODAL
========================================================= */

.zatrak-modal {
    position: relative;
    width: min(100%, 900px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 15px;
    box-shadow:
        0 25px 70px rgba(15, 23, 42, .22),
        0 5px 20px rgba(15, 23, 42, .08);
    overflow: hidden;
    animation: zatrakModalSlide .2s ease;
}

@keyframes zatrakModalSlide {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   15. MODAL HEADER
========================================================= */

.zatrak-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 21px;
    border-bottom: 1px solid #eaecf0;
    background: #fff;
}

.zatrak-modal-title {
    color: #172033;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.3;
}

.zatrak-modal-subtitle {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 11px;
    line-height: 1.4;
}

.zatrak-modal-close {
    flex: 0 0 auto;
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    background: #fff;
    color: #667085;
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: all .16s ease;
}

.zatrak-modal-close:hover {
    background: #fef3f2;
    border-color: #fecdca;
    color: #d92d20;
}


/* =========================================================
   16. MODAL BODY
========================================================= */

.zatrak-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.zatrak-modal-body::-webkit-scrollbar {
    width: 7px;
}

.zatrak-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.zatrak-modal-body::-webkit-scrollbar-thumb {
    background: #d0d5dd;
    border-radius: 999px;
}


/* =========================================================
   17. MODAL FOOTER
========================================================= */

.zatrak-modal-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 21px;
    border-top: 1px solid #eaecf0;
    background: #fff;
}


/* =========================================================
   18. FORM CONTAINER
========================================================= */

.zatrak-form {
    width: 100%;
}

.zatrak-form-section {
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eef0f3;
}

.zatrak-form-section:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.zatrak-form-section-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 15px;
}

.zatrak-form-section-title span {
    color: #344054;
    font-size: 13px;
    font-weight: 750;
}

.zatrak-form-section-title small {
    color: #98a2b3;
    font-size: 10px;
    line-height: 1.45;
}


/* =========================================================
   19. FORM GRID
========================================================= */

.zatrak-form-grid {
    display: grid;
    gap: 15px;
}

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


/* =========================================================
   20. FORM GROUP
========================================================= */

.zatrak-form-group {
    min-width: 0;
    margin-bottom: 15px;
}

.zatrak-form-group:last-child {
    margin-bottom: 0;
}

.zatrak-form-label {
    display: block;
    margin-bottom: 6px;
    color: #344054;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
}

.zatrak-form-label span {
    color: #d92d20;
    margin-left: 2px;
}


/* =========================================================
   21. INPUTS
========================================================= */

.zatrak-input,
.zatrak-select,
.zatrak-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d0d5dd;
    outline: none;
    background: #fff;
    color: #172033;
    font-family: inherit;
    font-size: 12px;
    border-radius: 8px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.zatrak-input,
.zatrak-select {
    height: 40px;
    padding: 0 11px;
}

.zatrak-textarea {
    display: block;
    min-height: 105px;
    padding: 10px 11px;
    resize: vertical;
    line-height: 1.55;
}

.zatrak-input::placeholder,
.zatrak-textarea::placeholder {
    color: #98a2b3;
}

.zatrak-input:hover,
.zatrak-select:hover,
.zatrak-textarea:hover {
    border-color: #98a2b3;
}

.zatrak-input:focus,
.zatrak-select:focus,
.zatrak-textarea:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, .09);
}

.zatrak-input:disabled,
.zatrak-select:disabled,
.zatrak-textarea:disabled {
    background: #f2f4f7;
    color: #98a2b3;
    cursor: not-allowed;
}


/* =========================================================
   22. FORM ERRORS
========================================================= */

.zatrak-form-error {
    margin-top: 5px;
    color: #d92d20;
    font-size: 10px;
    line-height: 1.4;
}

.zatrak-input.is-invalid,
.zatrak-select.is-invalid,
.zatrak-textarea.is-invalid {
    border-color: #f04438;
    background: #fffbfa;
}


/* =========================================================
   23. LIFE STATUS SWITCH
========================================================= */

.zatrak-switch-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #fcfcfd;
    cursor: pointer;
    transition: all .16s ease;
}

.zatrak-switch-row:hover {
    border-color: #d0d5dd;
    background: #fff;
}

.zatrak-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.zatrak-switch {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #d0d5dd;
    transition: background-color .18s ease;
}

.zatrak-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
    transition: transform .18s ease;
}

.zatrak-switch-input:checked + .zatrak-switch {
    background: #1f6f5b;
}

.zatrak-switch-input:checked + .zatrak-switch::after {
    transform: translateX(18px);
}

.zatrak-switch-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zatrak-switch-text strong {
    color: #344054;
    font-size: 11px;
    font-weight: 650;
}

.zatrak-switch-text small {
    color: #98a2b3;
    font-size: 10px;
}


/* =========================================================
   24. DEATH INFORMATION
========================================================= */

.zatrak-death-section {
    padding: 15px;
    border: 1px solid #fecdca;
    border-radius: 10px;
    background: #fffbfa;
}

.zatrak-death-section .zatrak-form-section-title span {
    color: #b42318;
}


/* =========================================================
   25. FORM ACTIONS
========================================================= */

.zatrak-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 6px;
}

.zatrak-create-actions {
    margin-top: 5px;
}


/* =========================================================
   26. PROFILE HEADER
========================================================= */

.zatrak-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px;
    border: 1px solid #eaecf0;
    border-radius: 11px;
    background: #fcfcfd;
}

.zatrak-profile-avatar {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9f5f0;
    border: 1px solid #d7eee5;
    color: #1f6f5b;
    font-size: 19px;
    font-weight: 750;
}

.zatrak-profile-name {
    color: #172033;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.3;
}

.zatrak-profile-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}


/* =========================================================
   27. PROFILE DETAIL GRID
========================================================= */

.zatrak-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.zatrak-detail-item {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #eaecf0;
    border-radius: 9px;
    background: #fff;
}

.zatrak-detail-label {
    color: #98a2b3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.zatrak-detail-value {
    margin-top: 5px;
    color: #344054;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.45;
    overflow-wrap: anywhere;
}


/* =========================================================
   28. RELATIONSHIP SECTIONS
========================================================= */

.zatrak-form-section-title + div {
    min-width: 0;
}

.zatrak-modal-body .zatrak-form-section-title {
    margin-top: 0;
}

.zatrak-modal-body .zatrak-form-section-title span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.zatrak-modal-body .zatrak-form-section-title span::before {
    content: "";
    width: 3px;
    height: 13px;
    border-radius: 999px;
    background: #1f6f5b;
}


/* =========================================================
   29. RELATIONSHIP MANAGER
========================================================= */

.zatrak-modal-body > div > .zatrak-btn {
    margin-bottom: 4px;
}

.zatrak-modal-body .zatrak-btn svg {
    flex-shrink: 0;
}

.zatrak-modal-body .zatrak-form {
    max-width: 100%;
}


/* =========================================================
   30. INFORMATION BOXES
========================================================= */

.zatrak-form div[style*="background:#eff6ff"] {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border: 1px solid #dbeafe !important;
    border-radius: 9px !important;
    background: #eff6ff !important;
    color: #1e40af !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
}

.zatrak-form div[style*="background:#eff6ff"] strong {
    font-weight: 750;
}


/* =========================================================
   31. PROFILE TEXT SECTIONS
========================================================= */

.zatrak-modal-body .zatrak-detail-label + div {
    overflow-wrap: anywhere;
}


/* =========================================================
   32. ARCHIVED RECORD VISUAL
========================================================= */

.zatrak-member-table tr:has(.zatrak-badge-warning) {
    background: #fffdfa;
}

.zatrak-member-table tr:has(.zatrak-badge-warning):hover {
    background: #fffcf5;
}


/* =========================================================
   33. LOADING STATE
========================================================= */

.zatrak-form button[disabled],
.zatrak-form button[wire\:loading\.attr="disabled"] {
    position: relative;
}

[wire\:loading] {
    cursor: wait;
}

.zatrak-btn[wire\:loading\.attr="disabled"]:disabled {
    opacity: .7;
}


/* =========================================================
   34. MODAL RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .zatrak-members-page {
        padding: 20px;
    }

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

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

    .zatrak-modal {
        width: min(100%, 760px);
    }
}


/* =========================================================
   35. TABLET
========================================================= */

@media (max-width: 700px) {

    .zatrak-members-page {
        padding: 15px;
    }

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

    .zatrak-add-member-btn {
        width: 100%;
    }

    .zatrak-member-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .zatrak-search-box {
        max-width: none;
    }

    .zatrak-status-filter {
        width: 100%;
    }

    .zatrak-modal-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    .zatrak-modal {
        max-height: calc(100vh - 24px);
        border-radius: 12px;
    }

    .zatrak-modal-header {
        padding: 15px 16px;
    }

    .zatrak-modal-body {
        padding: 17px;
    }

    .zatrak-modal-footer {
        padding: 12px 16px;
    }
}


/* =========================================================
   36. MOBILE
========================================================= */

@media (max-width: 560px) {

    .zatrak-members-page {
        padding: 12px;
    }

    .zatrak-members-title h1 {
        font-size: 22px;
    }

    .zatrak-members-title p {
        font-size: 12px;
    }

    .zatrak-member-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .zatrak-stat-card {
        min-height: 78px;
    }

    .zatrak-form-grid-3 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .zatrak-detail-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-profile-header {
        align-items: flex-start;
    }

    .zatrak-profile-name {
        font-size: 16px;
    }

    .zatrak-form-actions,
    .zatrak-modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .zatrak-form-actions .zatrak-btn,
    .zatrak-modal-footer .zatrak-btn {
        width: 100%;
    }

    .zatrak-modal-close {
        width: 31px;
        height: 31px;
    }
}


/* =========================================================
   37. VERY SMALL SCREENS
========================================================= */

@media (max-width: 380px) {

    .zatrak-members-page {
        padding: 9px;
    }

    .zatrak-modal-overlay {
        padding: 7px;
    }

    .zatrak-modal {
        max-height: calc(100vh - 14px);
        border-radius: 10px;
    }

    .zatrak-modal-body {
        padding: 14px;
    }

    .zatrak-stat-card {
        padding: 13px;
    }

    .zatrak-stat-value {
        font-size: 20px;
    }
}


/* =========================================================
   38. ACCESSIBILITY
========================================================= */

.zatrak-btn:focus-visible,
.zatrak-action-btn:focus-visible,
.zatrak-modal-close:focus-visible,
.zatrak-input:focus-visible,
.zatrak-select:focus-visible,
.zatrak-textarea:focus-visible,
.zatrak-search-box input:focus-visible,
.zatrak-status-filter:focus-visible {
    outline: 2px solid rgba(31, 111, 91, .35);
    outline-offset: 2px;
}


/* =========================================================
   39. REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zatrak-modal-overlay,
    .zatrak-modal {
        animation: none;
    }

    .zatrak-btn,
    .zatrak-action-btn,
    .zatrak-input,
    .zatrak-select,
    .zatrak-textarea,
    .zatrak-switch,
    .zatrak-switch::after {
        transition: none;
    }
}


/* =========================================================
   ZATRAK FORM FIX — CREATE / EDIT / RELATIONSHIP
   Final override: keep all form fields aligned and consistent
========================================================= */

.zatrak-form {
    width: 100% !important;
    display: block !important;
}

.zatrak-form-section {
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 0 22px !important;
    border-bottom: 1px solid #eef0f3 !important;
}

.zatrak-form-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

/* Section heading: title on top, description below */
.zatrak-form-section-title {
    width: 100% !important;
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 0 9px !important;
    border-bottom: 1px solid #eaecf0 !important;
}

.zatrak-form-section-title span {
    display: block !important;
    margin: 0 !important;
    color: #12372a !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

.zatrak-form-section-title small {
    display: block !important;
    margin-top: 3px !important;
    color: #98a2b3 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

/* Grid */
.zatrak-form-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}

.zatrak-form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Every form field is a vertical block */
.zatrak-form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Labels must never sit beside inputs */
.zatrak-form-label {
    width: 100% !important;
    display: block !important;
    margin: 0 0 7px !important;
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
}

.zatrak-form-label span {
    display: inline !important;
    margin-left: 2px !important;
    color: #d92d20 !important;
}

/* Inputs/selects/textarea fill the complete field width */
.zatrak-form .zatrak-input,
.zatrak-form .zatrak-select,
.zatrak-form .zatrak-textarea {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #172033 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    outline: none !important;
}

.zatrak-form .zatrak-input,
.zatrak-form .zatrak-select {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 13px !important;
}

.zatrak-form .zatrak-textarea {
    min-height: 110px !important;
    padding: 11px 13px !important;
    resize: vertical !important;
    line-height: 1.55 !important;
}

.zatrak-form .zatrak-input::placeholder,
.zatrak-form .zatrak-textarea::placeholder {
    color: #98a2b3 !important;
    opacity: 1 !important;
}

.zatrak-form .zatrak-input:hover,
.zatrak-form .zatrak-select:hover,
.zatrak-form .zatrak-textarea:hover {
    border-color: #98a2b3 !important;
}

.zatrak-form .zatrak-input:focus,
.zatrak-form .zatrak-select:focus,
.zatrak-form .zatrak-textarea:focus {
    border-color: #1f6f5b !important;
    box-shadow: 0 0 0 3px rgba(31,111,91,.09) !important;
}

/* Full-width fields when needed */
.zatrak-form-group-full,
.zatrak-form-grid > .zatrak-form-group:has(.zatrak-textarea) {
    grid-column: 1 / -1 !important;
}

/* Error */
.zatrak-form .zatrak-form-error {
    width: 100% !important;
    margin: 5px 0 0 !important;
    color: #d92d20 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

/* Life status */
.zatrak-form .zatrak-switch-row {
    width: 100% !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 10px !important;
    background: #fcfcfd !important;
}

.zatrak-form .zatrak-switch-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.zatrak-form .zatrak-switch-text strong {
    font-size: 12px !important;
}

.zatrak-form .zatrak-switch-text small {
    font-size: 11px !important;
}

/* Death information */
.zatrak-form .zatrak-death-section {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 16px !important;
    padding: 16px !important;
    border: 1px solid #fecdca !important;
    border-radius: 10px !important;
    background: #fffbfa !important;
}

.zatrak-form .zatrak-death-section .zatrak-form-grid {
    margin-top: 14px !important;
}

/* Action buttons */
.zatrak-form .zatrak-form-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 20px !important;
    padding-top: 0 !important;
}

.zatrak-form .zatrak-form-actions .zatrak-btn {
    min-width: 120px !important;
}

/* Relationship manager info box */
.zatrak-form div[style*="background:#eff6ff"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive */
@media (max-width: 900px) {
    .zatrak-form-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .zatrak-form-grid,
    .zatrak-form-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .zatrak-form-grid > .zatrak-form-group:has(.zatrak-textarea) {
        grid-column: auto !important;
    }

    .zatrak-form .zatrak-form-actions {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    .zatrak-form .zatrak-form-actions .zatrak-btn {
        width: 100% !important;
    }
}


/* =========================================================
   ZATRAK FORM FORCE OVERRIDE
   Scoped to Family Member modal forms
========================================================= */

.zatrak-modal-body .zatrak-form {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    color: #172033 !important;
}

/* Section */
.zatrak-modal-body .zatrak-form .zatrak-form-section {
    width: 100% !important;
    display: block !important;
    margin: 0 0 22px !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid #eaecf0 !important;
}

.zatrak-modal-body .zatrak-form .zatrak-form-section:last-of-type {
    margin-bottom: 0 !important;
}

/* Section heading */
.zatrak-modal-body .zatrak-form .zatrak-form-section-title {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 0 15px !important;
    padding: 0 0 9px !important;
    border-bottom: 1px solid #edf0f3 !important;
    color: #12372a !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

/* Description text if wrapped in span/small/p */
.zatrak-modal-body .zatrak-form .zatrak-form-section-title span,
.zatrak-modal-body .zatrak-form .zatrak-form-section-title small,
.zatrak-modal-body .zatrak-form .zatrak-form-section-title p {
    display: block !important;
    margin: 3px 0 0 !important;
    color: #98a2b3 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Grids */
.zatrak-modal-body .zatrak-form .zatrak-form-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px 16px !important;
    align-items: start !important;
}

.zatrak-modal-body .zatrak-form .zatrak-form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Field */
.zatrak-modal-body .zatrak-form .zatrak-form-group {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 !important;
}

/* Catch labels even when the label class is missing */
.zatrak-modal-body .zatrak-form .zatrak-form-group > label,
.zatrak-modal-body .zatrak-form .zatrak-form-label {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 0 7px !important;
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* Controls — force full-width fields */
.zatrak-modal-body .zatrak-form .zatrak-form-group > input:not([type="checkbox"]):not([type="radio"]),
.zatrak-modal-body .zatrak-form .zatrak-form-group > select,
.zatrak-modal-body .zatrak-form .zatrak-form-group > textarea,
.zatrak-modal-body .zatrak-form .zatrak-input,
.zatrak-modal-body .zatrak-form .zatrak-select,
.zatrak-modal-body .zatrak-form .zatrak-textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #172033 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    outline: none !important;
}

.zatrak-modal-body .zatrak-form .zatrak-form-group > input:not([type="checkbox"]):not([type="radio"]),
.zatrak-modal-body .zatrak-form .zatrak-input,
.zatrak-modal-body .zatrak-form .zatrak-select {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
}

.zatrak-modal-body .zatrak-form .zatrak-form-group > textarea,
.zatrak-modal-body .zatrak-form .zatrak-textarea {
    min-height: 105px !important;
    padding: 10px 12px !important;
    resize: vertical !important;
    line-height: 1.55 !important;
}

.zatrak-modal-body .zatrak-form input::placeholder,
.zatrak-modal-body .zatrak-form textarea::placeholder {
    color: #98a2b3 !important;
    opacity: 1 !important;
}

.zatrak-modal-body .zatrak-form input:not([type="checkbox"]):not([type="radio"]):focus,
.zatrak-modal-body .zatrak-form select:focus,
.zatrak-modal-body .zatrak-form textarea:focus {
    border-color: #1f6f5b !important;
    box-shadow: 0 0 0 3px rgba(31,111,91,.09) !important;
}

/* Full-width groups */
.zatrak-modal-body .zatrak-form .zatrak-form-group-full {
    grid-column: 1 / -1 !important;
}

.zatrak-modal-body .zatrak-form .zatrak-form-error {
    display: block !important;
    width: 100% !important;
    margin: 5px 0 0 !important;
    color: #d92d20 !important;
    font-size: 11px !important;
}

/* Life status */
.zatrak-modal-body .zatrak-form .zatrak-switch-row {
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    padding: 11px 13px !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 9px !important;
    background: #fcfcfd !important;
}

.zatrak-modal-body .zatrak-form .zatrak-switch-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* Actions */
.zatrak-modal-body .zatrak-form .zatrak-form-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.zatrak-modal-body .zatrak-form .zatrak-form-actions .zatrak-btn {
    min-width: 115px !important;
}

/* Mobile */
@media (max-width: 760px) {
    .zatrak-modal-body .zatrak-form .zatrak-form-grid-3,
    .zatrak-modal-body .zatrak-form .zatrak-form-grid {
        grid-template-columns: 1fr !important;
    }

    .zatrak-modal-body .zatrak-form .zatrak-form-actions {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    .zatrak-modal-body .zatrak-form .zatrak-form-actions .zatrak-btn {
        width: 100% !important;
    }
}



/* =========================================================
   ZATRAK LIFE STATUS / DEATH SECTION FIX
   Prevents the deceased fields from overlapping the life switch
========================================================= */

.zatrak-modal-body .zatrak-form .zatrak-switch-row {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 11px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 14px !important;
}

.zatrak-modal-body .zatrak-form .zatrak-switch-input {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: #1f6f5b !important;
}

.zatrak-modal-body .zatrak-form .zatrak-switch {
    position: relative !important;
    flex: 0 0 auto !important;
}

/* The death block must always start on a new row */
.zatrak-modal-body .zatrak-form .zatrak-death-section {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    clear: both !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    margin: 16px 0 0 !important;
    padding: 16px !important;
    border: 1px solid #fecdca !important;
    border-radius: 10px !important;
    background: #fffbfa !important;
}

/* Keep death fields inside the death block */
.zatrak-modal-body .zatrak-form .zatrak-death-section .zatrak-form-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 15px 16px !important;
    margin: 0 !important;
}

.zatrak-modal-body .zatrak-form .zatrak-death-section .zatrak-form-group {
    width: 100% !important;
    min-width: 0 !important;
}

/* Prevent the action bar from covering newly revealed death fields */
.zatrak-modal .zatrak-modal-body {
    scroll-padding-bottom: 110px !important;
    padding-bottom: 110px !important;
}

.zatrak-modal .zatrak-form-actions {
    margin-top: 24px !important;
}

/* When the death section is visible, keep the form content separated */
.zatrak-modal-body .zatrak-death-section + .zatrak-form-actions {
    margin-top: 24px !important;
}

@media (max-width: 900px) {
    .zatrak-modal-body .zatrak-form .zatrak-death-section .zatrak-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .zatrak-modal-body .zatrak-form .zatrak-death-section .zatrak-form-grid {
        grid-template-columns: 1fr !important;
    }

    .zatrak-modal .zatrak-modal-body {
        padding-bottom: 125px !important;
    }
}



/* =========================================================
   ZATRAK FAMILY TREE — CLEAR HIERARCHICAL DESIGN
   Main member → spouse(s) → children → next generation
========================================================= */

.zatrak-tree-node {
    position: relative;
    width: max-content;
    min-width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
}

.zatrak-tree-family-unit {
    position: relative;
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
}

/* Main member + spouse(s) */
.zatrak-tree-couple-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    width: max-content;
    margin: 0 auto;
}

.zatrak-tree-person {
    width: 230px;
    min-height: 108px;
    padding: 13px 14px;
    border: 1px solid #d9e0e7;
    border-radius: 14px;
    background: #fff;
    color: #172033;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 5px 18px rgba(16, 24, 40, .06);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.zatrak-tree-person:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16, 24, 40, .10);
}

.zatrak-tree-person-main {
    border-color: #79b6a4;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
}

.zatrak-tree-person-spouse {
    border-color: #e4c77a;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf6 100%);
}

.zatrak-tree-spouse-connector {
    width: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #b28b18;
    font-size: 16px;
}

.zatrak-tree-spouse-connector::before,
.zatrak-tree-spouse-connector::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 19px;
    height: 2px;
    background: #d8c078;
    transform: translateY(-50%);
}

.zatrak-tree-spouse-connector::before {
    left: 0;
}

.zatrak-tree-spouse-connector::after {
    right: 0;
}

.zatrak-tree-spouse-connector span {
    position: relative;
    z-index: 2;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4c77a;
    border-radius: 50%;
    background: #fffdf6;
    font-size: 11px;
}

.zatrak-tree-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 16px;
    font-weight: 800;
}

.zatrak-tree-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.zatrak-tree-avatar-main {
    background: #e9f5f0;
    border: 1px solid #cbe8dd;
    color: #1f6f5b;
}

.zatrak-tree-avatar-spouse {
    background: #fff5d9;
    border: 1px solid #f0dfa7;
    color: #9a7410;
}

.zatrak-tree-person-body {
    min-width: 0;
    flex: 1;
}

.zatrak-tree-person-role {
    margin-bottom: 3px;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zatrak-tree-member-name {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.zatrak-tree-member-occupation {
    margin-top: 4px;
    color: #667085;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.zatrak-tree-member-status {
    margin-top: 7px;
}

.zatrak-tree-status {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.zatrak-tree-status-living {
    color: #027a48;
    background: #ecfdf3;
    border: 1px solid #abefc6;
}

.zatrak-tree-status-deceased {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
}

/* Parent -> children connector */
.zatrak-tree-connector-stem {
    width: 2px;
    height: 28px;
    margin: 0 auto;
    background: #cbd5e1;
}

.zatrak-tree-children-heading {
    width: max-content;
    margin: 0 auto 10px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.zatrak-tree-children-heading strong {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e9f5f0;
    color: #1f6f5b;
    font-size: 9px;
}

/* Child generation */
.zatrak-tree-children {
    position: relative;
    width: max-content;
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 280px));
    justify-content: center;
    align-items: start;
    column-gap: 22px;
    row-gap: 34px;
    padding-top: 28px;
}

/* Horizontal family branch */
.zatrak-tree-children::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: #d9e0e7;
}

/* Vertical line from branch to each child */
.zatrak-tree-child {
    position: relative;
    min-width: 0;
    padding-top: 0;
}

.zatrak-tree-child::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 50%;
    width: 2px;
    height: 28px;
    background: #d9e0e7;
    transform: translateX(-50%);
}

/* Hide broad horizontal branch when there is only one child */
.zatrak-tree-children:has(> .zatrak-tree-child:only-child)::before {
    display: none;
}

.zatrak-tree-children:has(> .zatrak-tree-child:only-child) {
    padding-top: 0;
}

.zatrak-tree-children:has(> .zatrak-tree-child:only-child) > .zatrak-tree-child::before {
    display: none;
}

/* Nested generations */
.zatrak-tree-child > .zatrak-tree-node {
    min-width: 0;
    width: 100%;
    padding: 0;
}

.zatrak-tree-child .zatrak-tree-family-unit {
    width: 100%;
    min-width: 0;
}

.zatrak-tree-child .zatrak-tree-couple-row {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 3px;
}

.zatrak-tree-child .zatrak-tree-person {
    width: 220px;
    min-width: 220px;
}

/* Make nested child branches compact */
.zatrak-tree-child .zatrak-tree-children {
    min-width: 0;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 16px;
    row-gap: 28px;
}

.zatrak-tree-child .zatrak-tree-children::before {
    left: 12%;
    right: 12%;
}

/* Tree canvas */
#family-tree-canvas {
    background:
        radial-gradient(circle at 1px 1px, rgba(148,163,184,.18) 1px, transparent 1px);
    background-size: 24px 24px;
}

#family-tree-content {
    padding: 20px 30px 45px;
}

/* Responsive */
@media (max-width: 900px) {
    .zatrak-tree-couple-row {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 4px 4px 9px;
    }

    .zatrak-tree-children {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        width: 100%;
    }

    .zatrak-tree-person,
    .zatrak-tree-child .zatrak-tree-person {
        width: 220px;
        min-width: 220px;
    }
}

@media (max-width: 600px) {
    .zatrak-tree-person,
    .zatrak-tree-child .zatrak-tree-person {
        width: 205px;
        min-width: 205px;
        min-height: 98px;
    }

    .zatrak-tree-avatar {
        width: 43px;
        height: 43px;
        min-width: 43px;
    }

    .zatrak-tree-spouse-connector {
        width: 40px;
        flex-basis: 40px;
    }

    .zatrak-tree-children {
        grid-template-columns: minmax(220px, 1fr);
    }

    .zatrak-tree-children::before,
    .zatrak-tree-child::before {
        display: none;
    }

    .zatrak-tree-children {
        padding-top: 0;
    }
}



/* =========================================================
   FAMILY TREE INDEX — CLEAN PAGE UI
========================================================= */

.zatrak-family-tree-page {
    width: 100%;
}

.zatrak-tree-controls {
    margin-top: 18px;
    padding: 16px;
}

.zatrak-tree-controls-top {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.zatrak-tree-search {
    position: relative;
    flex: 1;
    min-width: 260px;
}

.zatrak-tree-search input {
    width: 100%;
    height: 43px;
    padding: 0 42px 0 40px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #fff;
    color: #172033;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.zatrak-tree-search input:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31,111,91,.09);
}

.zatrak-tree-search-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    color: #98a2b3;
    pointer-events: none;
}

.zatrak-tree-search-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-tree-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #667085;
    font-size: 20px;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
}

.zatrak-tree-search-clear:hover {
    background: #f2f4f7;
    color: #111827;
}

.zatrak-tree-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.zatrak-tree-search-results {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eaecf0;
}

.zatrak-tree-search-results-header {
    margin-bottom: 5px;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.zatrak-tree-search-result {
    width: 100%;
    min-height: 54px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}

.zatrak-tree-search-result:hover {
    background: #f8fafc;
}

.zatrak-tree-search-result-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f5f0;
    color: #1f6f5b;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-tree-search-result-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.zatrak-tree-search-result-info strong {
    color: #172033;
    font-size: 12px;
    font-weight: 750;
}

.zatrak-tree-search-result-info span {
    margin-top: 2px;
    color: #98a2b3;
    font-size: 10px;
}

.zatrak-tree-search-empty {
    padding: 12px 4px;
    color: #98a2b3;
    font-size: 12px;
}

.zatrak-tree-legend {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: #667085;
    font-size: 10px;
}

.zatrak-tree-legend-title {
    color: #344054;
    font-weight: 800;
}

.zatrak-tree-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zatrak-tree-legend-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
}

.zatrak-tree-legend-dot.main {
    background: #1f6f5b;
}

.zatrak-tree-legend-dot.spouse {
    background: #c39b2f;
}

.zatrak-tree-legend-line {
    width: 17px;
    height: 2px;
    display: inline-block;
    background: #cbd5e1;
}

.zatrak-tree-legend-heart {
    color: #b28b18;
    font-size: 12px;
}

.zatrak-tree-card {
    margin-top: 12px;
    overflow: hidden;
}

.zatrak-tree-view-header {
    min-height: 92px;
    padding: 20px 22px;
    border-bottom: 1px solid #eaecf0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.zatrak-tree-view-eyebrow {
    color: #98a2b3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.zatrak-tree-view-title {
    margin: 4px 0 0;
    color: #172033;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
}

.zatrak-tree-view-description {
    max-width: 650px;
    margin: 5px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.45;
}

.zatrak-tree-view-count {
    flex: 0 0 auto;
    min-width: 85px;
    padding: 9px 12px;
    border: 1px solid #d7eee5;
    border-radius: 10px;
    background: #f8fcfa;
    text-align: center;
}

.zatrak-tree-view-count strong {
    display: block;
    color: #1f6f5b;
    font-size: 18px;
    line-height: 1;
}

.zatrak-tree-view-count span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 9px;
}

.zatrak-tree-canvas {
    min-height: 580px;
    padding: 30px;
    overflow: auto;
    cursor: grab;
}

.zatrak-tree-canvas:active {
    cursor: grabbing;
}

.zatrak-tree-content {
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
    padding: 20px 30px 55px;
    transform: scale(1);
    transform-origin: top center;
    transition: transform .2s ease;
}

.zatrak-tree-empty {
    min-height: 460px;
    padding: 70px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.zatrak-tree-empty-icon {
    width: 74px;
    height: 74px;
    margin-bottom: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef7f3;
    font-size: 35px;
}

.zatrak-tree-empty h3 {
    margin: 0;
    color: #344054;
    font-size: 16px;
}

.zatrak-tree-empty p {
    max-width: 470px;
    margin: 8px 0 18px;
    color: #98a2b3;
    font-size: 12px;
    line-height: 1.5;
}

/* Profile modal inside family tree */
.zatrak-tree-profile-modal {
    max-width: 700px !important;
}

.zatrak-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.zatrak-profile-avatar-image,
.zatrak-profile-avatar {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 50%;
    object-fit: cover;
}

.zatrak-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f5f0;
    color: #1f6f5b;
    font-size: 24px;
    font-weight: 800;
}

.zatrak-profile-header-info {
    min-width: 0;
}

.zatrak-profile-name {
    margin: 0;
    color: #172033;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
}

.zatrak-profile-meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #667085;
    font-size: 11px;
}

.zatrak-profile-section {
    margin-top: 22px;
}

.zatrak-profile-section-title {
    padding-bottom: 8px;
    border-bottom: 1px solid #eaecf0;
    color: #12372a;
    font-size: 13px;
    font-weight: 800;
}

.zatrak-profile-relation-list {
    margin-top: 9px;
    display: grid;
    gap: 7px;
}

.zatrak-profile-relation-item {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #344054;
    font-size: 12px;
}

.zatrak-profile-relation-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e9f5f0;
    color: #1f6f5b;
    font-size: 9px;
    font-weight: 800;
}

.zatrak-profile-relation-icon.spouse {
    background: #fff5d9;
    color: #9a7410;
}

.zatrak-profile-relation-icon.child {
    background: #eff8ff;
    color: #175cd3;
}

.zatrak-profile-no-data {
    padding: 10px 2px;
    color: #98a2b3;
    font-size: 11px;
}

@media (max-width: 800px) {
    .zatrak-tree-controls-top {
        align-items: stretch;
        flex-direction: column;
    }

    .zatrak-tree-actions {
        width: 100%;
    }

    .zatrak-tree-actions .zatrak-btn {
        flex: 1;
    }

    .zatrak-tree-legend {
        justify-content: flex-start;
    }

    .zatrak-tree-view-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-tree-view-count {
        min-width: 78px;
    }
}

@media (max-width: 560px) {
    .zatrak-tree-canvas {
        min-height: 520px;
        padding: 18px;
    }

    .zatrak-tree-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .zatrak-profile-header {
        align-items: flex-start;
    }
}



/* =========================================================
   FAMILY TREE PROFILE — CLICKABLE RELATIVES
========================================================= */

.zatrak-profile-relation-button {
    width: 100%;
    border: 1px solid #eaecf0;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.zatrak-profile-relation-button:hover {
    background: #f8fcfa;
    border-color: #cfe6dd;
    box-shadow: 0 3px 10px rgba(16, 24, 40, .05);
    transform: translateY(-1px);
}

.zatrak-profile-relation-name {
    min-width: 0;
    flex: 1;
    color: #344054;
    font-size: 12px;
    font-weight: 650;
}

.zatrak-profile-relation-arrow {
    flex: 0 0 auto;
    color: #98a2b3;
    font-size: 14px;
    transition: transform .16s ease, color .16s ease;
}

.zatrak-profile-relation-button:hover .zatrak-profile-relation-arrow {
    color: #1f6f5b;
    transform: translateX(2px);
}

.zatrak-profile-relation-button:focus-visible {
    outline: 2px solid rgba(31, 111, 91, .28);
    outline-offset: 2px;
}



/* =========================================================
   FAMILY TREE CLICK FIX
========================================================= */

.zatrak-tree-couple-row {
    position: relative;
    z-index: 5;
}

.zatrak-tree-person {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    user-select: none;
    -webkit-user-select: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}


.zatrak-tree-person:focus-visible {
    outline: 3px solid rgba(31, 111, 91, .25);
    outline-offset: 3px;
}

.zatrak-tree-person:active {
    transform: translateY(0);
}

.zatrak-tree-child,
.zatrak-tree-node,
.zatrak-tree-family-unit {
    position: relative;
}


/* =========================================================
   FAMILY HISTORY
   ========================================================= */

.zatrak-family-history-page {
    padding: 28px;
}

.zatrak-family-history-page .zatrak-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.zatrak-family-history-page .zatrak-history-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #101828;
    letter-spacing: -0.02em;
}

.zatrak-family-history-page .zatrak-history-subtitle {
    margin: 7px 0 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

/* FILTERS */

.zatrak-family-history-page .zatrak-history-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 16px;
    padding: 18px;
    margin-bottom: 26px;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.05);
}

.zatrak-family-history-page .zatrak-history-filter-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.zatrak-family-history-page .zatrak-history-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: #344054;
}

.zatrak-family-history-page .zatrak-history-input,
.zatrak-family-history-page .zatrak-history-select {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #ffffff;
    color: #101828;
    font-size: 14px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.zatrak-family-history-page .zatrak-history-input:focus,
.zatrak-family-history-page .zatrak-history-select:focus {
    border-color: #7f56d9;
    box-shadow: 0 0 0 3px rgba(127, 86, 217, 0.10);
}

/* HISTORY GRID */

.zatrak-family-history-page .zatrak-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* HISTORY CARD */

.zatrak-family-history-page .zatrak-history-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 18px;
    box-shadow: 0 5px 18px rgba(16, 24, 40, 0.06);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.zatrak-family-history-page .zatrak-history-card:hover {
    transform: translateY(-3px);
    border-color: #d0d5dd;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.09);
}

.zatrak-family-history-page .zatrak-history-cover {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.zatrak-family-history-page .zatrak-history-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.zatrak-family-history-page .zatrak-history-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    font-size: 46px;
}

.zatrak-family-history-page .zatrak-history-body {
    padding: 19px;
}

.zatrak-family-history-page .zatrak-history-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 11px;
}

.zatrak-family-history-page .zatrak-history-year,
.zatrak-family-history-page .zatrak-history-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.zatrak-family-history-page .zatrak-history-year {
    background: #f2f4f7;
    color: #344054;
}

.zatrak-family-history-page .zatrak-history-status-published {
    background: #ecfdf3;
    color: #027a48;
}

.zatrak-family-history-page .zatrak-history-status-archived {
    background: #f2f4f7;
    color: #667085;
}

.zatrak-family-history-page .zatrak-history-card-title {
    margin: 0 0 9px;
    color: #101828;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.zatrak-family-history-page .zatrak-history-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 13px;
    color: #667085;
    font-size: 12px;
}

.zatrak-family-history-page .zatrak-history-info-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.zatrak-family-history-page .zatrak-history-content {
    margin: 0 0 15px;
    color: #667085;
    font-size: 13px;
    line-height: 1.65;
}

.zatrak-family-history-page .zatrak-history-author {
    padding-top: 13px;
    border-top: 1px solid #f2f4f7;
    color: #98a2b3;
    font-size: 11px;
}

.zatrak-family-history-page .zatrak-history-author strong {
    color: #475467;
}

.zatrak-family-history-page .zatrak-history-footer {
    display: flex;
    justify-content: flex-start;
    padding: 0 19px 19px;
}

.zatrak-family-history-page .zatrak-history-view-btn {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #ffffff;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.zatrak-family-history-page .zatrak-history-view-btn:hover {
    background: #f9fafb;
    border-color: #98a2b3;
}

/* EMPTY STATE */

.zatrak-family-history-page .zatrak-history-empty {
    padding: 65px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #d0d5dd;
    border-radius: 18px;
}

.zatrak-family-history-page .zatrak-history-empty-icon {
    margin-bottom: 14px;
    color: #98a2b3;
    font-size: 48px;
}

.zatrak-family-history-page .zatrak-history-empty h3 {
    margin: 0 0 7px;
    color: #344054;
    font-size: 18px;
}

.zatrak-family-history-page .zatrak-history-empty p {
    margin: 0;
    color: #98a2b3;
    font-size: 13px;
}

/* PAGINATION */

.zatrak-family-history-page .pagination {
    margin-top: 24px;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .zatrak-family-history-page .zatrak-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .zatrak-family-history-page {
        padding: 18px;
    }

    .zatrak-family-history-page .zatrak-history-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-family-history-page .zatrak-history-filters {
        grid-template-columns: 1fr;
    }

    .zatrak-family-history-page .zatrak-history-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   GALLERY PAGE
   ========================================================= */

.zatrak-gallery-page {
    width: 100%;
}

/* ---------- Gallery Header ---------- */

.zatrak-gallery-page .zatrak-page-header {
    margin-bottom: 18px;
}

.zatrak-gallery-page .zatrak-page-header h1 {
    margin-bottom: 6px;
}

.zatrak-gallery-page .zatrak-page-header p {
    margin: 0;
    color: #64748b;
}

/* ---------- Filters ---------- */

.zatrak-gallery-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr 1fr;
    gap: 16px;
    align-items: end;
    padding: 20px;
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.zatrak-gallery-filter-group {
    min-width: 0;
}

.zatrak-gallery-filter-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.zatrak-gallery-input,
.zatrak-gallery-select {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #d7dee7;
    border-radius: 9px;
    background: #ffffff;
    color: #1e293b;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.zatrak-gallery-input:focus,
.zatrak-gallery-select:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, 0.10);
}

.zatrak-gallery-input::placeholder {
    color: #94a3b8;
}

/* ---------- Gallery Grid ---------- */

.zatrak-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

/* ---------- Gallery Card ---------- */

.zatrak-gallery-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.zatrak-gallery-card:hover {
    transform: translateY(-3px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

/* ---------- Image ---------- */

.zatrak-gallery-image {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: #f1f5f9;
}

.zatrak-gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8fafc;
    transition: transform 0.35s ease;
}

.zatrak-gallery-card:hover .zatrak-gallery-image img {
    transform: scale(1.04);
}

/* ---------- Category Badge ---------- */

.zatrak-gallery-category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    backdrop-filter: blur(5px);
}

/* ---------- Card Body ---------- */

.zatrak-gallery-body {
    padding: 16px;
}

.zatrak-gallery-title {
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.zatrak-gallery-description {
    margin: 0 0 13px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Metadata ---------- */

.zatrak-gallery-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
}

.zatrak-gallery-meta-row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 12px;
}

.zatrak-gallery-meta-row svg {
    flex: 0 0 auto;
    color: #1f6f5b;
}

/* ---------- Card Footer ---------- */

.zatrak-gallery-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid #f1f5f9;
}

.zatrak-gallery-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #dbe2e8;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zatrak-gallery-action-btn:hover {
    border-color: #1f6f5b;
    color: #1f6f5b;
    background: #f0fdf8;
}

.zatrak-gallery-action-btn.danger:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

/* ---------- Pagination ---------- */

.zatrak-gallery-pagination {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* ---------- Empty State ---------- */

.zatrak-gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 40px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
}

.zatrak-gallery-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #1f6f5b;
    font-size: 28px;
}

.zatrak-gallery-empty h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 20px;
}

.zatrak-gallery-empty p {
    max-width: 500px;
    margin: 0 0 20px;
    color: #64748b;
    font-size: 14px;
}

/* ---------- Upload / Edit Modal Image ---------- */

.zatrak-gallery-preview {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
    .zatrak-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 900px) {
    .zatrak-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .zatrak-gallery-filters {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 15px;
    }

    .zatrak-gallery-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .zatrak-gallery-image {
        height: 240px;
    }

    .zatrak-gallery-footer {
        flex-wrap: wrap;
    }

    .zatrak-gallery-action-btn {
        flex: 1;
    }
}

/* =========================================================
   GALLERY VIEW MODAL
   ========================================================= */

.zatrak-gallery-page .zatrak-modal {
    max-height: 90vh;
}

.zatrak-gallery-page .zatrak-modal-body {
    overflow-y: auto;
    max-height: calc(90vh - 145px);
    padding-bottom: 40px;
}

.zatrak-gallery-page .zatrak-modal-footer {
    flex-shrink: 0;
    background: #ffffff;
    border-top: 1px solid #eaecf0;
}


/* =========================================================
   ZATRAK - EVENTS
   ========================================================= */

.zatrak-events-page {
    width: 100%;
}

/* ---------- Page Header ---------- */

.zatrak-events-page .zatrak-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.zatrak-events-page .zatrak-page-title {
    margin: 0;
}

.zatrak-events-page .zatrak-page-subtitle {
    margin-top: 6px;
    color: #667085;
}

/* ---------- Events Filters ---------- */

.zatrak-events-filters {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 220px 150px;
    gap: 14px;
    align-items: end;
    padding: 16px;
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
}

.zatrak-events-filters > div {
    min-width: 0;
}

.zatrak-events-filters label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

.zatrak-events-filters input,
.zatrak-events-filters select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
    color: #101828;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.zatrak-events-filters input:focus,
.zatrak-events-filters select:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, 0.10);
}

.zatrak-events-filters input::placeholder {
    color: #98a2b3;
}

.zatrak-events-filters .zatrak-form-group {
    margin: 0;
}

/* ---------- Events Grid ---------- */

.zatrak-events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* ---------- Event Card ---------- */

.zatrak-event-card {
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.zatrak-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* ---------- Event Date ---------- */

.zatrak-event-date {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #eaecf0;
}

.zatrak-event-date-day {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: #1f6f5b;
}

.zatrak-event-date-details {
    display: flex;
    flex-direction: column;
}

.zatrak-event-date-month {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #475467;
}

.zatrak-event-date-year {
    font-size: 12px;
    color: #667085;
}

/* ---------- Event Body ---------- */

.zatrak-event-body {
    padding: 18px;
    flex: 1;
}

.zatrak-event-type {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.zatrak-event-title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: #101828;
}

.zatrak-event-description {
    margin: 0 0 16px;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- Event Meta ---------- */

.zatrak-event-meta {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.zatrak-event-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #475467;
    font-size: 13px;
}

.zatrak-event-meta-item i {
    width: 16px;
    margin-top: 2px;
    color: #1f6f5b;
}

/* ---------- Event Footer ---------- */

.zatrak-event-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid #eaecf0;
    background: #ffffff;
}

.zatrak-event-member {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #475467;
    font-size: 12px;
}

.zatrak-event-member i {
    color: #1f6f5b;
}

.zatrak-event-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ---------- Empty State ---------- */

.zatrak-events-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
}

.zatrak-events-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf3;
    color: #1f6f5b;
    font-size: 25px;
}

.zatrak-events-empty h3 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 18px;
}

.zatrak-events-empty p {
    margin: 0;
    color: #667085;
    font-size: 14px;
}

/* ---------- Event Modal ---------- */

.zatrak-events-page .zatrak-modal {
    max-height: 90vh;
}

.zatrak-events-page .zatrak-modal-body {
    overflow-y: auto;
    max-height: calc(90vh - 145px);
    padding-bottom: 40px;
}

.zatrak-events-page .zatrak-modal-footer {
    flex-shrink: 0;
    background: #ffffff;
    border-top: 1px solid #eaecf0;
}

/* ---------- View Event ---------- */

.zatrak-event-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.zatrak-event-view-header {
    padding: 20px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eaecf0;
}

.zatrak-event-view-header h3 {
    margin: 10px 0 0;
    font-size: 22px;
    color: #101828;
}

.zatrak-event-view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.zatrak-event-view-item {
    padding: 14px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #ffffff;
}

.zatrak-event-view-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #667085;
}

.zatrak-event-view-value {
    color: #101828;
    font-size: 14px;
    font-weight: 500;
}

.zatrak-event-view-description {
    padding: 16px;
    border-radius: 10px;
    background: #f8fafc;
    color: #475467;
    line-height: 1.7;
    white-space: pre-line;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .zatrak-events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zatrak-events-filters {
        grid-template-columns: 1fr 1fr;
    }

    .zatrak-events-filters > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .zatrak-events-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-events-filters {
        grid-template-columns: 1fr;
    }

    .zatrak-events-filters > div:first-child {
        grid-column: auto;
    }

    .zatrak-events-page .zatrak-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .zatrak-event-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-event-actions {
        width: 100%;
    }

    .zatrak-event-view-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .zatrak-events-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-events-filters {
        grid-template-columns: 1fr;
    }

    .zatrak-events-filters > :first-child {
        grid-column: auto;
    }

    .zatrak-events-page .zatrak-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .zatrak-event-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-event-actions {
        width: 100%;
    }

    .zatrak-event-view-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   EVENTS - CARD FINAL STYLING
   ========================================================= */

.zatrak-events-page .zatrak-events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* EVENT CARD */

.zatrak-events-page .zatrak-event-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.zatrak-events-page .zatrak-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* DATE */

.zatrak-events-page .zatrak-event-date {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #eaecf0;
}

.zatrak-events-page .zatrak-event-day {
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
    color: #1f6f5b;
}

.zatrak-events-page .zatrak-event-month {
    font-size: 13px;
    font-weight: 700;
    color: #475467;
    text-transform: uppercase;
}

/* CONTENT */

.zatrak-events-page .zatrak-event-content {
    padding: 18px;
    flex: 1;
}

.zatrak-events-page .zatrak-event-type {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.zatrak-events-page .zatrak-event-title {
    margin: 0 0 8px;
    color: #101828;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}

.zatrak-events-page .zatrak-event-description {
    margin: 0 0 16px;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

/* META INFORMATION */

.zatrak-events-page .zatrak-event-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zatrak-events-page .zatrak-event-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #475467;
    font-size: 13px;
    line-height: 1.4;
}

.zatrak-events-page .zatrak-event-meta-row span:first-child {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
}

/* ACTIONS */

.zatrak-events-page .zatrak-event-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #eaecf0;
    background: #ffffff;
}

.zatrak-events-page .zatrak-event-action-btn {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #ffffff;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zatrak-events-page .zatrak-event-action-btn:hover {
    border-color: #1f6f5b;
    color: #1f6f5b;
    background: #f0fdf8;
}

.zatrak-events-page .zatrak-event-action-btn.danger {
    color: #b42318;
    border-color: #fecdca;
    background: #fffafa;
}

.zatrak-events-page .zatrak-event-action-btn.danger:hover {
    color: #ffffff;
    border-color: #dc2626;
    background: #dc2626;
}

/* PAGINATION */

.zatrak-events-page .zatrak-events-pagination {
    margin-top: 24px;
}

/* EMPTY STATE */

.zatrak-events-page .zatrak-events-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
}

.zatrak-events-page .zatrak-events-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ecfdf3;
    font-size: 26px;
}

.zatrak-events-page .zatrak-events-empty h3 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 18px;
}

.zatrak-events-page .zatrak-events-empty p {
    margin: 0 0 18px;
    color: #667085;
    font-size: 14px;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .zatrak-events-page .zatrak-events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .zatrak-events-page .zatrak-events-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-events-page .zatrak-event-actions {
        flex-wrap: wrap;
    }

    .zatrak-events-page .zatrak-event-action-btn {
        flex: 1;
    }
}



/* =========================================================
   BIRTHDAYS PAGE
   ========================================================= */

.zatrak-birthdays-page {
    width: 100%;
}

/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.zatrak-birthdays-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 20px;
    padding: 20px;
    margin-bottom: 24px;
}

.zatrak-birthday-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zatrak-birthday-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

.zatrak-birthday-input,
.zatrak-birthday-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
    color: #101828;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.zatrak-birthday-input:focus,
.zatrak-birthday-select:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, 0.10);
}

/* ---------------------------------------------------------
   Birthday Grid
   --------------------------------------------------------- */

.zatrak-birthdays-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* ---------------------------------------------------------
   Birthday Card
   --------------------------------------------------------- */

.zatrak-birthday-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    padding: 20px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.zatrak-birthday-card:hover {
    transform: translateY(-2px);
    border-color: #d0d5dd;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* Birthday Today */

.zatrak-birthday-card.today {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 1px rgba(31, 111, 91, 0.08);
}

.zatrak-birthday-today-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #027a48;
    font-size: 12px;
    font-weight: 700;
}

/* ---------------------------------------------------------
   Profile
   --------------------------------------------------------- */

.zatrak-birthday-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.zatrak-birthday-photo,
.zatrak-birthday-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 50%;
}

.zatrak-birthday-photo {
    display: block;
    object-fit: cover;
    border: 2px solid #eaecf0;
}

.zatrak-birthday-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f3ef;
    color: #1f6f5b;
    font-size: 21px;
    font-weight: 700;
}

.zatrak-birthday-member-info {
    min-width: 0;
}

.zatrak-birthday-name {
    margin: 0 0 4px;
    color: #101828;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

.zatrak-birthday-label {
    color: #667085;
    font-size: 13px;
}

/* ---------------------------------------------------------
   Date
   --------------------------------------------------------- */

.zatrak-birthday-date {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 16px;
    background: #f8fafc;
    border: 1px solid #f2f4f7;
    border-radius: 10px;
}

.zatrak-birthday-date-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ffffff;
    font-size: 20px;
}

.zatrak-birthday-date-label {
    margin-bottom: 3px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.zatrak-birthday-date-value {
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}

/* ---------------------------------------------------------
   Information Grid
   --------------------------------------------------------- */

.zatrak-birthday-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.zatrak-birthday-info-item {
    padding: 12px;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
}

.zatrak-birthday-info-label {
    display: block;
    margin-bottom: 5px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.zatrak-birthday-info-item strong {
    color: #101828;
    font-size: 14px;
    font-weight: 700;
}

/* ---------------------------------------------------------
   Countdown
   --------------------------------------------------------- */

.zatrak-birthday-countdown {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f2f4f7;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
}

.zatrak-birthday-countdown-today {
    color: #027a48;
}

/* ---------------------------------------------------------
   Empty State
   --------------------------------------------------------- */

.zatrak-birthdays-empty {
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
}

.zatrak-birthdays-empty-icon {
    margin-bottom: 12px;
    font-size: 42px;
}

.zatrak-birthdays-empty h3 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 17px;
}

.zatrak-birthdays-empty p {
    margin: 0;
    color: #667085;
    font-size: 14px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1100px) {
    .zatrak-birthdays-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .zatrak-birthdays-filters {
        grid-template-columns: 1fr;
    }

    .zatrak-birthdays-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-birthday-card {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .zatrak-birthday-profile {
        gap: 10px;
    }

    .zatrak-birthday-photo,
    .zatrak-birthday-avatar {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .zatrak-birthday-name {
        font-size: 15px;
    }

    .zatrak-birthday-info-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ANNOUNCEMENTS PAGE
   ========================================================= */

.zatrak-announcements-page {
    width: 100%;
}

/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.zatrak-announcements-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 20px;
    padding: 20px;
    margin-bottom: 24px;
}

.zatrak-announcement-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zatrak-announcement-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

.zatrak-announcement-input,
.zatrak-announcement-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
    color: #101828;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.zatrak-announcement-input:focus,
.zatrak-announcement-select:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, 0.10);
}

/* ---------------------------------------------------------
   Announcement Grid
   --------------------------------------------------------- */

.zatrak-announcements-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* ---------------------------------------------------------
   Announcement Card
   --------------------------------------------------------- */

.zatrak-announcement-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.zatrak-announcement-card:hover {
    transform: translateY(-2px);
    border-color: #d0d5dd;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* ---------------------------------------------------------
   Card Top
   --------------------------------------------------------- */

.zatrak-announcement-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid #f2f4f7;
}

/* ---------------------------------------------------------
   Status
   --------------------------------------------------------- */

.zatrak-announcement-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.zatrak-announcement-status.status-published {
    background: #ecfdf3;
    color: #027a48;
}

.zatrak-announcement-status.status-draft {
    background: #f2f4f7;
    color: #475467;
}

.zatrak-announcement-status.status-archived {
    background: #fef3f2;
    color: #b42318;
}

/* ---------------------------------------------------------
   Visibility
   --------------------------------------------------------- */

.zatrak-announcement-visibility {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

/* ---------------------------------------------------------
   Card Content
   --------------------------------------------------------- */

.zatrak-announcement-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 18px;
}

.zatrak-announcement-title {
    margin: 0 0 10px;
    color: #101828;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}

.zatrak-announcement-description {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.65;
}

/* ---------------------------------------------------------
   Meta
   --------------------------------------------------------- */

.zatrak-announcement-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.zatrak-announcement-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
}

.zatrak-announcement-meta-row span:first-child {
    width: 20px;
    flex: 0 0 20px;
}

/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */

.zatrak-announcement-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #f2f4f7;
    background: #fcfcfd;
}

.zatrak-announcement-action-btn {
    flex: 1;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zatrak-announcement-action-btn:hover {
    transform: translateY(-1px);
}

.zatrak-announcement-action-btn.view {
    color: #344054;
}

.zatrak-announcement-action-btn.edit {
    color: #1f6f5b;
    border-color: #b7d8ce;
}

.zatrak-announcement-action-btn.restore {
    color: #027a48;
    border-color: #abefc6;
}

.zatrak-announcement-action-btn.archive {
    color: #b42318;
    border-color: #fecdca;
}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */

.zatrak-announcements-pagination {
    margin-top: 24px;
}

/* ---------------------------------------------------------
   Empty State
   --------------------------------------------------------- */

.zatrak-announcements-empty {
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
}

.zatrak-announcements-empty-icon {
    margin-bottom: 14px;
    font-size: 42px;
}

.zatrak-announcements-empty h3 {
    margin: 0 0 7px;
    color: #101828;
    font-size: 17px;
    font-weight: 700;
}

.zatrak-announcements-empty p {
    margin: 0 0 20px;
    color: #667085;
    font-size: 14px;
}

/* ---------------------------------------------------------
   Announcement Modal
   --------------------------------------------------------- */

.zatrak-announcement-modal {
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
}

.zatrak-announcement-modal .zatrak-modal-body {
    overflow-y: auto;
    max-height: calc(90vh - 145px);
}

/* ---------------------------------------------------------
   View Announcement
   --------------------------------------------------------- */

.zatrak-announcement-view-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.zatrak-announcement-view-body {
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    color: #344054;
    font-size: 14px;
    line-height: 1.8;
    word-break: break-word;
}

.zatrak-announcement-view-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.zatrak-announcement-detail-item {
    padding: 13px;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
}

.zatrak-announcement-detail-label {
    display: block;
    margin-bottom: 5px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.zatrak-announcement-detail-item strong {
    display: block;
    color: #101828;
    font-size: 13px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1100px) {

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

    .zatrak-announcements-filters {
        grid-template-columns: 1fr 1fr;
    }

    .zatrak-announcement-filter-group:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {

    .zatrak-announcements-filters {
        grid-template-columns: 1fr;
    }

    .zatrak-announcement-filter-group:first-child {
        grid-column: auto;
    }

    .zatrak-announcements-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-announcement-actions {
        flex-wrap: wrap;
    }

    .zatrak-announcement-action-btn {
        flex: 1 1 calc(50% - 4px);
    }

    .zatrak-announcement-view-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .zatrak-announcement-card-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-announcement-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .zatrak-announcement-action-btn {
        width: 100%;
    }

    .zatrak-announcement-content {
        padding: 17px 16px;
    }

    .zatrak-announcement-card-top {
        padding: 14px 16px;
    }

    .zatrak-announcement-modal {
        max-height: 94vh;
    }

    .zatrak-announcement-modal .zatrak-modal-body {
        max-height: calc(94vh - 145px);
    }
}

/* =========================================================
   ANNOUNCEMENT FORM - FINAL LAYOUT
   ========================================================= */

.zatrak-announcements-page .zatrak-announcement-modal .zatrak-modal-body {
    padding: 28px 26px 30px;
}

/* Main form */
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-form {
    display: block !important;
    width: 100%;
}

/* Every individual field */
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-form > .zatrak-form-group {
    display: block !important;
    width: 100%;
    margin: 0 0 22px 0 !important;
}

/* Last field in a section */
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-form > .zatrak-form-group:last-child {
    margin-bottom: 0 !important;
}

/* Labels */
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-form-label {
    display: block !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* Inputs / Selects / Textarea */
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-input,
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-select,
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-textarea {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #ffffff;
    color: #101828;
    font-size: 14px;
    outline: none;
}

/* Normal inputs */
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-input,
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-select {
    height: 46px !important;
    min-height: 46px;
    padding: 0 13px !important;
}

/* Textarea */
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-textarea {
    min-height: 170px !important;
    padding: 13px 14px !important;
    line-height: 1.6;
    resize: vertical;
}

/* Focus */
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-input:focus,
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-select:focus,
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-textarea:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, 0.10);
}

/* ---------------------------------------------------------
   TWO COLUMN ROWS
   --------------------------------------------------------- */

.zatrak-announcements-page .zatrak-announcement-modal .zatrak-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 20px !important;
    row-gap: 0 !important;
    width: 100%;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
}

.zatrak-announcements-page .zatrak-announcement-modal .zatrak-form-grid:last-child {
    margin-bottom: 0 !important;
}

.zatrak-announcements-page .zatrak-announcement-modal .zatrak-form-grid > .zatrak-form-group {
    display: block !important;
    min-width: 0;
    width: 100%;
    margin: 0 !important;
}

/* Label inside two-column rows */
.zatrak-announcements-page .zatrak-announcement-modal .zatrak-form-grid .zatrak-form-label {
    margin-bottom: 8px !important;
}

/* ---------------------------------------------------------
   ERROR MESSAGE
   --------------------------------------------------------- */

.zatrak-announcements-page .zatrak-announcement-modal .zatrak-form-error {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 12px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.zatrak-announcements-page .zatrak-announcement-modal .zatrak-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 26px;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .zatrak-announcements-page
    .zatrak-announcement-modal
    .zatrak-modal-body {
        padding: 22px 18px 24px;
    }

    .zatrak-announcements-page
    .zatrak-announcement-modal
    .zatrak-form-grid {
        grid-template-columns: 1fr !important;
        row-gap: 20px !important;
        margin-bottom: 22px !important;
    }

    .zatrak-announcements-page
    .zatrak-announcement-modal
    .zatrak-modal-footer {
        padding: 14px 18px;
    }
}

/* =========================================================
   MEMORIALS PAGE
   ========================================================= */

.zatrak-memorials-page {
    width: 100%;
}

/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.zatrak-memorials-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 20px;
    padding: 20px;
    margin-bottom: 24px;
}

.zatrak-memorial-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zatrak-memorial-filter-label {
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

.zatrak-memorial-input,
.zatrak-memorial-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
    color: #101828;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.zatrak-memorial-input:focus,
.zatrak-memorial-select:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, 0.10);
}

/* ---------------------------------------------------------
   Memorial Grid
   --------------------------------------------------------- */

.zatrak-memorials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* ---------------------------------------------------------
   Memorial Card
   --------------------------------------------------------- */

.zatrak-memorial-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.zatrak-memorial-card:hover {
    transform: translateY(-2px);
    border-color: #d0d5dd;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* ---------------------------------------------------------
   Card Image
   --------------------------------------------------------- */

.zatrak-memorial-card-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f8fafc;
}

.zatrak-memorial-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #f8fafc;
}
.zatrak-memorial-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        #f8fafc 0%,
        #eef2f6 100%
    );
    color: #667085;
    font-size: 52px;
}

/* ---------------------------------------------------------
   Status Badge
   --------------------------------------------------------- */

.zatrak-memorial-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(6px);
}

.zatrak-memorial-status-badge.status-published {
    background: rgba(236, 253, 243, 0.94);
    color: #027a48;
}

.zatrak-memorial-status-badge.status-archived {
    background: rgba(254, 243, 242, 0.94);
    color: #b42318;
}

/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.zatrak-memorial-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
}

.zatrak-memorial-name {
    margin: 0 0 12px;
    color: #101828;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}

/* ---------------------------------------------------------
   Meta
   --------------------------------------------------------- */

.zatrak-memorial-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zatrak-memorial-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
}

.zatrak-memorial-meta-row span:first-child {
    width: 20px;
    flex: 0 0 20px;
}

/* ---------------------------------------------------------
   Tribute
   --------------------------------------------------------- */

.zatrak-memorial-tribute {
    margin: 16px 0 0;
    color: #475467;
    font-size: 13px;
    line-height: 1.65;
}

.zatrak-memorial-tribute.muted {
    color: #98a2b3;
    font-style: italic;
}

/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */

.zatrak-memorial-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #f2f4f7;
    background: #fcfcfd;
}

.zatrak-memorial-action-btn {
    flex: 1;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zatrak-memorial-action-btn:hover {
    transform: translateY(-1px);
}

.zatrak-memorial-action-btn.view {
    color: #344054;
}

.zatrak-memorial-action-btn.edit {
    color: #1f6f5b;
    border-color: #b7d8ce;
}

.zatrak-memorial-action-btn.restore {
    color: #027a48;
    border-color: #abefc6;
}

.zatrak-memorial-action-btn.archive {
    color: #b42318;
    border-color: #fecdca;
}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */

.zatrak-memorials-pagination {
    margin-top: 24px;
}

/* ---------------------------------------------------------
   Empty State
   --------------------------------------------------------- */

.zatrak-memorials-empty {
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
}

.zatrak-memorials-empty-icon {
    margin-bottom: 14px;
    font-size: 44px;
}

.zatrak-memorials-empty h3 {
    margin: 0 0 7px;
    color: #101828;
    font-size: 17px;
    font-weight: 700;
}

.zatrak-memorials-empty p {
    margin: 0 0 20px;
    color: #667085;
    font-size: 14px;
}

/* ---------------------------------------------------------
   Memorial Modal
   --------------------------------------------------------- */

.zatrak-memorial-modal {
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
}

.zatrak-memorial-modal .zatrak-modal-body {
    max-height: calc(90vh - 145px);
    overflow-y: auto;
    padding: 28px 26px 30px;
}

/* ---------------------------------------------------------
   Memorial Form Layout
   --------------------------------------------------------- */

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-form {
    display: block !important;
    width: 100%;
}

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-form > .zatrak-form-group {
    display: block !important;
    width: 100%;
    margin: 0 0 22px 0 !important;
}

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    width: 100%;
    margin: 0 0 22px 0 !important;
}

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-form-grid > .zatrak-form-group {
    margin: 0 !important;
    min-width: 0;
}

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-form-label {
    display: block !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-input,
.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-select,
.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-textarea {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #ffffff;
    color: #101828;
    font-size: 14px;
}

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-input,
.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-select {
    height: 46px !important;
    min-height: 46px;
    padding: 0 13px !important;
}

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-textarea {
    min-height: 150px !important;
    padding: 13px 14px !important;
    line-height: 1.6;
    resize: vertical;
}

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-input:focus,
.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-select:focus,
.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-textarea:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, 0.10);
}

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-form-error {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 12px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   Photo Upload
   --------------------------------------------------------- */

.zatrak-upload-loading {
    margin-top: 8px;
    color: #1f6f5b;
    font-size: 12px;
    font-weight: 600;
}

.zatrak-memorial-upload-preview {
    width: 220px;
    height: 180px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #f8fafc;
}

.zatrak-memorial-upload-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------
   Current Photo
   --------------------------------------------------------- */

.zatrak-memorial-current-photo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 2px;
}

.zatrak-memorial-current-photo img {
    width: 160px;
    height: 130px;
    object-fit: contain;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #f8fafc;
}

.zatrak-memorial-remove-photo {
    padding: 8px 12px;
    border: 1px solid #fecdca;
    border-radius: 7px;
    background: #ffffff;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ---------------------------------------------------------
   View Memorial
   --------------------------------------------------------- */

.zatrak-memorial-view {
    width: 100%;
}

.zatrak-memorial-view-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 280px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    background: #f8fafc;
}

.zatrak-memorial-view-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.zatrak-memorial-view-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 60px;
}

.zatrak-memorial-view-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.zatrak-memorial-view-heading h3 {
    margin: 0;
    color: #101828;
    font-size: 22px;
    font-weight: 700;
}

.zatrak-memorial-view-status {
    flex-shrink: 0;
}

/* ---------------------------------------------------------
   Life Dates
   --------------------------------------------------------- */

.zatrak-memorial-life-dates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.zatrak-memorial-life-date {
    padding: 13px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #ffffff;
}

.zatrak-memorial-life-label {
    display: block;
    margin-bottom: 5px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.zatrak-memorial-life-date strong {
    display: block;
    color: #101828;
    font-size: 13px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   View Sections
   --------------------------------------------------------- */

.zatrak-memorial-view-section {
    margin-top: 22px;
}

.zatrak-memorial-view-section-title {
    margin-bottom: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.zatrak-memorial-view-text {
    padding: 16px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #f8fafc;
    color: #475467;
    font-size: 14px;
    line-height: 1.8;
    word-break: break-word;
}

.zatrak-memorial-view-creator {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid #f2f4f7;
    color: #667085;
    font-size: 12px;
}

.zatrak-memorial-view-creator strong {
    color: #344054;
}

/* ---------------------------------------------------------
   Modal Footer
   --------------------------------------------------------- */

.zatrak-memorials-page
.zatrak-memorial-modal
.zatrak-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 26px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1100px) {

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

}

@media (max-width: 800px) {

    .zatrak-memorial-life-dates {
        grid-template-columns: 1fr;
    }

    .zatrak-memorial-view-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-width: 700px) {

    .zatrak-memorials-filters {
        grid-template-columns: 1fr;
    }

    .zatrak-memorials-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-memorials-page
    .zatrak-memorial-modal
    .zatrak-modal-body {
        padding: 22px 18px 24px;
    }

    .zatrak-memorials-page
    .zatrak-memorial-modal
    .zatrak-form-grid {
        grid-template-columns: 1fr !important;
        row-gap: 20px !important;
    }

    .zatrak-memorial-actions {
        flex-wrap: wrap;
    }

    .zatrak-memorial-action-btn {
        flex: 1 1 calc(50% - 4px);
    }

    .zatrak-memorials-page
    .zatrak-memorial-modal
    .zatrak-modal-footer {
        padding: 14px 18px;
    }

}

@media (max-width: 480px) {

    .zatrak-memorial-card-image {
        height: 200px;
    }

    .zatrak-memorial-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .zatrak-memorial-action-btn {
        width: 100%;
    }

    .zatrak-memorial-view-photo {
        height: 230px;
    }

    .zatrak-memorial-current-photo {
        flex-direction: column;
    }

}

/* =========================================================
   NAVIGATION FUNCTIONALITY
========================================================= */

/* ---------------------------------------------------------
   SIDEBAR OVERLAY
--------------------------------------------------------- */

.zatrak-sidebar-overlay {
    display: none;
}


/* ---------------------------------------------------------
   SIDEBAR USER AREA
--------------------------------------------------------- */

.zatrak-sidebar-user {
    position: relative;
    overflow: visible;
}


/* ---------------------------------------------------------
   USER MENU
--------------------------------------------------------- */

.zatrak-user-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 58px;

    z-index: 2000;

    display: none;

    width: auto;
    max-width: 100%;

    padding: 6px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, .16);

    overflow: hidden;
}

.zatrak-user-menu.show {
    display: block;
}


/* ---------------------------------------------------------
   USER MENU HEADER
--------------------------------------------------------- */

.zatrak-user-menu-header {
    padding: 10px 11px;

    border-bottom: 1px solid #eaecf0;

    background: #ffffff;
}

.zatrak-user-menu-header strong {
    display: block;

    overflow: hidden;

    color: #1f2937;

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

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

.zatrak-user-menu-header span {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: #98a2b3;

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

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


/* ---------------------------------------------------------
   USER MENU LINKS
--------------------------------------------------------- */

.zatrak-user-menu a,
.zatrak-user-menu form button {
    width: 100%;
    min-height: 38px;

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

    padding: 9px 10px;

    box-sizing: border-box;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #344054;

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

    text-decoration: none;

    cursor: pointer;

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

.zatrak-user-menu a:hover,
.zatrak-user-menu form button:hover {
    background: #f5f7fa;
    color: #12372a;
}

.zatrak-user-menu form {
    width: 100%;
    margin: 0;
}


/* ---------------------------------------------------------
   USER MENU ICONS
--------------------------------------------------------- */

.zatrak-user-menu svg {
    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


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

@media (max-width: 1000px) {

    /* Sidebar closed */
    .zatrak-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    /* Sidebar opened */
    .zatrak-sidebar.open {
        transform: translateX(0);
    }


    /* Overlay */
    .zatrak-sidebar-overlay {
        position: fixed;
        inset: 0;

        z-index: 999;

        display: none;

        background: rgba(15, 23, 42, .45);

        backdrop-filter: blur(2px);
    }

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


    /* Prevent background scrolling */
    body.zatrak-sidebar-open {
        overflow: hidden;
    }


    /* User area */
    .zatrak-sidebar-user {
        position: relative;
        overflow: visible !important;
    }


    /* User popup */
    .zatrak-user-menu {
        position: absolute;

        left: 8px;
        right: 8px;
        bottom: 58px;

        width: auto;
        max-width: none;

        height: auto;
        max-height: 260px;
        min-height: 0;

        display: none;

        padding: 6px;

        box-sizing: border-box;

        background: #ffffff;

        border: 1px solid #e5e7eb;
        border-radius: 12px;

        box-shadow:
            0 12px 30px rgba(15, 23, 42, .16);

        overflow-y: auto;
        overflow-x: hidden;
    }

    .zatrak-user-menu.show {
        display: block;
    }


    .zatrak-user-menu-header {
        height: auto;
        min-height: 0;
    }

}


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

@media (max-width: 600px) {

    .zatrak-user-menu {
        left: 6px;
        right: 6px;
        bottom: 56px;

        max-height: 240px;

        border-radius: 10px;
    }

    .zatrak-user-menu a,
    .zatrak-user-menu form button {
        min-height: 36px;

        padding: 8px 9px;

        font-size: 11px;
    }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 400px) {

    .zatrak-user-menu {
        left: 4px;
        right: 4px;

        max-height: 220px;
    }

}

/* =========================================================
   PROFILE PAGE
   ========================================================= */

.zatrak-profile-page {
    max-width: 1180px;
    margin: 0 auto;
}

.zatrak-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    margin-top: 22px;
}

.zatrak-profile-card {
    overflow: hidden;
}

.zatrak-profile-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid #edf0f3;
}

.zatrak-profile-avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5d98b;
    color: #12372a;
    font-size: 18px;
    font-weight: 800;
}

.zatrak-profile-card-header h2 {
    margin: 0;
    color: #12372a;
    font-size: 17px;
    font-weight: 800;
}

.zatrak-profile-card-header p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 12px;
}

.zatrak-profile-card-body {
    padding: 24px;
}

.zatrak-profile-card-body .zatrak-form-group {
    margin-bottom: 20px;
}

.zatrak-profile-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.zatrak-profile-side-card {
    align-self: start;
    padding: 24px;
    border: 1px solid #dcebe4;
    border-radius: 16px;
    background: #f8fcfa;
}

.zatrak-profile-side-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #eaf5f0;
    font-size: 20px;
}

.zatrak-profile-side-card h3 {
    margin: 0;
    color: #12372a;
    font-size: 16px;
    font-weight: 800;
}

.zatrak-profile-side-card p {
    margin: 8px 0 18px;
    color: #667085;
    font-size: 12px;
    line-height: 1.7;
}

.zatrak-profile-security-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 9px;
    background: #12372a;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   CHANGE PASSWORD
   ========================================================= */

.zatrak-password-page {
    max-width: 900px;
    margin: 0 auto;
}

.zatrak-password-layout {
    margin-top: 22px;
}

.zatrak-password-card {
    overflow: hidden;
}

.zatrak-password-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid #edf0f3;
}

.zatrak-password-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eaf5f0;
    font-size: 21px;
}

.zatrak-password-card-header h2 {
    margin: 0;
    color: #12372a;
    font-size: 17px;
    font-weight: 800;
}

.zatrak-password-card-header p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 12px;
}

.zatrak-password-card-body {
    padding: 24px;
}

.zatrak-password-card-body .zatrak-form-group {
    margin-bottom: 20px;
}

.zatrak-password-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}


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

@media (max-width: 850px) {

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

    .zatrak-profile-side-card {
        order: -1;
    }
}

@media (max-width: 600px) {

    .zatrak-profile-card-header,
    .zatrak-password-card-header {
        padding: 18px;
    }

    .zatrak-profile-card-body,
    .zatrak-password-card-body {
        padding: 18px;
    }

    .zatrak-profile-actions,
    .zatrak-password-actions {
        justify-content: stretch;
    }

    .zatrak-profile-actions .zatrak-btn,
    .zatrak-password-actions .zatrak-btn {
        flex: 1;
    }
}


/* =========================================================
   ZATRAK CONTRIBUTIONS - FINAL UI FIX
   ========================================================= */

.zatrak-contributions-page .zatrak-tsh-icon {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.zatrak-contributions-page .zatrak-tsh-empty-icon span {
    font-size: 15px;
    font-weight: 900;
}

/* Force contribution modal to stay wide */
.zatrak-contributions-page .zatrak-contribution-modal-wide {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: 760px !important;
    min-width: 0 !important;
}

.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-modal-body {
    padding: 28px 26px 30px !important;
    overflow-y: auto;
    min-width: 0;
}

.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-form {
    width: 100% !important;
    display: block !important;
    min-width: 0;
}

.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 20px 0 !important;
}

.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-form-grid,
.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-form-grid-2 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
}

.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-form-grid > .zatrak-form-group {
    min-width: 0 !important;
}

.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-form-label {
    display: block !important;
    margin: 0 0 7px 0 !important;
    line-height: 1.35 !important;
}

.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-input,
.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-select,
.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-modal-footer {
    flex-shrink: 0;
    padding: 18px 26px !important;
}

.zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-form-error {
    display: block;
    margin-top: 6px;
}

/* Keep contribution top section from compressing */
.zatrak-contribution-card-main {
    min-width: 0;
}

.zatrak-contribution-content {
    min-width: 0;
}

.zatrak-contribution-top {
    min-width: 0;
}

.zatrak-contribution-title {
    overflow-wrap: anywhere;
}

.zatrak-contribution-money {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .zatrak-contributions-page .zatrak-contribution-modal-wide {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

    .zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-form-grid,
    .zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-modal-body {
        padding: 22px 18px 24px !important;
    }

    .zatrak-contributions-page .zatrak-contribution-modal-wide .zatrak-modal-footer {
        padding: 16px 18px !important;
    }
}

/* =========================================================
   ZATRAK — CONTRIBUTIONS MODULE
   Correct selectors for current Contributions Blade
   ========================================================= */

.zatrak-contributions-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.zatrak-contributions-page .zatrak-page-header {
    margin-bottom: 20px;
}

/* Summary cards */
.zatrak-contributions-page .zatrak-contribution-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 20px;
}

.zatrak-contributions-page .zatrak-contribution-summary-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 13px;
    box-shadow: 0 3px 12px rgba(16, 24, 40, .035);
}

.zatrak-contributions-page .zatrak-contribution-summary-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #f5d98b;
    color: #12372a;
    font-size: 12px;
    font-weight: 900;
}

.zatrak-contributions-page .zatrak-contribution-summary-label {
    color: #667085;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.zatrak-contributions-page .zatrak-contribution-summary-value {
    margin-top: 5px;
    color: #172033;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
}

.zatrak-contributions-page .zatrak-contribution-amount {
    font-size: 18px;
}

/* Filters */
.zatrak-contributions-page .zatrak-contribution-filter-card {
    padding: 18px;
    margin-bottom: 18px;
}

.zatrak-contributions-page .zatrak-contribution-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(170px, 1fr) minmax(170px, 1fr);
    gap: 16px;
    align-items: end;
}

.zatrak-contributions-page .zatrak-contribution-filter-grid .zatrak-form-group {
    min-width: 0;
    margin: 0;
}

.zatrak-contributions-page .zatrak-contribution-search {
    position: relative;
    width: 100%;
}

.zatrak-contributions-page .zatrak-contribution-search svg {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    color: #98a2b3;
    pointer-events: none;
}

.zatrak-contributions-page .zatrak-contribution-search .zatrak-input {
    width: 100%;
    padding-left: 39px;
}

/* Contribution list/card */
.zatrak-contributions-page .zatrak-contribution-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.zatrak-contributions-page .zatrak-contribution-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 13px;
    box-shadow: 0 3px 12px rgba(16, 24, 40, .035);
}

.zatrak-contributions-page .zatrak-contribution-card-main {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.zatrak-contributions-page .zatrak-contribution-icon,
.zatrak-contributions-page .zatrak-contribution-view-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #12372a;
    background: #edf7f1;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
}

.zatrak-contributions-page .zatrak-contribution-icon {
    width: 45px;
    height: 45px;
}

.zatrak-contributions-page .zatrak-contribution-content {
    min-width: 0;
    flex: 1;
}

.zatrak-contributions-page .zatrak-contribution-top {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.zatrak-contributions-page .zatrak-contribution-title {
    margin: 0;
    color: #172033;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.zatrak-contributions-page .zatrak-contribution-member {
    margin-top: 4px;
    color: #667085;
    font-size: 11px;
}

.zatrak-contributions-page .zatrak-contribution-amount-box {
    flex: 0 0 auto;
    text-align: right;
}

.zatrak-contributions-page .zatrak-contribution-money {
    color: #12372a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.zatrak-contributions-page .zatrak-contribution-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.zatrak-contributions-page .zatrak-status-confirmed {
    color: #027a48;
    background: #ecfdf3;
    border: 1px solid #abefc6;
}

.zatrak-contributions-page .zatrak-status-pending {
    color: #b54708;
    background: #fffaeb;
    border: 1px solid #fedf89;
}

.zatrak-contributions-page .zatrak-status-archived {
    color: #667085;
    background: #f2f4f7;
    border: 1px solid #eaecf0;
}

.zatrak-contributions-page .zatrak-contribution-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #f0f2f5;
}

.zatrak-contributions-page .zatrak-contribution-meta-item {
    min-width: 110px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zatrak-contributions-page .zatrak-contribution-meta-label,
.zatrak-contributions-page .zatrak-detail-label {
    color: #98a2b3;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.zatrak-contributions-page .zatrak-contribution-meta-value,
.zatrak-contributions-page .zatrak-detail-value {
    color: #344054;
    font-size: 11px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.zatrak-contributions-page .zatrak-contribution-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

.zatrak-contributions-page .zatrak-btn-danger-outline {
    background: #fff;
    color: #b42318;
    border-color: #fecdca;
}

.zatrak-contributions-page .zatrak-btn-danger-outline:hover {
    background: #fef3f2;
    border-color: #fca5a5;
}

.zatrak-contributions-page .zatrak-btn-success-outline {
    background: #fff;
    color: #027a48;
    border-color: #abefc6;
}

.zatrak-contributions-page .zatrak-btn-success-outline:hover {
    background: #ecfdf3;
    border-color: #86efac;
}

/* Empty state */
.zatrak-contributions-page .zatrak-empty-state {
    min-height: 260px;
    padding: 35px;
}

.zatrak-contributions-page .zatrak-empty-icon {
    background: #edf7f1;
    color: #12372a;
}

/* IMPORTANT: current Blade uses zatrak-modal-backdrop,
   while the global file defines zatrak-modal-overlay.
   This block makes the current Blade work without changing
   other modules. */
.zatrak-contributions-page .zatrak-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    overflow-y: auto;
}

.zatrak-contributions-page .zatrak-contribution-modal {
    position: relative;
    width: min(760px, calc(100vw - 48px)) !important;
    max-width: 760px !important;
    max-height: calc(100vh - 48px);
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .22);
    overflow: hidden;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-modal-header {
    flex: 0 0 auto;
    min-height: 76px;
    padding: 18px 24px;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-modal-header h2 {
    margin: 0;
    color: #172033;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-modal-header p {
    margin: 5px 0 0;
    color: #98a2b3;
    font-size: 11px;
    line-height: 1.4;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 26px !important;
    overflow-y: auto;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-modal-footer {
    flex: 0 0 auto;
    padding: 16px 24px !important;
}

/* Forms - explicit width/spacing to prevent overlap */
.zatrak-contributions-page .zatrak-contribution-modal .zatrak-form {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-group {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 20px !important;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-grid,
.zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-grid-2 {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    margin: 0 !important;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-grid > .zatrak-form-group,
.zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-grid-2 > .zatrak-form-group {
    min-width: 0 !important;
    width: 100% !important;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-label {
    display: block !important;
    width: 100%;
    margin: 0 0 7px !important;
    color: #344054;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-label span {
    color: #b42318;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-input,
.zatrak-contributions-page .zatrak-contribution-modal .zatrak-select,
.zatrak-contributions-page .zatrak-contribution-modal .zatrak-textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-input,
.zatrak-contributions-page .zatrak-contribution-modal .zatrak-select {
    height: 44px !important;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-textarea {
    min-height: 105px;
    padding: 11px 13px;
    resize: vertical;
}

.zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-error {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 11px;
    line-height: 1.4;
}

/* View modal */
.zatrak-contributions-page .zatrak-contribution-view-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px;
    margin-bottom: 18px;
    background: #f8fcfa;
    border: 1px solid #dcebe4;
    border-radius: 13px;
}

.zatrak-contributions-page .zatrak-contribution-view-icon {
    width: 52px;
    height: 52px;
}

.zatrak-contributions-page .zatrak-contribution-view-purpose {
    color: #12372a;
    font-size: 16px;
    font-weight: 800;
}

.zatrak-contributions-page .zatrak-contribution-view-amount {
    margin-top: 5px;
    color: #1f6f5b;
    font-size: 21px;
    font-weight: 800;
}

.zatrak-contributions-page .zatrak-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 13px;
}

.zatrak-contributions-page .zatrak-detail-item {
    min-width: 0;
    padding: 13px 14px;
    background: #fafcfb;
    border: 1px solid #edf1ee;
    border-radius: 11px;
}

.zatrak-contributions-page .zatrak-detail-label {
    display: block;
    margin-bottom: 5px;
}

.zatrak-contributions-page .zatrak-detail-value {
    display: block;
    font-size: 12px;
}

.zatrak-contributions-page .zatrak-contribution-notes-box {
    margin-top: 14px;
    padding: 14px;
    background: #f8fcfa;
    border: 1px solid #e5eee9;
    border-radius: 11px;
}

.zatrak-contributions-page .zatrak-contribution-notes {
    color: #475467;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* TSh */
.zatrak-contributions-page .zatrak-tsh-icon {
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: -.03em;
}

@media (max-width: 1100px) {
    .zatrak-contributions-page .zatrak-contribution-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zatrak-contributions-page .zatrak-contribution-filter-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(150px, 1fr);
    }

    .zatrak-contributions-page .zatrak-contribution-filter-grid .zatrak-form-group:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 800px) {
    .zatrak-contributions-page .zatrak-contribution-card {
        align-items: stretch;
        flex-direction: column;
    }

    .zatrak-contributions-page .zatrak-contribution-actions {
        width: 100%;
        padding-top: 13px;
        border-top: 1px solid #f0f2f5;
    }

    .zatrak-contributions-page .zatrak-contribution-actions .zatrak-btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 700px) {
    .zatrak-contributions-page .zatrak-contribution-filter-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-contributions-page .zatrak-contribution-filter-grid .zatrak-form-group:first-child {
        grid-column: auto;
    }

    .zatrak-contributions-page .zatrak-contribution-top {
        flex-direction: column;
        gap: 10px;
    }

    .zatrak-contributions-page .zatrak-contribution-amount-box {
        text-align: left;
    }

    .zatrak-contributions-page .zatrak-contribution-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .zatrak-contributions-page .zatrak-contribution-modal {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px);
        border-radius: 14px;
    }

    .zatrak-contributions-page .zatrak-contribution-modal .zatrak-modal-body {
        padding: 20px 17px !important;
    }

    .zatrak-contributions-page .zatrak-contribution-modal .zatrak-modal-footer {
        padding: 14px 17px !important;
    }

    .zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-grid,
    .zatrak-contributions-page .zatrak-contribution-modal .zatrak-form-grid-2,
    .zatrak-contributions-page .zatrak-details-grid {
        grid-template-columns: 1fr !important;
    }

    .zatrak-contributions-page .zatrak-contribution-actions {
        flex-wrap: wrap;
    }

    .zatrak-contributions-page .zatrak-contribution-actions .zatrak-btn {
        flex: 1 1 calc(50% - 4px);
    }
}

@media (max-width: 480px) {
    .zatrak-contributions-page .zatrak-contribution-summary {
        grid-template-columns: 1fr;
    }

    .zatrak-contributions-page .zatrak-contribution-meta {
        grid-template-columns: 1fr;
    }

    .zatrak-contributions-page .zatrak-contribution-actions .zatrak-btn {
        flex: 1 1 100%;
    }
}


/* =========================================================
   ZATRAK - MONTHLY CONTRIBUTION REPORT
   ========================================================= */

.zatrak-monthly-report-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   PERIOD SELECTOR
   --------------------------------------------------------- */

.zatrak-monthly-report-selector {
    margin-top: 22px;
    margin-bottom: 18px;
    padding: 20px;
}

.zatrak-monthly-report-selector .zatrak-form-group {
    max-width: 460px;
    margin: 0;
}

.zatrak-monthly-report-selector .zatrak-form-label {
    display: block;
    margin-bottom: 7px;
}


/* ---------------------------------------------------------
   REPORT HEADING
   --------------------------------------------------------- */

.zatrak-monthly-report-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    margin-bottom: 18px;
    border: 1px solid #e5ebe7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(18, 55, 42, .045);
}

.zatrak-monthly-report-heading > div:first-child {
    min-width: 0;
}

.zatrak-monthly-report-eyebrow {
    margin-bottom: 5px;
    color: #1f6f5b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zatrak-monthly-report-heading h2 {
    margin: 0;
    color: #12372a;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.zatrak-monthly-report-heading p {
    margin: 5px 0 0;
    color: #7b8790;
    font-size: 13px;
}

.zatrak-monthly-required {
    flex: 0 0 auto;
    min-width: 190px;
    padding: 14px 17px;
    border: 1px solid #e5ece8;
    border-radius: 13px;
    background: #f7fbf9;
    text-align: right;
}

.zatrak-monthly-required span {
    display: block;
    margin-bottom: 5px;
    color: #7a8881;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.zatrak-monthly-required strong {
    color: #12372a;
    font-size: 19px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.zatrak-monthly-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.zatrak-monthly-summary-card,
.zatrak-monthly-money-card {
    min-width: 0;
    background: #fff;
    border: 1px solid #e8ece9;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(18, 55, 42, .04);
}


/* member summary cards */

.zatrak-monthly-summary-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
}

.zatrak-monthly-summary-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #edf6f1;
    color: #1f6f5b;
}

.zatrak-monthly-summary-label {
    display: block;
    margin-bottom: 5px;
    color: #78857e;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.zatrak-monthly-summary-value {
    display: block;
    color: #12372a;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}


/* status colours */

.zatrak-monthly-summary-card.success .zatrak-monthly-summary-icon {
    background: #eaf7ef;
    color: #17633f;
}

.zatrak-monthly-summary-card.warning .zatrak-monthly-summary-icon {
    background: #fff7df;
    color: #9a720d;
}

.zatrak-monthly-summary-card.danger .zatrak-monthly-summary-icon {
    background: #fff1f1;
    color: #a13e3e;
}


/* money cards */

.zatrak-monthly-money-card {
    padding: 18px;
}

.zatrak-monthly-money-card span {
    display: block;
    margin-bottom: 7px;
    color: #78857e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.zatrak-monthly-money-card strong {
    display: block;
    color: #12372a;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
}

.zatrak-monthly-money-card.success {
    background: #f7fcf9;
    border-color: #dceee4;
}

.zatrak-monthly-money-card.success strong {
    color: #17633f;
}

.zatrak-monthly-money-card.danger {
    background: #fff9f9;
    border-color: #f1dede;
}

.zatrak-monthly-money-card.danger strong {
    color: #a13e3e;
}


/* ---------------------------------------------------------
   MEMBER TABLE CARD
   --------------------------------------------------------- */

.zatrak-monthly-members-card {
    overflow: hidden;
}

.zatrak-monthly-members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 21px;
    border-bottom: 1px solid #eaefec;
}

.zatrak-monthly-members-header h3 {
    margin: 0;
    color: #12372a;
    font-size: 17px;
    font-weight: 800;
}

.zatrak-monthly-members-header p {
    margin: 5px 0 0;
    color: #7c8982;
    font-size: 12px;
}

.zatrak-monthly-member-count {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    background: #edf6f1;
    color: #1f6f5b;
    font-size: 11px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   TABLE
   --------------------------------------------------------- */

.zatrak-monthly-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.zatrak-monthly-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.zatrak-monthly-table thead th {
    height: 45px;
    padding: 0 15px;
    background: #f8faf9;
    border-bottom: 1px solid #e7ece9;
    color: #75827b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.zatrak-monthly-table tbody td {
    min-height: 68px;
    padding: 11px 15px;
    border-bottom: 1px solid #eef1ef;
    color: #39463f;
    font-size: 12px;
    vertical-align: middle;
}

.zatrak-monthly-table tbody tr {
    transition: background .15s ease;
}

.zatrak-monthly-table tbody tr:hover {
    background: #fbfdfc;
}

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

.zatrak-monthly-table-empty {
    padding: 50px 20px !important;
    text-align: center !important;
    color: #98a39d !important;
}


/* ---------------------------------------------------------
   MEMBER
   --------------------------------------------------------- */

.zatrak-monthly-member {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.zatrak-monthly-member-avatar {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf5f0;
    border: 1px solid #d8eae2;
    color: #1f6f5b;
    font-size: 12px;
    font-weight: 800;
}

.zatrak-monthly-member-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.zatrak-monthly-member-info strong {
    max-width: 250px;
    overflow: hidden;
    color: #24322b;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zatrak-monthly-member-info span {
    margin-top: 3px;
    color: #98a39d;
    font-size: 10px;
}


/* ---------------------------------------------------------
   MONEY
   --------------------------------------------------------- */

.zatrak-monthly-money {
    display: inline-block;
    color: #4a5750;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.zatrak-monthly-money.paid {
    color: #17633f;
}

.zatrak-monthly-money.outstanding {
    color: #a13e3e;
}

.zatrak-monthly-money.clear {
    color: #88948e;
}


/* ---------------------------------------------------------
   STATUS
   --------------------------------------------------------- */

.zatrak-monthly-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.zatrak-monthly-status.paid {
    color: #17633f;
    background: #eaf7ef;
    border: 1px solid #cce9d8;
}

.zatrak-monthly-status.partial {
    color: #916d0d;
    background: #fff7df;
    border: 1px solid #f0dfaa;
}

.zatrak-monthly-status.not-paid {
    color: #a13e3e;
    background: #fff1f1;
    border: 1px solid #eccfcf;
}


/* ---------------------------------------------------------
   PAYMENTS DETAILS
   --------------------------------------------------------- */

.zatrak-monthly-payment-details {
    min-width: 150px;
}

.zatrak-monthly-payment-details summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid #dce6e0;
    border-radius: 8px;
    background: #fff;
    color: #1f6f5b;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
    transition: .15s ease;
}

.zatrak-monthly-payment-details summary::-webkit-details-marker {
    display: none;
}

.zatrak-monthly-payment-details summary:hover {
    background: #f7fbf9;
    border-color: #bcd7ca;
}

.zatrak-monthly-payment-list {
    width: 270px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #e2e9e5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(18, 55, 42, .08);
}

.zatrak-monthly-payment-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 7px;
    border-bottom: 1px solid #eef2ef;
}

.zatrak-monthly-payment-item:last-child {
    border-bottom: 0;
}

.zatrak-monthly-payment-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zatrak-monthly-payment-item strong {
    color: #17633f;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-monthly-payment-item span {
    color: #89958f;
    font-size: 10px;
}

.zatrak-monthly-payment-item small {
    max-width: 110px;
    overflow: hidden;
    color: #78857e;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zatrak-monthly-no-payment {
    color: #a0aaa5;
    font-size: 11px;
}


/* ---------------------------------------------------------
   REPORT NOTE
   --------------------------------------------------------- */

.zatrak-monthly-report-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid #dcebe4;
    border-radius: 11px;
    background: #f7fbf9;
    color: #718078;
    font-size: 11px;
    line-height: 1.5;
}

.zatrak-monthly-report-note svg {
    flex: 0 0 17px;
    color: #1f6f5b;
}

.zatrak-monthly-report-note strong {
    color: #12372a;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1200px) {

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


@media (max-width: 850px) {

    .zatrak-monthly-report-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-monthly-required {
        width: 100%;
        text-align: left;
    }
}


@media (max-width: 700px) {

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

    .zatrak-monthly-report-selector {
        padding: 17px;
    }

    .zatrak-monthly-report-heading {
        padding: 18px;
    }

    .zatrak-monthly-report-heading h2 {
        font-size: 19px;
    }

    .zatrak-monthly-members-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-monthly-member-count {
        align-self: flex-start;
    }

    .zatrak-monthly-report-note {
        align-items: flex-start;
    }

    .zatrak-monthly-payment-list {
        width: min(270px, calc(100vw - 80px));
    }
}


@media (max-width: 480px) {

    .zatrak-monthly-summary-card {
        padding: 15px;
    }

    .zatrak-monthly-money-card {
        padding: 16px;
    }

    .zatrak-monthly-report-heading {
        gap: 16px;
    }

    .zatrak-monthly-report-heading p {
        font-size: 12px;
    }

    .zatrak-monthly-required strong {
        font-size: 17px;
    }
}


/* =========================================================
   ZATRAK - CONTRIBUTION FUNDS
   ========================================================= */

.zatrak-funds-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   FILTERS
   --------------------------------------------------------- */

.zatrak-funds-filter-card {
    margin-top: 22px;
    margin-bottom: 20px;
    padding: 20px;
}

.zatrak-funds-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 16px;
    align-items: end;
}

.zatrak-funds-filter-grid .zatrak-form-group {
    min-width: 0;
    margin: 0;
}

.zatrak-funds-filter-grid .zatrak-form-label {
    display: block;
    margin-bottom: 7px;
}

.zatrak-funds-search {
    position: relative;
    width: 100%;
}

.zatrak-funds-search svg {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a39d;
    pointer-events: none;
}

.zatrak-funds-search .zatrak-input {
    width: 100%;
    padding-left: 40px;
}


/* ---------------------------------------------------------
   FUND GRID
   --------------------------------------------------------- */

.zatrak-funds-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.zatrak-fund-card {
    min-width: 0;
    overflow: hidden;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.zatrak-fund-card:hover {
    transform: translateY(-2px);
    border-color: #d8e5de;
    box-shadow: 0 12px 30px rgba(18, 55, 42, .08);
}


/* ---------------------------------------------------------
   FUND CARD TOP
   --------------------------------------------------------- */

.zatrak-fund-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 0;
}

.zatrak-fund-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
}

.zatrak-fund-icon-monthly {
    background: #edf6f1;
    color: #1f6f5b;
}

.zatrak-fund-icon-emergency {
    background: #fff1f1;
    color: #a13e3e;
}

.zatrak-fund-icon-general {
    background: #fff7df;
    color: #9a720d;
}

.zatrak-fund-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ---------------------------------------------------------
   FUND BODY
   --------------------------------------------------------- */

.zatrak-fund-body {
    min-width: 0;
    padding: 15px 18px 18px;
}

.zatrak-fund-type {
    margin-bottom: 5px;
    color: #1f6f5b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.zatrak-fund-name {
    margin: 0;
    color: #12372a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.zatrak-fund-description {
    min-height: 42px;
    margin: 8px 0 0;
    color: #7b8790;
    font-size: 12px;
    line-height: 1.6;
}

.zatrak-fund-status-row {
    margin-top: 13px;
}

.zatrak-fund-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.zatrak-fund-status-active {
    color: #17633f;
    background: #eaf7ef;
    border: 1px solid #cce8d7;
}

.zatrak-fund-status-closed {
    color: #916d0d;
    background: #fff7df;
    border: 1px solid #efdfac;
}

.zatrak-fund-status-archived {
    color: #6b7280;
    background: #f0f1f3;
    border: 1px solid #e1e3e6;
}


/* ---------------------------------------------------------
   FUND DETAILS
   --------------------------------------------------------- */

.zatrak-fund-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 17px;
}

.zatrak-fund-detail {
    min-width: 0;
    padding: 12px;
    border: 1px solid #edf1ee;
    border-radius: 11px;
    background: #fafcfb;
}

.zatrak-fund-detail span {
    display: block;
    margin-bottom: 5px;
    color: #8a958f;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.zatrak-fund-detail strong {
    display: block;
    color: #28362f;
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.zatrak-fund-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-top: 1px solid #edf0ee;
    background: #fcfdfd;
}

.zatrak-fund-period-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.zatrak-fund-period-count span {
    color: #8a958f;
    font-size: 10px;
    font-weight: 700;
}

.zatrak-fund-period-count strong {
    color: #12372a;
    font-size: 13px;
    font-weight: 800;
}

.zatrak-fund-footer-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.zatrak-fund-footer-actions .zatrak-btn {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 11px;
}


/* ---------------------------------------------------------
   CREATE / EDIT MODAL
   --------------------------------------------------------- */

.zatrak-fund-modal {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: 760px !important;
    min-width: 0 !important;
}

.zatrak-fund-modal .zatrak-modal-body {
    padding: 27px 26px 30px !important;
    overflow-y: auto;
    min-width: 0;
}

.zatrak-fund-modal .zatrak-form {
    width: 100%;
    display: block;
}

.zatrak-fund-modal .zatrak-form-group {
    width: 100%;
    min-width: 0;
    margin: 0 0 20px !important;
}

.zatrak-fund-modal .zatrak-form-group:last-child {
    margin-bottom: 0 !important;
}

.zatrak-fund-modal .zatrak-form-label {
    display: block;
    margin-bottom: 7px !important;
    line-height: 1.3;
}

.zatrak-fund-modal .zatrak-form-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
}

.zatrak-fund-modal .zatrak-form-grid > .zatrak-form-group {
    min-width: 0;
}

.zatrak-fund-modal .zatrak-input,
.zatrak-fund-modal .zatrak-select,
.zatrak-fund-modal .zatrak-textarea {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.zatrak-fund-modal .zatrak-modal-footer {
    flex-shrink: 0;
    padding: 17px 26px !important;
}


/* =========================================================
   MONEY INPUT - FIXED
   ========================================================= */

.zatrak-funds-page .zatrak-money-input {
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);

    border: 1px solid #dfe3e8;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;

    box-sizing: border-box;
}

.zatrak-funds-page .zatrak-money-input:focus-within {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, .08);
}

.zatrak-funds-page .zatrak-money-input > span {
    position: static !important;

    width: 100%;
    height: 44px;

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

    background: #f5faf7;
    border-right: 1px solid #e3ebe6;

    color: #1f6f5b;
    font-size: 12px;
    font-weight: 900;

    transform: none !important;
}

.zatrak-funds-page .zatrak-money-input .zatrak-input {
    width: 100% !important;
    height: 44px !important;

    padding: 0 13px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #fff !important;

    box-shadow: none !important;
}

.zatrak-funds-page .zatrak-money-input .zatrak-input:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 700px) {

    .zatrak-funds-page .zatrak-money-input {
        grid-template-columns: 55px minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------
   VIEW MODAL
   --------------------------------------------------------- */

.zatrak-fund-view-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid #e3ece7;
    border-radius: 14px;
    background: #f8fbf9;
}

.zatrak-fund-view-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 900;
}

.zatrak-fund-view-type {
    margin-bottom: 3px;
    color: #1f6f5b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.zatrak-fund-view-hero h3 {
    margin: 0 0 7px;
    color: #12372a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.zatrak-fund-view-section {
    margin-bottom: 17px;
    padding: 15px;
    border: 1px solid #edf1ee;
    border-radius: 12px;
    background: #fafcfb;
}

.zatrak-fund-view-section p {
    margin: 6px 0 0;
    color: #4d5a53;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-line;
}


/* ---------------------------------------------------------
   FUND PERIODS
   --------------------------------------------------------- */

.zatrak-fund-periods {
    margin-top: 18px;
    border: 1px solid #e7ece9;
    border-radius: 13px;
    overflow: hidden;
}

.zatrak-fund-periods-title {
    padding: 12px 14px;
    border-bottom: 1px solid #e7ece9;
    background: #f8faf9;
    color: #12372a;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-fund-period-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef1ef;
}

.zatrak-fund-period-row:last-child {
    border-bottom: 0;
}

.zatrak-fund-period-row > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zatrak-fund-period-row > div:last-child {
    flex: 0 0 auto;
}

.zatrak-fund-period-row strong {
    color: #28362f;
    font-size: 12px;
    font-weight: 800;
}

.zatrak-fund-period-row span {
    color: #929d97;
    font-size: 10px;
}

.zatrak-fund-period-row > div:last-child strong {
    color: #17633f;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   ACTION BUTTON OVERRIDE
   --------------------------------------------------------- */

.zatrak-fund-actions .zatrak-action-btn {
    width: 32px;
    height: 32px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1200px) {

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

    .zatrak-funds-filter-grid {
        grid-template-columns: minmax(0, 2fr) 1fr 1fr;
    }
}


@media (max-width: 900px) {

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

    .zatrak-funds-filter-grid > .zatrak-form-group:first-child {
        grid-column: 1 / -1;
    }

    .zatrak-funds-grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 700px) {

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

    .zatrak-funds-filter-grid > .zatrak-form-group:first-child {
        grid-column: auto;
    }

    .zatrak-funds-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-fund-details {
        grid-template-columns: 1fr 1fr;
    }

    .zatrak-fund-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-fund-footer-actions {
        width: 100%;
    }

    .zatrak-fund-footer-actions .zatrak-btn {
        flex: 1;
    }

    .zatrak-fund-modal {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

    .zatrak-fund-modal .zatrak-modal-body {
        padding: 22px 18px 24px !important;
    }

    .zatrak-fund-modal .zatrak-modal-footer {
        padding: 15px 18px !important;
    }

    .zatrak-fund-modal .zatrak-form-grid {
        grid-template-columns: 1fr !important;
    }

    .zatrak-fund-view-hero {
        align-items: flex-start;
    }
}


@media (max-width: 480px) {

    .zatrak-fund-details {
        grid-template-columns: 1fr;
    }

    .zatrak-fund-card-top {
        padding-left: 15px;
        padding-right: 15px;
    }

    .zatrak-fund-body {
        padding-left: 15px;
        padding-right: 15px;
    }

    .zatrak-fund-card-footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .zatrak-fund-view-hero {
        padding: 15px;
    }
}

/* =========================================================
   CONTRIBUTION FUND - FORM SPACING
   ========================================================= */

.zatrak-funds-page .zatrak-fund-modal .zatrak-form-label {
    display: block !important;
    margin-bottom: 9px !important;
    line-height: 1.4 !important;
}

.zatrak-funds-page .zatrak-fund-modal .zatrak-form-group {
    margin-bottom: 22px !important;
}

.zatrak-funds-page .zatrak-fund-modal .zatrak-form-grid {
    row-gap: 22px !important;
    column-gap: 18px !important;
}

/* Grid fields should use the grid gap, not extra bottom margin */
.zatrak-funds-page .zatrak-fund-modal .zatrak-form-grid > .zatrak-form-group {
    margin-bottom: 0 !important;
}

/* Give the input/select a little breathing room */
.zatrak-funds-page .zatrak-fund-modal .zatrak-input,
.zatrak-funds-page .zatrak-fund-modal .zatrak-select,
.zatrak-funds-page .zatrak-fund-modal .zatrak-textarea {
    margin-top: 0 !important;
}
/* =========================================================
   CONTRIBUTION FUND - ROW SPACING FINAL
   ========================================================= */

.zatrak-funds-page .zatrak-fund-modal .zatrak-form-grid {
    margin-bottom: 24px !important;
}

/*
 * Prevent the next field from touching the previous row.
 */
.zatrak-funds-page .zatrak-fund-modal .zatrak-form-grid + .zatrak-form-group {
    margin-top: 0 !important;
}

/*
 * Monthly Contribution should have clear separation
 * from Fund Type / Currency.
 */
.zatrak-funds-page .zatrak-fund-modal .zatrak-money-input {
    margin-top: 0 !important;
}

/*
 * Status should have clear separation
 * from Start Date / End Date.
 */
.zatrak-funds-page .zatrak-fund-modal .zatrak-select {
    margin-top: 0 !important;
}

/* =========================================================
   CONTRIBUTION PAYMENTS
   ========================================================= */

.zatrak-payments-page {
    width: 100%;
}

/* ---------------------------------------------------------
   FILTER CARD
   --------------------------------------------------------- */

.zatrak-payments-filter-card {
    margin-bottom: 24px;
    padding: 24px;
}

.zatrak-payments-filter-card .zatrak-form-grid {
    gap: 22px;
    margin-bottom: 0;
}

.zatrak-payments-search-group {
    margin-top: 24px;
}

/* ---------------------------------------------------------
   PERIOD INFO
   --------------------------------------------------------- */

.zatrak-period-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 22px 24px;
}

.zatrak-period-info-label {
    margin-bottom: 7px;
    color: #75807b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.zatrak-period-info-title {
    color: #12372a;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
}

.zatrak-period-info-subtitle {
    margin-top: 5px;
    color: #6d7772;
    font-size: 13px;
}

.zatrak-period-info-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.zatrak-period-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.zatrak-period-status.is-open {
    background: #e8f6ef;
    color: #19704d;
}

.zatrak-period-status.is-closed {
    background: #f1f3f4;
    color: #66706b;
}

.zatrak-period-required {
    color: #6d7772;
    font-size: 13px;
}

.zatrak-period-required strong {
    color: #12372a;
    font-size: 15px;
}

/* ---------------------------------------------------------
   SUMMARY CARDS
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.zatrak-payments-page .zatrak-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 19px 18px;
    border: 1px solid #e5e9e7;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(18, 55, 42, .035);
}

.zatrak-payments-page .zatrak-summary-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eff7f3;
    color: #1f6f5b;
}

.zatrak-payments-page .zatrak-summary-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-payments-page .zatrak-summary-label {
    display: block;
    margin-bottom: 4px;
    color: #78827e;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.zatrak-payments-page .zatrak-summary-value {
    display: block;
    color: #12372a;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}

/* ---------------------------------------------------------
   PAYMENTS TABLE
   --------------------------------------------------------- */

.zatrak-payments-table-card {
    padding: 0;
    overflow: hidden;
}

.zatrak-payments-table-card .zatrak-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #edf0ee;
}

.zatrak-payments-table-card .zatrak-section-title {
    margin: 0;
    color: #12372a;
    font-size: 18px;
    font-weight: 900;
}

.zatrak-payments-table-card .zatrak-section-subtitle {
    margin: 6px 0 0;
    color: #76817c;
    font-size: 13px;
}

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

.zatrak-payments-table-card .zatrak-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
}

.zatrak-payments-table-card .zatrak-table thead th {
    padding: 13px 16px;
    background: #f7f9f8;
    border-bottom: 1px solid #e7ebe9;
    color: #68736e;
    font-size: 11px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
}

.zatrak-payments-table-card .zatrak-table tbody td {
    padding: 15px 16px;
    border-bottom: 1px solid #eef1ef;
    color: #25322d;
    font-size: 13px;
    vertical-align: middle;
}

.zatrak-payments-table-card .zatrak-table tbody tr:last-child td {
    border-bottom: 0;
}

.zatrak-payments-table-card .zatrak-table tbody tr:hover {
    background: #fbfcfb;
}

/* ---------------------------------------------------------
   MEMBER CELL
   --------------------------------------------------------- */

.zatrak-member-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 230px;
}

.zatrak-member-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dfe7e2;
    border-radius: 50%;
    background: #edf5f1;
    color: #1f6f5b;
    font-size: 14px;
    font-weight: 900;
}

.zatrak-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zatrak-member-name {
    color: #17392d;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.zatrak-member-meta {
    margin-top: 3px;
    color: #7b8581;
    font-size: 11px;
}

/* ---------------------------------------------------------
   MONEY
   --------------------------------------------------------- */

.zatrak-money-positive {
    color: #1f6f5b;
}

.zatrak-money-warning {
    color: #b2781d;
}

/* ---------------------------------------------------------
   STATUS
   --------------------------------------------------------- */

.zatrak-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.zatrak-status-badge.is-success {
    background: #e9f6ef;
    color: #1f744f;
}

.zatrak-status-badge.is-warning {
    background: #fff6df;
    color: #9a691d;
}

.zatrak-status-badge.is-danger {
    background: #fcecec;
    color: #a64242;
}

/* ---------------------------------------------------------
   PAYMENT COUNT
   --------------------------------------------------------- */

.zatrak-payment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: #f0f5f2;
    color: #1f6f5b;
    font-size: 12px;
    font-weight: 900;
}

.zatrak-payment-count-label {
    margin-left: 4px;
    color: #78817d;
    font-size: 11px;
}

/* ---------------------------------------------------------
   SMALL BUTTON
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-btn-sm {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
}

.zatrak-payments-page .zatrak-btn-sm svg {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------
   EMPTY STATES
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-empty-state {
    padding: 55px 24px;
    text-align: center;
}

.zatrak-payments-page .zatrak-empty-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #edf6f1;
    color: #1f6f5b;
}

.zatrak-payments-page .zatrak-empty-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-payments-page .zatrak-empty-state h3 {
    margin: 0;
    color: #12372a;
    font-size: 18px;
    font-weight: 900;
}

.zatrak-payments-page .zatrak-empty-state p {
    max-width: 500px;
    margin: 9px auto 20px;
    color: #75807b;
    font-size: 13px;
    line-height: 1.65;
}

.zatrak-empty-inline {
    padding: 45px 24px;
    text-align: center;
}

.zatrak-empty-inline h3 {
    margin: 0 0 7px;
    color: #12372a;
    font-size: 16px;
    font-weight: 900;
}

.zatrak-empty-inline p {
    margin: 0;
    color: #7a8580;
    font-size: 13px;
}

/* ---------------------------------------------------------
   PAYMENT MODAL
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 27, 20, .52);
    backdrop-filter: blur(3px);
}

.zatrak-payments-page .zatrak-payment-modal {
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}

.zatrak-payments-page .zatrak-payment-modal .zatrak-modal-header {
    padding: 21px 24px;
    border-bottom: 1px solid #edf0ee;
}

.zatrak-payments-page .zatrak-payment-modal .zatrak-modal-body {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding: 24px;
}

.zatrak-payments-page .zatrak-payment-modal .zatrak-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #edf0ee;
    background: #fafcfb;
}

.zatrak-payment-summary-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #e5ece8;
    border-radius: 11px;
    background: #f8fbf9;
}

.zatrak-payment-summary-box > div {
    min-width: 0;
}

.zatrak-payment-summary-box span {
    display: block;
    margin-bottom: 5px;
    color: #7a8580;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.zatrak-payment-summary-box strong {
    display: block;
    color: #12372a;
    font-size: 13px;
    line-height: 1.4;
}

.zatrak-payments-page .zatrak-payment-modal .zatrak-form-grid {
    gap: 22px;
    margin-bottom: 22px;
}

.zatrak-payments-page .zatrak-form-group-spaced {
    margin-top: 2px;
}

.zatrak-payments-page .zatrak-form-label {
    display: block;
    margin-bottom: 9px;
}

/* ---------------------------------------------------------
   MONEY INPUT
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-money-input {
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}

.zatrak-payments-page .zatrak-money-input:focus-within {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, .08);
}

.zatrak-payments-page .zatrak-money-input > span {
    position: static !important;
    width: 100%;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: #f5faf7;
    border-right: 1px solid #e3ebe6;
    color: #1f6f5b;
    font-size: 12px;
    font-weight: 900;
    transform: none !important;
}

.zatrak-payments-page .zatrak-money-input .zatrak-input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   VALIDATION
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-form-error {
    margin-top: 7px;
    color: #b03a3a;
    font-size: 12px;
    font-weight: 600;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .zatrak-payments-page .zatrak-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .zatrak-period-info-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .zatrak-period-info-right {
        align-items: flex-start;
    }

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

    .zatrak-payment-summary-box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .zatrak-payments-page .zatrak-summary-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-payments-page .zatrak-payments-filter-card,
    .zatrak-period-info-card {
        padding: 18px;
    }

    .zatrak-payments-page .zatrak-modal-overlay {
        padding: 12px;
    }

    .zatrak-payments-page .zatrak-payment-modal {
        max-height: calc(100vh - 24px);
    }

    .zatrak-payments-page .zatrak-payment-modal .zatrak-modal-body {
        padding: 18px;
        max-height: calc(100vh - 190px);
    }

    .zatrak-payments-page .zatrak-payment-modal .zatrak-modal-footer {
        padding: 14px 18px;
    }
}
/* =========================================================
   PAYMENTS - FILTER SPACING FIX
   ========================================================= */

.zatrak-payments-page .zatrak-payments-filter-card {
    padding: 24px;
}

.zatrak-payments-page .zatrak-payments-filter-card .zatrak-form-grid {
    margin-bottom: 0 !important;
    row-gap: 24px !important;
}

.zatrak-payments-page .zatrak-payments-search-group {
    margin-top: 0 !important;
    padding-top: 26px !important;
}

.zatrak-payments-page .zatrak-payments-search-group .zatrak-form-label {
    display: block;
    margin-bottom: 10px !important;
}

.zatrak-payments-page .zatrak-payments-search-group .zatrak-input {
    width: 100%;
}

/* =========================================================
   CONTRIBUTION PAYMENTS - MONTHLY + EMERGENCY
   ========================================================= */

.zatrak-payments-page {
    width: 100%;
}

/* ---------------------------------------------------------
   FILTER CARD
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-payments-filter-card {
    margin-bottom: 24px;
    padding: 24px;
}

.zatrak-payments-page .zatrak-payments-filter-card .zatrak-form-grid {
    gap: 22px;
    margin-bottom: 0 !important;
}

.zatrak-payments-page .zatrak-payments-search-group {
    margin-top: 24px;
}

.zatrak-payments-page .zatrak-form-label {
    display: block;
    margin-bottom: 9px !important;
}

/* ---------------------------------------------------------
   PAYMENT MODE BOX
   --------------------------------------------------------- */

.zatrak-payment-mode-box {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 13px;
    border: 1px solid #dfe5e1;
    border-radius: 9px;
    background: #f8faf9;
    box-sizing: border-box;
}

.zatrak-payment-mode-box.is-emergency {
    border-color: #eadfbc;
    background: #fffaf0;
}

.zatrak-payment-mode-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #edf6f1;
    color: #1f6f5b;
}

.zatrak-payment-mode-box.is-emergency .zatrak-payment-mode-icon {
    background: #fff0c9;
    color: #9a6b17;
}

.zatrak-payment-mode-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-payment-mode-box strong {
    display: block;
    color: #183a2f;
    font-size: 13px;
    font-weight: 850;
}

.zatrak-payment-mode-box span {
    display: block;
    margin-top: 2px;
    color: #7a8580;
    font-size: 11px;
    line-height: 1.45;
}

/* ---------------------------------------------------------
   PERIOD HEADER
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-period-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 22px 24px;
}

.zatrak-period-info-label {
    margin-bottom: 7px;
    color: #77827d;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.zatrak-period-info-title {
    color: #12372a;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.2;
}

.zatrak-period-info-subtitle {
    margin-top: 5px;
    color: #707b76;
    font-size: 13px;
}

.zatrak-period-info-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.zatrak-period-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.zatrak-period-status.is-open {
    background: #e9f6ef;
    color: #1e704d;
}

.zatrak-period-required {
    color: #707a76;
    font-size: 12px;
}

.zatrak-period-required strong {
    color: #12372a;
    font-size: 14px;
}

/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.zatrak-payments-page .zatrak-summary-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border: 1px solid #e4e9e6;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(18, 55, 42, .035);
}

.zatrak-payments-page .zatrak-summary-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eff7f3;
    color: #1f6f5b;
}

.zatrak-payments-page .zatrak-summary-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-payments-page .zatrak-summary-label {
    display: block;
    margin-bottom: 4px;
    color: #7a8580;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.zatrak-payments-page .zatrak-summary-value {
    display: block;
    color: #12372a;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
}

/* ---------------------------------------------------------
   EMERGENCY HEADER
   --------------------------------------------------------- */

.zatrak-emergency-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding: 22px 24px;
}

.zatrak-emergency-header-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.zatrak-emergency-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff5db;
    color: #9a6b17;
}

.zatrak-emergency-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------
   EMERGENCY PROGRESS
   --------------------------------------------------------- */

.zatrak-emergency-progress-card {
    margin-bottom: 24px;
    padding: 20px 22px;
}

.zatrak-emergency-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 11px;
}

.zatrak-emergency-progress-top > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zatrak-emergency-progress-top strong {
    color: #17382d;
    font-size: 13px;
    font-weight: 850;
}

.zatrak-emergency-progress-top span {
    padding: 4px 8px;
    border-radius: 999px;
    background: #edf6f1;
    color: #1f6f5b;
    font-size: 10px;
    font-weight: 900;
}

.zatrak-emergency-progress-top > div:last-child {
    color: #75807c;
    font-size: 12px;
    font-weight: 700;
}

.zatrak-emergency-progress {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1ef;
}

.zatrak-emergency-progress-bar {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: #1f6f5b;
    transition: width .25s ease;
}

/* ---------------------------------------------------------
   TABLE
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-payments-table-card {
    padding: 0;
    overflow: hidden;
}

.zatrak-payments-page .zatrak-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #edf0ee;
}

.zatrak-payments-page .zatrak-section-title {
    margin: 0;
    color: #12372a;
    font-size: 18px;
    font-weight: 900;
}

.zatrak-payments-page .zatrak-section-subtitle {
    margin: 6px 0 0;
    color: #76817c;
    font-size: 12px;
}

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

.zatrak-payments-page .zatrak-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
}

.zatrak-payments-page .zatrak-table thead th {
    padding: 13px 16px;
    background: #f7f9f8;
    border-bottom: 1px solid #e6ebe8;
    color: #67726d;
    font-size: 10px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
}

.zatrak-payments-page .zatrak-table tbody td {
    padding: 15px 16px;
    border-bottom: 1px solid #edf1ef;
    color: #25332d;
    font-size: 13px;
    vertical-align: middle;
}

.zatrak-payments-page .zatrak-table tbody tr:last-child td {
    border-bottom: 0;
}

.zatrak-payments-page .zatrak-table tbody tr:hover {
    background: #fbfcfb;
}

/* ---------------------------------------------------------
   MEMBER
   --------------------------------------------------------- */

.zatrak-member-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 230px;
}

.zatrak-member-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dfe7e2;
    border-radius: 50%;
    background: #edf5f1;
    color: #1f6f5b;
    font-size: 14px;
    font-weight: 900;
}

.zatrak-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zatrak-member-name {
    color: #17392d;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.zatrak-member-meta {
    margin-top: 3px;
    color: #7b8581;
    font-size: 11px;
}

/* ---------------------------------------------------------
   STATUS + MONEY
   --------------------------------------------------------- */

.zatrak-money-positive {
    color: #1f6f5b;
}

.zatrak-money-warning {
    color: #9a6b17;
}

.zatrak-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.zatrak-status-badge.is-success {
    background: #e9f6ef;
    color: #1e704d;
}

.zatrak-status-badge.is-warning {
    background: #fff5dd;
    color: #9a6b17;
}

.zatrak-status-badge.is-danger {
    background: #fceced;
    color: #a64242;
}

/* ---------------------------------------------------------
   PAYMENT COUNT
   --------------------------------------------------------- */

.zatrak-payment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: #f0f5f2;
    color: #1f6f5b;
    font-size: 11px;
    font-weight: 900;
}

.zatrak-payment-count-label {
    margin-left: 4px;
    color: #7b8580;
    font-size: 11px;
}

/* ---------------------------------------------------------
   BUTTON
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-btn-sm {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 11px;
    white-space: nowrap;
}

.zatrak-payments-page .zatrak-btn-sm svg {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------
   EMPTY STATES
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-empty-state {
    padding: 55px 24px;
    text-align: center;
}

.zatrak-payments-page .zatrak-empty-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #edf6f1;
    color: #1f6f5b;
}

.zatrak-payments-page .zatrak-empty-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-payments-page .zatrak-empty-state h3 {
    margin: 0;
    color: #12372a;
    font-size: 18px;
    font-weight: 900;
}

.zatrak-payments-page .zatrak-empty-state p {
    max-width: 510px;
    margin: 9px auto 20px;
    color: #75807b;
    font-size: 13px;
    line-height: 1.65;
}

.zatrak-payments-page .zatrak-empty-inline {
    padding: 45px 24px;
    text-align: center;
}

.zatrak-payments-page .zatrak-empty-inline h3 {
    margin: 0 0 7px;
    color: #12372a;
    font-size: 16px;
    font-weight: 900;
}

.zatrak-payments-page .zatrak-empty-inline p {
    margin: 0;
    color: #7a8580;
    font-size: 13px;
}

/* ---------------------------------------------------------
   PAYMENT MODAL
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 27, 20, .52);
    backdrop-filter: blur(3px);
}

.zatrak-payments-page .zatrak-payment-modal {
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}

.zatrak-payments-page .zatrak-payment-modal .zatrak-modal-header {
    padding: 21px 24px;
    border-bottom: 1px solid #edf0ee;
}

.zatrak-payments-page .zatrak-payment-modal .zatrak-modal-body {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding: 24px;
}

.zatrak-payments-page .zatrak-payment-modal .zatrak-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #edf0ee;
    background: #fafcfb;
}

.zatrak-payment-summary-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #e5ece8;
    border-radius: 11px;
    background: #f8fbf9;
}

.zatrak-payment-summary-box > div {
    min-width: 0;
}

.zatrak-payment-summary-box span {
    display: block;
    margin-bottom: 5px;
    color: #7a8580;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.zatrak-payment-summary-box strong {
    display: block;
    color: #12372a;
    font-size: 13px;
    line-height: 1.4;
}

.zatrak-payments-page .zatrak-payment-modal .zatrak-form-grid {
    gap: 22px;
    margin-bottom: 22px;
}

.zatrak-payments-page .zatrak-form-group-spaced {
    margin-top: 2px;
}

/* ---------------------------------------------------------
   MONEY INPUT
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-money-input {
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}

.zatrak-payments-page .zatrak-money-input:focus-within {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, .08);
}

.zatrak-payments-page .zatrak-money-input > span {
    position: static !important;
    width: 100%;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: #f5faf7;
    border-right: 1px solid #e3ebe6;
    color: #1f6f5b;
    font-size: 12px;
    font-weight: 900;
    transform: none !important;
}

.zatrak-payments-page .zatrak-money-input .zatrak-input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   VALIDATION
   --------------------------------------------------------- */

.zatrak-payments-page .zatrak-form-error {
    margin-top: 7px;
    color: #b03a3a;
    font-size: 12px;
    font-weight: 600;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .zatrak-payments-page .zatrak-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .zatrak-payments-page .zatrak-period-info-card,
    .zatrak-emergency-header-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .zatrak-payments-page .zatrak-period-info-right {
        align-items: flex-start;
    }

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

    .zatrak-payment-summary-box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .zatrak-payments-page .zatrak-summary-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-payments-page .zatrak-payments-filter-card,
    .zatrak-period-info-card,
    .zatrak-emergency-header-card {
        padding: 18px;
    }

    .zatrak-payments-page .zatrak-modal-overlay {
        padding: 12px;
    }

    .zatrak-payments-page .zatrak-payment-modal {
        max-height: calc(100vh - 24px);
    }

    .zatrak-payments-page .zatrak-payment-modal .zatrak-modal-body {
        padding: 18px;
        max-height: calc(100vh - 190px);
    }

    .zatrak-payments-page .zatrak-payment-modal .zatrak-modal-footer {
        padding: 14px 18px;
    }

    .zatrak-emergency-progress-top {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================================================
   ZATRAK - MONTHLY CONTRIBUTION REPORT
   Scoped styles for Monthly Report only
   ========================================================= */

.zatrak-monthly-report-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   FILTER CARD
   --------------------------------------------------------- */

.zatrak-monthly-report-page .zatrak-payments-filter-card {
    margin-top: 22px;
    margin-bottom: 20px;
    padding: 20px;
}

.zatrak-monthly-report-page .zatrak-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: end;
}

.zatrak-monthly-report-page .zatrak-form-group {
    min-width: 0;
}

.zatrak-monthly-report-page .zatrak-form-label {
    display: block;
    margin-bottom: 8px;
}

.zatrak-monthly-report-page .zatrak-select,
.zatrak-monthly-report-page .zatrak-input {
    width: 100%;
}

.zatrak-monthly-report-page .zatrak-filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ---------------------------------------------------------
   PERIOD HEADER
   --------------------------------------------------------- */

.zatrak-monthly-report-page .zatrak-period-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 22px 24px;
}

.zatrak-monthly-report-page .zatrak-period-info-title {
    color: #12372a;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

.zatrak-monthly-report-page .zatrak-period-info-subtitle {
    margin-top: 5px;
    color: #7b8790;
    font-size: 13px;
}

.zatrak-monthly-report-page .zatrak-period-info-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 14px;
}

.zatrak-monthly-report-page .zatrak-period-required {
    color: #75827c;
    font-size: 12px;
}

.zatrak-monthly-report-page .zatrak-period-required strong {
    color: #12372a;
    font-size: 14px;
    font-weight: 800;
}

/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.zatrak-monthly-report-page .zatrak-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.zatrak-monthly-report-page .zatrak-summary-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 18px;
    border: 1px solid #e3eae6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(18, 55, 42, .045);
}

.zatrak-monthly-report-page .zatrak-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 11px;
    background: #eef7f3;
    color: #1f6f5b;
    font-size: 17px;
    font-weight: 800;
}

.zatrak-monthly-report-page .zatrak-summary-label {
    display: block;
    margin-bottom: 4px;
    color: #7a8881;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.zatrak-monthly-report-page .zatrak-summary-value {
    display: block;
    color: #12372a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

/* ---------------------------------------------------------
   REPORT TABLE
   --------------------------------------------------------- */

.zatrak-monthly-report-page .zatrak-payments-table-card {
    overflow: hidden;
    padding: 0;
}

.zatrak-monthly-report-page .zatrak-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 21px 24px;
    border-bottom: 1px solid #e9eeeb;
}

.zatrak-monthly-report-page .zatrak-section-title {
    margin: 0;
    color: #12372a;
    font-size: 19px;
    font-weight: 800;
}

.zatrak-monthly-report-page .zatrak-section-subtitle {
    margin: 5px 0 0;
    color: #7b8790;
    font-size: 12px;
}

.zatrak-monthly-report-page .zatrak-table-wrap {
    overflow-x: auto;
}

.zatrak-monthly-report-page .zatrak-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.zatrak-monthly-report-page .zatrak-table th {
    padding: 12px 16px;
    background: #f7f9f8;
    color: #68766f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.zatrak-monthly-report-page .zatrak-table td {
    padding: 15px 16px;
    border-top: 1px solid #edf1ef;
    color: #24332d;
    font-size: 13px;
    vertical-align: middle;
}

.zatrak-monthly-report-page .zatrak-table tbody tr {
    transition: background .15s ease;
}

.zatrak-monthly-report-page .zatrak-table tbody tr:hover {
    background: #fbfcfb;
}

/* ---------------------------------------------------------
   MEMBER
   --------------------------------------------------------- */

.zatrak-monthly-report-page .zatrak-member-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
}

.zatrak-monthly-report-page .zatrak-member-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    overflow: hidden;
    border: 1px solid #dce7e1;
    border-radius: 50%;
    background: #edf5f1;
    color: #1f6f5b;
    font-size: 13px;
    font-weight: 800;
}

.zatrak-monthly-report-page .zatrak-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zatrak-monthly-report-page .zatrak-member-name {
    color: #12372a;
    font-weight: 800;
}

.zatrak-monthly-report-page .zatrak-member-meta {
    margin-top: 3px;
    color: #8a9590;
    font-size: 11px;
}

/* ---------------------------------------------------------
   MONEY / STATUS
   --------------------------------------------------------- */

.zatrak-monthly-report-page .zatrak-money-positive {
    color: #1f6f5b;
}

.zatrak-monthly-report-page .zatrak-money-warning {
    color: #b56a00;
}

.zatrak-monthly-report-page .zatrak-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.zatrak-monthly-report-page .zatrak-status-badge.is-success {
    background: #e8f6ef;
    color: #157347;
}

.zatrak-monthly-report-page .zatrak-status-badge.is-warning {
    background: #fff3d8;
    color: #a66700;
}

.zatrak-monthly-report-page .zatrak-status-badge.is-danger {
    background: #fdebec;
    color: #b4232f;
}

.zatrak-monthly-report-page .zatrak-payment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: #eef5f1;
    color: #12372a;
    font-weight: 800;
}

.zatrak-monthly-report-page .zatrak-payment-count-label {
    margin-left: 5px;
    color: #7f8a85;
    font-size: 11px;
}

/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.zatrak-monthly-report-page .zatrak-empty-state {
    margin-top: 20px;
    padding: 50px 24px;
    text-align: center;
}

.zatrak-monthly-report-page .zatrak-empty-state h3 {
    margin: 14px 0 6px;
    color: #12372a;
}

.zatrak-monthly-report-page .zatrak-empty-state p {
    margin: 0;
    color: #7d8984;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .zatrak-monthly-report-page .zatrak-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zatrak-monthly-report-page .zatrak-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zatrak-monthly-report-page .zatrak-form-grid .zatrak-form-group:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 800px) {

    .zatrak-monthly-report-page .zatrak-period-info-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-monthly-report-page .zatrak-period-info-right {
        width: 100%;
        justify-content: flex-start;
    }

    .zatrak-monthly-report-page .zatrak-form-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-monthly-report-page .zatrak-form-grid .zatrak-form-group:last-child {
        grid-column: auto;
    }
}

@media (max-width: 600px) {

    .zatrak-monthly-report-page .zatrak-summary-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-monthly-report-page .zatrak-period-info-card,
    .zatrak-monthly-report-page .zatrak-section-header {
        padding: 18px;
    }

    .zatrak-monthly-report-page .zatrak-period-info-title {
        font-size: 19px;
    }

    .zatrak-monthly-report-page .zatrak-summary-card {
        padding: 16px;
    }
}

/* ============================================================
   ZATRAK - EMERGENCY CONTRIBUTION REPORT
   ============================================================ */

.zatrak-emergency-report-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.zatrak-emergency-report-page *,
.zatrak-emergency-report-page *::before,
.zatrak-emergency-report-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   FILTER CARD
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-emergency-report-filter-card {
    margin-top: 22px;
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}

.zatrak-emergency-report-page
.zatrak-emergency-report-filter-card
.zatrak-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: end;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-filter-card
.zatrak-form-group {
    min-width: 0;
    margin: 0;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-filter-actions {
    margin-top: 16px;
}


/* ============================================================
   FUND HEADER
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-emergency-report-heading {
    margin-top: 20px;
    margin-bottom: 22px;
    padding: 22px 24px;

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

    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;

    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}

.zatrak-emergency-report-page
.zatrak-emergency-report-heading-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 15px;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;

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

    border-radius: 12px;

    background: #fff7ed;
    color: #c2410c;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-label {
    margin-bottom: 5px;

    color: #667085;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-title {
    margin: 0;

    color: #12372a;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-description {
    margin: 7px 0 0;

    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}


/* ============================================================
   SUMMARY
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-summary-grid {
    display: grid;

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

    gap: 16px;

    margin-bottom: 22px;
}

.zatrak-emergency-report-page
.zatrak-summary-card {
    min-width: 0;
    min-height: 118px;

    padding: 18px;

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

    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;

    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.035);

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

.zatrak-emergency-report-page
.zatrak-summary-card:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 16px rgba(16, 24, 40, 0.07);
}

.zatrak-emergency-report-page
.zatrak-summary-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

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

    border-radius: 11px;

    background: #f2f8f5;
    color: #1f6f5b;
}

.zatrak-emergency-report-page
.zatrak-summary-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-emergency-report-page
.zatrak-summary-label {
    display: block;
    margin-bottom: 6px;

    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.zatrak-emergency-report-page
.zatrak-summary-value {
    display: block;

    color: #12372a;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;

    word-break: break-word;
}

.zatrak-emergency-report-page
.zatrak-money-positive {
    color: #16805c;
}

.zatrak-emergency-report-page
.zatrak-money-warning {
    color: #b54708;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-emergency-report-progress-card {
    margin-bottom: 22px;
    padding: 20px 22px;

    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;

    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.035);
}

.zatrak-emergency-report-page
.zatrak-emergency-report-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 12px;

    color: #475467;
    font-size: 13px;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-progress-head > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-progress-head strong {
    color: #12372a;
    font-size: 14px;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-progress-head span {
    padding: 4px 8px;

    border-radius: 999px;

    background: #ecfdf3;
    color: #027a48;

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

.zatrak-emergency-report-page
.zatrak-emergency-report-progress {
    width: 100%;
    height: 11px;

    overflow: hidden;

    border-radius: 999px;

    background: #edf2ef;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-progress-bar {
    height: 100%;

    border-radius: inherit;

    background: #1f6f5b;

    transition: width 0.25s ease;
}


/* ============================================================
   NO TARGET NOTE
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-emergency-report-note {
    margin-bottom: 22px;
    padding: 16px 18px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    border: 1px solid #e1ebe5;
    border-radius: 12px;

    background: #f7fbf9;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-note strong {
    color: #12372a;
    font-size: 13px;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-note span {
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}


/* ============================================================
   TABLE CARD
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-emergency-report-table-card {
    margin-top: 0;
    margin-bottom: 22px;
    padding: 0;

    overflow: hidden;

    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;

    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.035);
}

.zatrak-emergency-report-page
.zatrak-emergency-report-table-card
.zatrak-section-header {
    padding: 20px 22px;

    border-bottom: 1px solid #eaecf0;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-table-card
.zatrak-section-title {
    margin: 0;

    color: #12372a;
    font-size: 17px;
    font-weight: 700;
}

.zatrak-emergency-report-page
.zatrak-emergency-report-table-card
.zatrak-section-subtitle {
    margin: 5px 0 0;

    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}


/* ============================================================
   TABLE
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.zatrak-emergency-report-page
.zatrak-table {
    width: 100%;
    min-width: 850px;

    border-collapse: separate;
    border-spacing: 0;
}

.zatrak-emergency-report-page
.zatrak-table thead th {
    padding: 13px 18px;

    border-bottom: 1px solid #eaecf0;

    background: #f8faf9;

    color: #475467;

    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.035em;

    white-space: nowrap;
}

.zatrak-emergency-report-page
.zatrak-table tbody td {
    padding: 16px 18px;

    border-bottom: 1px solid #f0f2f1;

    color: #344054;

    font-size: 13px;

    vertical-align: middle;
}

.zatrak-emergency-report-page
.zatrak-table tbody tr:last-child td {
    border-bottom: 0;
}

.zatrak-emergency-report-page
.zatrak-table tbody tr:hover {
    background: #fbfdfc;
}


/* ============================================================
   MEMBER
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-member-cell {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 240px;
}

.zatrak-emergency-report-page
.zatrak-member-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

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

    overflow: hidden;

    border-radius: 50%;

    background: #e9f3ee;

    color: #1f6f5b;

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

.zatrak-emergency-report-page
.zatrak-member-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.zatrak-emergency-report-page
.zatrak-member-name {
    color: #101828;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.zatrak-emergency-report-page
.zatrak-member-meta {
    margin-top: 3px;

    color: #98a2b3;

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


/* ============================================================
   MONEY / PAYMENT COUNT
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-payment-count {
    display: inline-block;

    min-width: 24px;
    padding: 4px 7px;

    border-radius: 7px;

    background: #f2f4f7;
    color: #344054;

    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.zatrak-emergency-report-page
.zatrak-payment-count-label {
    margin-left: 5px;

    color: #667085;
    font-size: 11px;
}


/* ============================================================
   STATUS
   ============================================================ */

.zatrak-emergency-report-page
.zatrak-status-badge {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.zatrak-emergency-report-page
.zatrak-status-badge.is-success {
    background: #ecfdf3;
    color: #027a48;
}

.zatrak-emergency-report-page
.zatrak-status-badge.is-danger {
    background: #fef3f2;
    color: #b42318;
}


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

.zatrak-emergency-report-page
.zatrak-empty-inline {
    padding: 50px 24px;

    text-align: center;
}

.zatrak-emergency-report-page
.zatrak-empty-inline h3 {
    margin: 0 0 7px;

    color: #12372a;
    font-size: 17px;
}

.zatrak-emergency-report-page
.zatrak-empty-inline p {
    margin: 0;

    color: #667085;
    font-size: 13px;
}


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

@media (max-width: 1100px) {

    .zatrak-emergency-report-page
    .zatrak-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .zatrak-emergency-report-page
    .zatrak-emergency-report-filter-card
    .zatrak-form-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-emergency-report-page
    .zatrak-emergency-report-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-emergency-report-page
    .zatrak-period-status {
        align-self: flex-start;
    }

    .zatrak-emergency-report-page
    .zatrak-emergency-report-progress-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}


@media (max-width: 600px) {

    .zatrak-emergency-report-page
    .zatrak-summary-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-emergency-report-page
    .zatrak-emergency-report-filter-card {
        padding: 16px;
    }

    .zatrak-emergency-report-page
    .zatrak-emergency-report-heading {
        padding: 18px;
    }

    .zatrak-emergency-report-page
    .zatrak-emergency-report-title {
        font-size: 18px;
    }

    .zatrak-emergency-report-page
    .zatrak-summary-card {
        min-height: 105px;
        padding: 16px;
    }

    .zatrak-emergency-report-page
    .zatrak-summary-value {
        font-size: 18px;
    }

    .zatrak-emergency-report-page
    .zatrak-emergency-report-progress-card {
        padding: 17px;
    }

    .zatrak-emergency-report-page
    .zatrak-emergency-report-table-card
    .zatrak-section-header {
        padding: 17px;
    }
}

/* ============================================================
   ZATRAK - FUND TRANSACTIONS
   ALIGNED WITH CONTRIBUTIONS MODULE
   ============================================================ */

.zatrak-fund-transactions-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


/* ------------------------------------------------------------
   PAGE HEADER
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page .zatrak-page-header {
    margin-bottom: 20px;
}

.zatrak-fund-transactions-page .zatrak-page-title {
    margin: 0;
}

.zatrak-fund-transactions-page .zatrak-page-subtitle {
    margin-top: 5px;
}


/* ------------------------------------------------------------
   FILTERS
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-fund-transactions-filter-grid {
    width: 100%;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 16px;
    align-items: end;
}

.zatrak-fund-transactions-page
.zatrak-fund-transactions-filter-grid
.zatrak-form-group {
    min-width: 0;
    margin: 0;
}

.zatrak-fund-transactions-page
.zatrak-fund-transactions-filter-grid
.zatrak-form-label {
    display: block;
    margin-bottom: 7px;
}


/* ------------------------------------------------------------
   SELECTED FUND
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-fund-transactions-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 22px 24px;
    margin-bottom: 18px;

    border: 1px solid #e5ebe7;
    border-radius: 16px;
    background: #fff;

    box-shadow: 0 5px 20px rgba(18, 55, 42, .045);
}

.zatrak-fund-transactions-page
.zatrak-fund-transactions-heading > div {
    min-width: 0;
}

.zatrak-fund-transactions-page
.zatrak-fund-transactions-label {
    margin-bottom: 5px;

    color: #1f6f5b;
    font-size: 10px;
    font-weight: 800;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.zatrak-fund-transactions-page
.zatrak-fund-transactions-title {
    margin: 0;

    color: #12372a;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.zatrak-fund-transactions-page
.zatrak-fund-transactions-subtitle {
    margin: 5px 0 0;

    color: #7b8790;
    font-size: 13px;
}


/* ------------------------------------------------------------
   SUMMARY
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.zatrak-fund-transactions-page
.zatrak-summary-card {
    min-width: 0;

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

    padding: 17px;

    background: #fff;
    border: 1px solid #e8ece9;
    border-radius: 14px;

    box-shadow: 0 4px 15px rgba(18, 55, 42, .04);
}

.zatrak-fund-transactions-page
.zatrak-summary-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;

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

    border-radius: 11px;

    background: #edf6f1;
    color: #1f6f5b;

    overflow: hidden;
}

.zatrak-fund-transactions-page
.zatrak-summary-icon svg {
    width: 21px !important;
    height: 21px !important;

    max-width: 21px !important;
    max-height: 21px !important;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-fund-transactions-page
.zatrak-money-positive {
    color: #17633f !important;
}

.zatrak-fund-transactions-page
.zatrak-money-negative {
    color: #a13e3e !important;
}


/* ------------------------------------------------------------
   EXPENSE TABLE
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-fund-transactions-table-card {
    overflow: hidden;
}

.zatrak-fund-transactions-page
.zatrak-section-header {
    padding: 18px 20px;
}

.zatrak-fund-transactions-page
.zatrak-section-title {
    margin: 0;
    color: #12372a;
    font-size: 14px;
    font-weight: 800;
}

.zatrak-fund-transactions-page
.zatrak-section-subtitle {
    margin-top: 4px;
    color: #7b8790;
    font-size: 11px;
}

.zatrak-fund-transactions-page
.zatrak-fund-transactions-count {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}


/* ------------------------------------------------------------
   CATEGORY
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-category {
    display: inline-flex;
    align-items: center;

    min-height: 25px;
    padding: 4px 9px;

    border-radius: 7px;

    background: #edf6f1;
    color: #1f6f5b;

    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   DESCRIPTION
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-description {
    min-width: 170px;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zatrak-fund-transactions-page
.zatrak-transaction-description strong {
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}

.zatrak-fund-transactions-page
.zatrak-transaction-description span {
    color: #98a2b3;
    font-size: 10px;
    line-height: 1.4;
}


/* ------------------------------------------------------------
   MODAL
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide {
    width: min(760px, calc(100vw - 40px));
    max-width: 760px;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-modal-body {
    padding: 24px 26px 28px !important;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-form {
    width: 100%;
    display: block;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-form-group {
    width: 100%;
    min-width: 0;
    margin-bottom: 20px;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-form-grid,
.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-form-grid-2 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-form-grid > .zatrak-form-group,
.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-form-grid-2 > .zatrak-form-group {
    min-width: 0 !important;
    margin-bottom: 20px !important;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-form-label {
    display: block !important;
    margin: 0 0 7px !important;

    color: #344054;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-input,
.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-select,
.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-input,
.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-select {
    height: 44px !important;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-textarea {
    min-height: 105px;
    padding: 11px 13px;
    resize: vertical;
}


/* ------------------------------------------------------------
   MONEY INPUT
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-money-input {
    position: relative;
    width: 100%;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-money-input > span {
    position: absolute;
    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    color: #1f6f5b;
    font-size: 11px;
    font-weight: 900;

    pointer-events: none;
}

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-money-input input {
    padding-left: 48px !important;
}


/* ------------------------------------------------------------
   MODAL FOOTER
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-contribution-modal-wide
.zatrak-modal-footer {
    flex-shrink: 0;
    padding: 16px 26px !important;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .zatrak-fund-transactions-page
    .zatrak-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zatrak-fund-transactions-page
    .zatrak-fund-transactions-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-width: 700px) {

    .zatrak-fund-transactions-page
    .zatrak-fund-transactions-filter-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-fund-transactions-page
    .zatrak-summary-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-fund-transactions-page
    .zatrak-contribution-modal-wide {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

    .zatrak-fund-transactions-page
    .zatrak-contribution-modal-wide
    .zatrak-form-grid,
    .zatrak-fund-transactions-page
    .zatrak-contribution-modal-wide
    .zatrak-form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .zatrak-fund-transactions-page
    .zatrak-contribution-modal-wide
    .zatrak-modal-body {
        padding: 20px 17px 22px !important;
    }

    .zatrak-fund-transactions-page
    .zatrak-contribution-modal-wide
    .zatrak-modal-footer {
        padding: 14px 17px !important;
    }
}


/* ============================================================
   FUND TRANSACTIONS - FINAL TABLE LAYOUT
   ============================================================ */

.zatrak-fund-transactions-page
.zatrak-fund-transactions-table-card {
    width: 100%;
    overflow: hidden;
}


/* ------------------------------------------------------------
   TABLE SECTION HEADER
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-fund-transactions-table-card
.zatrak-section-header {
    width: 100%;
    min-height: 76px;

    padding: 18px 20px;

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

    gap: 20px;

    border-bottom: 1px solid #eaecf0;
}

.zatrak-fund-transactions-page
.zatrak-section-header > div:first-child {
    min-width: 0;
}

.zatrak-fund-transactions-page
.zatrak-section-title {
    margin: 0;
    color: #12372a;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.zatrak-fund-transactions-page
.zatrak-section-subtitle {
    margin: 5px 0 0;
    color: #7b8790;
    font-size: 11px;
    line-height: 1.5;
}

.zatrak-fund-transactions-page
.zatrak-fund-transactions-count {
    flex: 0 0 auto;

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

    min-height: 28px;
    padding: 5px 10px;

    border-radius: 999px;

    background: #f2f4f7;
    color: #475467;

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   TABLE WRAPPER
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


/* ------------------------------------------------------------
   TABLE
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-table {
    width: 100%;
    min-width: 1450px;

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

.zatrak-fund-transactions-page
.zatrak-table th {
    padding: 14px 14px;

    background: #f8faf9;

    border-bottom: 1px solid #eaecf0;

    color: #475467;

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

    text-align: left;
    text-transform: uppercase;
    letter-spacing: .04em;

    white-space: nowrap;
}

.zatrak-fund-transactions-page
.zatrak-table td {
    padding: 16px 14px;

    border-bottom: 1px solid #f0f2f1;

    color: #344054;

    font-size: 12px;

    vertical-align: middle;
}

.zatrak-fund-transactions-page
.zatrak-table tbody tr:last-child td {
    border-bottom: 0;
}

.zatrak-fund-transactions-page
.zatrak-table tbody tr:hover {
    background: #fafcfb;
}


/* ------------------------------------------------------------
   COLUMN WIDTHS
   ------------------------------------------------------------ */

/* Date */
.zatrak-fund-transactions-page
.zatrak-table th:nth-child(1),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(1) {
    width: 125px;
}


/* Category */
.zatrak-fund-transactions-page
.zatrak-table th:nth-child(2),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(2) {
    width: 165px;
}


/* Description */
.zatrak-fund-transactions-page
.zatrak-table th:nth-child(3),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(3) {
    width: 240px;
}


/* Payee */
.zatrak-fund-transactions-page
.zatrak-table th:nth-child(4),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(4) {
    width: 155px;
}


/* Amount */
.zatrak-fund-transactions-page
.zatrak-table th:nth-child(5),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(5) {
    width: 130px;
}


/* Reference */
.zatrak-fund-transactions-page
.zatrak-table th:nth-child(6),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(6) {
    width: 190px;
}


/* Recorded By */
.zatrak-fund-transactions-page
.zatrak-table th:nth-child(7),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(7) {
    width: 150px;
}


/* Status */
.zatrak-fund-transactions-page
.zatrak-table th:nth-child(8),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(8) {
    width: 110px;
}


/* Action */
.zatrak-fund-transactions-page
.zatrak-table th:nth-child(9),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(9) {
    width: 195px;
}


/* ------------------------------------------------------------
   DATE
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-date {
    display: block;

    color: #475467;

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

    white-space: nowrap;
}


/* ------------------------------------------------------------
   CATEGORY
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 26px;
    padding: 5px 9px;

    border-radius: 7px;

    background: #edf6f1;
    color: #1f6f5b;

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

    white-space: nowrap;
}


/* ------------------------------------------------------------
   DESCRIPTION
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-description {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zatrak-fund-transactions-page
.zatrak-transaction-description strong {
    display: block;

    color: #344054;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.zatrak-fund-transactions-page
.zatrak-transaction-description span {
    display: block;

    color: #98a2b3;

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

    overflow-wrap: anywhere;
}


/* ------------------------------------------------------------
   PAYEE / REFERENCE / RECORDED BY
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-table td:nth-child(4),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(6),
.zatrak-fund-transactions-page
.zatrak-table td:nth-child(7) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   AMOUNT
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-amount {
    display: block;

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

    white-space: nowrap;
}


/* ------------------------------------------------------------
   STATUS
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 74px;
    min-height: 27px;
    padding: 5px 10px;

    border-radius: 999px;

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

    white-space: nowrap;
}

.zatrak-fund-transactions-page
.zatrak-status-badge.is-success {
    background: #eaf7ef;
    color: #17633f;
}

.zatrak-fund-transactions-page
.zatrak-status-badge.is-warning {
    background: #fff7df;
    color: #9a720d;
}


/* ------------------------------------------------------------
   ACTIONS
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-row-actions {
    width: 100%;

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

    gap: 7px;

    flex-wrap: nowrap;
}

.zatrak-fund-transactions-page
.zatrak-row-actions .zatrak-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.zatrak-fund-transactions-page
.zatrak-action-complete {
    color: #98a2b3;
    font-size: 13px;
}


/* ------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: 14px 18px;

    border-top: 1px solid #eaecf0;

    background: #fff;
}


/* ------------------------------------------------------------
   MOBILE / SMALL SCREEN
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .zatrak-fund-transactions-page
    .zatrak-section-header {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .zatrak-fund-transactions-page
    .zatrak-fund-transactions-count {
        align-self: flex-start;
    }

}


@media (max-width: 700px) {

    .zatrak-fund-transactions-page
    .zatrak-table {
        min-width: 1450px;
    }

    .zatrak-fund-transactions-page
    .zatrak-row-actions {
        flex-wrap: nowrap;
    }

    .zatrak-fund-transactions-page
    .zatrak-pagination {
        justify-content: center;
    }

}

/* ============================================================
   FUND TRANSACTIONS - VIEW TRANSACTION MODAL
   FINAL LAYOUT
   ============================================================ */

.zatrak-fund-transactions-page .zatrak-fund-transaction-view-modal {
    width: min(820px, calc(100vw - 32px));
    max-width: 820px;
    max-height: calc(100vh - 40px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;
    border-radius: 16px;
}


/* ------------------------------------------------------------
   MODAL HEADER
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-fund-transaction-view-modal
.zatrak-modal-header {
    min-height: 72px;

    padding: 18px 24px;

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

    gap: 20px;

    border-bottom: 1px solid #eaecf0;
}


.zatrak-fund-transactions-page
.zatrak-fund-transaction-view-modal
.zatrak-modal-title {
    color: #12372a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}


.zatrak-fund-transactions-page
.zatrak-fund-transaction-view-modal
.zatrak-modal-subtitle {
    margin-top: 4px;

    color: #98a2b3;

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


/* CLOSE BUTTON */

.zatrak-fund-transactions-page
.zatrak-fund-transaction-view-modal
.zatrak-modal-close {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    padding: 0;

    border: 1px solid #e4e7ec;
    border-radius: 9px;

    background: #ffffff;
    color: #667085;

    cursor: pointer;
}

.zatrak-fund-transactions-page
.zatrak-fund-transaction-view-modal
.zatrak-modal-close:hover {
    background: #f8fafc;
    color: #12372a;
}

.zatrak-fund-transactions-page
.zatrak-fund-transaction-view-modal
.zatrak-modal-close svg {
    width: 17px !important;
    height: 17px !important;

    display: block;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* ------------------------------------------------------------
   MODAL BODY
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-fund-transaction-view-modal
.zatrak-modal-body {
    padding: 22px 24px 26px !important;

    overflow-y: auto;

    flex: 1 1 auto;
}


/* ------------------------------------------------------------
   SUMMARY
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-view-summary {
    width: 100%;

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

    gap: 20px;

    padding: 17px 18px;
    margin-bottom: 18px;

    border: 1px solid #dcebe4;
    border-radius: 13px;

    background: #f8fcfa;
}


.zatrak-fund-transactions-page
.zatrak-transaction-view-label {
    display: block;

    margin-bottom: 5px;

    color: #78857e;

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

    letter-spacing: .05em;
    text-transform: uppercase;
}


.zatrak-fund-transactions-page
.zatrak-transaction-view-amount {
    display: block;

    color: #1f6f5b;

    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}


/* ------------------------------------------------------------
   DETAILS GRID
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-details-grid {
    width: 100%;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;

    margin: 0 !important;
}


/* ------------------------------------------------------------
   DETAIL ITEM
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-detail {
    min-width: 0;

    display: block !important;

    padding: 13px 14px;

    border: 1px solid #eaecf0;
    border-radius: 11px;

    background: #fafcfb;
}


.zatrak-fund-transactions-page
.zatrak-transaction-detail span {
    display: block !important;

    margin: 0 0 6px !important;

    color: #667085;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: .035em;
}


.zatrak-fund-transactions-page
.zatrak-transaction-detail strong {
    display: block !important;

    margin: 0 !important;

    color: #344054;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.45;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ------------------------------------------------------------
   NOTES
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-transaction-notes-box {
    width: 100%;

    margin-top: 14px;

    padding: 14px 15px;

    border: 1px solid #e5eee9;
    border-radius: 11px;

    background: #f8fcfa;
}


.zatrak-fund-transactions-page
.zatrak-transaction-notes-box > span {
    display: block;

    margin-bottom: 7px;

    color: #667085;

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

    text-transform: uppercase;
    letter-spacing: .035em;
}


.zatrak-fund-transactions-page
.zatrak-transaction-notes-box p {
    margin: 0;

    color: #475467;

    font-size: 12px;

    line-height: 1.7;

    white-space: pre-line;
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------------
   MODAL FOOTER
   ------------------------------------------------------------ */

.zatrak-fund-transactions-page
.zatrak-fund-transaction-view-modal
.zatrak-modal-footer {
    min-height: 70px;

    flex: 0 0 auto;

    padding: 14px 24px;

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

    border-top: 1px solid #eaecf0;

    background: #ffffff;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 700px) {

    .zatrak-fund-transactions-page
    .zatrak-fund-transaction-view-modal {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .zatrak-fund-transactions-page
    .zatrak-fund-transaction-view-modal
    .zatrak-modal-header {
        padding: 16px 17px;
    }

    .zatrak-fund-transactions-page
    .zatrak-fund-transaction-view-modal
    .zatrak-modal-body {
        padding: 18px 17px 22px !important;
    }

    .zatrak-fund-transactions-page
    .zatrak-transaction-view-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-fund-transactions-page
    .zatrak-transaction-details-grid {
        grid-template-columns: 1fr !important;
    }

    .zatrak-fund-transactions-page
    .zatrak-fund-transaction-view-modal
    .zatrak-modal-footer {
        padding: 13px 17px;
    }
}

/* ============================================================
   FUND TRANSACTIONS - AUDIT DETAILS
   ============================================================ */

.zatrak-fund-transactions-page .zatrak-transaction-detail {
    min-height: 72px;
}

.zatrak-fund-transactions-page .zatrak-transaction-detail strong {
    overflow-wrap: anywhere;
}

.zatrak-fund-transactions-page .zatrak-status-badge.is-success {
    background: #eaf7ef;
    color: #17633f;
}

.zatrak-fund-transactions-page .zatrak-status-badge.is-warning {
    background: #fff7df;
    color: #9a720d;
}

.zatrak-fund-transactions-page .zatrak-status-badge.is-danger {
    background: #fff1f1;
    color: #a13e3e;
}


/* =========================================================
   CREATE LOGIN ACCOUNT MODAL - FINAL UI
   Scoped only to account modal
========================================================= */

.zatrak-account-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

    background: rgba(8, 24, 38, 0.58);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* ---------------------------------------------------------
   MODAL
--------------------------------------------------------- */

.zatrak-account-modal {
    width: 100%;
    max-width: 540px;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22),
        0 8px 25px rgba(0, 0, 0, 0.10);

    animation: zatrakAccountModalIn .18s ease-out;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.zatrak-account-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 26px;

    background: #ffffff;

    border-bottom: 1px solid #eaecf0;
}


.zatrak-account-modal-title {
    margin: 0;

    color: #12372a;

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

    line-height: 1.35;
}


.zatrak-account-modal-subtitle {
    margin-top: 5px;

    color: #667085;

    font-size: 12px;

    line-height: 1.5;
}


.zatrak-account-modal-subtitle strong {
    color: #1f6f5b;
}


/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

.zatrak-account-modal-close {
    width: 36px;
    height: 36px;

    min-width: 36px;

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

    border: 1px solid #e4e7ec;

    border-radius: 10px;

    background: #ffffff;

    color: #667085;

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

    cursor: pointer;

    transition: all .2s ease;
}


.zatrak-account-modal-close:hover {
    background: #f2f5f3;

    color: #12372a;

    border-color: #cbd5cf;
}


/* ---------------------------------------------------------
   BODY
--------------------------------------------------------- */

/*
 * Important:
 * Override the general Zatrak modal body.
 */

.zatrak-account-modal-body {
    padding: 24px 26px 22px !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    overflow: visible !important;

    background: #ffffff;
}


/* ---------------------------------------------------------
   FORM GROUP
--------------------------------------------------------- */

.zatrak-account-form-group {
    margin: 0 0 18px !important;
}


.zatrak-account-form-group:last-child {
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   LABEL
--------------------------------------------------------- */

.zatrak-account-label {
    display: block;

    margin: 0 0 7px !important;

    color: #344054;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.4;
}


.zatrak-account-label span {
    color: #dc2626;

    margin-left: 2px;
}


/* ---------------------------------------------------------
   INPUT
--------------------------------------------------------- */

.zatrak-account-input {
    display: block;

    width: 100%;

    height: 46px;

    padding: 0 13px;

    box-sizing: border-box;

    border: 1px solid #d0d5dd;

    border-radius: 10px;

    background: #ffffff;

    color: #101828;

    font-size: 14px;

    line-height: 46px;

    outline: none;

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


.zatrak-account-input::placeholder {
    color: #98a2b3;
}


.zatrak-account-input:hover {
    border-color: #98a2b3;
}


.zatrak-account-input:focus {
    border-color: #1f6f5b;

    box-shadow:
        0 0 0 3px rgba(31, 111, 91, 0.11);
}


/* ---------------------------------------------------------
   ERROR
--------------------------------------------------------- */

.zatrak-account-error {
    margin-top: 6px;

    color: #dc2626;

    font-size: 12px;

    line-height: 1.4;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.zatrak-account-modal-footer {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    padding: 16px 26px;

    background: #fafbfb;

    border-top: 1px solid #eaecf0;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.zatrak-account-btn-secondary,
.zatrak-account-btn-primary {
    height: 44px;

    padding: 0 20px;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: all .2s ease;
}


/* Cancel */

.zatrak-account-btn-secondary {
    border: 1px solid #d0d5dd;

    background: #ffffff;

    color: #344054;
}


.zatrak-account-btn-secondary:hover {
    background: #f8faf9;

    border-color: #b8c1bc;
}


/* Create */

.zatrak-account-btn-primary {
    min-width: 145px;

    border: 1px solid #1f6f5b;

    background: #1f6f5b;

    color: #ffffff;

    box-shadow: 0 3px 8px rgba(31, 111, 91, 0.18);
}


.zatrak-account-btn-primary:hover {
    background: #185847;

    border-color: #185847;

    transform: translateY(-1px);

    box-shadow: 0 5px 12px rgba(31, 111, 91, 0.22);
}


.zatrak-account-btn-primary:disabled,
.zatrak-account-btn-secondary:disabled {
    opacity: .6;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ---------------------------------------------------------
   ANIMATION
--------------------------------------------------------- */

@keyframes zatrakAccountModalIn {

    from {
        opacity: 0;

        transform: translateY(8px) scale(.985);
    }

    to {
        opacity: 1;

        transform: translateY(0) scale(1);
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

    .zatrak-account-modal-overlay {
        padding: 12px;
    }


    .zatrak-account-modal {
        max-width: 100%;

        border-radius: 15px;
    }


    .zatrak-account-modal-header {
        padding: 18px;
    }


    .zatrak-account-modal-body {
        padding: 20px 18px !important;
    }


    .zatrak-account-modal-footer {
        padding: 15px 18px;

        flex-direction: column-reverse;

        align-items: stretch;
    }


    .zatrak-account-btn-primary,
    .zatrak-account-btn-secondary {
        width: 100%;
    }

}

/* =========================================================
   FAMILY MEMBER PROFILE
========================================================= */

.zatrak-profile-status-box {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #fafcfb;

    color: #667085;

    font-size: 13px;
}


.zatrak-profile-status-badge {
    display: inline-flex;
    align-items: center;

    padding: 6px 11px;

    border-radius: 999px;

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

    white-space: nowrap;
}


.zatrak-profile-status-badge.alive {
    background: #dcfce7;
    color: #166534;
}


.zatrak-profile-status-badge.deceased {
    background: #f3f4f6;
    color: #4b5563;
}


.zatrak-profile-side-divider {
    height: 1px;

    margin: 20px 0;

    background: #e5e7eb;
}


.zatrak-profile-side-item {
    display: flex;

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

    gap: 15px;

    padding: 10px 0;

    font-size: 13px;
}


.zatrak-profile-side-item span {
    color: #667085;
}


.zatrak-profile-side-item strong {
    color: #12372a;
    font-weight: 700;
}


@media (max-width: 768px) {

    .zatrak-profile-status-box {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   PROFILE PHOTO
========================================================= */

.zatrak-profile-photo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}


.zatrak-profile-photo,
.zatrak-profile-avatar {
    width: 96px;
    height: 96px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #ffffff;

    box-shadow:
        0 0 0 1px #dce3df,
        0 6px 18px rgba(18, 55, 42, 0.12);
}


.zatrak-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #eaf5f0;

    color: #1f6f5b;

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


.zatrak-profile-photo-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


.zatrak-profile-photo-upload {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 7px 11px;

    border: 1px solid #d0d5dd;
    border-radius: 8px;

    background: #ffffff;

    color: #344054;

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

    cursor: pointer;

    transition: all .2s ease;
}


.zatrak-profile-photo-upload:hover {
    background: #f4f7f5;
    border-color: #1f6f5b;
    color: #12372a;
}


.zatrak-profile-photo-remove {
    padding: 7px 11px;

    border: 1px solid #fecaca;
    border-radius: 8px;

    background: #fff;

    color: #dc2626;

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

    cursor: pointer;

    transition: all .2s ease;
}


.zatrak-profile-photo-remove:hover {
    background: #fef2f2;
    border-color: #ef4444;
}


.zatrak-profile-photo-loading {
    color: #1f6f5b;

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


.zatrak-profile-header-info {
    flex: 1;
}


.zatrak-profile-header-info h2 {
    margin: 0 0 5px;
}


.zatrak-profile-header-info p {
    margin: 0 0 10px;

    color: #667085;

    font-size: 13px;
}


@media (max-width: 600px) {

    .zatrak-profile-card-header {
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    .zatrak-profile-header-info {
        width: 100%;
    }

}

/* =========================================================
   USER PROFILE AVATARS
========================================================= */

.zatrak-topbar-avatar,
.zatrak-user-avatar {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zatrak-topbar-avatar img,
.zatrak-user-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

/* =========================================================
   FIX USER MENU OVERFLOW
========================================================= */

.zatrak-sidebar-user {
    position: relative;
    overflow: visible !important;
}

.zatrak-user-menu {
    box-sizing: border-box !important;
    height: auto !important;
    max-height: 260px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.zatrak-user-menu.show {
    display: block !important;
}

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

.zatrak-users-page {
    padding: 4px 0 30px;
}

.zatrak-users-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.zatrak-users-kicker {
    margin-bottom: 6px;
    color: #1f6f5b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.zatrak-users-title {
    margin: 0;
    color: #12372a;
    font-size: 25px;
    font-weight: 850;
    letter-spacing: -.02em;
}

.zatrak-users-subtitle {
    margin: 7px 0 0;
    color: #8a95a3;
    font-size: 12px;
    line-height: 1.6;
}

/* Search */

.zatrak-users-search-card {
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid #e8ecef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(18,55,42,.05);
}

.zatrak-users-search-label {
    display: block;
    margin-bottom: 7px;
    color: #52606d;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-users-search {
    position: relative;
    max-width: 520px;
}

.zatrak-users-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a95a3;
    pointer-events: none;
}

.zatrak-users-search input {
    width: 100%;
    height: 43px;
    padding: 0 14px 0 40px;
    border: 1px solid #dfe5e8;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #12372a;
    font-size: 12px;
    transition: .2s ease;
}

.zatrak-users-search input:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31,111,91,.09);
}

/* Table Card */

.zatrak-users-table-card {
    overflow: hidden;
    border: 1px solid #e8ecef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(18,55,42,.05);
}

.zatrak-users-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf0f2;
}

.zatrak-users-table-title {
    margin: 0;
    color: #12372a;
    font-size: 15px;
    font-weight: 850;
}

.zatrak-users-table-description {
    margin: 4px 0 0;
    color: #8a95a3;
    font-size: 10px;
}

.zatrak-users-count {
    padding: 7px 12px;
    border-radius: 20px;
    background: #eef6f2;
    color: #1f6f5b;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

/* Table */

.zatrak-users-table-wrapper {
    overflow-x: auto;
}

.zatrak-users-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.zatrak-users-table th {
    padding: 12px 14px;
    border-bottom: 1px solid #e8ecef;
    background: #fafbfb;
    color: #7b8794;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
}

.zatrak-users-table td {
    padding: 14px;
    border-bottom: 1px solid #f0f2f4;
    color: #52606d;
    font-size: 12px;
    vertical-align: middle;
}

.zatrak-users-table tbody tr {
    transition: background .18s ease;
}

.zatrak-users-table tbody tr:hover {
    background: #fbfdfc;
}

.zatrak-user-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
}

.zatrak-user-photo {
    width: 40px;
    height: 40px;
    min-width: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#1f6f5b,#12372a);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}

.zatrak-user-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.zatrak-user-name {
    color: #12372a;
    font-size: 12px;
    font-weight: 800;
}

.zatrak-user-id {
    margin-top: 3px;
    max-width: 170px;
    overflow: hidden;
    color: #a0a7af;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role Badge */

.zatrak-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    margin: 2px 4px 2px 0;
    border-radius: 20px;
    background: #eef6f2;
    color: #1f6f5b;
    font-size: 9px;
    font-weight: 850;
}

.zatrak-no-role {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 20px;
    background: #fff3cd;
    color: #856404;
    font-size: 9px;
    font-weight: 850;
}

/* Buttons */

.zatrak-role-button {
    border: 0;
    padding: 8px 12px;
    border-radius: 7px;
    background: #12372a;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

.zatrak-role-button:hover {
    background: #1f6f5b;
    transform: translateY(-1px);
}

/* Modal */

.zatrak-role-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(3px);
}

.zatrak-role-modal {
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(15,23,42,.25);
}

.zatrak-role-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf0f2;
}

.zatrak-role-modal-title {
    margin: 0;
    color: #12372a;
    font-size: 16px;
    font-weight: 850;
}

.zatrak-role-modal-description {
    margin: 4px 0 0;
    color: #8a95a3;
    font-size: 10px;
}

.zatrak-role-modal-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f4f6f7;
    color: #52606d;
    font-size: 18px;
    cursor: pointer;
}

.zatrak-role-modal-body {
    padding: 20px;
}

.zatrak-role-modal-label {
    display: block;
    margin-bottom: 8px;
    color: #52606d;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-role-select {
    width: 100%;
    height: 43px;
    padding: 0 12px;
    border: 1px solid #dfe5e8;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #12372a;
    font-size: 12px;
}

.zatrak-role-select:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31,111,91,.09);
}

.zatrak-role-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 15px 20px;
    border-top: 1px solid #edf0f2;
    background: #fafbfb;
}

.zatrak-role-cancel {
    border: 1px solid #dce2e6;
    padding: 9px 14px;
    border-radius: 7px;
    background: #fff;
    color: #52606d;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.zatrak-role-save {
    border: 0;
    padding: 9px 16px;
    border-radius: 7px;
    background: #1f6f5b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.zatrak-role-save:hover {
    background: #185846;
}

/* Empty state */

.zatrak-users-empty {
    padding: 55px 20px;
    text-align: center;
    color: #8a95a3;
    font-size: 12px;
}

/* Mobile */

@media (max-width: 700px) {

    .zatrak-users-title {
        font-size: 21px;
    }

    .zatrak-users-header {
        margin-bottom: 17px;
    }

    .zatrak-users-table-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-users-count {
        align-self: flex-start;
    }

    .zatrak-role-modal-overlay {
        padding: 12px;
    }

    .zatrak-role-modal {
        max-width: 100%;
        border-radius: 13px;
    }

}

/* =========================================================
   ROLE MANAGEMENT
========================================================= */

.zatrak-roles-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 30px 40px;
}

.zatrak-roles-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.zatrak-roles-kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #8b95a1;
    margin-bottom: 7px;
}

.zatrak-roles-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    color: #151a21;
}

.zatrak-roles-subtitle {
    margin: 7px 0 0;
    font-size: 13px;
    color: #7d8792;
}


/* SEARCH */

.zatrak-roles-search-card {
    background: #fff;
    border: 1px solid #e8ebef;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.zatrak-roles-search-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #59636e;
}

.zatrak-roles-search {
    position: relative;
    width: 100%;
}

.zatrak-roles-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    opacity: .55;
}

.zatrak-roles-search input {
    width: 100%;
    height: 44px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    padding: 0 14px 0 42px;
    font-size: 13px;
    color: #20252b;
    background: #fff;
    outline: none;
    transition: .2s ease;
}

.zatrak-roles-search input:focus {
    border-color: #8d98a3;
    box-shadow: 0 0 0 3px rgba(90, 100, 110, .08);
}


/* TABLE CARD */

.zatrak-roles-table-card {
    background: #fff;
    border: 1px solid #e8ebef;
    border-radius: 16px;
    overflow: hidden;
}

.zatrak-roles-table-header {
    min-height: 76px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f2;
}

.zatrak-roles-table-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #1b2026;
}

.zatrak-roles-table-description {
    margin: 4px 0 0;
    font-size: 12px;
    color: #8a939d;
}

.zatrak-roles-count {
    padding: 7px 11px;
    border-radius: 8px;
    background: #f2f4f6;
    color: #4e5862;
    font-size: 11px;
    font-weight: 700;
}

.zatrak-roles-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.zatrak-roles-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

.zatrak-roles-table th {
    padding: 13px 18px;
    text-align: left;
    background: #fafbfc;
    border-bottom: 1px solid #e8ebef;
    color: #77818b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.zatrak-roles-table td {
    padding: 15px 18px;
    border-bottom: 1px solid #edf0f2;
    vertical-align: middle;
    font-size: 12px;
    color: #3e4750;
}

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

.zatrak-roles-table tbody tr:hover {
    background: #fcfcfd;
}


/* ROLE */

.zatrak-role-name-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.zatrak-role-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.zatrak-role-name {
    font-size: 13px;
    font-weight: 800;
    color: #20252b;
}

.zatrak-role-id {
    margin-top: 3px;
    font-size: 10px;
    color: #9aa2aa;
}

.zatrak-role-guard {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 7px;
    background: #f4f5f6;
    color: #66707a;
    font-size: 10px;
    font-weight: 700;
}

.zatrak-permission-count {
    display: inline-flex;
    min-width: 34px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 8px;
    background: #f0f2f4;
    color: #404951;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-permission-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 460px;
}

.zatrak-permission-badge {
    display: inline-flex;
    padding: 5px 7px;
    border-radius: 6px;
    background: #f5f6f7;
    color: #626c75;
    font-size: 9px;
    font-weight: 600;
}

.zatrak-permission-more {
    font-size: 10px;
    font-weight: 700;
    color: #8b949d;
}

.zatrak-no-permissions {
    color: #a0a7ae;
    font-size: 11px;
}

.zatrak-roles-action-heading,
.zatrak-roles-action-cell {
    text-align: right !important;
}


/* MANAGE BUTTON */

.zatrak-permission-button {
    border: 1px solid #dfe3e7;
    background: #fff;
    color: #353d45;
    border-radius: 8px;
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.zatrak-permission-button:hover {
    background: #f5f6f7;
    border-color: #cbd1d6;
}

.zatrak-permission-button span {
    font-size: 12px;
}


/* EMPTY */

.zatrak-roles-empty {
    text-align: center !important;
    padding: 45px 20px !important;
    color: #969fa8 !important;
}


/* PAGINATION */

.zatrak-roles-pagination {
    padding: 16px 20px;
    border-top: 1px solid #edf0f2;
}


/* =========================================================
   PERMISSION MODAL
========================================================= */

.zatrak-permission-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(3px);
}

.zatrak-permission-modal {
    width: min(920px, 100%);
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .24);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.zatrak-permission-modal-header {
    padding: 20px 22px;
    border-bottom: 1px solid #e9edf0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-shrink: 0;
}

.zatrak-permission-modal-kicker {
    margin-bottom: 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 800;
    color: #8a949d;
}

.zatrak-permission-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #171c21;
}

.zatrak-permission-modal-description {
    margin: 5px 0 0;
    font-size: 11px;
    color: #89929b;
}

.zatrak-permission-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #f2f4f5;
    color: #69737c;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.zatrak-permission-modal-close:hover {
    background: #e9ecef;
    color: #20252b;
}

.zatrak-permission-modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    min-height: 0;
}


/* PERMISSION GROUP */

.zatrak-permission-group {
    border: 1px solid #e7ebee;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}

.zatrak-permission-group:last-child {
    margin-bottom: 0;
}

.zatrak-permission-group-header {
    padding: 12px 14px;
    background: #fafbfc;
    border-bottom: 1px solid #edf0f2;
}

.zatrak-permission-group-title {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    color: #303840;
}

.zatrak-permission-group-count {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    color: #929ba3;
}

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

.zatrak-permission-checkbox {
    min-height: 48px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid #f0f2f4;
    cursor: pointer;
    transition: background .15s ease;
}

.zatrak-permission-checkbox:hover {
    background: #fafbfc;
}

.zatrak-permission-checkbox:nth-child(odd) {
    border-right: 1px solid #f0f2f4;
}

.zatrak-permission-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.zatrak-permission-checkmark {
    width: 17px;
    height: 17px;
    border: 1px solid #cdd3d8;
    border-radius: 4px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .15s ease;
}

.zatrak-permission-checkbox input:checked + .zatrak-permission-checkmark {
    background: #252b31;
    border-color: #252b31;
}

.zatrak-permission-checkbox input:checked + .zatrak-permission-checkmark::after {
    content: "✓";
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-permission-label {
    font-size: 11px;
    color: #4c5660;
    line-height: 1.35;
    word-break: break-word;
}


/* MODAL FOOTER */

.zatrak-permission-modal-footer {
    padding: 15px 22px;
    border-top: 1px solid #e9edf0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-shrink: 0;
    background: #fff;
}

.zatrak-permission-cancel,
.zatrak-permission-save {
    min-height: 38px;
    border-radius: 8px;
    padding: 0 15px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.zatrak-permission-cancel {
    border: 1px solid #dfe3e6;
    background: #fff;
    color: #59636c;
}

.zatrak-permission-cancel:hover {
    background: #f6f7f8;
}

.zatrak-permission-save {
    border: 1px solid #252b31;
    background: #252b31;
    color: #fff;
}

.zatrak-permission-save:hover {
    background: #11161a;
}

.zatrak-permission-save:disabled {
    opacity: .6;
    cursor: not-allowed;
}


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

@media (max-width: 900px) {

    .zatrak-roles-page {
        padding: 22px 18px 35px;
    }

    .zatrak-permission-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-permission-checkbox:nth-child(odd) {
        border-right: 0;
    }

}

@media (max-width: 600px) {

    .zatrak-roles-page {
        padding: 18px 12px 30px;
    }

    .zatrak-roles-title {
        font-size: 23px;
    }

    .zatrak-roles-table-header {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .zatrak-permission-modal-overlay {
        padding: 10px;
    }

    .zatrak-permission-modal {
        max-height: calc(100vh - 20px);
        border-radius: 13px;
    }

    .zatrak-permission-modal-header {
        padding: 16px;
    }

    .zatrak-permission-modal-body {
        padding: 14px;
    }

    .zatrak-permission-modal-footer {
        padding: 12px 14px;
    }

    .zatrak-permission-cancel,
    .zatrak-permission-save {
        flex: 1;
    }

}

/* =========================================================
   PERMISSION MANAGEMENT
========================================================= */

.zatrak-permissions-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 30px 40px;
}

.zatrak-permissions-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.zatrak-permissions-kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #8b95a1;
    margin-bottom: 7px;
}

.zatrak-permissions-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    color: #151a21;
}

.zatrak-permissions-subtitle {
    margin: 7px 0 0;
    font-size: 13px;
    color: #7d8792;
}


/* CREATE BUTTON */

.zatrak-permission-create-button {
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid #252b31;
    border-radius: 9px;
    background: #252b31;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.zatrak-permission-create-button:hover {
    background: #11161a;
}

.zatrak-permission-create-button span {
    font-size: 17px;
    line-height: 1;
}


/* SEARCH */

.zatrak-permissions-search-card {
    background: #fff;
    border: 1px solid #e8ebef;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.zatrak-permissions-search-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #59636e;
}

.zatrak-permissions-search {
    position: relative;
    width: 100%;
}

.zatrak-permissions-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    opacity: .55;
}

.zatrak-permissions-search input {
    width: 100%;
    height: 44px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    padding: 0 14px 0 42px;
    font-size: 13px;
    color: #20252b;
    background: #fff;
    outline: none;
    transition: .2s ease;
}

.zatrak-permissions-search input:focus {
    border-color: #8d98a3;
    box-shadow: 0 0 0 3px rgba(90, 100, 110, .08);
}


/* TABLE */

.zatrak-permissions-table-card {
    background: #fff;
    border: 1px solid #e8ebef;
    border-radius: 16px;
    overflow: hidden;
}

.zatrak-permissions-table-header {
    min-height: 76px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f2;
}

.zatrak-permissions-table-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #1b2026;
}

.zatrak-permissions-table-description {
    margin: 4px 0 0;
    font-size: 12px;
    color: #8a939d;
}

.zatrak-permissions-count {
    padding: 7px 11px;
    border-radius: 8px;
    background: #f2f4f6;
    color: #4e5862;
    font-size: 11px;
    font-weight: 700;
}

.zatrak-permissions-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.zatrak-permissions-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.zatrak-permissions-table th {
    padding: 13px 18px;
    text-align: left;
    background: #fafbfc;
    border-bottom: 1px solid #e8ebef;
    color: #77818b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.zatrak-permissions-table td {
    padding: 15px 18px;
    border-bottom: 1px solid #edf0f2;
    vertical-align: middle;
    font-size: 12px;
    color: #3e4750;
}

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

.zatrak-permissions-table tbody tr:hover {
    background: #fcfcfd;
}


/* PERMISSION NAME */

.zatrak-permission-name-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.zatrak-permission-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f1f3f5;
    color: #505a63;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.zatrak-permission-name {
    font-size: 12px;
    font-weight: 800;
    color: #20252b;
}

.zatrak-permission-id {
    margin-top: 3px;
    font-size: 10px;
    color: #9aa2aa;
}

.zatrak-permission-guard {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 7px;
    background: #f4f5f6;
    color: #66707a;
    font-size: 10px;
    font-weight: 700;
}

.zatrak-permission-category {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 7px;
    background: #f6f7f8;
    color: #67717a;
    font-size: 10px;
    font-weight: 700;
}


/* ACTION */

.zatrak-permissions-action-heading,
.zatrak-permissions-action-cell {
    text-align: right !important;
    white-space: nowrap;
}

.zatrak-permission-edit-button,
.zatrak-permission-delete-button {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.zatrak-permission-edit-button {
    border: 1px solid #dfe3e7;
    background: #fff;
    color: #4b555e;
}

.zatrak-permission-edit-button:hover {
    background: #f5f6f7;
}

.zatrak-permission-delete-button {
    margin-left: 5px;
    border: 1px solid #ead8d8;
    background: #fff;
    color: #a45d5d;
}

.zatrak-permission-delete-button:hover {
    background: #faf1f1;
}


/* EMPTY */

.zatrak-permissions-empty {
    text-align: center !important;
    padding: 45px 20px !important;
    color: #969fa8 !important;
}


/* =========================================================
   PERMISSIONS PAGINATION
========================================================= */

.zatrak-permissions-pagination {
    min-height: 58px;
    padding: 12px 18px;
    border-top: 1px solid #edf0f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #fff;
}

.zatrak-permissions-pagination-info {
    color: #8a939d;
    font-size: 10px;
    white-space: nowrap;
}

.zatrak-permissions-pagination-info strong {
    color: #4b555e;
    font-weight: 800;
}

.zatrak-permissions-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.zatrak-pagination-button,
.zatrak-pagination-current,
.zatrak-pagination-disabled {
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.zatrak-pagination-button {
    border: 1px solid #dfe3e7;
    background: #fff;
    color: #59636c;
    cursor: pointer;
    transition: .18s ease;
}

.zatrak-pagination-button:hover {
    background: #f4f6f7;
    border-color: #cbd1d6;
}

.zatrak-pagination-current {
    border: 1px solid #252b31;
    background: #252b31;
    color: #fff;
}

.zatrak-pagination-disabled {
    border: 1px solid #edf0f2;
    background: #f8f9fa;
    color: #b1b7bd;
}

@media (max-width: 650px) {

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

    .zatrak-permissions-pagination-buttons {
        width: 100%;
        justify-content: flex-end;
    }

}

/* =========================================================
   CREATE / EDIT MODAL
========================================================= */

.zatrak-permission-form-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(3px);
}

.zatrak-permission-form-modal {
    width: min(540px, 100%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .24);
    overflow: hidden;
}

.zatrak-permission-form-header {
    padding: 20px 22px;
    border-bottom: 1px solid #e9edf0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.zatrak-permission-form-kicker {
    margin-bottom: 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 800;
    color: #8a949d;
}

.zatrak-permission-form-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #171c21;
}

.zatrak-permission-form-description {
    margin: 5px 0 0;
    font-size: 11px;
    color: #89929b;
}

.zatrak-permission-form-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #f2f4f5;
    color: #69737c;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.zatrak-permission-form-close:hover {
    background: #e9ecef;
}

.zatrak-permission-form-body {
    padding: 22px;
}

.zatrak-permission-form-field {
    margin-bottom: 18px;
}

.zatrak-permission-form-field:last-child {
    margin-bottom: 0;
}

.zatrak-permission-form-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 800;
    color: #4b555e;
}

.zatrak-permission-form-field input,
.zatrak-permission-form-field select {
    width: 100%;
    height: 42px;
    border: 1px solid #dfe4e8;
    border-radius: 9px;
    padding: 0 12px;
    background: #fff;
    color: #252b31;
    font-size: 12px;
    outline: none;
}

.zatrak-permission-form-field input:focus,
.zatrak-permission-form-field select:focus {
    border-color: #8d98a3;
    box-shadow: 0 0 0 3px rgba(90, 100, 110, .08);
}

.zatrak-permission-form-field small {
    display: block;
    margin-top: 6px;
    font-size: 9px;
    color: #939ca4;
}

.zatrak-permission-error {
    display: block;
    margin-top: 6px;
    color: #b45151;
    font-size: 10px;
}

.zatrak-permission-form-footer {
    padding: 15px 22px;
    border-top: 1px solid #e9edf0;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.zatrak-permission-form-cancel,
.zatrak-permission-form-save {
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.zatrak-permission-form-cancel {
    border: 1px solid #dfe3e6;
    background: #fff;
    color: #59636c;
}

.zatrak-permission-form-save {
    border: 1px solid #252b31;
    background: #252b31;
    color: #fff;
}

.zatrak-permission-form-save:hover {
    background: #11161a;
}

.zatrak-permission-form-save:disabled {
    opacity: .6;
    cursor: not-allowed;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .zatrak-permissions-page {
        padding: 20px 14px 30px;
    }

    .zatrak-permissions-header {
        flex-direction: column;
    }

    .zatrak-permission-create-button {
        width: 100%;
        justify-content: center;
    }

    .zatrak-permissions-title {
        font-size: 23px;
    }

    .zatrak-permissions-table-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .zatrak-permission-form-overlay {
        padding: 10px;
    }

    .zatrak-permission-form-modal {
        border-radius: 13px;
    }

    .zatrak-permission-form-header,
    .zatrak-permission-form-body {
        padding: 16px;
    }

    .zatrak-permission-form-footer {
        padding: 12px 16px;
    }

    .zatrak-permission-form-cancel,
    .zatrak-permission-form-save {
        flex: 1;
    }

}

/* =========================================================
   SUPER ADMIN PROTECTION
========================================================= */

.zatrak-super-admin-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #f1dfb0;
    border-radius: 10px;
    background: #fff9e8;
}

.zatrak-super-admin-warning > span {
    font-size: 17px;
    line-height: 1;
}

.zatrak-super-admin-warning strong {
    display: block;
    margin-bottom: 3px;
    color: #8a6500;
    font-size: 12px;
    font-weight: 800;
}

.zatrak-super-admin-warning p {
    margin: 0;
    color: #8a7a55;
    font-size: 11px;
    line-height: 1.5;
}

.zatrak-permission-save-disabled {
    opacity: .65;
    cursor: not-allowed !important;
}


/* =========================================================
   ZATRAKA LOGO — FINAL OVERRIDE
   Must be AFTER all existing login CSS
========================================================= */

.zatrak-login-logo {
    width: 100% !important;
    height: 100px !important;
    max-height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

.zatrak-login-logo > img.zatraka-login-logo-image {
    display: block !important;

    width: 220px !important;
    height: 82px !important;

    min-width: 220px !important;
    max-width: 220px !important;

    min-height: 82px !important;
    max-height: 82px !important;

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

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

    flex: 0 0 220px !important;
}


/* LEFT BRAND PANEL */
.zatrak-brand-content {
    width: min(760px, 86%) !important;
    padding-top: 48px !important;
}


/* Keep the main message at a better position */
.zatrak-login-message {
    margin-top: auto !important;
    margin-bottom: 20px !important;
}


/* Prevent the logo area from pushing the page */
.zatrak-login-brand {
    overflow: hidden !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .zatrak-login-logo {
        height: 90px !important;
        max-height: 90px !important;
    }

    .zatrak-login-logo > img.zatraka-login-logo-image {
        width: 195px !important;
        height: 72px !important;

        min-width: 195px !important;
        max-width: 195px !important;

        min-height: 72px !important;
        max-height: 72px !important;

        flex-basis: 195px !important;
    }
}


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

@media (max-width: 700px) {

    .zatrak-login-logo {
        height: 82px !important;
        max-height: 82px !important;
        justify-content: center !important;
    }

    .zatrak-login-logo > img.zatraka-login-logo-image {
        width: 180px !important;
        height: 68px !important;

        min-width: 180px !important;
        max-width: 180px !important;

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

        flex-basis: 180px !important;

        object-position: center !important;
    }
}


/* =========================================================
   ZATRAK — FAMILY MEETINGS
========================================================= */

.zatrak-meetings-page {
    width: 100%;
    max-width: 100%;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

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

.zatrak-meetings-kicker {
    margin-bottom: 7px;
    color: #1f6f5b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.zatrak-meetings-title {
    margin: 0;
    color: #12372a;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -.5px;
}

.zatrak-meetings-subtitle {
    margin: 7px 0 0;
    color: #7a8580;
    font-size: 13px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   PRIMARY BUTTON
--------------------------------------------------------- */

.zatrak-meeting-primary-button {
    min-height: 42px;
    padding: 0 17px;
    border: 0;
    border-radius: 10px;
    background: #12372a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.zatrak-meeting-primary-button:hover {
    background: #0d2b21;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(18,55,42,.16);
}

.zatrak-meeting-primary-button:active {
    transform: translateY(0);
}

.zatrak-meeting-primary-button span {
    font-size: 19px;
    line-height: 1;
}


/* ---------------------------------------------------------
   FILTER CARD
--------------------------------------------------------- */

.zatrak-meetings-filter-card {
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid #e5e9e7;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(16,24,40,.04);
    display: flex;
    align-items: center;
    gap: 12px;
}

.zatrak-meetings-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.zatrak-meetings-search svg {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: #98a2b3;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.zatrak-meetings-search input {
    width: 100%;
    height: 43px;
    padding: 0 13px 0 41px;
    border: 1px solid #dfe4e1;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #172033;
    font-size: 13px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.zatrak-meetings-search input::placeholder {
    color: #a1aaa6;
}

.zatrak-meetings-search input:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31,111,91,.08);
}

.zatrak-meetings-status-filter {
    width: 180px;
    height: 43px;
    padding: 0 12px;
    border: 1px solid #dfe4e1;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #344054;
    font-size: 13px;
    cursor: pointer;
}

.zatrak-meetings-status-filter:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31,111,91,.08);
}


/* ---------------------------------------------------------
   TABLE CARD
--------------------------------------------------------- */

.zatrak-meetings-table-card {
    overflow: hidden;
    border: 1px solid #e5e9e7;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 28px rgba(16,24,40,.05);
}

.zatrak-meetings-table-header {
    min-height: 76px;
    padding: 17px 20px;
    border-bottom: 1px solid #edf0ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.zatrak-meetings-table-title {
    color: #12372a;
    font-size: 17px;
    font-weight: 900;
}

.zatrak-meetings-table-description {
    margin-top: 4px;
    color: #87918d;
    font-size: 11px;
}

.zatrak-meetings-count {
    min-width: 80px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #edf6f1;
    color: #1f6f5b;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}


/* ---------------------------------------------------------
   TABLE
--------------------------------------------------------- */

.zatrak-meetings-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.zatrak-meetings-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.zatrak-meetings-table thead th {
    padding: 12px 16px;
    border-bottom: 1px solid #e8ecea;
    background: #f7f9f8;
    color: #78837e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: left;
    white-space: nowrap;
}

.zatrak-meetings-table tbody tr {
    transition: background .15s ease;
}

.zatrak-meetings-table tbody tr:hover {
    background: #fbfdfc;
}

.zatrak-meetings-table tbody td {
    padding: 15px 16px;
    border-bottom: 1px solid #eef1ef;
    color: #344054;
    font-size: 12px;
    vertical-align: middle;
}

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


/* ---------------------------------------------------------
   MEETING INFORMATION
--------------------------------------------------------- */

.zatrak-meeting-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
}

.zatrak-meeting-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #edf6f1;
    color: #1f6f5b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zatrak-meeting-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-meeting-title {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.zatrak-meeting-description {
    max-width: 300px;
    margin-top: 3px;
    overflow: hidden;
    color: #98a2b3;
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   DATE / TIME
--------------------------------------------------------- */

.zatrak-meeting-date {
    color: #344054;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.zatrak-meeting-time {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 10px;
}

.zatrak-meeting-location {
    color: #66716c;
    font-size: 12px;
}

.zatrak-meeting-empty {
    color: #b0b8b4;
}


/* ---------------------------------------------------------
   STATUS
--------------------------------------------------------- */

.zatrak-meeting-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
}

.zatrak-meeting-status.scheduled {
    background: #edf6f1;
    color: #1f6f5b;
}

.zatrak-meeting-status.completed {
    background: #edf7ff;
    color: #175cd3;
}

.zatrak-meeting-status.cancelled {
    background: #fff1f0;
    color: #b42318;
}


/* ---------------------------------------------------------
   CREATOR
--------------------------------------------------------- */

.zatrak-meeting-creator {
    max-width: 150px;
    overflow: hidden;
    color: #475467;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   ACTIONS
--------------------------------------------------------- */

.zatrak-meeting-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

.zatrak-meeting-action {
    min-height: 31px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.zatrak-meeting-action.view {
    border-color: #dce7e2;
    color: #1f6f5b;
}

.zatrak-meeting-action.view:hover {
    background: #edf6f1;
}

.zatrak-meeting-action.edit {
    border-color: #dfe7f4;
    color: #175cd3;
}

.zatrak-meeting-action.edit:hover {
    background: #eff6ff;
}

.zatrak-meeting-action.complete {
    border-color: #d7eadf;
    color: #17804f;
}

.zatrak-meeting-action.complete:hover {
    background: #edf8f1;
}

.zatrak-meeting-action.cancel {
    border-color: #f1d8d5;
    color: #b42318;
}

.zatrak-meeting-action.cancel:hover {
    background: #fff3f1;
}


/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

.zatrak-meetings-empty {
    padding: 55px 20px !important;
    text-align: center !important;
}

.zatrak-meetings-empty-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 13px;
    border-radius: 13px;
    background: #f2f6f4;
    color: #7d9189;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zatrak-meetings-empty-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-meetings-empty-title {
    color: #344054;
    font-size: 14px;
    font-weight: 800;
}

.zatrak-meetings-empty-text {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 11px;
}


/* ---------------------------------------------------------
   PAGINATION
--------------------------------------------------------- */

.zatrak-meetings-pagination {
    padding: 15px 18px;
    border-top: 1px solid #edf0ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.zatrak-meetings-pagination-info {
    color: #7b8581;
    font-size: 11px;
}

.zatrak-meetings-pagination-info strong {
    color: #344054;
    font-weight: 800;
}

.zatrak-meetings-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.zatrak-pagination-button,
.zatrak-pagination-disabled,
.zatrak-pagination-current {
    min-width: 34px;
    height: 32px;
    padding: 0 9px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 750;
}

.zatrak-pagination-button {
    border: 1px solid #dfe4e1;
    background: #fff;
    color: #475467;
    cursor: pointer;
}

.zatrak-pagination-button:hover {
    border-color: #b8d2c7;
    background: #f5faf7;
    color: #1f6f5b;
}

.zatrak-pagination-current {
    background: #12372a;
    color: #fff;
}

.zatrak-pagination-disabled {
    border: 1px solid #edf0ee;
    background: #f8f9f9;
    color: #b5bcb9;
}


/* ---------------------------------------------------------
   MEETING MODAL
--------------------------------------------------------- */

.zatrak-meeting-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    padding: 24px;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    backdrop-filter: blur(3px);
}

.zatrak-meeting-modal {
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(15,23,42,.20);
}

.zatrak-meeting-modal-header {
    min-height: 72px;
    padding: 17px 21px;
    border-bottom: 1px solid #edf0ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.zatrak-meeting-modal-title {
    color: #12372a;
    font-size: 17px;
    font-weight: 900;
}

.zatrak-meeting-modal-description {
    margin-top: 4px;
    color: #89938f;
    font-size: 11px;
}

.zatrak-meeting-modal-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 8px;
    background: #f5f7f6;
    color: #66716c;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.zatrak-meeting-modal-close:hover {
    background: #edf1ef;
    color: #12372a;
}


/* ---------------------------------------------------------
   MODAL BODY / FORM
--------------------------------------------------------- */

.zatrak-meeting-modal-body {
    max-height: calc(100vh - 190px);
    padding: 22px;
    overflow-y: auto;
}

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

.zatrak-meeting-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
}

.zatrak-meeting-form-group label span {
    color: #b42318;
}

.zatrak-meeting-form-group input,
.zatrak-meeting-form-group select,
.zatrak-meeting-form-group textarea {
    width: 100%;
    border: 1px solid #dfe4e1;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #172033;
    font-size: 13px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.zatrak-meeting-form-group input,
.zatrak-meeting-form-group select {
    height: 43px;
    padding: 0 12px;
}

.zatrak-meeting-form-group textarea {
    min-height: 95px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.5;
}

.zatrak-meeting-form-group input:focus,
.zatrak-meeting-form-group select:focus,
.zatrak-meeting-form-group textarea:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31,111,91,.08);
}

.zatrak-meeting-form-group input.error,
.zatrak-meeting-form-group select.error,
.zatrak-meeting-form-group textarea.error {
    border-color: #d92d20;
}

.zatrak-meeting-form-group small {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 10px;
}

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


/* ---------------------------------------------------------
   MODAL FOOTER
--------------------------------------------------------- */

.zatrak-meeting-modal-footer {
    padding: 14px 21px;
    border-top: 1px solid #edf0ee;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.zatrak-meeting-modal-cancel,
.zatrak-meeting-modal-save {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.zatrak-meeting-modal-cancel {
    border: 1px solid #dfe4e1;
    background: #fff;
    color: #475467;
}

.zatrak-meeting-modal-cancel:hover {
    background: #f8faf9;
}

.zatrak-meeting-modal-save {
    border: 1px solid #12372a;
    background: #12372a;
    color: #fff;
}

.zatrak-meeting-modal-save:hover {
    background: #0d2b21;
}

.zatrak-meeting-modal-save:disabled {
    opacity: .65;
    cursor: not-allowed;
}


/* ---------------------------------------------------------
   VIEW MODAL
--------------------------------------------------------- */

.zatrak-meeting-view-body {
    max-height: calc(100vh - 190px);
    padding: 22px;
    overflow-y: auto;
}

.zatrak-meeting-view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.zatrak-meeting-view-grid > div {
    padding: 13px;
    border: 1px solid #edf0ee;
    border-radius: 10px;
    background: #fafcfb;
}

.zatrak-meeting-view-grid span {
    display: block;
    margin-bottom: 5px;
    color: #89938f;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
}

.zatrak-meeting-view-grid strong {
    color: #344054;
    font-size: 12px;
    font-weight: 750;
}

.zatrak-meeting-view-section {
    margin-top: 17px;
}

.zatrak-meeting-view-label {
    margin-bottom: 7px;
    color: #1f6f5b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
}

.zatrak-meeting-view-content {
    min-height: 45px;
    padding: 12px 13px;
    border: 1px solid #edf0ee;
    border-radius: 10px;
    background: #fafcfb;
    color: #475467;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .zatrak-meetings-table {
        min-width: 850px;
    }

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

    .zatrak-meeting-primary-button {
        align-self: flex-start;
    }
}

@media (max-width: 700px) {

    .zatrak-meetings-filter-card {
        align-items: stretch;
        flex-direction: column;
    }

    .zatrak-meetings-status-filter {
        width: 100%;
    }

    .zatrak-meetings-table-header {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .zatrak-meetings-pagination-buttons {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .zatrak-meeting-form-grid,
    .zatrak-meeting-view-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-meeting-modal-overlay {
        padding: 12px;
    }

    .zatrak-meeting-modal {
        max-height: calc(100vh - 24px);
        border-radius: 14px;
    }

    .zatrak-meeting-modal-body,
    .zatrak-meeting-view-body {
        padding: 17px;
    }
}

@media (max-width: 480px) {

    .zatrak-meetings-title {
        font-size: 23px;
    }

    .zatrak-meetings-subtitle {
        font-size: 12px;
    }

    .zatrak-meeting-primary-button {
        width: 100%;
    }

    .zatrak-meetings-table-header {
        padding: 15px;
    }

    .zatrak-meeting-modal-footer {
        padding: 12px 15px;
    }

    .zatrak-meeting-modal-footer button {
        flex: 1;
    }
}


/* =========================================================
   ZATRAK - MEETING ATTENDANCE
========================================================= */

.zatrak-attendance-modal {
    width: min(1180px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.zatrak-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.zatrak-page-kicker {
    margin-bottom: 6px;
    color: #1f6f5b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.zatrak-page-title {
    margin: 0;
    color: #12372a;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -.025em;
}

.zatrak-page-subtitle {
    margin: 7px 0 0;
    color: #7b8798;
    font-size: 13px;
    line-height: 1.55;
}


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

.zatrak-card {
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid #e8edf3;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .045);
}

.zatrak-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid #eef2f6;
}

.zatrak-card-body {
    padding: 20px;
}

.zatrak-card-title {
    margin: 0;
    color: #12372a;
    font-size: 15px;
    font-weight: 800;
}

.zatrak-card-subtitle {
    margin-top: 4px;
    color: #8993a2;
    font-size: 11px;
}


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

.zatrak-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.zatrak-form-group {
    min-width: 0;
}

.zatrak-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #394457;
    font-size: 11px;
    font-weight: 750;
}

.zatrak-form-control {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #263244;
    font-family: inherit;
    font-size: 12px;
    transition: border-color .2s ease,
                box-shadow .2s ease,
                background .2s ease;
}

.zatrak-form-control::placeholder {
    color: #a4adba;
}

.zatrak-form-control:hover {
    border-color: #cbd4df;
}

.zatrak-form-control:focus {
    border-color: #1f6f5b;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, .09);
}


/* =========================================================
   TABLE
========================================================= */

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

.zatrak-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.zatrak-table thead th {
    padding: 12px 20px;
    border-bottom: 1px solid #e9eef3;
    background: #fafbfd;
    color: #7d8796;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.zatrak-table tbody td {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f3f6;
    color: #4c5869;
    font-size: 12px;
    vertical-align: middle;
}

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

.zatrak-table tbody tr {
    transition: background .18s ease;
}

.zatrak-table tbody tr:hover {
    background: #fbfdfc;
}

.zatrak-table-title {
    color: #1d2939;
    font-size: 12px;
    font-weight: 750;
}

.zatrak-table-muted {
    margin-top: 3px;
    color: #929baa;
    font-size: 10px;
}

.text-right {
    text-align: right !important;
}


/* =========================================================
   BADGES
========================================================= */

.zatrak-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.zatrak-badge.success {
    color: #157347;
    background: #e8f7ee;
}

.zatrak-badge.info {
    color: #285b89;
    background: #eaf3fb;
}

.zatrak-badge.muted {
    color: #687386;
    background: #f1f4f7;
}


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

.zatrak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    transition: transform .18s ease,
                box-shadow .18s ease,
                background .18s ease;
}

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

.zatrak-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.zatrak-btn-primary {
    color: #fff;
    background: #1f6f5b;
    box-shadow: 0 5px 14px rgba(31, 111, 91, .14);
}

.zatrak-btn-primary:hover {
    background: #195d4d;
}

.zatrak-btn-secondary {
    color: #4c5869;
    border-color: #dfe5ec;
    background: #fff;
}

.zatrak-btn-secondary:hover {
    background: #f8fafb;
}


/* =========================================================
   PAGINATION
========================================================= */

.zatrak-pagination {
    padding: 14px 20px;
    border-top: 1px solid #eef2f5;
}


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

.zatrak-empty {
    padding: 38px 20px;
    text-align: center;
    color: #929baa;
    font-size: 12px;
}

.zatrak-empty-icon {
    margin-bottom: 8px;
    font-size: 28px;
}

.zatrak-empty-title {
    color: #465266;
    font-size: 13px;
    font-weight: 750;
}

.zatrak-empty-text {
    margin-top: 4px;
    color: #98a1ae;
    font-size: 11px;
}


/* =========================================================
   MODAL
========================================================= */

.zatrak-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 20px;

    background: rgba(10, 25, 20, .56);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.zatrak-modal {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, .22),
        0 8px 30px rgba(15, 23, 42, .12);
}

.zatrak-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 22px;

    border-bottom: 1px solid #edf1f4;
    background: #fff;
}

.zatrak-modal-kicker {
    margin-bottom: 5px;
    color: #1f6f5b;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.zatrak-modal-title {
    margin: 0;
    color: #12372a;
    font-size: 18px;
    font-weight: 820;
    line-height: 1.25;
}

.zatrak-modal-subtitle {
    margin-top: 5px;
    color: #8a94a3;
    font-size: 11px;
}

.zatrak-modal-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

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

    padding: 0;

    border: 0;
    border-radius: 9px;

    color: #6e7887;
    background: #f4f6f8;

    cursor: pointer;

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

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

.zatrak-modal-close:hover {
    color: #12372a;
    background: #e9eef0;
}


/* =========================================================
   ATTENDANCE SUMMARY
========================================================= */

.zatrak-attendance-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;

    padding: 15px 20px;

    border-bottom: 1px solid #edf1f4;
    background: #fafcfb;
}

.zatrak-attendance-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    min-height: 55px;
    padding: 10px 13px;

    border: 1px solid #e6ebee;
    border-radius: 11px;

    background: #fff;
}

.zatrak-attendance-summary-item span {
    color: #7d8795;
    font-size: 10px;
    font-weight: 700;
}

.zatrak-attendance-summary-item strong {
    color: #263244;
    font-size: 19px;
    font-weight: 850;
}

.zatrak-attendance-summary-item.present {
    border-color: #d9eee3;
    background: #f8fdf9;
}

.zatrak-attendance-summary-item.present strong {
    color: #19734e;
}

.zatrak-attendance-summary-item.absent {
    border-color: #f1dddd;
    background: #fffafa;
}

.zatrak-attendance-summary-item.absent strong {
    color: #b54b4b;
}

.zatrak-attendance-summary-item.excused {
    border-color: #ebe5cf;
    background: #fffdf5;
}

.zatrak-attendance-summary-item.excused strong {
    color: #8a722c;
}


/* =========================================================
   ATTENDANCE LIST
========================================================= */

.zatrak-attendance-list {
    flex: 1;
    overflow-y: auto;
    max-height: 54vh;
}

.zatrak-attendance-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, auto) minmax(180px, 230px);
    align-items: center;
    gap: 16px;

    padding: 13px 20px;

    border-bottom: 1px solid #f0f3f5;

    transition: background .18s ease;
}

.zatrak-attendance-row:hover {
    background: #fbfdfc;
}

.zatrak-attendance-row:last-child {
    border-bottom: 0;
}


/* =========================================================
   MEMBER
========================================================= */

.zatrak-attendance-member {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.zatrak-attendance-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;

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

    border-radius: 50%;

    color: #fff;
    background: linear-gradient(
        135deg,
        #12372a,
        #1f6f5b
    );

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

.zatrak-attendance-name {
    overflow: hidden;

    color: #263244;
    font-size: 12px;
    font-weight: 750;

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

.zatrak-attendance-meta {
    margin-top: 3px;

    overflow: hidden;

    color: #9aa3af;
    font-size: 10px;

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


/* =========================================================
   ATTENDANCE OPTIONS
========================================================= */

.zatrak-attendance-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
}

.zatrak-attendance-option {
    position: relative;

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

    cursor: pointer;
}

.zatrak-attendance-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.zatrak-attendance-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 72px;
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid #dfe5eb;
    border-radius: 8px;

    color: #667183;
    background: #fff;

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

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

.zatrak-attendance-option:hover span {
    border-color: #cbd6d1;
    background: #f9fbfa;
}

.zatrak-attendance-option input:checked + span {
    color: #fff;
    border-color: #1f6f5b;
    background: #1f6f5b;
    box-shadow: 0 4px 10px rgba(31, 111, 91, .13);
}


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

.zatrak-attendance-note {
    min-width: 0;
}

.zatrak-attendance-note .zatrak-form-control {
    min-height: 35px;
    font-size: 10px;
}


/* =========================================================
   MODAL FOOTER
========================================================= */

.zatrak-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    padding: 15px 20px;

    border-top: 1px solid #edf1f4;
    background: #fafbfc;
}


/* =========================================================
   LOADING
========================================================= */

.zatrak-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    background: rgba(15, 23, 42, .20);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.zatrak-loading-box {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 17px;

    border: 1px solid #e5e9ee;
    border-radius: 11px;

    color: #3c4758;
    background: #fff;

    box-shadow: 0 15px 40px rgba(15, 23, 42, .15);

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

.zatrak-spinner {
    width: 18px;
    height: 18px;

    border: 2px solid #dce8e3;
    border-top-color: #1f6f5b;
    border-radius: 50%;

    animation: zatrakAttendanceSpin .7s linear infinite;
}

@keyframes zatrakAttendanceSpin {
    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 1050px) {

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

    .zatrak-attendance-row {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .zatrak-attendance-controls {
        justify-content: flex-start;
    }

    .zatrak-attendance-note {
        max-width: 360px;
    }
}


@media (max-width: 760px) {

    .zatrak-page-header {
        margin-bottom: 17px;
    }

    .zatrak-page-title {
        font-size: 23px;
    }

    .zatrak-page-subtitle {
        font-size: 12px;
    }

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

    .zatrak-card-body {
        padding: 15px;
    }

    .zatrak-card-header {
        padding: 15px;
    }

    .zatrak-table thead th,
    .zatrak-table tbody td {
        padding-left: 14px;
        padding-right: 14px;
    }

    .zatrak-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .zatrak-attendance-modal {
        width: 100%;
        max-width: 100%;
        max-height: 94vh;

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

    .zatrak-modal-header {
        padding: 16px;
    }

    .zatrak-attendance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px 14px;
    }

    .zatrak-attendance-list {
        max-height: 52vh;
    }

    .zatrak-attendance-row {
        padding: 14px;
    }

    .zatrak-attendance-controls {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .zatrak-attendance-option span {
        width: 100%;
        min-width: 0;
    }

    .zatrak-attendance-note {
        max-width: none;
    }

    .zatrak-modal-footer {
        padding: 13px 14px;
    }

    .zatrak-modal-footer .zatrak-btn {
        flex: 1;
    }
}


@media (max-width: 430px) {

    .zatrak-attendance-summary {
        gap: 7px;
    }

    .zatrak-attendance-summary-item {
        padding: 8px 10px;
    }

    .zatrak-attendance-summary-item strong {
        font-size: 16px;
    }

    .zatrak-attendance-controls {
        gap: 5px;
    }

    .zatrak-attendance-option span {
        min-height: 30px;
        padding: 0 5px;
        font-size: 9px;
    }

    .zatrak-attendance-name {
        font-size: 11px;
    }
}


/* =========================================================
   ZATRAK — MEETING ATTENDANCE
   resources/css/zatrak/meeting-attendance.css
   ========================================================= */

.zatrak-attendance-page {
    --za-green: #176b45;
    --za-green-dark: #0f5134;
    --za-gold: #c7a447;
    --za-navy: #15263d;
    --za-text: #18202b;
    --za-muted: #718096;
    --za-border: #e6e9ee;
    --za-bg: #f7f8fa;
    --za-white: #ffffff;
    color: var(--za-text);
}

.zatrak-attendance-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.zatrak-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--za-gold);
    margin-bottom: 6px;
}

.zatrak-attendance-header h1,
.zatrak-attendance-modal-head h2 {
    margin: 0;
    color: var(--za-navy);
    font-weight: 800;
}

.zatrak-attendance-header h1 {
    font-size: clamp(24px, 3vw, 34px);
}

.zatrak-attendance-header p {
    margin: 7px 0 0;
    color: var(--za-muted);
}

.zatrak-attendance-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 220px auto;
    gap: 12px;
    margin-bottom: 18px;
}

.zatrak-attendance-search,
.zatrak-modal-search {
    position: relative;
}

.zatrak-attendance-search svg,
.zatrak-modal-search svg {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    color: #8a95a4;
}

.zatrak-attendance-search input,
.zatrak-modal-search input,
.zatrak-member-note input,
.zatrak-attendance-select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--za-border);
    border-radius: 10px;
    background: #fff;
    color: var(--za-text);
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}

.zatrak-attendance-search input,
.zatrak-modal-search input {
    padding: 0 14px 0 42px;
}

.zatrak-attendance-search input:focus,
.zatrak-modal-search input:focus,
.zatrak-member-note input:focus,
.zatrak-attendance-select:focus {
    border-color: var(--za-green);
    box-shadow: 0 0 0 3px rgba(23, 107, 69, .09);
}

.zatrak-attendance-select {
    padding: 0 12px;
}

.zatrak-attendance-reset {
    min-height: 44px;
    padding: 0 17px;
    border: 1px solid var(--za-border);
    border-radius: 10px;
    background: #fff;
    color: var(--za-navy);
    font-weight: 700;
    cursor: pointer;
}

.zatrak-attendance-card {
    background: #fff;
    border: 1px solid var(--za-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(20, 31, 45, .045);
}

.zatrak-attendance-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--za-border);
}

.zatrak-attendance-card-head h2 {
    margin: 0;
    font-size: 17px;
    color: var(--za-navy);
}

.zatrak-attendance-card-head span {
    display: block;
    margin-top: 4px;
    color: var(--za-muted);
    font-size: 13px;
}

.zatrak-attendance-head-stat {
    text-align: right;
}

.zatrak-attendance-head-stat strong {
    display: block;
    font-size: 24px;
    color: var(--za-green);
}

.zatrak-attendance-head-stat span {
    margin: 0;
}

.zatrak-attendance-table-wrap {
    overflow-x: auto;
}

.zatrak-attendance-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1120px;
}

.zatrak-attendance-table th {
    padding: 13px 15px;
    background: #fafbfc;
    color: #697586;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 800;
    border-bottom: 1px solid var(--za-border);
    white-space: nowrap;
}

.zatrak-attendance-table td {
    padding: 16px 15px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
}

.zatrak-attendance-table tbody tr:hover {
    background: #fcfdfc;
}

.zatrak-center {
    text-align: center;
}

.zatrak-meeting-title strong {
    display: block;
    color: var(--za-navy);
    font-size: 14px;
}

.zatrak-meeting-location {
    margin-top: 4px;
    font-size: 12px !important;
    color: var(--za-muted) !important;
}

.zatrak-date-cell strong,
.zatrak-date-cell span {
    display: block;
}

.zatrak-date-cell strong {
    font-size: 13px;
}

.zatrak-date-cell span {
    margin-top: 3px;
    font-size: 12px;
    color: var(--za-muted);
}

.zatrak-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.zatrak-count-neutral { background: #eef2f6; color: #455468; }
.zatrak-count-present { background: #e5f5ed; color: #176b45; }
.zatrak-count-absent { background: #fdeaea; color: #b43a3a; }
.zatrak-count-excused { background: #fff5dc; color: #946f18; }
.zatrak-count-pending { background: #edf0f4; color: #6c7787; }

.zatrak-progress-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 125px;
}

.zatrak-progress-track {
    flex: 1;
    height: 7px;
    background: #edf0f3;
    border-radius: 99px;
    overflow: hidden;
}

.zatrak-progress-bar {
    height: 100%;
    background: var(--za-green);
    border-radius: inherit;
}

.zatrak-progress-cell strong {
    min-width: 34px;
    font-size: 12px;
    color: var(--za-navy);
}

.zatrak-attendance-manage {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 37px;
    padding: 0 12px;
    border: 1px solid rgba(23,107,69,.2);
    border-radius: 9px;
    background: #f0f8f4;
    color: var(--za-green);
    font-weight: 800;
    cursor: pointer;
}

.zatrak-attendance-manage svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.zatrak-attendance-empty {
    text-align: center;
    padding: 55px 20px;
}

.zatrak-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #f0f5f2;
    color: var(--za-green);
}

.zatrak-empty-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.zatrak-attendance-empty h3 {
    margin: 14px 0 5px;
    color: var(--za-navy);
}

.zatrak-attendance-empty p {
    margin: 0;
    color: var(--za-muted);
    font-size: 13px;
}

.zatrak-attendance-pagination {
    padding: 15px 20px;
    border-top: 1px solid var(--za-border);
}

/* Modal */
.zatrak-attendance-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 22, 35, .63);
    backdrop-filter: blur(4px);
}

.zatrak-attendance-modal {
    width: min(1220px, 100%);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,.22);
}

.zatrak-attendance-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--za-border);
}

.zatrak-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 7px;
    color: var(--za-muted);
    font-size: 12px;
}

.zatrak-modal-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #f2f4f6;
    color: #586577;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.zatrak-live-summary {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 15px 20px;
    background: #fbfcfc;
    border-bottom: 1px solid var(--za-border);
}

.zatrak-summary-item {
    padding: 12px 13px;
    border: 1px solid var(--za-border);
    border-radius: 11px;
    background: #fff;
}

.zatrak-summary-item span,
.zatrak-summary-item strong {
    display: block;
}

.zatrak-summary-item span {
    font-size: 11px;
    color: var(--za-muted);
    font-weight: 700;
}

.zatrak-summary-item strong {
    margin-top: 3px;
    font-size: 21px;
}

.zatrak-summary-item.present strong { color: #176b45; }
.zatrak-summary-item.absent strong { color: #b43a3a; }
.zatrak-summary-item.excused strong { color: #946f18; }
.zatrak-summary-item.pending strong { color: #6c7787; }
.zatrak-summary-item.percentage strong { color: var(--za-green); }

.zatrak-attendance-editor-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 190px auto;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--za-border);
}

.zatrak-bulk-actions {
    display: flex;
    gap: 7px;
}

.zatrak-bulk-present,
.zatrak-bulk-clear {
    border-radius: 9px;
    padding: 0 12px;
    min-height: 42px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.zatrak-bulk-present {
    border: 1px solid #cce8d9;
    background: #eff9f3;
    color: var(--za-green);
}

.zatrak-bulk-clear {
    border: 1px solid #e2e6eb;
    background: #f7f8fa;
    color: #5f6b7a;
}

.zatrak-attendance-members {
    overflow: auto;
    min-height: 170px;
    max-height: 47vh;
}

.zatrak-attendance-member-row {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) 220px minmax(390px, 1.45fr);
    align-items: center;
    gap: 15px;
    padding: 13px 20px;
    border-bottom: 1px solid #eef0f3;
}

.zatrak-member-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.zatrak-member-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf4ef;
    color: var(--za-green);
    font-size: 13px;
    font-weight: 900;
}

.zatrak-member-identity strong,
.zatrak-member-identity span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zatrak-member-identity strong {
    font-size: 13px;
    color: var(--za-navy);
}

.zatrak-member-identity span {
    margin-top: 3px;
    font-size: 11px;
    color: var(--za-muted);
}

.zatrak-member-note input {
    min-height: 38px;
    padding: 0 10px;
    font-size: 12px;
}

.zatrak-status-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(78px, 1fr));
    gap: 6px;
}

.zatrak-status-option {
    position: relative;
    cursor: pointer;
}

.zatrak-status-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.zatrak-status-option span {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border: 1px solid #e0e4e9;
    border-radius: 8px;
    background: #fff;
    color: #687487;
    font-size: 11px;
    font-weight: 800;
    transition: .15s;
}

.zatrak-status-option.selected.pending span {
    border-color: #aeb7c3;
    background: #eef1f4;
    color: #596575;
}

.zatrak-status-option.selected.present span {
    border-color: #9dd1b5;
    background: #e8f6ee;
    color: #176b45;
}

.zatrak-status-option.selected.absent span {
    border-color: #e8aaaa;
    background: #fff0f0;
    color: #b43a3a;
}

.zatrak-status-option.selected.excused span {
    border-color: #e4cb83;
    background: #fff7df;
    color: #946f18;
}

.zatrak-attendance-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 20px;
    border-top: 1px solid var(--za-border);
    background: #fff;
}

.zatrak-footer-hint {
    color: var(--za-muted);
    font-size: 12px;
}

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

.zatrak-secondary-button,
.zatrak-primary-button {
    min-height: 41px;
    padding: 0 17px;
    border-radius: 9px;
    font-weight: 800;
    cursor: pointer;
}

.zatrak-secondary-button {
    border: 1px solid var(--za-border);
    background: #fff;
    color: #536071;
}

.zatrak-primary-button {
    border: 1px solid var(--za-green);
    background: var(--za-green);
    color: #fff;
}

.zatrak-attendance-loading {
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(12, 22, 35, .16);
    pointer-events: none;
}

.zatrak-loading-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(0,0,0,.15);
    color: var(--za-navy);
    font-size: 12px;
    font-weight: 800;
}

.zatrak-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #dce8e1;
    border-top-color: var(--za-green);
    border-radius: 50%;
    animation: zatrak-spin .75s linear infinite;
}

@keyframes zatrak-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1050px) {
    .zatrak-attendance-editor-toolbar {
        grid-template-columns: 1fr 180px;
    }

    .zatrak-bulk-actions {
        grid-column: 1 / -1;
    }

    .zatrak-attendance-member-row {
        grid-template-columns: 1fr;
    }

    .zatrak-status-options {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 760px) {
    .zatrak-attendance-toolbar {
        grid-template-columns: 1fr;
    }

    .zatrak-attendance-card-head {
        align-items: flex-start;
    }

    .zatrak-live-summary {
        grid-template-columns: repeat(3, 1fr);
    }

    .zatrak-attendance-modal-backdrop {
        padding: 0;
    }

    .zatrak-attendance-modal {
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .zatrak-attendance-editor-toolbar {
        grid-template-columns: 1fr;
    }

    .zatrak-bulk-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .zatrak-attendance-members {
        max-height: none;
        flex: 1;
    }

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

    .zatrak-attendance-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .zatrak-footer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 450px) {
    .zatrak-live-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .zatrak-attendance-member-row {
        padding: 12px 14px;
    }
}

/* =========================================================
   ZATRAKA - MEETING ATTENDANCE REPORT
   ========================================================= */

.zatrak-attendance-report-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px;
}


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

.zatrak-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.zatrak-report-header h1 {
    margin: 4px 0 8px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #123b31;
}

.zatrak-report-header p {
    margin: 0;
    color: #66756f;
    font-size: 14px;
}

.zatrak-report-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zatrak-report-back,
.zatrak-report-print {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.zatrak-report-back {
    color: #31564b;
    background: #f0f4f2;
    border: 1px solid #d9e2de;
}

.zatrak-report-print {
    color: #fff;
    background: #004831;
    border: 1px solid #004831;
}

.zatrak-report-print svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}


/* =========================================================
   FILTERS
   ========================================================= */

.zatrak-report-filter-card {
    background: #fff;
    border: 1px solid #e1e8e4;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: 0 8px 25px rgba(22, 58, 48, 0.05);
}

.zatrak-report-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, 1fr)) auto;
    gap: 14px;
    align-items: end;
}

.zatrak-report-field {
    min-width: 0;
}

.zatrak-report-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #496259;
}

.zatrak-report-field input,
.zatrak-report-field select {
    width: 100%;
    height: 42px;
    border: 1px solid #d9e3df;
    border-radius: 9px;
    padding: 0 12px;
    background: #fff;
    color: #253c35;
    outline: none;
    font-size: 13px;
}

.zatrak-report-field input:focus,
.zatrak-report-field select:focus {
    border-color: #19755d;
    box-shadow: 0 0 0 3px rgba(25, 117, 93, 0.08);
}

.zatrak-report-input-wrap {
    position: relative;
}

.zatrak-report-input-wrap svg {
    position: absolute;
    width: 17px;
    height: 17px;
    left: 12px;
    top: 12px;
    fill: none;
    stroke: #799088;
    stroke-width: 1.8;
    pointer-events: none;
}

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

.zatrak-report-clear {
    height: 42px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid #d8e1dd;
    background: #f5f7f6;
    color: #36564c;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.zatrak-report-summary-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.zatrak-report-summary-card {
    min-height: 105px;
    padding: 17px;
    border: 1px solid #e1e8e4;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 6px 18px rgba(22, 58, 48, 0.04);
}

.zatrak-report-summary-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
}

.zatrak-report-summary-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.zatrak-report-summary-card > div:last-child {
    min-width: 0;
}

.zatrak-report-summary-card span {
    display: block;
    color: #718079;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.zatrak-report-summary-card strong {
    display: block;
    color: #183d33;
    font-size: 23px;
    line-height: 1;
}

.zatrak-report-summary-card.neutral .zatrak-report-summary-icon {
    background: #edf2f0;
    color: #426158;
}

.zatrak-report-summary-card.members .zatrak-report-summary-icon {
    background: #eaf3f0;
    color: #19755d;
}

.zatrak-report-summary-card.present .zatrak-report-summary-icon {
    background: #e8f5ed;
    color: #197342;
}

.zatrak-report-summary-card.absent .zatrak-report-summary-icon {
    background: #faecec;
    color: #b64242;
}

.zatrak-report-summary-card.excused .zatrak-report-summary-icon {
    background: #fff4df;
    color: #9b6a15;
}

.zatrak-report-summary-card.pending .zatrak-report-summary-icon {
    background: #f2f0ed;
    color: #766d61;
}

.zatrak-report-summary-card.percentage .zatrak-report-summary-icon {
    background: #eaf0f8;
    color: #375d89;
}


/* =========================================================
   REPORT CARD
   ========================================================= */

.zatrak-report-card {
    background: #fff;
    border: 1px solid #e1e8e4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(22, 58, 48, 0.05);
}

.zatrak-report-card-header {
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.zatrak-report-card-header h2 {
    margin: 4px 0 5px;
    color: #173d32;
    font-size: 20px;
    font-weight: 800;
}

.zatrak-report-card-header p {
    margin: 0;
    color: #7b8984;
    font-size: 12px;
}

.zatrak-report-total {
    text-align: right;
}

.zatrak-report-total span {
    display: block;
    color: #788881;
    font-size: 11px;
    font-weight: 700;
}

.zatrak-report-total strong {
    color: #004831;
    font-size: 30px;
    font-weight: 800;
}

.zatrak-report-progress {
    padding: 0 24px 18px;
}

.zatrak-report-progress-track {
    height: 8px;
    background: #edf1ef;
    border-radius: 999px;
    overflow: hidden;
}

.zatrak-report-progress-bar {
    height: 100%;
    background: #19755d;
    border-radius: inherit;
    transition: width 0.25s ease;
}


/* =========================================================
   TABLE
   ========================================================= */

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

.zatrak-report-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.zatrak-report-table thead th {
    padding: 13px 16px;
    text-align: left;
    background: #f7f9f8;
    border-top: 1px solid #e5ebe8;
    border-bottom: 1px solid #e1e8e4;
    color: #61736c;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.zatrak-report-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #edf1ef;
    color: #344a43;
    font-size: 13px;
    vertical-align: middle;
}

.zatrak-report-table tbody tr:hover {
    background: #fbfcfb;
}

.zatrak-report-meeting strong,
.zatrak-report-date strong {
    display: block;
    color: #24483e;
    font-weight: 750;
}

.zatrak-report-meeting span,
.zatrak-report-date span {
    display: block;
    margin-top: 3px;
    color: #85938e;
    font-size: 11px;
}

.zatrak-report-member {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zatrak-report-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: #e8f0ed;
    color: #17644f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
}

.zatrak-report-member strong {
    display: block;
    color: #203f36;
    font-weight: 750;
}

.zatrak-report-member span {
    display: block;
    margin-top: 2px;
    color: #84918d;
    font-size: 11px;
}

.zatrak-report-status {
    display: inline-flex;
    min-width: 76px;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-report-status.present {
    color: #197342;
    background: #e7f5ec;
}

.zatrak-report-status.absent {
    color: #b64242;
    background: #faeaea;
}

.zatrak-report-status.excused {
    color: #966617;
    background: #fff3dd;
}

.zatrak-report-status.pending {
    color: #6d665d;
    background: #f0eeeb;
}

.zatrak-report-note {
    color: #687872;
    font-size: 12px;
}


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

.zatrak-report-empty {
    padding: 60px 20px;
    text-align: center;
}

.zatrak-report-empty-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #f1f3f2;
    color: #6b7772;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.zatrak-report-empty h3 {
    margin: 0 0 5px;
    color: #2c4940;
    font-size: 16px;
}

.zatrak-report-empty p {
    margin: 0;
    color: #7d8985;
    font-size: 12px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.zatrak-report-pagination {
    padding: 18px 22px;
    border-top: 1px solid #edf1ef;
}


/* =========================================================
   PRINT FOOTER
   ========================================================= */

.zatrak-report-print-footer {
    display: none;
}


/* =========================================================
   LOADING
   ========================================================= */

.zatrak-report-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(18, 43, 36, 0.12);
    align-items: center;
    justify-content: center;
}

.zatrak-report-loading-box {
    background: #fff;
    padding: 18px 22px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 11px;
    color: #28483e;
    font-size: 13px;
    font-weight: 700;
}

.zatrak-report-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #dce7e3;
    border-top-color: #19755d;
    border-radius: 50%;
    animation: zatrakReportSpin 0.7s linear infinite;
}

@keyframes zatrakReportSpin {
    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 1200px) {

    .zatrak-report-filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .zatrak-report-summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

@media (max-width: 800px) {

    .zatrak-attendance-report-page {
        padding: 18px;
    }

    .zatrak-report-header {
        flex-direction: column;
    }

    .zatrak-report-header-actions {
        width: 100%;
    }

    .zatrak-report-back,
    .zatrak-report-print {
        flex: 1;
    }

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

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

    .zatrak-report-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .zatrak-report-total {
        text-align: left;
    }

}

@media (max-width: 480px) {

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

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    @page {
        size: A4 landscape;
        margin: 12mm;
    }

    body {
        background: #fff !important;
    }

    .zatrak-sidebar,
    .zatrak-topbar,
    .zatrak-report-header-actions,
    .zatrak-report-filter-card,
    .zatrak-report-summary-grid,
    .zatrak-report-pagination,
    .zatrak-report-loading {
        display: none !important;
    }

    .zatrak-main {
        margin: 0 !important;
        width: 100% !important;
    }

    .zatrak-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .zatrak-attendance-report-page {
        max-width: none;
        padding: 0;
    }

    .zatrak-report-card {
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .zatrak-report-card-header {
        padding: 0 0 15px;
    }

    .zatrak-report-progress {
        padding-left: 0;
        padding-right: 0;
    }

    .zatrak-report-table {
        min-width: 0;
    }

    .zatrak-report-table thead th,
    .zatrak-report-table tbody td {
        padding: 8px 7px;
        font-size: 10px;
    }

    .zatrak-report-print-footer {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-top: 14px;
        padding-top: 8px;
        border-top: 1px solid #ccc;
        font-size: 9px;
        color: #555;
    }

    .zatrak-report-avatar {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .zatrak-report-member {
        gap: 6px;
    }

    .zatrak-report-status {
        min-width: 60px;
        padding: 4px 6px;
        font-size: 9px;
    }

}

.zatrak-attendance-report-button {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background: #004831;
    color: #fff;
    border: 1px solid #004831;
    font-size: 13px;
    font-weight: 700;
    transition: 0.2s ease;
}

.zatrak-attendance-report-button:hover {
    background: #17644f;
    color: #fff;
}

.zatrak-attendance-report-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* =========================================================
   ZATRAK CHANGE REQUESTS
========================================================= */

.zatrak-change-requests-page {
    width: 100%;
    padding: 8px 0 40px;
}


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

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

.zatrak-cr-eyebrow {
    color: #a67c2e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    margin-bottom: 6px;
}

.zatrak-cr-header h1 {
    margin: 0;
    color: #12372d;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.zatrak-cr-header p {
    margin: 7px 0 0;
    color: #6d7975;
    font-size: 14px;
}


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

.zatrak-cr-primary-button,
.zatrak-cr-secondary-button,
.zatrak-cr-danger-button,
.zatrak-cr-add-button,
.zatrak-cr-reset {
    min-height: 42px;
    border-radius: 10px;
    padding: 0 15px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.zatrak-cr-primary-button {
    background: #004831;
    border-color: #004831;
    color: #fff;
}

.zatrak-cr-primary-button:hover {
    background: #17644f;
    border-color: #17644f;
    color: #fff;
}

.zatrak-cr-secondary-button {
    background: #fff;
    border-color: #d8dfdc;
    color: #45534e;
}

.zatrak-cr-secondary-button:hover {
    background: #f4f7f5;
}

.zatrak-cr-danger-button {
    background: #a83232;
    border-color: #a83232;
    color: #fff;
}

.zatrak-cr-danger-button:hover {
    background: #8e2929;
}

.zatrak-cr-primary-button svg,
.zatrak-cr-add-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}


/* =========================================================
   ALERTS
========================================================= */

.zatrak-cr-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 600;
}

.zatrak-cr-alert svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.zatrak-cr-alert-success {
    background: #edf8f2;
    color: #176440;
    border: 1px solid #ccebd9;
}

.zatrak-cr-alert-error {
    background: #fff1f1;
    color: #9d3030;
    border: 1px solid #f0cccc;
}


/* =========================================================
   STATISTICS
========================================================= */

.zatrak-cr-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.zatrak-cr-stat-card {
    min-height: 105px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e5e9e7;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(22, 44, 36, .04);
}

.zatrak-cr-stat-card strong {
    display: block;
    color: #193c32;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
}

.zatrak-cr-stat-card span {
    display: block;
    margin-top: 5px;
    color: #77817e;
    font-size: 12px;
    font-weight: 600;
}

.zatrak-cr-stat-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zatrak-cr-stat-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.zatrak-cr-stat-total {
    background: #edf4f1;
    color: #15513f;
}

.zatrak-cr-stat-pending {
    background: #fff7e7;
    color: #9b6a16;
}

.zatrak-cr-stat-approved {
    background: #eaf7ef;
    color: #187345;
}

.zatrak-cr-stat-rejected {
    background: #fff0f0;
    color: #a53232;
}


/* =========================================================
   TOOLBAR
========================================================= */

.zatrak-cr-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.zatrak-cr-search {
    min-width: 280px;
    flex: 1;
    height: 42px;
    position: relative;
}

.zatrak-cr-search svg {
    position: absolute;
    left: 13px;
    top: 12px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #8a9691;
    stroke-width: 1.8;
}

.zatrak-cr-search input {
    width: 100%;
    height: 42px;
    border: 1px solid #dce2df;
    border-radius: 10px;
    padding: 0 14px 0 40px;
    background: #fff;
    color: #24362f;
    outline: none;
    font-size: 13px;
}

.zatrak-cr-search input:focus,
.zatrak-cr-input:focus,
.zatrak-cr-select:focus {
    border-color: #659888;
    box-shadow: 0 0 0 3px rgba(0, 72, 49, .08);
}

.zatrak-cr-select {
    min-width: 155px;
    height: 42px;
    border: 1px solid #dce2df;
    border-radius: 10px;
    padding: 0 12px;
    background: #fff;
    color: #34453f;
    outline: none;
    font-size: 13px;
}

.zatrak-cr-reset {
    background: #fff;
    border-color: #dce2df;
    color: #52605b;
}

.zatrak-cr-reset:hover {
    background: #f4f7f5;
}


/* =========================================================
   MAIN CARD
========================================================= */

.zatrak-cr-card {
    background: #fff;
    border: 1px solid #e3e8e5;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(23, 48, 39, .04);
}

.zatrak-cr-card-header {
    min-height: 78px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #edf0ef;
}

.zatrak-cr-card-header h2 {
    margin: 0;
    color: #183a30;
    font-size: 17px;
    font-weight: 800;
}

.zatrak-cr-card-header p {
    margin: 5px 0 0;
    color: #7a8581;
    font-size: 12px;
}

.zatrak-cr-record-count {
    padding: 7px 10px;
    border-radius: 8px;
    background: #f0f5f3;
    color: #376052;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   TABLE
========================================================= */

.zatrak-cr-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.zatrak-cr-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1050px;
}

.zatrak-cr-table thead th {
    height: 48px;
    padding: 0 15px;
    background: #fafcfb;
    border-bottom: 1px solid #e6ebe8;
    color: #697671;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.zatrak-cr-table tbody td {
    padding: 14px 15px;
    border-bottom: 1px solid #edf0ef;
    color: #31413b;
    vertical-align: middle;
    font-size: 13px;
}

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

.zatrak-cr-table tbody tr:hover {
    background: #fcfdfc;
}


/* =========================================================
   PERSON
========================================================= */

.zatrak-cr-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zatrak-cr-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #eaf1ee;
    color: #23604d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.zatrak-cr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zatrak-cr-person strong,
.zatrak-cr-requester strong {
    display: block;
    color: #243d34;
    font-size: 13px;
    font-weight: 750;
}

.zatrak-cr-person span,
.zatrak-cr-requester span {
    display: block;
    margin-top: 3px;
    color: #87918d;
    font-size: 11px;
}


/* =========================================================
   TYPE / CHANGE / DATE
========================================================= */

.zatrak-cr-type {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 7px;
    background: #f1f5f3;
    color: #3d5c50;
    font-size: 11px;
    font-weight: 700;
}

.zatrak-cr-change-count {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.zatrak-cr-change-count strong {
    color: #1e4e3e;
    font-size: 15px;
}

.zatrak-cr-change-count span {
    color: #7b8782;
    font-size: 11px;
}

.zatrak-cr-date strong,
.zatrak-cr-date span {
    display: block;
}

.zatrak-cr-date strong {
    color: #3b4d46;
    font-size: 12px;
}

.zatrak-cr-date span {
    margin-top: 3px;
    color: #89928f;
    font-size: 11px;
}


/* =========================================================
   STATUS
========================================================= */

.zatrak-cr-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-cr-status-pending {
    background: #fff4da;
    color: #946512;
}

.zatrak-cr-status-approved {
    background: #e9f7ee;
    color: #1c7545;
}

.zatrak-cr-status-rejected {
    background: #ffeded;
    color: #a43030;
}


/* =========================================================
   ACTIONS
========================================================= */

.zatrak-cr-actions-column {
    text-align: center !important;
}

.zatrak-cr-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.zatrak-cr-action {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e0e5e2;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s ease;
}

.zatrak-cr-action svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.zatrak-cr-action-view {
    color: #376a5a;
}

.zatrak-cr-action-view:hover {
    background: #eef6f2;
}

.zatrak-cr-action-approve {
    color: #187344;
}

.zatrak-cr-action-approve:hover {
    background: #eaf7ef;
}

.zatrak-cr-action-reject {
    color: #a33030;
}

.zatrak-cr-action-reject:hover {
    background: #fff0f0;
}


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

.zatrak-cr-empty {
    height: 280px;
}

.zatrak-cr-empty > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #87928d;
}

.zatrak-cr-empty svg {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    fill: none;
    stroke: #9ba6a2;
    stroke-width: 1.5;
}

.zatrak-cr-empty strong {
    color: #53615b;
    font-size: 14px;
}

.zatrak-cr-empty span {
    margin-top: 5px;
    font-size: 12px;
}


/* =========================================================
   PAGINATION
========================================================= */

.zatrak-cr-pagination {
    padding: 15px 20px;
    border-top: 1px solid #edf0ef;
}


/* =========================================================
   MODAL
========================================================= */

.zatrak-cr-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 30px;
    background: rgba(12, 29, 23, .58);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zatrak-cr-modal {
    width: min(650px, 100%);
    max-height: calc(100vh - 60px);
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .25);
}

.zatrak-cr-modal-large {
    width: min(850px, 100%);
}

.zatrak-cr-modal-review {
    width: min(600px, 100%);
}

.zatrak-cr-modal-header {
    padding: 22px 24px;
    border-bottom: 1px solid #e8ecea;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.zatrak-cr-modal-eyebrow {
    color: #a67c2e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.zatrak-cr-modal-header h2 {
    margin: 5px 0 0;
    color: #17392f;
    font-size: 21px;
    font-weight: 800;
}

.zatrak-cr-modal-header p {
    margin: 5px 0 0;
    color: #7b8681;
    font-size: 12px;
}

.zatrak-cr-modal-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 8px;
    background: #f2f5f3;
    color: #53615b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.zatrak-cr-modal-close:hover {
    background: #e7ece9;
}

.zatrak-cr-modal-body {
    padding: 24px;
}

.zatrak-cr-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e8ecea;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}


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

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

.zatrak-cr-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #3b4c45;
    font-size: 12px;
    font-weight: 750;
}

.zatrak-cr-form-group label span {
    color: #a33030;
}

.zatrak-cr-input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d9e0dc;
    border-radius: 9px;
    background: #fff;
    color: #293b34;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

textarea.zatrak-cr-input {
    min-height: 100px;
    resize: vertical;
}

.zatrak-cr-input.is-invalid {
    border-color: #bd5050;
}

.zatrak-cr-error {
    display: block;
    margin-top: 5px;
    color: #a33131;
    font-size: 11px;
}


/* =========================================================
   CHANGE SECTION
========================================================= */

.zatrak-cr-section {
    margin: 22px 0;
    padding: 17px;
    border: 1px solid #e4e9e6;
    border-radius: 12px;
    background: #fbfcfb;
}

.zatrak-cr-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.zatrak-cr-section-header h3 {
    margin: 0;
    color: #29453b;
    font-size: 14px;
    font-weight: 800;
}

.zatrak-cr-section-header p {
    margin: 4px 0 0;
    color: #7c8782;
    font-size: 11px;
}

.zatrak-cr-add-button {
    min-height: 36px;
    padding: 0 11px;
    background: #edf6f1;
    border-color: #d4e8de;
    color: #176047;
    font-size: 11px;
}

.zatrak-cr-add-button svg {
    width: 14px;
    height: 14px;
}

.zatrak-cr-change-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 32px;
    gap: 10px;
    align-items: end;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e7ebe9;
}

.zatrak-cr-change-row:last-child {
    margin-bottom: 0;
}

.zatrak-cr-remove-change {
    width: 32px;
    height: 42px;
    border: 1px solid #efcece;
    border-radius: 8px;
    background: #fff4f4;
    color: #a33131;
    font-size: 20px;
    cursor: pointer;
}


/* =========================================================
   DETAIL GRID
========================================================= */

.zatrak-cr-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.zatrak-cr-detail-grid > div {
    padding: 13px;
    border-radius: 9px;
    background: #f8faf9;
    border: 1px solid #e8ecea;
}

.zatrak-cr-detail-grid span {
    display: block;
    color: #87918d;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 750;
}

.zatrak-cr-detail-grid strong {
    display: block;
    margin-top: 5px;
    color: #31453d;
    font-size: 13px;
}

.zatrak-cr-detail-status.pending {
    color: #946512;
}

.zatrak-cr-detail-status.approved {
    color: #1b7545;
}

.zatrak-cr-detail-status.rejected {
    color: #a33030;
}


/* =========================================================
   INFO BOX
========================================================= */

.zatrak-cr-info-box {
    padding: 14px;
    margin-bottom: 18px;
    border-left: 3px solid #a67c2e;
    border-radius: 8px;
    background: #faf9f5;
}

.zatrak-cr-info-box span {
    display: block;
    margin-bottom: 6px;
    color: #7d704f;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 800;
}

.zatrak-cr-info-box p {
    margin: 0;
    color: #4d5652;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   REVIEW SECTION
========================================================= */

.zatrak-cr-review-section {
    margin-top: 20px;
}

.zatrak-cr-review-section h3 {
    margin: 0 0 10px;
    color: #30483f;
    font-size: 14px;
    font-weight: 800;
}

.zatrak-cr-review-table {
    border: 1px solid #e5e9e7;
    border-radius: 10px;
    overflow: hidden;
}

.zatrak-cr-review-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid #e9edeb;
}

.zatrak-cr-review-row:last-child {
    border-bottom: 0;
}

.zatrak-cr-review-row > div {
    padding: 12px;
    border-right: 1px solid #e9edeb;
}

.zatrak-cr-review-row > div:last-child {
    border-right: 0;
}

.zatrak-cr-review-row span,
.zatrak-cr-review-row small {
    display: block;
    color: #7e8984;
    font-size: 10px;
    font-weight: 700;
}

.zatrak-cr-review-row strong {
    display: block;
    margin-top: 5px;
    color: #374940;
    font-size: 12px;
    word-break: break-word;
}

.zatrak-cr-review-row strong.requested {
    color: #176047;
}


/* =========================================================
   REVIEW WARNING
========================================================= */

.zatrak-cr-review-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 10px;
}

.zatrak-cr-review-warning.approve {
    background: #edf8f1;
    color: #1a7043;
}

.zatrak-cr-review-warning.reject {
    background: #fff0f0;
    color: #a33131;
}

.zatrak-cr-review-warning svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.zatrak-cr-review-warning strong {
    display: block;
    font-size: 13px;
}

.zatrak-cr-review-warning p {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   MINI REVIEW LIST
========================================================= */

.zatrak-cr-review-mini-list {
    margin-bottom: 18px;
    border: 1px solid #e5e9e7;
    border-radius: 9px;
    overflow: hidden;
}

.zatrak-cr-review-mini-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf0ef;
}

.zatrak-cr-review-mini-list > div:last-child {
    border-bottom: 0;
}

.zatrak-cr-review-mini-list span {
    color: #74807b;
    font-size: 11px;
}

.zatrak-cr-review-mini-list strong {
    color: #285345;
    font-size: 12px;
    text-align: right;
}


/* =========================================================
   LOADING
========================================================= */

.zatrak-cr-loading {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(255, 255, 255, .35);
    align-items: center;
    justify-content: center;
}

.zatrak-cr-loading-box {
    min-width: 150px;
    padding: 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 45px rgba(0, 0, 0, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #315147;
    font-size: 12px;
    font-weight: 700;
}

.zatrak-cr-spinner {
    width: 19px;
    height: 19px;
    border: 2px solid #dce8e2;
    border-top-color: #006044;
    border-radius: 50%;
    animation: zatrakCrSpin .7s linear infinite;
}

@keyframes zatrakCrSpin {
    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 1100px) {

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

}

@media (max-width: 800px) {

    .zatrak-cr-header {
        align-items: stretch;
        flex-direction: column;
    }

    .zatrak-cr-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .zatrak-cr-search {
        min-width: 0;
    }

    .zatrak-cr-select,
    .zatrak-cr-reset {
        width: 100%;
    }

    .zatrak-cr-change-row {
        grid-template-columns: 1fr;
    }

    .zatrak-cr-remove-change {
        width: 100%;
    }

    .zatrak-cr-detail-grid {
        grid-template-columns: 1fr;
    }

    .zatrak-cr-review-row {
        grid-template-columns: 1fr;
    }

    .zatrak-cr-review-row > div {
        border-right: 0;
        border-bottom: 1px solid #e9edeb;
    }

    .zatrak-cr-review-row > div:last-child {
        border-bottom: 0;
    }

}

@media (max-width: 600px) {

    .zatrak-change-requests-page {
        padding-bottom: 25px;
    }

    .zatrak-cr-header h1 {
        font-size: 25px;
    }

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

    .zatrak-cr-modal-backdrop {
        padding: 10px;
    }

    .zatrak-cr-modal {
        max-height: calc(100vh - 20px);
        border-radius: 13px;
    }

    .zatrak-cr-modal-header,
    .zatrak-cr-modal-body,
    .zatrak-cr-modal-footer {
        padding: 16px;
    }

    .zatrak-cr-modal-footer {
        flex-wrap: wrap;
    }

    .zatrak-cr-modal-footer button {
        flex: 1;
    }

}

/* =========================================================
   ZATRAK - SYSTEM SETTINGS
   FINAL UI
========================================================= */

.zatrak-settings {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.zatrak-settings .zatrak-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.zatrak-settings .zatrak-settings-title {
    margin: 0;
    color: #12372a;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -.3px;
}

.zatrak-settings .zatrak-settings-subtitle {
    margin: 5px 0 0;
    color: #76817c;
    font-size: 13px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   SETTINGS CARD
--------------------------------------------------------- */

.zatrak-settings .zatrak-settings-card {
    margin-bottom: 18px;
    padding: 0;
    overflow: hidden;

    background: #fff;
    border: 1px solid #e5e9e7;
    border-radius: 14px;

    box-shadow: 0 4px 14px rgba(18, 55, 42, .035);
}

.zatrak-settings .zatrak-settings-card-header {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 18px 20px;

    border-bottom: 1px solid #edf0ee;
}

.zatrak-settings .zatrak-settings-card-body {
    padding: 20px;
}


/* ---------------------------------------------------------
   SECTION ICON
--------------------------------------------------------- */

.zatrak-settings .zatrak-settings-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

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

    border-radius: 11px;

    background: #eff7f3;
    color: #1f6f5b;

    font-size: 17px;
}

.zatrak-settings .zatrak-settings-card-title {
    margin: 0;

    color: #12372a;
    font-size: 15px;
    font-weight: 850;
}

.zatrak-settings .zatrak-settings-card-description {
    margin: 4px 0 0;

    color: #7a8580;
    font-size: 11px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

.zatrak-settings .zatrak-form-group {
    min-width: 0;
}

.zatrak-settings .zatrak-form-label {
    display: block;

    margin-bottom: 7px;

    color: #4b555e;
    font-size: 11px;
    font-weight: 800;
}

.zatrak-settings .zatrak-required {
    color: #b45151;
}

.zatrak-settings .zatrak-input,
.zatrak-settings .zatrak-select,
.zatrak-settings .zatrak-textarea {
    width: 100%;

    border: 1px solid #dfe4e8;
    border-radius: 9px;

    background: #fff;
    color: #252b31;

    font-size: 12px;
    outline: none;

    transition: .18s ease;
}

.zatrak-settings .zatrak-input,
.zatrak-settings .zatrak-select {
    height: 42px;
    padding: 0 12px;
}

.zatrak-settings .zatrak-textarea {
    min-height: 100px;
    padding: 11px 12px;
    resize: vertical;
}

.zatrak-settings .zatrak-input:focus,
.zatrak-settings .zatrak-select:focus,
.zatrak-settings .zatrak-textarea:focus {
    border-color: #8fa99e;
    box-shadow: 0 0 0 3px rgba(31, 111, 91, .07);
}

.zatrak-settings .zatrak-input::placeholder,
.zatrak-settings .zatrak-textarea::placeholder {
    color: #a0a7ad;
}


/* ---------------------------------------------------------
   LOGO AREA
--------------------------------------------------------- */

.zatrak-settings .zatrak-logo-section {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.zatrak-settings .zatrak-logo-box {
    width: 170px;
    height: 170px;

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

    margin: 0 auto;

    overflow: hidden;

    border: 1px solid #e2e8e5;
    border-radius: 14px;

    background: #f7faf8;
}

.zatrak-settings .zatrak-logo-box img {
    width: 100%;
    height: 100%;

    padding: 12px;

    object-fit: contain;
}

.zatrak-settings .zatrak-logo-empty {
    width: 170px;
    height: 170px;

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

    gap: 8px;

    margin: 0 auto;

    border: 1px dashed #ccd5d1;
    border-radius: 14px;

    background: #fafcfb;
    color: #9aa59f;
}

.zatrak-settings .zatrak-logo-empty i {
    font-size: 34px;
}

.zatrak-settings .zatrak-logo-empty span {
    font-size: 10px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   LOGO UPLOAD
--------------------------------------------------------- */

.zatrak-settings .zatrak-upload-box {
    padding: 18px;

    border: 1px dashed #d5ddd9;
    border-radius: 11px;

    background: #fafcfb;
}

.zatrak-settings .zatrak-upload-box input[type="file"] {
    width: 100%;

    padding: 9px;

    border: 1px solid #dfe4e8;
    border-radius: 8px;

    background: #fff;

    font-size: 11px;
}

.zatrak-settings .zatrak-upload-help {
    margin-top: 7px;

    color: #8a939d;
    font-size: 10px;
}

.zatrak-settings .zatrak-new-logo-preview {
    width: 90px;
    height: 90px;

    margin-top: 12px;

    padding: 6px;

    object-fit: contain;

    border: 1px solid #e1e6e3;
    border-radius: 9px;

    background: #fff;
}


/* ---------------------------------------------------------
   TOGGLE SETTINGS
--------------------------------------------------------- */

.zatrak-settings .zatrak-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 64px;

    padding: 13px 15px;

    border: 1px solid #e7ebe9;
    border-radius: 10px;

    background: #fff;

    transition: .18s ease;
}

.zatrak-settings .zatrak-setting-row:hover {
    border-color: #d8e1dc;
    background: #fcfdfc;
}

.zatrak-settings .zatrak-setting-label {
    min-width: 0;
}

.zatrak-settings .zatrak-setting-label strong {
    display: block;

    color: #344054;
    font-size: 12px;
    font-weight: 800;
}

.zatrak-settings .zatrak-setting-label span {
    display: block;

    margin-top: 3px;

    color: #8a939d;
    font-size: 10px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   SWITCH
--------------------------------------------------------- */

.zatrak-settings .zatrak-switch {
    position: relative;

    width: 42px;
    height: 23px;

    flex: 0 0 42px;
}

.zatrak-settings .zatrak-switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

.zatrak-settings .zatrak-switch-slider {
    position: absolute;
    inset: 0;

    border-radius: 999px;

    background: #d8dfdc;

    cursor: pointer;

    transition: .2s ease;
}

.zatrak-settings .zatrak-switch-slider::before {
    content: "";

    position: absolute;

    width: 17px;
    height: 17px;

    left: 3px;
    top: 3px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 1px 3px rgba(0,0,0,.18);

    transition: .2s ease;
}

.zatrak-settings .zatrak-switch input:checked + .zatrak-switch-slider {
    background: #1f6f5b;
}

.zatrak-settings .zatrak-switch input:checked + .zatrak-switch-slider::before {
    transform: translateX(19px);
}


/* ---------------------------------------------------------
   REMOVE LOGO BUTTON
--------------------------------------------------------- */

.zatrak-settings .zatrak-remove-logo {
    margin-top: 10px;

    border: 0;
    background: transparent;

    color: #a34d4d;

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

    cursor: pointer;
}

.zatrak-settings .zatrak-remove-logo:hover {
    color: #873c3c;
}


/* ---------------------------------------------------------
   SAVE AREA
--------------------------------------------------------- */

.zatrak-settings .zatrak-settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin-top: 4px;
}

.zatrak-settings .zatrak-save-button {
    min-height: 40px;

    padding: 9px 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid #12372a;
    border-radius: 9px;

    background: #12372a;
    color: #fff;

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

    cursor: pointer;

    transition: .18s ease;
}

.zatrak-settings .zatrak-save-button:hover {
    background: #0d2b21;
    border-color: #0d2b21;
}

.zatrak-settings .zatrak-save-button:disabled {
    opacity: .65;
    cursor: not-allowed;
}


/* ---------------------------------------------------------
   VALIDATION
--------------------------------------------------------- */

.zatrak-settings .zatrak-error {
    display: block;

    margin-top: 5px;

    color: #b45151;
    font-size: 10px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   SUCCESS MESSAGE
--------------------------------------------------------- */

.zatrak-settings .zatrak-success {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 18px;
    padding: 11px 14px;

    border: 1px solid #d8e9e1;
    border-radius: 9px;

    background: #f0f8f4;
    color: #1f6f5b;

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


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .zatrak-settings .zatrak-logo-section {
        grid-template-columns: 1fr;
    }

    .zatrak-settings .zatrak-logo-box,
    .zatrak-settings .zatrak-logo-empty {
        margin: 0;
    }

}


@media (max-width: 700px) {

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

    .zatrak-settings .zatrak-settings-title {
        font-size: 21px;
    }

    .zatrak-settings .zatrak-settings-card-header,
    .zatrak-settings .zatrak-settings-card-body {
        padding: 16px;
    }

    .zatrak-settings .zatrak-setting-row {
        align-items: flex-start;
    }

}


@media (max-width: 500px) {

    .zatrak-settings .zatrak-logo-box,
    .zatrak-settings .zatrak-logo-empty {
        width: 140px;
        height: 140px;
    }

    .zatrak-settings .zatrak-setting-row {
        gap: 12px;
    }

    .zatrak-settings .zatrak-settings-actions {
        width: 100%;
    }

    .zatrak-settings .zatrak-save-button {
        width: 100%;
    }

}

/* =========================================================
   ZATRAKA NOTIFICATION CENTER
   ========================================================= */

.zatrak-notifications-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 30px 50px;
}

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

.zatrak-notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.zatrak-notifications-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.zatrak-notifications-heading-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;

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

    border-radius: 12px;
    background: #e9f3ef;
}

.zatrak-notifications-heading-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #004831;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-notifications-header h1 {
    margin: 0;
    color: #121111;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
}

.zatrak-notifications-header p {
    margin: 5px 0 0;
    color: #737373;
    font-size: 13px;
}

.zatrak-notifications-mark-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 40px;
    padding: 9px 15px;

    border: 0;
    border-radius: 8px;

    background: #121111;
    color: #fff;

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

    cursor: pointer;
}

.zatrak-notifications-mark-all svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.zatrak-notification-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.zatrak-notification-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 74px;
    padding: 14px 16px;

    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
}

.zatrak-notification-summary-card .summary-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;

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

    border-radius: 9px;
    background: #f3f3f3;
}

.zatrak-notification-summary-card svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: #121111;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-notification-summary-card span {
    display: block;
    margin-bottom: 2px;

    color: #777;
    font-size: 11px;
}

.zatrak-notification-summary-card strong {
    display: block;

    color: #121111;
    font-size: 20px;
    font-weight: 700;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.zatrak-notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 52px;
    margin-bottom: 14px;
    padding: 5px;

    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
}

.zatrak-notification-filters {
    display: flex;
    align-items: center;
    gap: 3px;
}

.zatrak-notification-filters button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 38px;
    padding: 7px 14px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #555;

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

    cursor: pointer;
}

.zatrak-notification-filters button:hover {
    background: #f4f4f4;
    color: #121111;
}

.zatrak-notification-filters button.active {
    background: #121111;
    color: #fff;
}

.zatrak-notification-filters button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 19px;
    height: 19px;
    padding: 0 5px;

    border-radius: 20px;

    background: #fff;
    color: #121111;

    font-size: 10px;
}

.zatrak-delete-read {
    margin-right: 8px;

    border: 0;
    background: transparent;

    color: #b42318;

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

    cursor: pointer;
}

/* =========================================================
   NOTIFICATION LIST
   ========================================================= */

.zatrak-notification-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* =========================================================
   NOTIFICATION CARD
   ========================================================= */

.zatrak-notification-card {
    position: relative;

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

    padding: 17px 18px;

    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;

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

.zatrak-notification-card:hover {
    border-color: #d8d8d8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
}

.zatrak-notification-card.unread {
    border-left: 3px solid #004831;
    background: #fcfefd;
}

.zatrak-notification-card-icon {
    position: relative;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

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

    border-radius: 10px;
    background: #edf5f1;
}

.zatrak-notification-card-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: #004831;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-unread-dot {
    position: absolute;
    top: -3px;
    right: -3px;

    width: 9px;
    height: 9px;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #004831;
}

/* =========================================================
   CARD BODY
   ========================================================= */

.zatrak-notification-card-body {
    flex: 1;
    min-width: 0;
}

.zatrak-notification-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.zatrak-notification-card-header h3 {
    margin: 0;

    color: #121111;
    font-size: 14px;
    font-weight: 700;
}

.notification-type {
    display: inline-block;
    margin-top: 4px;

    color: #8a8a8a;

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

    text-transform: uppercase;
    letter-spacing: .05em;
}

.zatrak-notification-card-header time {
    flex-shrink: 0;

    color: #929292;
    font-size: 11px;
}

.notification-message {
    margin: 8px 0 12px;

    color: #5d5d5d;
    font-size: 12.5px;
    line-height: 1.55;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.zatrak-notification-card-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.zatrak-notification-card-actions button,
.zatrak-notification-card-actions a {
    padding: 0;

    border: 0;
    background: transparent;

    color: #4f4f4f;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;
}

.zatrak-notification-card-actions .notification-view {
    color: #004831;
}

.zatrak-notification-card-actions button:hover,
.zatrak-notification-card-actions a:hover {
    color: #121111;
}

.zatrak-notification-card-actions
.notification-delete {
    color: #b42318;
}

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

.zatrak-notifications-empty {
    padding: 65px 25px;

    text-align: center;

    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
}

.zatrak-notifications-empty .empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;

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

    border-radius: 50%;
    background: #edf5f1;
}

.zatrak-notifications-empty svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: #004831;
    stroke-width: 1.7;
}

.zatrak-notifications-empty h3 {
    margin: 0 0 5px;

    color: #121111;
    font-size: 16px;
}

.zatrak-notifications-empty p {
    margin: 0;

    color: #777;
    font-size: 12px;
}

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

@media (max-width: 700px) {

    .zatrak-notifications-page {
        padding: 20px 14px 35px;
    }

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

    .zatrak-notifications-mark-all {
        width: 100%;
        justify-content: center;
    }

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

    .zatrak-notification-toolbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 7px;
    }

    .zatrak-notification-filters {
        width: 100%;
    }

    .zatrak-notification-filters button {
        flex: 1;
        justify-content: center;
    }

    .zatrak-delete-read {
        margin: 3px 8px 5px auto;
    }

    .zatrak-notification-card-header {
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 480px) {

    .zatrak-notifications-heading-icon {
        width: 40px;
        height: 40px;
    }

    .zatrak-notifications-header h1 {
        font-size: 21px;
    }

    .zatrak-notification-card {
        padding: 13px;
        gap: 10px;
    }

    .zatrak-notification-card-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .zatrak-notification-card-actions {
        gap: 10px;
        flex-wrap: wrap;
    }
}

/* =========================================================
   ZATRAKA - NOTIFICATION DETAIL
   ========================================================= */

.zatrak-notification-detail-page {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 30px 50px;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.zatrak-notification-detail-header {
    margin-bottom: 18px;
}

.zatrak-notification-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #555;
    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.zatrak-notification-back:hover {
    color: #004831;
}

.zatrak-notification-back svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------
   Detail Card
   --------------------------------------------------------- */

.zatrak-notification-detail-card {
    padding: 32px;

    background: #fff;
    border: 1px solid #e4e7e5;
    border-radius: 12px;

    box-shadow: 0 3px 15px rgba(0, 0, 0, .035);
}

/* ---------------------------------------------------------
   Icon
   --------------------------------------------------------- */

.zatrak-notification-detail-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 18px;

    border-radius: 12px;
    background: #edf5f1;
}

.zatrak-notification-detail-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: #004831;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------
   Type
   --------------------------------------------------------- */

.zatrak-notification-detail-type {
    display: inline-block;

    margin-bottom: 7px;

    color: #004831;

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

    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ---------------------------------------------------------
   Title
   --------------------------------------------------------- */

.zatrak-notification-detail-card h1 {
    margin: 0;

    color: #121111;

    font-size: 25px;
    line-height: 1.3;
    font-weight: 700;
}

/* ---------------------------------------------------------
   Meta
   --------------------------------------------------------- */

.zatrak-notification-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 10px;

    color: #858585;
    font-size: 11px;
}

.meta-separator {
    color: #c3c3c3;
}

.notification-status {
    display: inline-flex;

    margin-left: 5px;
    padding: 4px 8px;

    border-radius: 20px;

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

.notification-status.read {
    background: #f1f1f1;
    color: #666;
}

.notification-status.unread {
    background: #eaf5ef;
    color: #004831;
}

/* ---------------------------------------------------------
   Message
   --------------------------------------------------------- */

.zatrak-notification-detail-message {
    margin-top: 28px;
    padding-top: 24px;

    border-top: 1px solid #ededed;

    color: #444;

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

    white-space: pre-line;
}

/* ---------------------------------------------------------
   Related Action
   --------------------------------------------------------- */

.zatrak-notification-related-action {
    margin-top: 24px;
}

.zatrak-notification-primary-action {
    display: inline-flex;
    align-items: center;

    padding: 10px 15px;

    border-radius: 8px;

    background: #004831;
    color: #fff;

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

    text-decoration: none;
}

.zatrak-notification-primary-action:hover {
    background: #003a27;
}

/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */

.zatrak-notification-detail-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 30px;
    padding-top: 20px;

    border-top: 1px solid #ededed;
}

.zatrak-notification-detail-actions button {
    min-height: 38px;
    padding: 8px 14px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.zatrak-notification-detail-actions
button.secondary {
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #444;
}

.zatrak-notification-detail-actions
button.secondary:hover {
    background: #f6f6f6;
}

.zatrak-notification-detail-actions
button.danger {
    border: 1px solid #f0c9c5;
    background: #fff;
    color: #b42318;
}

.zatrak-notification-detail-actions
button.danger:hover {
    background: #fff4f2;
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .zatrak-notification-detail-page {
        padding: 20px 14px 35px;
    }

    .zatrak-notification-detail-card {
        padding: 22px 18px;
    }

    .zatrak-notification-detail-card h1 {
        font-size: 21px;
    }

    .zatrak-notification-detail-meta {
        flex-wrap: wrap;
    }

    .zatrak-notification-detail-actions {
        flex-wrap: wrap;
    }
}

/* =========================================================
   ZATRAK NOTIFICATION DROPDOWN
========================================================= */

.zatrak-notification-dropdown {
    position: relative;
}

.zatrak-notification-dropdown summary {
    list-style: none;
}

.zatrak-notification-dropdown summary::-webkit-details-marker {
    display: none;
}

.zatrak-notification-trigger {
    position: relative;
    cursor: pointer;
}

.zatrak-notification-trigger:focus-visible {
    outline: 2px solid rgba(0, 107, 79, .25);
    outline-offset: 2px;
}


/* ---------------------------------------------------------
   BADGE
--------------------------------------------------------- */

.zatrak-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

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

    border: 2px solid #fff;
    border-radius: 20px;

    background: #c62828;
    color: #fff;

    font-size: 9px;
    line-height: 1;
    font-weight: 800;

    box-sizing: border-box;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   DROPDOWN
--------------------------------------------------------- */

.zatrak-notification-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;

    width: 390px;
    max-width: calc(100vw - 30px);

    background: #fff;

    border: 1px solid #e4e9e7;
    border-radius: 15px;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .12),
        0 4px 12px rgba(15, 23, 42, .05);

    overflow: hidden;

    z-index: 1000;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.zatrak-notification-dropdown-header {
    padding: 16px 17px 14px;

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

    gap: 15px;

    border-bottom: 1px solid #edf1ef;
}

.zatrak-notification-dropdown-header h3 {
    margin: 0;

    color: #17212b;
    font-size: 14px;
    font-weight: 800;
}

.zatrak-notification-dropdown-header p {
    margin: 4px 0 0;

    color: #8a95a1;
    font-size: 10px;
}

.zatrak-notification-dropdown-header > a {
    color: #006b4f;
    text-decoration: none;

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

.zatrak-notification-dropdown-header > a:hover {
    color: #004831;
}


/* ---------------------------------------------------------
   LIST
--------------------------------------------------------- */

.zatrak-notification-dropdown-list {
    max-height: 360px;
    overflow-y: auto;
}


/* ---------------------------------------------------------
   ITEM
--------------------------------------------------------- */

.zatrak-dropdown-notification {
    position: relative;

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

    gap: 11px;

    padding: 13px 16px;

    color: inherit;
    text-decoration: none;

    border-bottom: 1px solid #f0f3f2;

    transition:
        background .16s ease;
}

.zatrak-dropdown-notification:hover {
    background: #f7faf9;
}

.zatrak-dropdown-notification.unread {
    background: #fbfefd;
}

.zatrak-dropdown-notification.unread:hover {
    background: #f3faf7;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.zatrak-dropdown-notification-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 10px;

    background: #edf7f3;
}

.zatrak-dropdown-notification-icon svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: #006b4f;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.zatrak-dropdown-notification-content {
    min-width: 0;
    flex: 1;
}

.zatrak-dropdown-notification-title {
    display: flex;
    align-items: center;

    gap: 7px;
}

.zatrak-dropdown-notification-title strong {
    min-width: 0;

    overflow: hidden;

    color: #17212b;

    font-size: 11px;
    line-height: 1.4;
    font-weight: 750;

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

.zatrak-dropdown-notification-title span {
    flex: 0 0 auto;

    padding: 2px 5px;

    border-radius: 4px;

    background: #eaf5f0;
    color: #006b4f;

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

.zatrak-dropdown-notification-content > p {
    margin: 4px 0 5px;

    overflow: hidden;

    color: #687582;

    font-size: 10px;
    line-height: 1.45;

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


/* ---------------------------------------------------------
   META
--------------------------------------------------------- */

.zatrak-dropdown-notification-meta {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #98a2b3;

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

.zatrak-dropdown-notification-meta i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #c8d0d5;
}


/* ---------------------------------------------------------
   UNREAD DOT
--------------------------------------------------------- */

.zatrak-dropdown-unread-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    margin-top: 5px;

    border-radius: 50%;

    background: #00805c;
}


/* ---------------------------------------------------------
   EMPTY
--------------------------------------------------------- */

.zatrak-dropdown-empty {
    padding: 35px 20px;

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

    text-align: center;
}

.zatrak-dropdown-empty-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 9px;

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

    border-radius: 12px;

    background: #edf7f3;
}

.zatrak-dropdown-empty-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: #006b4f;

    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zatrak-dropdown-empty strong {
    color: #344054;
    font-size: 11px;
}

.zatrak-dropdown-empty span {
    margin-top: 4px;

    color: #98a2b3;
    font-size: 9px;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.zatrak-notification-dropdown-footer {
    padding: 11px 16px;

    border-top: 1px solid #edf1ef;

    background: #fcfdfd;
}

.zatrak-notification-dropdown-footer a {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #006b4f;
    text-decoration: none;

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

.zatrak-notification-dropdown-footer a:hover {
    color: #004831;
}

.zatrak-notification-dropdown-footer svg {
    width: 13px;
    height: 13px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 520px) {

    .zatrak-notification-dropdown-menu {
        position: fixed;

        top: 67px;
        right: 10px;
        left: 10px;

        width: auto;
        max-width: none;
    }

}