/* =========================================================
   Telangana Health — General Transfers 2026
   Shared theme: forest green + gold, Newsreader + Jakarta
   ========================================================= */

:root {
    /* Navy primary (was green) */
    --tg-green-900: #0A1F44;
    --tg-green-800: #102A5C;
    --tg-green-700: #163776;
    --tg-green-600: #214A95;
    --tg-green-100: #E2E8F4;
    --tg-green-50: #F1F4FA;

    /* Saffron accent (was gold) */
    --tg-gold-700: #9A4A0F;
    --tg-gold-600: #C46116;
    --tg-gold-500: #E07A1F;
    --tg-gold-100: #FCE6CF;

    --tg-ink-900: #121826;
    --tg-ink-700: #2C3344;
    --tg-ink-500: #5C6478;
    --tg-ink-300: #9AA1B3;
    --tg-ink-100: #D9DDE5;

    --tg-paper: #FBFAF6;
    --tg-paper-2: #F2F0E8;
    --tg-white: #FFFFFF;

    --tg-danger: #B3261E;
    --tg-warning: #B86E00;
    --tg-success: #1B6B2A;

    --tg-radius: 10px;
    --tg-radius-sm: 6px;
    --tg-shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.06), 0 1px 1px rgba(10, 31, 68, 0.04);
    --tg-shadow-md: 0 6px 18px rgba(10, 31, 68, 0.08), 0 2px 4px rgba(10, 31, 68, 0.04);

    --tg-font-serif: "Newsreader", "Source Serif Pro", Georgia, serif;
    --tg-font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
    --tg-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

html,
body {
    background: var(--tg-paper);
    color: var(--tg-ink-900);
    font-family: var(--tg-font-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tg-serif {
    font-family: var(--tg-font-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.tg-sans {
    font-family: var(--tg-font-sans);
}

.tg-mono {
    font-family: var(--tg-font-mono);
}

a {
    color: var(--tg-green-700);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--tg-green-900);
}

/* ---------- Top bar / header ---------- */
.tg-topbar {
    background: var(--tg-green-900);
    color: #EAE3CB;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    top: 3px;
    position: relative;
}

.tg-topbar::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            #FF9933 0%,
            /* Saffron */
            #FF9933 33.33%,
            #FFFFFF 33.33%,
            /* White */
            #FFFFFF 66.66%,
            #138808 66.66%,
            /* Green */
            #138808 100%);
}

.tg-topbar a {
    color: #EAE3CB;
    text-decoration: none;
}


.tg-topbar a:hover {
    color: var(--tg-gold-500);
}

.tg-header {
    background: var(--tg-white);
    border-bottom: 1px solid var(--tg-ink-100);
    position: relative;
    z-index: 1;
}

.tg-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            var(--tg-green-600) 0%,
            var(--tg-green-600) 33.33%,
            var(--tg-gold) 33.33%,
            var(--tg-gold) 66.66%,
            var(--tg-green-600) 66.66%,
            var(--tg-green-600) 100%);
    z-index: 2;
}

.tg-emblem {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--tg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E2E2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    flex-shrink: 0;
    overflow: hidden;
    padding: 3px;
}

.tg-emblem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tg-rising-telangana {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.tg-rising-telangana img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tg-org-name {
    font-family: var(--tg-font-serif);
    font-weight: 600;
    font-size: 18px;
    color: var(--tg-green-900);
    line-height: 1.25;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-org-sub {
    font-size: 12px;
    color: var(--tg-ink-500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
}

.tg-org-telugu {
    font-size: 13px;
    color: var(--tg-ink-700);
    margin-top: 3px;
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .tg-org-name {
        white-space: normal;
        font-size: 17px;
    }
}

.tg-portal-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tg-green-50);
    border: 1px solid var(--tg-green-100);
    color: var(--tg-green-800);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
}

.tg-portal-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tg-gold-600);
    box-shadow: 0 0 0 3px rgba(200, 169, 81, 0.25);
}

/* ---------- Buttons ---------- */
.btn-tg-primary {
    background: var(--tg-green-800);
    color: #fff;
    border: 1px solid var(--tg-green-800);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 10px 22px;
    border-radius: var(--tg-radius-sm);
    transition: all .15s ease;
}

.btn-tg-primary:hover {
    background: var(--tg-green-900);
    color: #fff;
    border-color: var(--tg-green-900);
}

.btn-tg-primary:disabled {
    background: var(--tg-ink-300);
    border-color: var(--tg-ink-300);
}

.btn-tg-outline {
    background: transparent;
    color: var(--tg-green-800);
    border: 1px solid var(--tg-green-800);
    font-weight: 600;
    padding: 10px 22px;
    border-radius: var(--tg-radius-sm);
    transition: all .15s ease;
}

.btn-tg-outline:hover {
    background: var(--tg-green-50);
    color: var(--tg-green-900);
}

.btn-tg-ghost {
    background: transparent;
    color: var(--tg-ink-700);
    border: 1px solid var(--tg-ink-100);
    padding: 8px 14px;
    border-radius: var(--tg-radius-sm);
}

.btn-tg-ghost:hover {
    background: var(--tg-paper-2);
}

.btn-tg-gold {
    background: var(--tg-gold-500);
    color: var(--tg-green-900);
    border: 1px solid var(--tg-gold-600);
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--tg-radius-sm);
}

.btn-tg-gold:hover {
    background: var(--tg-gold-600);
}

/* ---------- Form controls ---------- */
.tg-label {
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tg-ink-700);
    margin-bottom: 6px;
    display: block;
}

.form-control.tg-input,
.form-select.tg-input {
    border: 1px solid var(--tg-ink-100);
    border-radius: var(--tg-radius-sm);
    padding: 11px 14px;
    font-size: 15px;
    background: var(--tg-white);
    color: var(--tg-ink-900);
    transition: border-color .15s, box-shadow .15s;
}

.form-control.tg-input:focus,
.form-select.tg-input:focus {
    border-color: var(--tg-green-700);
    box-shadow: 0 0 0 3px rgba(22, 55, 118, 0.15);
    outline: none;
}

.form-control.tg-input::placeholder {
    color: var(--tg-ink-300);
}

.tg-input-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--tg-paper-2);
    border: 1px solid var(--tg-ink-100);
    border-right: none;
    border-radius: var(--tg-radius-sm) 0 0 var(--tg-radius-sm);
    color: var(--tg-ink-700);
    font-weight: 600;
    font-size: 14px;
}

.tg-input-prefix+.form-control.tg-input {
    border-radius: 0 var(--tg-radius-sm) var(--tg-radius-sm) 0;
}

/* ---------- Card ---------- */
.tg-card {
    background: var(--tg-white);
    border: 1px solid var(--tg-ink-100);
    border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow-sm);
}

.tg-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--tg-ink-100);
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-card-header .tg-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tg-green-50);
    border: 1px solid var(--tg-green-100);
    color: var(--tg-green-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tg-font-serif);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.tg-card-title {
    font-family: var(--tg-font-serif);
    font-weight: 600;
    font-size: 19px;
    color: var(--tg-ink-900);
    margin: 0;
    letter-spacing: -0.01em;
}

.tg-card-sub {
    font-size: 13px;
    color: var(--tg-ink-500);
    margin: 2px 0 0;
}

.tg-card-body {
    padding: 24px;
}

/* ---------- Footer ---------- */
.tg-footer {
    background: var(--tg-green-900);
    color: #C9D2C9;
    margin-top: 64px;
    padding: 36px 0 0;
    font-size: 13.5px;
}

.tg-footer h6 {
    font-family: var(--tg-font-serif);
    color: var(--tg-gold-500);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.tg-footer a {
    color: #C9D2C9;
    text-decoration: none;
}

.tg-footer a:hover {
    color: var(--tg-gold-500);
}

.tg-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 0;
    margin-top: 28px;
    font-size: 12.5px;
    color: #8E9A8E;
}

/* ---------- Page loader ---------- */
.tg-loader {
    position: fixed;
    inset: 0;
    background: var(--tg-paper);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    transition: opacity .35s ease, visibility .35s ease;
}

.tg-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.tg-loader-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--tg-green-100);
    border-top-color: var(--tg-green-800);
    animation: tgspin 0.85s linear infinite;
}

.tg-loader-text {
    font-family: var(--tg-font-serif);
    font-size: 14px;
    color: var(--tg-ink-500);
    letter-spacing: 0.04em;
}

@keyframes tgspin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Misc helpers ---------- */
.tg-divider {
    height: 1px;
    background: var(--tg-ink-100);
    margin: 18px 0;
}

.tg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tg-paper-2);
    color: var(--tg-ink-700);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--tg-ink-100);
}

.tg-chip.success {
    background: var(--tg-green-50);
    color: var(--tg-green-800);
    border-color: var(--tg-green-100);
}

.tg-chip.gold {
    background: var(--tg-gold-100);
    color: var(--tg-gold-700);
    border-color: #ead9a3;
}

.tg-link-subtle {
    color: var(--tg-ink-500);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px dashed var(--tg-ink-300);
}

.tg-link-subtle:hover {
    color: var(--tg-green-800);
    border-color: var(--tg-green-700);
}

/* paper texture (very faint) */
.tg-paper-tex {
    background-color: var(--tg-paper);
    background-image:
        radial-gradient(rgba(10, 31, 68, 0.03) 1px, transparent 1px),
        radial-gradient(rgba(224, 122, 31, 0.025) 1px, transparent 1px);
    background-size: 28px 28px, 36px 36px;
    background-position: 0 0, 14px 18px;
}