/* =========================================================
   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;
}
.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;
}
.tg-header::after {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg,
        var(--tg-green-800) 0%,
        var(--tg-green-800) 33%,
        var(--tg-gold-500)  33%,
        var(--tg-gold-500)  66%,
        var(--tg-green-800) 66%,
        var(--tg-green-800) 100%);
}

.tg-emblem {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #F6EDD0 0%, #C8A951 55%, #8a6b1c 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--tg-ink-900);
    font-family: var(--tg-font-serif);
    font-weight: 700;
    font-size: 22px;
    border: 1px solid #E2E2E2;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    flex-shrink: 0;
    overflow: hidden;
}
.tg-emblem img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.tg-rising-telangana {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tg-rising-logo {
    height: 56px;
    width: auto;
    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;
}

  .top-bar {
            background: #fd9026;
            color: #643200;
            font-size: 12px;
            font-weight: 500;
        }

        .navbar-custom {
            background: #ffffff;
            border-bottom: 1px solid #dee2e6;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .portal-title {
            color: #1D8745;
            font-weight: 700;
            font-size: 24px;
        }

        .nav-link {
            color: #64748b;
            font-weight: 600;
            transition: 0.3s;
        }

        .nav-link:hover {
            color: #1D8745;
        }

        .btn-profile {
            background: #1d8745;
            color: #fff;
            border-radius: 8px;
            padding: 8px 18px;
            font-weight: 600;
            border: none;
            transition: 0.3s;
        }

        .btn-profile:hover {
            background: #166534;
        }

        .bg-pattern {
            background-color: #f9f9f9;
            background-image: radial-gradient(#e0e0e0 0.5px, transparent 0.5px);
            background-size: 24px 24px;
        }

        .section-heading {
            border-left: 5px solid #1d8745;
            padding-left: 20px;
        }

        .section-heading h1 {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .section-heading p {
            font-size: 18px;
            color: #3f4a3f;
            margin-bottom: 0;
        }

        .card-custom {
            background: #ffffff;
            border: 1px solid #becabc;
            border-radius: 16px;
            padding: 32px;
            position: relative;
            overflow: hidden;
            height: 100%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .card-top-primary {
            position: absolute;
            top: 0;
            left: 0;
            height: 4px;
            width: 100%;
            background: var(--tg-green-800);
        }

        .card-top-secondary {
            position: absolute;
            top: 0;
            left: 0;
            height: 4px;
            width: 100%;
            background: var(--tg-gold-500);
        }

        .section-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--tg-green-900);
        }

        .badge-custom {
            background: rgba(253, 144, 38, 0.15);
            color: #914c00;
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 50px;
            font-weight: 600;
        }

        .info-item {
            padding: 12px;
            border-radius: 12px;
            transition: 0.3s;
            border: 1px solid #cccccc;
            cursor: pointer;
        }

        .info-item:hover {
            background: #eeeeee;
            border-color: #becabc;
        }

        .icon-box {
            width: 35px;
            height: 35px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 15px;
        }

        .download-item {
            border: 1px solid #becabc;
            border-radius: 16px;
            padding: 16px;
            background: #fff;
            transition: 0.3s;
        }

        .download-item:hover {
            box-shadow: 0 4px 14px rgba(0,0,0,0.08);
        }

        .btn-download {
            background: var(--tg-green-800);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: 600;
            transition: 0.3s;
        }

        .btn-download:hover {
            background: var(--tg-green-900);
        }

        .resource-help {
            background: rgba(84, 106, 233, 0.08);
            border-radius: 12px;
        }