body {
    font-family: 'Times New Roman', Times, 'Tinos', 'Liberation Serif', serif;
    line-height: 1.35;
    color: #111111;
    /* Background handled by Tailwind classes in index.html */
}


/* =========================================================
   RESUME PAGE — SCREEN VIEW
   ========================================================= */

.resume-page {
    font-family: 'Times New Roman', Times, 'Tinos', 'Liberation Serif', serif;
    background: white;
    width: 100%;
    max-width: 210mm;
    min-height: 297mm;
    margin: 1.5rem auto;
    padding: 10mm 15mm;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .resume-page {
        padding: 5mm;
        margin: 1rem auto;
    }

}


/* =========================================================
   PRINT / PDF
   ========================================================= */

/*
 * IMPORTANT:
 * The top margin is defined here so that EVERY printed page
 * receives the same top spacing.
 *
 * Page layout:
 *
 *       7mm TOP
 * ─────────────────────────
 *       Resume content
 * ─────────────────────────
 *
 * This works on page 1, page 2, page 3, etc.
 */

@page {
    size: A4;

    /* TOP | RIGHT | BOTTOM | LEFT */
    margin: 7mm 0 7mm 0;
}


@media print {

    /* =====================================================
       GLOBAL PRINT RESET
       ===================================================== */

    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        display: block !important;

        background: #ffffff !important;
    }


    /* =====================================================
       HIDE APPLICATION UI
       ===================================================== */

    aside,
    #admin-view,
    .no-print,
    #sidebar-toggle,
    #sidebar-overlay,
    #delete-modal,
    #toast-container {
        display: none !important;
    }


    /* =====================================================
       MAIN PRINT CONTAINER
       ===================================================== */

    main,
    #resume-view {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        display: block !important;

        position: static !important;
    }


    /* =====================================================
       RESUME PAPER
       ===================================================== */

    .resume-page {

        width: 100% !important;
        max-width: none !important;

        /*
         * IMPORTANT:
         * Do NOT set a fixed height here.
         *
         * The browser must be allowed to split the resume
         * naturally across multiple A4 pages.
         */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        /*
         * No vertical margin/padding here.
         *
         * The 7mm top spacing is handled by @page,
         * which automatically applies it to EVERY page.
         */
        margin: 0 !important;
        padding: 0 10mm !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        box-shadow: none !important;

        display: block !important;

        flex-shrink: 1 !important;
    }


    /* =====================================================
       REMOVE FIRST-PAGE-ONLY TOP PADDING
       ===================================================== */

    #header-section {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }


    /* =====================================================
       PAGE BREAK CONTROL
       ===================================================== */

    /*
     * Try to keep an entire education entry together.
     */
    #education-section > div {
        break-inside: avoid;
        page-break-inside: avoid;
    }


    /*
     * Try to keep an entire experience entry together.
     */
    #experience-section > div {
        break-inside: avoid;
        page-break-inside: avoid;
    }


    /*
     * Try to keep an entire project together.
     *
     * This prevents situations such as:
     *
     * PAGE 1:
     *   AI Interview Assistant
     *   2 bullets
     *
     * PAGE 2:
     *   remaining bullet
     *
     * whenever enough space exists to move the project.
     */
    #projects-section > div,
    #achievements-section li,
    #certifications-section li,
    .custom-resume-section,
    .custom-resume-section li,
    .skills-grid,
    .resume-page li {
        break-inside: avoid;
        page-break-inside: avoid;
    }


    /*
     * Keep section headings with the content below them.
     */
    h2 {
        break-after: avoid;
        page-break-after: avoid;

        break-before: auto;
        page-break-before: auto;
    }


    /*
     * Prevent a heading from being the last element
     * at the bottom of a page.
     */
    h2 + p,
    h2 + div,
    h2 + ul {
        break-before: avoid;
        page-break-before: avoid;
    }


    /* =====================================================
       LINKS
       ===================================================== */

    a {
        color: #000000 !important;
        text-decoration: none !important;
    }


    /* =====================================================
       PREVENT ACCIDENTAL CLIPPING
       ===================================================== */

    * {
        max-height: none !important;
    }

}


/* =========================================================
   RESUME TYPOGRAPHY & HEADER
   ========================================================= */

.header-with-photo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
}

.header-text-col {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.passport-photo-wrapper {
    flex: 0 0 auto;
}

.passport-photo-box {
    width: 35mm;
    height: 45mm;
    max-width: 135px;
    max-height: 175px;
    min-width: 110px;
    min-height: 145px;
    border: 1.5px solid #111111;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 2px;
}

.passport-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.passport-photo-placeholder {
    width: 35mm;
    height: 45mm;
    max-width: 135px;
    max-height: 175px;
    min-width: 110px;
    min-height: 145px;
    border: 2px dashed #9ca3af;
    background-color: #f9fafb;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    border-radius: 4px;
    user-select: none;
}

.passport-photo-placeholder:hover {
    border-color: #2563eb;
    color: #2563eb;
    background-color: #eff6ff;
}

.passport-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.passport-photo-box:hover .passport-photo-overlay {
    opacity: 1;
}

h1 {
    letter-spacing: 0;
    margin-bottom: 2px;
    font-size: 1.85em;
}


h2 {
    border-bottom: 1.5px solid #111111;

    padding-bottom: 5px;

    margin-top: 12px;
    margin-bottom: 6px;

    text-transform: uppercase;

    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.4;

    color: #111111;
    display: block;
}


/* =========================================================
   ITEM HEADER
   ========================================================= */

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-weight: 700;
    font-size: 0.9em;
}

.item-header > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.item-header > span:last-child {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}


/* =========================================================
   ITEM SUBHEADER
   ========================================================= */

.item-sub {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-style: italic;
    font-size: 0.8em;
    margin-bottom: 2px;
}

.item-sub > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.item-sub > span:last-child {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}


/* =========================================================
   BULLET LIST
   ========================================================= */

.resume-page ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 2px;
}


.resume-page li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 0.82em;
    line-height: 1.35;
    margin-bottom: 1.5px;
    text-align: justify;
}

.resume-page li::before {
    content: "•";
    position: absolute;
    left: 0.25rem;
    top: 0;
    font-size: 0.85em;
    line-height: 1.35;
    color: #111111;
}


/* =========================================================
   SKILLS GRID
   ========================================================= */

.skills-grid {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 2px 10px;

    font-size: 0.82em;
}


/* =========================================================
   BOLD TEXT
   ========================================================= */

.bold {
    font-weight: 700;
}


/* =========================================================
   LINKS — SCREEN
   ========================================================= */

a {
    color: inherit;

    text-decoration: none;
}


a:hover {
    text-decoration: underline;
}


/* =========================================================
   SIDEBAR PROFILE STYLES
   ========================================================= */

.profile-item {
    cursor: pointer;

    transition: background-color 0.2s;
}


.profile-item:hover,
.profile-item.active {
    background-color: #374151;
}


.profile-avatar {
    background: linear-gradient(
        135deg,
        #3b82f6,
        #8b5cf6
    );
}
/* Public view links shown beside project, experience and certification names. */
.public-view-link {
    color: #003a8c !important;
    font-weight: 700 !important;
    font-size: 0.78em;
    text-decoration: none !important;
    margin-left: 0.35rem;
    white-space: nowrap;
}

.public-view-link:hover {
    color: #001f5c !important;
    text-decoration: underline !important;
}


/* =========================================================
   PDF DOWNLOAD MODAL
   ========================================================= */
#pdf-modal input[type="range"] {
    accent-color: #2563eb;
}

#pdf-modal input:focus,
#pdf-modal select:focus {
    outline: 2px solid rgba(37, 99, 235, 0.25);
    outline-offset: 1px;
}