/* 引入 Google 字體（僅用於部分語言切換） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Devanagari&display=swap');

/* 全域字體設為 Calibri，網站和 PDF 都一致 */
body, .editor-layout, .editor-layout * {
    font-family: 'Calibri', Arial, sans-serif !important;
}

body {
    font-family: Arial, sans-serif; /* 備用字體 */
    background-color: #f5f5f5; /* 網站背景灰色 */
    margin: 0;
    padding: 0;
    /* display: flex; */
    /* justify-content: center; */
}

/* 導航欄樣式 */
.navbar {
    background-color: #000;
    color: #fff;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    margin: 0;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    padding: 5px 15px;
}

.navbar .template-controls {
    display: flex;
    align-items: center;
    gap: 10px; /* 按鈕間距 */
}

.navbar button {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 20px;
}

.navbar .template-controls button {
    margin: 0;
}

.navbar button.lang-btn {
    margin-right: 0;
}

.navbar button.download-btn {
    margin-left: 0;
}

/* CV 主要內容外框 */
.container {
    width: 210mm; /* A4 寬度 */
    height: auto; /* 內容多高就多高 */
    margin: 0 auto; /* 置中 */
    background: #fff;
    box-shadow: none;
    box-sizing: border-box;
    position: relative;
    padding: 0; /* 一定要0 */
}

/* 經典模板主體左右分欄 */
.editor-layout.classic {
    display: flex;
    flex-direction: row;
    width: 190mm;
    min-height: 277mm;
    background: #fff;
}

/* 左側藍色欄位 */
.editor-layout.classic .left-column {
    width: 57mm;
    background-color: #0b2241;
    color: #fff;
    padding: 10mm 0 0 5mm; /* 上、右、下、左 */
    margin: 0;
    box-sizing: border-box;
}

/* classic.html 專用樣式 - 調整左側間距 */
body:has(.container:not(:has(.photo-upload))) .editor-layout.classic .left-column {
    padding: 20mm 0 0 5mm; /* 進一步增加上邊距 */
}

/* 或者使用更精確的選擇器 */
.editor-layout.classic .left-column:not(:has(.photo-upload)) {
    padding: 20mm 0 0 5mm; /* 進一步增加上邊距 */
}

/* 右側白色欄位 */
.editor-layout.classic .right-column {
    width: 133mm;
    padding: 10mm;
    background-color: #fff;
    box-sizing: border-box;
}

/* 通用模板主體分欄（未啟用可忽略） */
.editor-layout.general {
    display: flex;
    gap: 0;
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    border: 2px solid #000080;
}

.editor-layout.general .left-column {
    width: 70%;
    padding: 20px;
    background-color: #fff;
    break-inside: avoid;
    page-break-inside: avoid;
}

.editor-layout.general .right-column {
    width: 30%;
    padding: 20px;
    background-color: #fff;
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* 上傳照片區塊 */
.photo-upload {
    text-align: center;
    margin: 30px 20px 20px 10px; /* 上、右、下、左 */
}

.upload-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    margin-bottom: 5px;
    border-radius: 20px;
}

/* 照片預覽區塊（灰色框） */
.photo-preview {
    background-color: #ccc;
    color: #fff;
    width: 150px;   /* 灰色框寬度 */
    height: 160px;  /* 灰色框高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* 照片圖片本身，完全覆蓋灰色框（向上加長） */
.photo-preview img {
    width: 160px !important;
    height: 180px !important;
    object-fit: cover;
    border-radius: 0;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.editor-layout.general .photo-preview {
    background-color: #D3D3D3;
    color: #fff;
}

/* 區塊標題區域 */
.section {
    margin-bottom: 0; /* 減少多餘空白 */
}

.summary-section {
    margin-top: 30px;
}

/* 區塊標題 h2 樣式 */
.section h2 {
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 2px solid;
    font-size: 18px;
    font-weight: bold;
}

.editor-layout.classic .left-column .section h2 {
    border-color: #fff;
}

.editor-layout.classic .right-column .section h2 {
    border-color: #000;
}

.editor-layout.general .section h2 {
    border-color: #000;
}

/* 欄位區塊 */
.field {
    margin-bottom: 10px;
}

.field label {
    display: inline-block;
    width: 120px;
    font-size: 12px;
    line-height: 1.5;
}

.editor-layout.classic .left-column .field {
    margin-bottom: 5px;
}

.editor-layout.classic .left-column .name-field {
    margin-bottom: 2px;
}

.editor-layout.classic .left-column .role-section {
    margin-top: 0;
}

/* 左側所有 textarea 樣式 */
.editor-layout.classic .left-column textarea {
    background: transparent;
    color: #fff !important;  /* 強制白色，不受其他樣式影響 */
    border: none;
    padding: 2px 5px;
    width: 135px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    height: auto;
    min-height: auto;
    overflow: hidden;
    resize: none;
}

/* 左側所有 input 樣式 */
.editor-layout.classic .left-column input {
    color: #fff !important;  /* 強制白色，不受其他樣式影響 */
}

/* 左側所有 h2 標題樣式 */
.editor-layout.classic .left-column h2 {
    color: #fff !important;  /* 強制白色，不受其他樣式影響 */
}

/* 左側所有 label 樣式 */
.editor-layout.classic .left-column label {
    color: #fff !important;  /* 強制白色，不受其他樣式影響 */
}

/* "Enter your name" 欄位字體大小、粗體 */
.editor-layout.classic .left-column .name-field textarea {
    font-size: 27px; /* 恢復原來的大小 */
    font-weight: bold;
    width: 165px; /* 增加寬度從 135px 到 180px */
    height: auto;
    min-height: auto;
    line-height: 1.2;
    padding: 2px 5px;
}

/* classic.html 專用樣式 - 增大 name 欄位字體 */
.editor-layout.classic .left-column:not(:has(.photo-upload)) .name-field textarea {
    font-size: 32px; /* 只在 classic.html 中增大字體 */
}

.editor-layout.classic .left-column .name-field textarea:focus {
    background: #ccc;
    border: none;
    outline: none;
}

.editor-layout.classic .left-column textarea:focus {
    background: #ccc;
    border: none;
    outline: none;
}

/* 所有 input/textarea 樣式（右側、通用） */
.editor-layout.classic .left-column input,
.editor-layout.classic .right-column input,
.editor-layout.classic .right-column textarea,
.editor-layout.general input,
.editor-layout.general textarea {
    background: transparent;
    color: #000;
    border: none;
    padding: 5px;
    width: 100%;
    font-size: 12px;
    line-height: 1.5;
}

#summary,
#experiences textarea {
    resize: none;
}

.editor-layout.classic .right-column input:focus,
.editor-layout.classic .right-column textarea:focus,
.editor-layout.general input:focus,
.editor-layout.general textarea:focus {
    background: #ccc;
    border: none;
}

/* 語言/技能欄位區塊 */
.language-field,
.skill-field {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.language-field textarea,
.skill-field textarea {
    width: 80px;
    min-height: 14px;
    overflow: hidden;
    resize: none;
}

.skill-field input {
    width: 80px;
}

.add-btn,
.remove-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

.experience-section,
.education-section {
    position: relative;
}

.experience-header,
.education-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.experience-controls,
.education-controls {
    display: flex;
    gap: 5px;
}

.experience-group,
.education-group {
    margin-bottom: 20px;
}

.experience-details,
.education-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.experience-left,
.education-left {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.experience-right,
.education-right {
    width: 25%;
    text-align: right;
}

.hidden {
    display: none !important;
}

/* 只在 print 隱藏 navbar/按鈕，並讓 CV 內容貼齊頁面 */
@media print {
    body { background: #fff !important; }
    .navbar, .add-btn, .remove-btn, .upload-btn { display: none !important; }
    body { margin: 0 !important; padding: 0 !important; }
    .container {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        width: 210mm !important;
        page-break-after: always;
        page-break-inside: avoid;
    }
    .editor-layout.classic { margin: 0 !important; padding: 0 !important; }
    .section, .editor-layout.classic, .editor-layout.general {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* 選擇器彈窗、下拉選單等樣式 */
.colour-picker,
.fonts-picker,
.component-picker,
.lang-picker,
.template-picker {
    position: absolute;
    top: 50px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: none;
}

.fonts-picker select,
.template-picker select,
.lang-picker select {
    margin: 5px 0;
    padding: 5px;
    width: 150px;
    font-size: 14px;
}

.component-picker label {
    display: block;
    margin: 5px 0;
    font-size: 14px;
    position: relative;
}

.component-picker input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #000;
    background-color: #fff;
    vertical-align: middle;
    margin-right: 5px;
    cursor: pointer;
    outline: none;
    position: relative;
    transition: background-color 0.3s;
}

.component-picker input[type="checkbox"]:checked {
    background-color: #000;
}

.component-picker input[type="checkbox"]:checked::before {
    content: '\2713';
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}

.colour-picker label {
    display: block;
    margin-bottom: 5px;
}

.colour-picker input[type="color"] {
    width: 100%;
    height: 30px;
    border: none;
    cursor: pointer;
}

.left-column, .right-column {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* 網站（螢幕）下，左側 padding 減少 */
.editor-layout.classic .left-column .email-field textarea {
    padding-left: 0px !important;
    padding-right: 20px !important;
}
.editor-layout.classic .left-column .phone-field textarea {
    padding-left: 0px !important;
    padding-right: 20px !important;
}
.editor-layout.classic .left-column .address-field textarea {
    padding-left: 0px !important;
    padding-right: 20px !important;
}
.editor-layout.classic .left-column .language-field textarea {
    padding-left: 0px !important;
    padding-right: 20px !important;
}
.editor-layout.classic .left-column .skill-field textarea {
    padding-left: 0px !important;
    padding-right: 20px !important;
}

/* Experience/School 欄位字體粗體/斜體 */
.editor-layout.classic .experience-left input[placeholder="Enter role"] {
    font-weight: bold;
    font-size: 16px; /* 或你想要的大小 */
}

.editor-layout.classic .education-left input[placeholder="Enter school"] {
    font-weight: bold;
    font-size: 16px; /* 或你想要的大小 */
}

.editor-layout.classic .experience-left input[placeholder="Enter company"] {
    font-style: italic;
}

.editor-layout.classic .education-left input[placeholder="Enter certificate"] {
    font-style: italic;
}

textarea {
    resize: none;
    overflow: hidden;
}

@media print {
    .section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* 右上角 Lang/Download 按鈕排列 */
.right-controls {
    display: flex;
    align-items: center;
    gap: 10px; /* 與 .template-controls 一致 */
}

.lang-btn {
    margin-right: 0 !important;
}

.download-btn {
    margin-left: 0 !important;
}

/* 照片預覽圖片樣式（小圖示用） */
.photo-preview img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

/* 讓 Enter certificate 欄位的字變斜體 */
.education-left textarea[placeholder="Enter certificate"] {
    font-style: italic;
}

/* 全 CV 區塊字體大小、標題大小、欄位大小 */
.editor-layout {
    font-size: 16px;
}
.editor-layout h2 {
    font-size: 21px;
}
.editor-layout input,
.editor-layout textarea,
.editor-layout label {
    font-size: 16px;
}

.editor-layout input,
.editor-layout textarea {
    font-family: 'Calibri', Arial, sans-serif;
}

#summary {
    font-size: 18px;
    font-family: 'Calibri', Arial, sans-serif;
}

.editor-layout.classic .left-column input,
.editor-layout.classic .left-column textarea {
    font-size: 16px;
}

.editor-layout.classic .right-column input,
.editor-layout.classic .right-column textarea {
    font-size: 16px;
}