/* Shared ZINARA visual language for public, candidate, recruiter and AI pages. */
:root {
    --zinara-black: #000000;
    --zinara-charcoal: #181c1e;
    --zinara-gold: #cfb14e;
    --zinara-gold-bright: #ffe088;
    --zinara-gold-soft: #fff8df;
    --zinara-surface: #f9f9fc;
    --zinara-card: #ffffff;
    --zinara-line: #e2e2e5;
    --zinara-text: #1a1c1e;
    --zinara-muted: #6b7280;
}

html { color-scheme: light; }
body {
    background-color: var(--zinara-surface) !important;
    color: var(--zinara-text) !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 { color: var(--zinara-black); }
hr { border-color: var(--zinara-gold); opacity: .55; }

::selection { background: var(--zinara-gold); color: var(--zinara-black); }
a { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
a:hover { color: #8a6d08; }

:focus-visible {
    outline: 3px solid rgba(207, 177, 78, .48) !important;
    outline-offset: 2px;
}

/* Brand utilities shared by Tailwind and legacy Bootstrap templates. */
.bg-primary { background-color: var(--zinara-black) !important; }
.text-primary { color: var(--zinara-black) !important; }
.border-primary { border-color: var(--zinara-black) !important; }
.bg-secondary { background-color: var(--zinara-gold) !important; }
.text-secondary { color: #8a6d08 !important; }
.border-secondary { border-color: var(--zinara-gold) !important; }

.btn-primary,
button.btn-primary,
input.btn-primary {
    background: var(--zinara-black) !important;
    border-color: var(--zinara-black) !important;
    color: #fff !important;
}
.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover { background: #292929 !important; border-color: #292929 !important; }
.btn-warning,
.btn-gold {
    background: var(--zinara-gold) !important;
    border-color: var(--zinara-gold) !important;
    color: var(--zinara-black) !important;
}

/* Consistent work surfaces across all portal areas. */
.card,
.modal-content,
.dropdown-menu,
.zinara-card {
    border-color: var(--zinara-line) !important;
    border-radius: .9rem;
    background: var(--zinara-card);
    box-shadow: 0 7px 22px rgba(0, 0, 0, .06);
}
.card-header,
.modal-header {
    border-bottom-color: var(--zinara-line) !important;
    background: #fff;
}
.modal-header.zinara-dark,
.zinara-section-header {
    border-bottom: 3px solid var(--zinara-gold) !important;
    background: var(--zinara-black) !important;
    color: #fff !important;
}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border-color: #cfd2d8 !important;
    border-radius: .6rem !important;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--zinara-gold) !important;
    box-shadow: 0 0 0 3px rgba(207, 177, 78, .18) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--zinara-gold); }

/* Tables and DataTables */
table thead th,
.dataTable thead th {
    border-bottom-color: var(--zinara-gold) !important;
    background: var(--zinara-black) !important;
    color: var(--zinara-gold-bright) !important;
}
table tbody tr:hover,
.dataTable tbody tr:hover { background: var(--zinara-gold-soft) !important; }
.dt-button,
.page-item.active .page-link {
    border-color: var(--zinara-black) !important;
    background: var(--zinara-black) !important;
    color: #fff !important;
}
.page-link { color: var(--zinara-black); }

/* Status and navigation accents. */
.sidebar-link.active,
.nav-link.active:not(.text-white),
.dropdown-item.active {
    background: var(--zinara-gold) !important;
    color: var(--zinara-black) !important;
}
.badge.bg-primary,
.badge-primary { background: var(--zinara-black) !important; color: #fff !important; }
.badge.bg-warning,
.badge-warning { background: var(--zinara-gold) !important; color: var(--zinara-black) !important; }

/* International phone input: country selector + national number */
.international-phone-control {
    display: grid !important;
    grid-template-columns: minmax(10rem, 42%) minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #cfd2d8;
    border-radius: .75rem;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.international-phone-control:focus-within {
    border-color: var(--zinara-gold) !important;
    box-shadow: 0 0 0 3px rgba(207, 177, 78, .16);
}

.international-phone-country {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    border-right: 1px solid #e1e3e7 !important;
    border-radius: 0 !important;
    padding: .65rem 2rem .65rem .7rem !important;
    background-color: #f7f5ed !important;
    color: #171717 !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    line-height: 1.25rem !important;
    cursor: pointer;
    box-shadow: none !important;
}

.international-phone-control input[type="tel"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-left: .85rem !important;
    background: #fff !important;
    box-shadow: none !important;
}

.international-phone-control.is-invalid {
    border-color: #ba1a1a !important;
}

@media (max-width: 520px) {
    .international-phone-control {
        grid-template-columns: minmax(8rem, 46%) minmax(0, 1fr);
    }

    .international-phone-country {
        width: 100% !important;
        min-width: 0 !important;
        font-size: .72rem !important;
    }
}

/* Standalone legacy pages can opt into these without inheriting a base. */
.zinara-page-shell { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); background: var(--zinara-surface); }
.zinara-page-panel { max-width: 960px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--zinara-line); border-top: 4px solid var(--zinara-gold); border-radius: 1rem; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.08); }