/* timesheet-style-v2.css */

a { color: inherit; }
.s0{background-color:#ffffff;text-align:center;font-weight:bold;color:#000000;font-family:Arial;font-size:8pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s1{border-bottom:1px SOLID #000000;background-color:#ffffff;text-align:center;font-weight:bold;color:#000000;font-family:Arial;font-size:8pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s2{border-bottom:1px SOLID #000000;background-color:#ffffff;text-align:left;color:#000000;font-family:Arial;font-size:10pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s3{border-bottom:1px SOLID #000000;background-color:#ffffff;text-align:left;color:#000000;font-family:Arial;font-size:10pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s4{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#ffffff;text-align:center;font-weight:bold;color:#000000;font-family:Arial;font-size:10pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 2px 2px 2px;}
.s5{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#ffffff;text-align:center;font-weight:bold;color:#000000;font-family:Arial;font-size:10pt;vertical-align:middle;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s6{border-right:1px SOLID #000000;background-color:#ffffff;text-align:center;font-weight:bold;color:#000000;font-family:Arial;font-size:8pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s7{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#4a86e8;text-align:center;font-weight:bold;color:#000000;font-family:Arial;font-size:12pt;vertical-align:middle;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s8{border-right:1px SOLID #000000;background-color:#ffffff;text-align:left;font-weight:bold;color:#000000;font-family:Arial;font-size:10pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s9{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#d9d9d9;text-align:center;font-weight:bold;color:#000000;font-family:Arial;font-size:8pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0;}
.s10{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#ffff00;text-align:center;font-weight:bold;color:#000000;font-family:Arial;font-size:10pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s11{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#d9d9d9;text-align:left;font-weight:bold;color:#000000;font-family:Arial;font-size:12pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s11x{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#ffffff;text-align:left;font-weight:bold;color:#000000;font-family:Arial;font-size:12pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s11xx{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#ff0000b3;text-align:left;font-weight:bold;color:#000000;font-family:Arial;font-size:12pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s12{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#ffffff;text-align:left;color:#000000;font-family:Arial;font-size:10pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s12x { font-weight: bold !important; text-align: center !important; vertical-align: middle !important;font-size: 10pt; color: #000 !important;background-color: #ff0000b3; border-bottom: 1px SOLID #000000;border-right: 1px SOLID #000000;}
.total-cell, .ot-total-cell { font-weight: bold !important; text-align: center !important;font-size: 10pt; vertical-align: middle !important; color: #000 !important;background-color: #ff0000b3; }


.s14{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#ff9900;text-align:left;font-weight:bold;color:#000000;font-family:Arial;font-size:12pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s15{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#ff9900;text-align:left;color:#000000;font-family:Arial;font-size:10pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s15x{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#d9d9d9;text-align:center;color:#000000;font-family:Arial;font-size:10pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.s16{border-right:1px SOLID #000000;background-color:#ffffff;}
table.waffle { border-collapse: collapse; table-layout: fixed; }
.timesheet-logout-button{display:inline-block;padding:4px 8px;background-color:#d9534f;color:#ffffff !important;text-align:center;text-decoration:none;border-radius:4px;font-size:10pt;font-weight:bold;border:1px solid #d43f3a;cursor:pointer;transition:background-color 0.2s;}
.timesheet-logout-button:hover{background-color:#c9302c;color:#ffffff !important;}
#add-project-button-cell, #add-ot-project-button-cell { position: relative; overflow: visible; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
.add-button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background-color: #2196F3; color: white; font-size: 18px; font-weight: bold; line-height: 22px; border-radius: 50%; cursor: pointer; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.add-button:hover { background-color: #1976D2; transform: translateY(-10%) scale(1.0); }
.project-dropdown-list {
    display: none;
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 240px;
    overflow-y: auto;
    min-width: 180px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.project-dropdown-list.show {
    display: block;
}
.project-dropdown-list ul { list-style: none; margin: 0; padding: 0; }
.project-dropdown-list li:hover { background: #f2f2f2; }

/* === BỔ SUNG CSS MỚI === */
.dropdown-header {
    font-weight: bold;
    color: #000;
    cursor: default !important; /* Không cho click vào header */
    background-color: #8cd3f3;
    padding: 8px 15px !important;
}

.dropdown-header:hover {
    background-color: #8cd3f3 !important; /* Không đổi màu khi hover */
}
/* ======================== */


.category-cell { vertical-align: middle !important; text-align: left !important; }
.project-name-cell,
.ot-project-name-cell {
    position: relative;
    padding-right: 28px !important; /* chừa chỗ cho nút x */
}
.modal-overlay {
    display: none;              /* JS sẽ set display:flex khi mở */
    position: fixed;
    inset: 0;                   /* top:0; right:0; bottom:0; left:0 */
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}

.delete-project-button {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #d9534f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
}
.delete-project-button:hover {
    background-color: #c9302c;
    color: #fff;
}

/* Children trong dropdown chỉ thụt lề, không hiển thị ký tự '└' */
.dropdown-child {
    padding-left: 16px !important;
}
.card { width: 320px; height: fit-content; background: rgb(255, 255, 255); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0px; padding: 30px; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.card-content { width: 100%; height: fit-content; display: block; flex-direction: column; gap: 5px; text-align: center; }
.card-heading { font-size: 22px; font-weight: 700; color: rgb(27, 27, 27); font-family: 'Google Sans', Arial, sans-serif; }
.card-description { font-weight: 400; font-size: 14px; color: rgb(102, 102, 102); font-family: Arial, sans-serif; }
.card-button-wrapper { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.card-button { width: 50%; height: 40px; border-radius: 10px; border: none; cursor: pointer; font-weight: 600; font-size: 14px; font-family: 'Google Sans', Arial, sans-serif; }
.primary { background-color: rgb(220, 53, 69); color: white; }
.primary:hover { background-color: rgb(200, 40, 55); }
.secondary { background-color: #ddd; color: #333; }
.secondary:hover { background-color: rgb(197, 197, 197); }
.exit-button { display: flex; align-items: center; justify-content: center; border: none; background-color: transparent; position: absolute; top: 20px; right: 20px; cursor: pointer; }
.exit-button:hover svg { fill: black; }
.exit-button svg { fill: rgb(175, 175, 175); }
.cell-disabled { background-color: #D9D9D9 !important; color: #b7b7b7 !important; }
.timesheet-nav-select {
    width: 100%;
    height: 26px;
    border: 1px solid #ccc; /* Thêm viền cho ô chọn */
    outline: none;
    background-color: #f0f0f0; /* Thêm màu nền cho dễ nhìn */
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    padding: 0 25px 0 5px; /* Đã thay đổi: tăng padding-right để nhường chỗ cho mũi tên */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    text-align: center;
    text-align-last: center;
    box-sizing: border-box; /* Đảm bảo padding và border không làm tăng kích thước */
    border-radius: 4px; /* Thêm bo góc cho đẹp hơn */
}
.timesheet-nav-select::-ms-expand { display: none; }
.timesheet-nav-button { width: 100%; height: 26px; border: 1px solid #ccc; border-radius: 4px; background-color: #f0f0f0; font-family: Arial, sans-serif; font-size: 12pt; box-sizing: border-box; cursor: pointer; font-weight: bold; }
.timesheet-nav-button:hover { background-color: #e0e0e0; }
.s12, .s13, .s15 { padding: 0 !important; text-align: center !important; vertical-align: middle !important; }
.timesheet-hour-input { width: 100% !important; height: 100% !important; box-sizing: border-box !important; border: none !important; outline: none !important; background-color: transparent !important; text-align: center !important; font-size: 10pt !important; font-family: Arial, sans-serif !important; padding: 0 !important; margin: 0 !important; line-height: 20px !important; -webkit-appearance: none !important; -moz-appearance: textfield !important; appearance: none !important; }
.timesheet-hour-input::-webkit-inner-spin-button, .timesheet-hour-input::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.timesheet-hour-input[type=number] { -moz-appearance: textfield !important; }
.timesheet-hour-input:focus { background-color: transparent !important; }
.timesheet-hour-input:disabled { background-color: transparent !important; cursor: not-allowed; }

.total-hours-error, .ot-total-hours-error { color: #000000 !important; font-weight: bold !important; }
.row-total-cell, #grand-total-cell, #ot-grand-total-cell { font-weight: bold !important; text-align: center !important; vertical-align: middle !important; color: #000 !important; }
.merged-row-content { background-color: #ffffff !important; border-bottom: 1px solid #000000 !important; border-right: 1px solid #000000 !important; }
#timesheet-nav-row td { border-top: none !important; border-left: none !important; border-right: none !important; }
#timesheet-nav-row td:last-child { border-right: none !important; }
#title-row-1 td, #title-row-2 td {  }
#title-row-1 th, #title-row-2 th { border-top: none !important; }
.normal-category-cell, .ot-category-cell {
    vertical-align: middle !important;
}

/* Thêm quy tắc CSS cho nút mũi tên dropdown */
.nav-cell.select-cell {
    position: relative; /* Đảm bảo các phần tử con có thể định vị tuyệt đối */
}

.nav-cell.select-cell::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 15px; /* Đặt vị trí mũi tên */
    transform: translateY(-50%);
    font-size: 10px;
    color: #333;
    pointer-events: none; /* Đảm bảo click vào vùng mũi tên vẫn chọn được dropdown */
}

/* Thêm style cho ngày nghỉ lễ chính thức */
.public-holiday {
    background-color: #3498db !important; /* Màu xanh dương */
    color: #ffffff !important; /* Màu chữ trắng để dễ đọc */
    font-weight: bold !important;
}

.public-holiday input.timesheet-hour-input {
    color: #ffffff !important;
    font-weight: bold !important;
}


/* FIX LỖI IN TRANG TRỐNG */
@media print {
    body {
        margin: 0;
        padding: 0;
    }
    .timesheet-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .timesheet-container *,
    .waffle {
        border-collapse: separate !important;
        border-spacing: 0;
        border: 1px solid #000 !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    .waffle td, .waffle th {
        border: 1px solid #000 !important;
        padding: 2px 3px;
    }
    .timesheet-hour-input {
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    /* ẨN CÁC THÀNH PHẦN KHÔNG CẦN THIẾT */
    #timesheet-nav-row, 
    #delete-confirm-modal, 
    .add-button, 
    .delete-project-button {
        display: none !important;
    }
}
@media print {
    body {
        margin: 0;
        padding: 0;
    }
    .timesheet-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .timesheet-container *,
    .waffle {
        border-collapse: separate !important;
        border-spacing: 0;
        border: 1px solid #000 !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    .waffle td, .waffle th {
        border: 1px solid #000 !important;
        padding: 2px 3px;
    }
    .timesheet-hour-input {
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    /* ẨN CÁC THÀNH PHẦN CHỨC NĂNG */
    #timesheet-nav-row, 
    #delete-confirm-modal, 
    .add-button, 
    .delete-project-button,
    .timesheet-logout-button {
        display: none !important;
        visibility: hidden !important;
    }

    /* ẨN CÁC CỘT TIÊU ĐỀ VÀ CÁC Ô KHÔNG CÓ NỘI DUNG */
    .row-headers-background,
    .column-headers-background,
    .s0,
    .s1,
    .s6,
    .s8,
    .s16 {
        display: none !important;
    }
    
    /* FIX LỖI CHIỀU RỘNG Ô "CATEGORY" VÀ "PROJECT" TRÊN BẢN IN */
    .waffle .s11, .waffle .s14 {
        width: 120px !important;    /* Điều chỉnh con số này cho vừa văn bản */
        max-width: 150px !important;
        text-align: left !important;
    }

    /* Điều chỉnh các ô tiêu đề cột ngày */
    .waffle tbody tr:nth-child(2) td:nth-child(n+3):not(:last-child) {
        width: 25px !important; /* Thay vì 2.1875vw */
        max-width: 25px !important;
    }
    
    /* QUY TẮC MỚI: LOẠI BỎ KHUNG VIỀN CỦA TEXT "DỰ ÁN A" */
    .project-name-cell, .ot-project-name-cell {
        width: 250px !important; /* Hoặc con số phù hợp để text không bị nhảy dòng */
        min-width: 250px !important;
        white-space: nowrap !important; /* Ngăn không cho text xuống dòng */
    }
.dropdown-parent { cursor: default !important; }
.dropdown-child { cursor: pointer; }
}

/*
 * ===================================================================
 * === BỔ SUNG STYLE CHO BẢNG CALCULATOR HOLIDAY ===
 * ===================================================================
*/
.timesheet-page-wrapper {
    /* Thêm một wrapper để chứa cả hai bảng */

}
.holiday-calculator-card.card {
    background: #fff;
    margin-left: 5%;
    border: 1px solid #c3c4c7;
    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    padding: 1em 1em;
    border-radius: 8px;
    margin-top: 25px;
    box-sizing: border-box;
    width: 410px;
    height: auto; /* Tự động điều chỉnh chiều cao */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.holiday-calculator-card .title {
    margin: 0 0 15px 0;
    font-size: 1.5em;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.holiday-calculator-card .calculator-content {
    display: flex;
    flex-direction: column; /* KHÔNG dùng column-reverse */
    gap: 6px;
    margin-top: 0; /* bỏ margin âm */
}

.holiday-calculator-card .calculator-headers {
    display: flex;
    justify-content: flex-end; /* đẩy header sang phải */
    width: 370px;
    gap: 20px;
    align-items: right;
    margin-bottom: 0px;
    box-sizing: border-box;
}
.holiday-calculator-card .calculator-headers .input-header {
    width: 64px;            /* rộng tương ứng với input */
    min-width: 64px;
    text-align: left;
    font-weight: 700;
    font-size: 150px;
    color: #222;
}
.holiday-calculator-card .calculator-headers .header-label {
    flex: 1 1 auto; /* chiếm không gian bên trái để đẩy 2 header nhỏ sang phải */
}
.holiday-calculator-card .input-header {
    width: 0px;
    text-align: left;
    font-weight: bold;
    font-size: 15px;
    color: #555;
}

.holiday-calculator-card .calculator-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.holiday-calculator-card .calculator-label {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    margin-right: 30px;
    flex-grow: 1;
}

.holiday-calculator-card .calculator-input {
    width: 64px !important;   /* vừa với header */
    padding: 6px 6px !important;
    font-size: 15px !important;
    height: auto;
    box-sizing: border-box;
    text-align: center;
}


.holiday-calculator-card .calculator-input:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}
.holiday-calculator-card .calculator-input::-webkit-outer-spin-button,
.holiday-calculator-card .calculator-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-error-tooltip {
    border: 1px solid red !important;
    box-shadow: 0 0 3px rgba(255, 0, 0, 0.5);
    border-radius: 2px;
    position: relative;
    cursor: help;
}
#ts-admin-tooltip {
    position: absolute;
    z-index: 99999;
    display: none;
    padding: 6px 8px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.public-holiday-locked, .public-nonholiday-locked {
    cursor: not-allowed !important;
    color: #666 !important;
}

.current-day {
    background-color: #81FC68 !important;
    color: #000 !important;
    font-weight: 700 !important;
}
/* === Scoped gray only for date-cells inside the waffle table === */

/* gray rows only affect date cells (avoid left-side layout cells) */
.waffle tr.gray-data-row td[data-day]:not(.public-holiday):not(.holiday-blue):not(.current-day):not(.s13) {
    background-color: #d9d9d9 !important;
    color: #000 !important;
}
.waffle tr.gray-data-row td[data-day]:not(.public-holiday):not(.holiday-blue):not(.current-day):not(.s13) input.timesheet-hour-input {
    background-color: #d9d9d9 !important;
    color: #000 !important;
    cursor: not-allowed;
}

/* Defensive: ensure left-side layout cells remain white */
.waffle td.s16,
.waffle th.row-headers-background,
.waffle td.s8 {
    background-color: #ffffff !important;
    color: #000 !important;
}

/* Current-day override for combined OT row */
.waffle tr.overtime-combined-row td.current-day,
.waffle tr.overtime-combined-row td.current-day input {
    background-color: #81FC68 !important;
    color: #000 !important;
}

/* Keep highest-priority holiday/green/weekend styles intact (if not already defined) */
.waffle td.public-holiday, .waffle td.holiday-blue { background-color:#4A86E8 !important; color:#000000 !important; }
.waffle td.current-day { background-color:#81FC68 !important; color:#000 !important; }
.s13{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;background-color:#ffff00;text-align:left;color:#000000;font-family:Arial;font-size:10pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:2px 3px 2px 3px;}
.ot-toggle-button {
    background: transparent;
    border: none;
    color: #c0392b;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    display: inline-block;
  }
  .ot-toggle-button:focus { outline: 2px solid #4A86E8; outline-offset: 2px; }
  
  /* optional: hơi to hơn nếu muốn nổi bật */
  .ot-toggle-button.large { font-size: 18px; }
  
  /* transition khi ẩn/hiện (dùng trên nội dung ô nếu cần) */
  .ot-hidden-row { display: none; }
/* Style cho nút Request Leave */
/* Request Leave UI */
.btn-req-leave {
    background: #d9534f; color: white; border: none; padding: 5px 10px;
    cursor: pointer; font-weight: bold; font-size: 11px; margin-left: 5px;
    border-radius: 3px; position: relative;
}
.btn-req-leave:hover { background: #c9302c; }
.notify-badge {
    position: absolute; top: -5px; right: -5px;
    background: red; color: white; border-radius: 50%;
    width: 15px; height: 15px; font-size: 10px;
    display: flex; justify-content: center; align-items: center;
    border: 1px solid white; display: none;
}
.req-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999; display: none;
    justify-content: center; align-items: center;
}
.req-modal {
    background: white; padding: 24px; width: 540px; max-width: 94vw;
    max-height: 96vh; border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.28); font-family: Arial, sans-serif;
    display: flex; flex-direction: column; overflow: hidden;
    height: auto; min-height: auto;
}
.req-modal.menu-mode {
    width: 520px;
    max-width: 92vw;
    height: auto;
    min-height: 260px;
    max-height: 82vh;
}
.req-modal.history-mode {
    width: 640px;
    max-width: 95vw;
    height: 700px;
    max-height: 94vh;
    min-height: 520px;
}
.req-modal.form-mode {
    width: 620px;
    max-width: 94vw;
    height: 760px;
    max-height: 95vh;
    min-height: 620px;
}
.req-modal h3 { margin-top: 0; color: #d9534f; border-bottom: 2px solid #d9534f; padding-bottom: 10px; }
.req-group { margin-bottom: 15px; }
.req-group label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 12px;}
.req-control { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; }
.req-calendar-wrapper { border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center; }
.mini-cal-header { display: flex; justify-content: space-between; font-weight: bold; color: #a94442; margin-bottom: 10px; }
.mini-cal-table { width: 100%; border-collapse: collapse; }
.mini-cal-table th { font-size: 10px; color: #666; padding: 5px; }
.mini-cal-table td { padding: 5px; cursor: pointer; border-radius: 3px; }
.mini-cal-table td:hover { background-color: #eee; }
.mini-cal-table td.selected { background-color: #f0ad4e; color: white; font-weight: bold; }
.mini-cal-table td.today { background-color: #FFFF99; font-weight: bold; border: 1px solid gold; }
#selected-dates-list {
    max-height: 100px; overflow-y: auto; border: 1px solid #eee; margin-top: 5px; padding: 5px;
}
.date-tag { background: #eee; padding: 2px 5px; margin: 2px; font-size: 11px; display: inline-block; border-radius: 3px; }
.req-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; border-top: 1px solid #eee; padding-top: 10px; }
.btn-cancel { background: #fff; border: 1px solid #ccc; padding: 8px 15px; cursor: pointer; }
.btn-send { background: #d9534f; color: white; border: none; padding: 8px 15px; cursor: pointer; }
.req-item.pending { background: #fff7e6; }
.req-item.accepted { background: #e6f7e6; }
.req-item.rejected { background: #fdecea; }
.req-item.blink { animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
.rl-menu-buttons { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.rl-menu-btn { padding:12px 14px; font-weight:600; border:1px solid #ccc; border-radius:6px; background:#f7f7f7; cursor:pointer; text-align:center; }
.rl-menu-btn:hover { background:#eee; }
.rl-view-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rl-back { border:1px solid #d9534f; background:#fff5f4; color:#c0392b; font-weight:700; cursor:pointer; padding:8px 12px; border-radius:6px; }
.rl-view.hidden { display:none; }
.req-footer.only-cancel { justify-content:flex-end; }
.req-item .req-del-btn { font-size:12px; }
.req-item.pending { background: #fff7e6; }
.req-modal .rl-menu-screen,
.req-modal .rl-view:not(.hidden) { flex: 1; display: flex; flex-direction: column; }
.req-modal .rl-menu-buttons { flex: 1; justify-content: center; }
.req-modal.menu-mode .rl-menu-screen { flex: 0; }
.req-modal.menu-mode .rl-menu-buttons { flex: 0; justify-content: center; }
.req-modal.history-mode .rl-view-history { flex: 1; display: flex; flex-direction: column; }
.req-modal.menu-mode .rl-menu-screen { flex: 1; display: flex; flex-direction: column; }
.req-modal.menu-mode .rl-menu-buttons { flex: 1; justify-content: center; }
.req-modal .rl-view-form { gap: 12px; overflow-y: auto; padding-right: 4px; }
.req-history-list {
    flex: 1;
    min-height: 260px;
    max-height: 100%;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
}