/* =========================================================================
   guide.css - the User Guide and the Admin Guide.

   Three places use this file and it has to look the same in all of them:
     1. Views/Guide/UserGuide.cshtml   inside the public _Layout
     2. Views/Guide/AdminGuide.cshtml  inside _AdminLayout
     3. Views/Guide/GuidePrint.cshtml  a bare page that prints to PDF

   Because of (1) the colours here are literal rather than theme tokens: the
   guide sits inside .page-card, which stays white on every one of the seven
   themes, so theme-coloured text would go unreadable on some of them.

   Telugu is the primary voice on every line and English sits under it in a
   lighter grey. Where the page knows the reader's language (html[data-lang],
   set by _Layout / site.js and by GuidePrint), only that language is shown -
   see LANGUAGE SWITCH below. Without it (the Admin Guide) both stay on.
   ========================================================================= */

/* --------------------------- LANGUAGE SWITCH ---------------------------- */

html[data-lang="en"] .gd-te,
html[data-lang="en"] .gd-hero__title,
html[data-lang="en"] .gd-hero__sub {
    display: none !important;
}

html[data-lang="te"] .gd-en,
html[data-lang="te"] .gd-hero__title-en,
html[data-lang="te"] .gd-hero__sub-en {
    display: none !important;
}

/* With Telugu hidden, the English line is no longer "the second reading" under
   it - it takes the Telugu line's size, weight and colour in each place. */
html[data-lang="en"] .gd-en {
    margin-top: 0;
    font-size: 1.02em;
    font-weight: 600;
    color: var(--gd-ink);
}

html[data-lang="en"] .gd-hero__title-en {
    margin-top: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

html[data-lang="en"] .gd-hero__sub-en {
    margin-top: 0;
    font-size: 14.5px;
    color: rgba(255,255,255,0.9);
}

html[data-lang="en"] .gd-btn .gd-en {
    font-size: 14.5px;
    opacity: 1;
    color: inherit;
}

html[data-lang="en"] .gd-toc__head .gd-en {
    font-size: 19px;
    font-weight: 800;
    color: var(--gd-green-2);
}

html[data-lang="en"] .gd-toc__list .gd-en {
    display: inline;
    font-size: 14px;
    padding-left: 0;
}

html[data-lang="en"] .gd-sec__titles .gd-en {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--gd-green-2);
}

html[data-lang="en"] .gd-h3 .gd-en {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--gd-green);
}

html[data-lang="en"] .gd-table .gd-en {
    font-size: 14px;
}

html[data-lang="en"] .gd-table thead th .gd-en {
    font-size: 13.5px;
    color: var(--gd-green-2);
}

html[data-lang="en"] .gd-box__label .gd-en {
    font-size: 11.5px;
    font-weight: 800;
}

html[data-lang="en"] .gd-box--note .gd-box__label .gd-en {
    color: #1d4ed8;
}

html[data-lang="en"] .gd-box--tip .gd-box__label .gd-en {
    color: #15803d;
}

html[data-lang="en"] .gd-box--warn .gd-box__label .gd-en {
    color: #b91c1c;
}

.gd-doc {
    --gd-ink: #1f2937;
    --gd-ink-soft: #52606d;
    --gd-green: #166534;
    --gd-green-2: #14532d;
    --gd-line: #dbe4ea;
    --gd-soft: #f4f8f5;

    color: var(--gd-ink);
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Telugu carries the meaning; give it the size and the weight. Nirmala UI is
   the Telugu face Windows ships, Noto Sans Telugu covers everything else. */
.gd-te {
    display: block;
    font-family: "Nirmala UI", "Noto Sans Telugu", "Gautami", "Segoe UI", sans-serif;
    font-size: 1.02em;
    font-weight: 600;
    color: var(--gd-ink);
}

/* English is the second reading of the same line - present, clearly secondary,
   and never mistaken for a separate point. */
.gd-en {
    display: block;
    font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
    font-size: 0.92em;
    font-weight: 400;
    color: var(--gd-ink-soft);
    margin-top: 2px;
}

/* ------------------------------- COVER ---------------------------------- */

.gd-hero {
    background: linear-gradient(135deg, #166534 0%, #0f7a38 100%);
    color: #fff;
    border-radius: 16px;
    padding: 26px 24px;
    margin-bottom: 22px;
    text-align: center;
}

.gd-hero__title {
    font-family: "Nirmala UI", "Noto Sans Telugu", "Segoe UI", sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: #fff;
}

.gd-hero__title-en {
    font-size: 17px;
    font-weight: 600;
    margin-top: 8px;
    color: rgba(255,255,255,0.92);
}

.gd-hero__rule {
    width: 90px;
    height: 3px;
    background: #f4b400;
    border-radius: 3px;
    margin: 14px auto;
}

.gd-hero__sub {
    font-size: 14.5px;
    color: rgba(255,255,255,0.9);
}

.gd-hero__sub-en {
    font-size: 13px;
    color: rgba(255,255,255,0.78);
    margin-top: 3px;
}

/* Download button - the whole point of the cover for most readers. */
.gd-hero__actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.gd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f4b400;
    color: #1f2937;
    border: none;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    cursor: pointer;
}

.gd-btn:hover,
.gd-btn:focus {
    background: #ffc722;
    color: #1f2937;
    transform: translateY(-1px);
}

/* The button carries both languages too, but it is one control - the two
   lines must read as the button's own colour, not as body text. */
.gd-btn .gd-te,
.gd-btn .gd-en {
    color: inherit;
    text-align: left;
}

.gd-btn .gd-te {
    font-size: 14.5px;
}

.gd-btn .gd-en {
    font-size: 11.5px;
    opacity: 0.85;
    margin-top: 0;
}

.gd-btn--ghost {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: none;
}

.gd-btn--ghost:hover,
.gd-btn--ghost:focus {
    background: rgba(255,255,255,0.28);
    color: #fff;
}

/* The one-paragraph introduction under the cover. */
.gd-intro {
    background: var(--gd-soft);
    border: 1px solid var(--gd-line);
    border-left: 5px solid var(--gd-green);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 22px;
}

/* ------------------------------ CONTENTS -------------------------------- */

.gd-toc {
    background: #fff;
    border: 1px solid var(--gd-line);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 26px;
}

.gd-toc__head {
    font-size: 18px;
    color: var(--gd-green-2);
    margin: 0 0 10px;
}

.gd-toc__head .gd-te {
    font-size: 19px;
    font-weight: 800;
    color: var(--gd-green-2);
}

.gd-toc__head .gd-en {
    font-size: 13px;
}

.gd-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 26px;
}

.gd-toc__list li {
    break-inside: avoid;
    margin-bottom: 8px;
}

.gd-toc__list a {
    display: block;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.gd-toc__list a:hover {
    background: var(--gd-soft);
    border-left-color: var(--gd-green);
}

.gd-toc__no {
    display: inline-block;
    min-width: 26px;
    font-weight: 800;
    color: var(--gd-green);
}

.gd-toc__list .gd-te {
    display: inline;
    font-size: 14px;
}

.gd-toc__list .gd-en {
    font-size: 11.5px;
    margin-top: 1px;
    padding-left: 26px;
}

/* ------------------------------ SECTIONS -------------------------------- */

.gd-sec {
    border: 1px solid var(--gd-line);
    border-radius: 14px;
    margin-bottom: 20px;
    overflow: hidden;
    background: #fff;
}

.gd-sec__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 13px 16px;
    background: linear-gradient(135deg, #eef6f0 0%, #e4f0e9 100%);
    border-bottom: 1px solid var(--gd-line);
}

.gd-sec__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    background: #fff;
    border: 1px solid var(--gd-line);
    border-radius: 10px;
    padding: 5px 6px;
    flex-shrink: 0;
}

.gd-sec__icon {
    font-size: 17px;
    line-height: 1.1;
}

.gd-sec__no {
    font-size: 12px;
    font-weight: 800;
    color: var(--gd-green);
}

.gd-sec__titles {
    min-width: 0;
}

.gd-sec__titles .gd-te {
    font-size: 18px;
    font-weight: 800;
    color: var(--gd-green-2);
    line-height: 1.3;
}

.gd-sec__titles .gd-en {
    font-size: 13px;
    margin-top: 2px;
}

.gd-sec__body {
    padding: 14px 16px 16px;
}

.gd-h3 {
    margin: 16px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--gd-line);
}

.gd-h3 .gd-te {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--gd-green);
}

.gd-h3 .gd-en {
    font-size: 12.5px;
}

/* ------------------------------ CONTENT --------------------------------- */

.gd-p {
    margin-bottom: 12px;
}

.gd-p p {
    margin: 0;
}

.gd-p .gd-en {
    margin-top: 3px;
}

.gd-list,
.gd-steps {
    margin: 0 0 12px;
    padding-left: 0;
    list-style: none;
}

.gd-list li,
.gd-steps li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    break-inside: avoid;
}

.gd-list li::before {
    content: "•";
    position: absolute;
    left: 10px;
    top: -1px;
    color: var(--gd-green);
    font-size: 18px;
    font-weight: 700;
}

.gd-steps {
    counter-reset: gdstep;
}

.gd-steps li {
    counter-increment: gdstep;
}

.gd-steps li::before {
    content: counter(gdstep);
    position: absolute;
    left: 0;
    top: 1px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--gd-green);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    line-height: 21px;
}

/* Tables scroll sideways on a phone rather than squashing the Telugu. */
.gd-tablewrap {
    overflow-x: auto;
    margin: 0 0 14px;
    -webkit-overflow-scrolling: touch;
}

.gd-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 460px;
}

.gd-table th,
.gd-table td {
    border: 1px solid var(--gd-line);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.gd-table thead th {
    background: #dcfce7;
}

.gd-table thead th .gd-te {
    font-size: 13.5px;
    color: var(--gd-green-2);
}

.gd-table thead th .gd-en {
    font-size: 11.5px;
}

.gd-table tbody th {
    background: #f8fbf9;
    width: 34%;
}

.gd-table tbody tr:nth-child(even) td {
    background: #fbfdfc;
}

.gd-table .gd-te {
    font-size: 14px;
}

.gd-table .gd-en {
    font-size: 12px;
}

/* --------------------------- CALLOUT BOXES ------------------------------ */

.gd-box {
    border: 1px solid var(--gd-line);
    border-left-width: 5px;
    border-radius: 0 10px 10px 0;
    padding: 11px 14px;
    margin: 0 0 14px;
    break-inside: avoid;
}

.gd-box p {
    margin: 0;
}

.gd-box .gd-en {
    margin-top: 3px;
}

.gd-box__label {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.gd-box__label .gd-te,
.gd-box__label .gd-en {
    display: inline;
    font-size: 11.5px;
    font-weight: 800;
    margin: 0;
}

.gd-box--note {
    background: #eff6ff;
    border-color: #bfdbfe;
    border-left-color: #2563eb;
}

.gd-box--note .gd-box__label .gd-te,
.gd-box--note .gd-box__label .gd-en {
    color: #1d4ed8;
}

.gd-box--tip {
    background: #f0fdf4;
    border-color: #bbf7d0;
    border-left-color: #16a34a;
}

.gd-box--tip .gd-box__label .gd-te,
.gd-box--tip .gd-box__label .gd-en {
    color: #15803d;
}

.gd-box--warn {
    background: #fef2f2;
    border-color: #fecaca;
    border-left-color: #dc2626;
}

.gd-box--warn .gd-box__label .gd-te,
.gd-box--warn .gd-box__label .gd-en {
    color: #b91c1c;
}

/* ------------------------------- FOOTER --------------------------------- */

.gd-foot {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--gd-line);
    font-size: 12px;
    color: var(--gd-ink-soft);
    text-align: center;
}

/* -------------------------------- PHONE --------------------------------- */

@media (max-width: 767.98px) {
    .gd-hero {
        padding: 18px 14px;
        border-radius: 12px;
    }

    .gd-hero__title {
        font-size: 21px;
    }

    .gd-hero__title-en {
        font-size: 14px;
    }

    .gd-hero__sub {
        font-size: 13px;
    }

    .gd-toc__list {
        columns: 1;
    }

    .gd-sec__head {
        padding: 11px 12px;
        gap: 9px;
    }

    .gd-sec__titles .gd-te {
        font-size: 16px;
    }

    html[data-lang="en"] .gd-hero__title-en {
        font-size: 21px;
    }

    html[data-lang="en"] .gd-hero__sub-en {
        font-size: 13px;
    }

    html[data-lang="en"] .gd-sec__titles .gd-en {
        font-size: 16px;
    }

    .gd-sec__body {
        padding: 12px;
    }

    .gd-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================================
   PRINT  -  this is the "Download as PDF" path.

   The reader presses the button, the print view opens and calls print(), and
   they choose "Save as PDF" as the destination. Everything that is screen
   furniture is dropped here so the saved file is a clean A4 document.
   ========================================================================= */

@page {
    size: A4;
    margin: 16mm 14mm 16mm 14mm;
}

@media print {

    /* Site chrome, from either layout, plus our own buttons. */
    .top-strip,
    .brand-header,
    .leaders-section,
    .notice-bar,
    .main-navbar,
    .footer,
    .mobile-bottom-nav,
    .admin-sidebar,
    .admin-topbar,
    .sidebar-overlay,
    .gd-noprint,
    .gd-hero__actions {
        display: none !important;
    }

    .page-wrapper,
    .admin-content,
    .admin-main {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .page-card {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    body {
        background: #fff !important;
        font-size: 10.5pt;
    }

    .gd-doc {
        max-width: none;
        margin: 0;
    }

    /* Solid green rather than the gradient - printers render a flat fill far
       more reliably, and "background graphics" is off by default anyway. */
    .gd-hero {
        background: #166534 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border-radius: 0;
        padding: 16mm 10mm;
        margin-bottom: 8mm;
        page-break-after: always;
    }

    .gd-hero__title {
        font-size: 26pt;
    }

    .gd-hero__title-en {
        font-size: 13pt;
    }

    .gd-toc {
        page-break-after: always;
    }

    .gd-toc__list {
        columns: 2;
    }

    .gd-sec {
        page-break-inside: auto;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .gd-sec__head {
        page-break-after: avoid;
        background: #e4f0e9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .gd-h3 {
        page-break-after: avoid;
    }

    .gd-p,
    .gd-box,
    .gd-steps li,
    .gd-list li,
    .gd-table tr {
        page-break-inside: avoid;
    }

    /* No sideways scrolling on paper - the table has to fit the page. */
    .gd-tablewrap {
        overflow: visible;
    }

    .gd-table {
        min-width: 0;
    }

    .gd-box,
    .gd-table thead th,
    .gd-table tbody th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a {
        text-decoration: none;
        color: inherit;
    }
}