/* WIBLIV Premium Theme  visual layer only */
:root {
    --wp-red: #e9435b;
    --wp-red-dark: #d92f49;
    --wp-red-soft: #fff0f2;
    --wp-ink: #14233d;
    --wp-muted: #71809a;
    --wp-line: #e4eaf3;
    --wp-bg: #f4f6fb;
    --wp-white: #ffffff;
    --wp-shadow: 0 12px 32px rgba(22, 39, 68, .055);
    --wp-radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--wp-ink);
    background: var(--wp-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
img { max-width: 100%; }

a { transition: color .18s ease, background .18s ease, border-color .18s ease; }

button, .btn, input, select, textarea {
    border-radius: 10px;
}

input, select, textarea {
    max-width: 100%;
    border: 1px solid #dce4ef;
    background: #fff;
    color: var(--wp-ink);
    padding: 11px 13px;
}

input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(233, 67, 91, .13);
    border-color: var(--wp-red);
}

button, .btn, [type="submit"] {
    cursor: pointer;
}

.btn-primary, .hierarchy-btn:not(.secondary) {
    background: var(--wp-red);
    border-color: var(--wp-red);
    color: #fff;
    box-shadow: 0 5px 12px rgba(233, 67, 91, .13);
}

.btn-primary:hover, .hierarchy-btn:not(.secondary):hover {
    background: var(--wp-red-dark);
}

.panel, .stat, .card, .table-container, .filter-card,
.employee-form-panel, .hierarchy-toolbar, .hierarchy-stat,
.hierarchy-tree, .hierarchy-panel {
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-radius);
    background: var(--wp-white);
    box-shadow: var(--wp-shadow);
}

table { width: 100%; border-collapse: collapse; }
th {
    background: #f7f8fc;
    color: #66758e;
    font-size: 11px;
    letter-spacing: .055em;
    text-transform: uppercase;
}
td, th { padding: 14px 13px; border-bottom: 1px solid #edf0f6; }
tbody tr:hover { background: #fff8f9; }

.notice { border-radius: 12px; }
.notice.error, .error {
    color: #b42338;
}
label { color: #34445d; font-weight: 600; }

.eyebrow {
    color: var(--wp-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.subtitle, .stat-note, .employee-form-section-description {
    color: var(--wp-muted);
    line-height: 1.7;
}

/* Dashboard */
body.wa-dashboard {
    background: #f4f6fb;
    color: var(--wp-ink);
}

.wa-topbar {
    background: rgba(255,255,255,.97);
    border: 1px solid #edf0f6;
    box-shadow: 0 4px 18px rgba(22,39,68,.035);
}

.wa-main {
    width: min(1100px, calc(100% - 48px));
    margin: 28px auto 36px;
}

.wa-welcome {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(115deg, #f58b9b 0%, #ed526b 100%);
    box-shadow: 0 18px 38px rgba(218, 56, 82, .12);
}

.wa-welcome h1 {
    max-width: 720px;
    line-height: 1.18;
    letter-spacing: -.035em;
}

.wa-primary-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 11px;
    padding: 12px 15px;
    text-decoration: none;
}

.wa-section { margin-top: 30px; }
.wa-section-heading { margin-bottom: 16px; }

.wa-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.wa-module-card {
    display: flex;
    min-width: 0;
    min-height: 218px;
    flex-direction: column;
    align-items: flex-start;
    padding: 21px 20px;
    border: 1px solid var(--wp-line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(22,39,68,.04);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.wa-module-card:hover {
    transform: translateY(-3px);
    border-color: #f2a6b2;
    box-shadow: 0 14px 30px rgba(22,39,68,.08);
}

.wa-module-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.wa-icon-red { background: #fff0f2; color: #dc304a; }
.wa-icon-blue { background: #edf4ff; color: #2b68d8; }
.wa-icon-violet { background: #f3edff; color: #8050d9; }
.wa-icon-green { background: #eaf8f0; color: #16875c; }
.wa-icon-amber { background: #fff5e7; color: #bd7614; }

.wa-module-number {
    color: #9aa6ba;
    font-size: 10px;
    font-weight: 800;
}

.wa-module-card strong { margin-top: 17px; font-size: 15px; }
.wa-module-desc { margin-top: 9px; color: var(--wp-muted); line-height: 1.7; font-size: 12px; }
.wa-module-action { margin-top: auto; padding-top: 20px; color: var(--wp-red-dark); font-weight: 750; font-size: 12px; }

.wa-bottom-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    margin-top: 18px;
}

.wa-workflow-panel, .wa-info-panel {
    border: 1px solid var(--wp-line);
    border-radius: 17px;
    background: #fff;
    padding: 22px;
    box-shadow: var(--wp-shadow);
}

.wa-workflow-step {
    border: 1px solid var(--wp-line);
    border-radius: 12px;
    background: #fafbfe;
}

.wa-hint { color: var(--wp-muted); line-height: 1.65; }
.wa-footer { color: var(--wp-muted); }

/* Employee and hierarchy pages */
.sidebar {
    background: #fff;
    border-right: 1px solid var(--wp-line);
}

.sidebar .nav-link {
    border-radius: 10px;
    transition: background .18s ease, color .18s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--wp-red-soft);
    color: var(--wp-red-dark);
}

.topbar {
    background: #fff;
    border-bottom: 1px solid var(--wp-line);
}

.content, .employee-form-page {
    color: var(--wp-ink);
}

.page-head h1, .hierarchy-heading h1, .employee-form-heading h1 {
    letter-spacing: -.035em;
}

.stats, .hierarchy-stats {
    gap: 14px;
}

.stat, .hierarchy-stat {
    padding: 20px;
}

.stat-number, .hierarchy-stat strong {
    color: var(--wp-ink);
    font-size: 27px;
    font-weight: 800;
}

.employee-form-section {
    padding: 22px 0;
    border-bottom: 1px solid #edf0f6;
}

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

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

@media (max-width: 600px) {
    .wa-main { width: calc(100% - 28px); margin-top: 18px; }
    .wa-module-grid { grid-template-columns: 1fr; }
    .wa-module-card { min-height: 180px; }
    .wa-welcome { border-radius: 17px; }
    .wa-welcome h1 { font-size: clamp(25px, 7vw, 34px); }
    .stats, .hierarchy-stats { grid-template-columns: 1fr; }
    td, th { padding: 10px 8px; }
}


/* ===== Wibliv premium corrections: icons and arrows ===== */
.wa-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    font-size: 0 !important;
    overflow: hidden;
}

.wa-icon-red::before,
.wa-icon-blue::before,
.wa-icon-violet::before,
.wa-icon-green::before,
.wa-icon-amber::before {
    display: block;
    font-size: 23px;
    line-height: 1;
    font-weight: 700;
}

.wa-icon-red::before   { content: "\25A3"; color: #dc304a; }
.wa-icon-blue::before  { content: "\25C8"; color: #2b68d8; }
.wa-icon-violet::before { content: "\25C6"; color: #8050d9; }
.wa-icon-green::before { content: "\2713"; color: #16875c; }
.wa-icon-amber::before { content: "\25CE"; color: #bd7614; }

.wa-module-action b {
    font-size: 0 !important;
}

.wa-module-action b::after {
    content: "\2192";
    font-size: 16px;
    line-height: 1;
    color: #d92f49;
}

.wa-primary-link span {
    font-size: inherit !important;
}

.wa-primary-link span::after {
    content: none !important;
}

.wa-module-card,
.wa-info-panel,
.hierarchy-stat,
.hierarchy-toolbar,
.hierarchy-board,
.employee-form-panel,
.table-container {
    box-shadow: 0 8px 26px rgba(20, 35, 61, .045);
}

@media (max-width: 600px) {
    .wa-module-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

/* ===== WIBLIV FINAL UI CORRECTION 2026-11-04 ===== */
html { -webkit-text-size-adjust: 100%; }
body, button, input, select, textarea {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
}
body {
    font-size: 14px;
    line-height: 1.6;
    color: #17243b;
    background: #f5f7fb;
}
p, label, td, input, select, textarea, button {
    line-height: 1.55;
}
small { font-size: 12px; }
input, select, textarea {
    font-size: 14px !important;
    min-height: 42px;
}
th, td { font-size: 13px; }

/* Dashboard uses more of the available screen */
body.wa-dashboard { background: #f4f6fa !important; }
.wa-topbar {
    min-height: 78px !important;
    padding: 14px clamp(20px, 4vw, 64px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 12px rgba(20,35,61,.06) !important;
}
.wa-brand img { width: 145px !important; height: 48px !important; }
.wa-main {
    width: min(1320px, calc(100% - 64px)) !important;
    max-width: 1320px !important;
    margin: 28px auto 42px !important;
    padding: 0 0 28px !important;
}
.wa-breadcrumb { font-size: 13px !important; margin-bottom: 22px !important; }

/* Replace the oversized pink banner with a clean corporate hero */
.wa-welcome {
    min-height: 0 !important;
    padding: 34px 38px !important;
    border: 1px solid #e5eaf2 !important;
    border-left: 5px solid #d7192d !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #17243b !important;
    box-shadow: 0 8px 26px rgba(20,35,61,.055) !important;
}
.wa-welcome-copy { max-width: 800px !important; }
.wa-eyebrow {
    color: #d7192d !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
}
.wa-welcome h1 {
    color: #17243b !important;
    font-size: clamp(28px, 2.4vw, 38px) !important;
    letter-spacing: -.6px !important;
    line-height: 1.25 !important;
}
.wa-welcome p {
    color: #64718a !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.wa-primary-link {
    background: #d7192d !important;
    color: #fff !important;
    border: 1px solid #d7192d !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    padding: 12px 18px !important;
}
.wa-primary-link:hover { background: #b91427 !important; color: #fff !important; }
.wa-welcome-art { display: none !important; }

.wa-section { margin-top: 30px !important; }
.wa-section-heading { margin-bottom: 18px !important; }
.wa-section-heading h2, .wa-info-panel h2 {
    color: #17243b !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
}
.wa-section-heading p, .wa-info-panel p {
    color: #68768d !important;
    font-size: 13px !important;
}

/* Consistent, readable module cards */
.wa-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}
.wa-module-card {
    min-height: 225px !important;
    padding: 24px !important;
    border: 1px solid #e1e7f0 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 5px 20px rgba(20,35,61,.045) !important;
    color: #17243b !important;
    text-decoration: none !important;
}
.wa-module-card:hover {
    border-color: #eaa1ab !important;
    box-shadow: 0 12px 28px rgba(20,35,61,.09) !important;
    transform: translateY(-2px);
}
.wa-module-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}
.wa-icon-red::before,
.wa-icon-blue::before,
.wa-icon-violet::before,
.wa-icon-green::before,
.wa-icon-amber::before {
    display: block !important;
    font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}
.wa-icon-red::before { content: "\25A3" !important; color: #d7192d !important; }
.wa-icon-blue::before { content: "\25C8" !important; color: #2767c8 !important; }
.wa-icon-violet::before { content: "\25C6" !important; color: #7650c8 !important; }
.wa-icon-green::before { content: "\2713" !important; color: #16845c !important; }
.wa-icon-amber::before { content: "\25CE" !important; color: #a8660e !important; }

.wa-module-number {
    color: #8290a7 !important;
    font-size: 11px !important;
}
.wa-module-card > strong {
    display: block !important;
    margin-top: 17px !important;
    color: #17243b !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}
.wa-module-desc {
    display: block !important;
    margin-top: 8px !important;
    color: #64718a !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}
.wa-module-action {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
    margin-top: auto !important;
    padding-top: 20px !important;
    color: #c91e32 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
.wa-module-action b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #fff0f2 !important;
    font-size: 0 !important;
}
.wa-module-action b::after {
    content: "\2192" !important;
    font-size: 18px !important;
    color: #c91e32 !important;
}
.wa-primary-link span { font-size: 0 !important; }
.wa-primary-link span::after {
    content: "\2192" !important;
    font-size: 16px !important;
}
.wa-bottom-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr) !important;
    gap: 20px !important;
    margin-top: 22px !important;
}
.wa-info-panel {
    padding: 24px !important;
    border: 1px solid #e1e7f0 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 5px 20px rgba(20,35,61,.045) !important;
}
.wa-workflow-arrow { font-size: 0 !important; }
.wa-workflow-arrow::after {
    content: "\2192" !important;
    font-size: 18px !important;
    color: #d7192d !important;
}
.wa-hint { font-size: 12px !important; }
.wa-footer { font-size: 12px !important; }

@media (max-width: 1000px) {
    .wa-main { width: calc(100% - 40px) !important; }
    .wa-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .wa-bottom-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .wa-topbar { padding: 12px 15px !important; }
    .wa-brand img { width: 108px !important; height: 38px !important; }
    .wa-main { width: calc(100% - 28px) !important; margin-top: 18px !important; }
    .wa-welcome { padding: 24px 20px !important; }
    .wa-welcome h1 { font-size: 27px !important; }
    .wa-module-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    .wa-module-card { min-height: 190px !important; padding: 19px !important; }
    .wa-module-card > strong { font-size: 15px !important; }
    .wa-module-desc { font-size: 13px !important; }
    .wa-bottom-grid { grid-template-columns: 1fr !important; }
}

/* ===== END WIBLIV FINAL UI CORRECTION ===== */