/* SEFRA 커스텀 스타일 */

/* 메일 본문 iframe 전체 폭 사용 */
#messagecontframe,
#messagecontframe iframe {
    width: 100% !important;
    max-width: 100% !important;
}

/* 메일 본문 컨테이너 중앙 정렬 */
#messagebody {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* iframe 내부 body 스타일 (JavaScript로 주입될 예정) */
.message-part,
.message-htmlpart {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* 메일 본문 내부 콘텐츠는 좌측 정렬, 컨테이너는 중앙 */
.message-part > *,
.message-htmlpart > * {
    text-align: left !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}

/* 모바일 - 메일 본문 하단 여백 추가 */
@media screen and (max-width: 768px) {
    /* 메일 본문 컨테이너 하단 여백 */
    #messagebody,
    .message-part,
    .message-htmlpart {
        padding-bottom: 60px !important;
        margin-bottom: 40px !important;
    }

    /* 이전 회신/전달 메시지 하단 여백 */
    .message-part blockquote,
    .message-partheaders + .message-part {
        margin-bottom: 50px !important;
        padding-bottom: 30px !important;
    }

    /* 메일 프레임 전체 하단 패딩 */
    #messagecontframe,
    .content-frame {
        padding-bottom: 80px !important;
    }

    /* 메일 리스트 하단 여백 */
    #messagelist {
        padding-bottom: 50px !important;
    }
}

/* 태블릿 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #messagebody,
    .message-part {
        padding-bottom: 40px !important;
    }
}

/* ========================================
   선택 읽음 처리 버튼 스타일
   ======================================== */

/* 읽음 처리 버튼 기본 스타일 */
#btn-mark-selected-read {
    background-color: #37beff !important;
    color: white !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    margin-right: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

#btn-mark-selected-read:hover {
    background-color: #2a9dd8 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

#btn-mark-selected-read:active {
    background-color: #2088c0 !important;
}

#btn-mark-selected-read .button-inner {
    font-size: 13px !important;
}

/* 모바일에서 버튼 크기 조정 */
@media screen and (max-width: 768px) {
    #btn-mark-selected-read {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    #btn-mark-selected-read .button-inner {
        font-size: 12px !important;
    }
}

/* ========================================
   메일 하단 답장 버튼 스타일
   ======================================== */

#sefra-reply-buttons-bottom button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease;
}

#sefra-reply-buttons-bottom button:active {
    transform: translateY(0);
}

/* 모바일에서 버튼 세로 배치 */
@media screen and (max-width: 768px) {
    #sefra-reply-buttons-bottom {
        padding: 15px 10px !important;
    }

    #sefra-reply-buttons-bottom button {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

/* 태블릿 크기도 고려 */
@media screen and (max-width: 1024px) {
    #sefra-reply-buttons-bottom button {
        padding: 10px 20px !important;
        margin: 0 5px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   SEFRA 모달 애니메이션
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 모바일에서 모달 크기 조정 */
@media screen and (max-width: 768px) {
    .sefra-modal-content {
        width: 95% !important;
        max-height: 90vh !important;
    }
}

/* 모달 버튼 스타일 - 위험 작업용 */
.sefra-modal button.btn-danger {
    background: #d9534f !important;
    color: white !important;
}

.sefra-modal button.btn-danger:hover {
    background: #c9302c !important;
}

/* ========================================
   #4: 중요 메일함 스타일
   ======================================== */

/* 중요 메일함 폴더 스타일 */
#sefra-important-folder {
    background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
    border-left: 3px solid #ffc107;
    margin: 4px 0;
    border-radius: 4px;
}

#sefra-important-folder:hover {
    background: linear-gradient(135deg, #fff5d6 0%, #fffef8 100%);
}

#sefra-important-folder.selected,
#sefra-important-folder a.selected {
    background: linear-gradient(135deg, #fff3c4 0%, #fffaeb 100%) !important;
    border-left-color: #ff9800 !important;
    font-weight: 600;
}

#sefra-important-folder .folder-prefix {
    font-size: 16px;
    margin-right: 6px;
}

#sefra-important-folder .name {
    color: #d84315;
    font-weight: 500;
}

#sefra-important-folder .unreadcount {
    background: #ff9800;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 5px;
}

/* 메일 목록에서 중요 표시 강조 */
.messagelist tr.flagged,
.messagelist tr.flagged td {
    background: #fffbf0 !important;
}

.messagelist tr.flagged:hover td {
    background: #fff8e1 !important;
}

/* 플래그 아이콘 스타일 개선 */
.messagelist .flag {
    color: #ffc107 !important;
    font-size: 16px !important;
}

.messagelist .flag:hover {
    color: #ff9800 !important;
    transform: scale(1.2);
    transition: all 0.2s ease;
}

/* 플래그된 메일 아이콘 */
.messagelist .flagged .flag {
    color: #ff9800 !important;
    font-weight: bold;
}

/* 툴바의 중요 표시 버튼 */
.toolbar .button.flag,
.toolbar a.flag {
    position: relative;
}

.toolbar .button.flag::before,
.toolbar a.flag::before {
    content: "⭐";
    font-size: 18px;
}

/* 중요 메일함 안내 툴팁 */
#sefra-important-folder a::after {
    content: "중요 표시된 메일만 표시됩니다";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    margin-left: 10px;
    z-index: 1000;
}

#sefra-important-folder:hover a::after {
    opacity: 0.9;
}

/* 전체/읽음/안읽음 메일 개수 표시 (custom.js가 생성) */
#sefra-mail-counts {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* 모바일(쓰기 작성) 메뉴는 이미 하단 플로팅 "+" 버튼이 있으므로
   모바일 화면에서는 #taskmenu 안의 "쓰기" 항목을 숨김 (PC에서는 유지) */
html.layout-phone #taskmenu .action-buttons {
    display: none !important;
}

/* ========================================
   모바일 메뉴(#taskmenu)의 메일함 폴더 목록
   - PC에서는 좌측 사이드바에 이미 폴더 목록이 있으므로 숨기고,
     모바일 화면(Elastic 스킨이 taskmenu를 실제 목록형으로 그리는
     480px 이하)에서만 표시
   - <a> 자체의 색상/배경/줄높이/구분선 등은 일부러 지정하지 않음:
     #taskmenu의 기존 mail/contacts/settings 버튼과 동일한 스타일을
     그대로 상속받아 디자인이 통일되도록 함. 여기서는 목록 리셋과
     개수 배지 위치만 지정.
   ======================================== */
#sefra-taskmenu-folders {
    display: none !important;
}

html.layout-phone #sefra-taskmenu-folders {
    display: block !important;
}

@media screen and (max-width: 480px) {
    #sefra-taskmenu-folders {
        display: block !important;
    }
}

#sefra-taskmenu-folders ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sefra-taskmenu-folders li.sefra-taskmenu-folder a {
    position: relative;
}

#sefra-taskmenu-folders .sefra-folder-counts {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
}

#sefra-taskmenu-folders .sefra-folder-total {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
}

#sefra-taskmenu-folders .sefra-folder-unread {
    background: #ff9800;
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* 모바일 메뉴의 "받은 메일함" 버튼 자체에 붙는 개수 배지 (오른쪽 고정) */
#taskmenu a.mail {
    position: relative;
}

#taskmenu a.mail .sefra-inbox-badge {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
}

#taskmenu a.mail .sefra-inbox-badge .sefra-folder-total {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
}

#taskmenu a.mail .sefra-inbox-badge .sefra-folder-unread {
    background: #ff9800;
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ========================================
   PC 좌측 사이드바(#mailboxlist) 각 폴더 우측에 전체 메일 수 표시
   - 기존 안읽음 배지(.unreadcount)는 이미 position:absolute; right:0으로
     떠 있으므로, 같은 방식으로 절대 위치를 줘서 겹치지 않게 배치함
     (flex로 바꾸면 Roundcube 자체 스크립트가 안읽음 배지를 <a>의
     직계 자식으로 찾아 갱신하는 로직과 DOM 구조가 어긋날 수 있어 피함)
   ======================================== */
#mailboxlist li.mailbox > a {
    position: relative;
    padding-right: 2.6em;
}

#mailboxlist li.mailbox.unread > a {
    padding-right: 5em;
}

#mailboxlist .sefra-folder-sidebar-total {
    position: absolute;
    top: 50%;
    right: 0.6em;
    transform: translateY(-50%);
    color: #8a9aa5;
    font-size: 0.75rem;
    pointer-events: none;
}

#mailboxlist li.mailbox.unread .sefra-folder-sidebar-total {
    right: 2.9em;
}

/* ========================================
   메일 작성 중 "저장되지 않은 변경사항" 확인창을 모바일에서도
   전체화면이 아닌 작은 팝업(카드)으로 표시 (custom.js가 감지해서
   .sefra-discard-dialog 클래스를 붙임)
   ======================================== */
@media screen and (max-width: 480px) {
    .ui-dialog.sefra-discard-dialog {
        width: 88% !important;
        max-width: 380px !important;
        height: auto !important;
        max-height: 80vh !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 10px !important;
        border: 1px solid #ddd !important;
        display: block !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
    }

    .ui-dialog.sefra-discard-dialog .ui-dialog-titlebar {
        height: auto !important;
        border-radius: 10px 10px 0 0 !important;
    }

    .ui-dialog.sefra-discard-dialog .ui-dialog-content {
        flex: none !important;
        padding: 1.25rem 1rem !important;
    }

    .ui-dialog.sefra-discard-dialog .ui-dialog-buttonpane {
        height: auto !important;
        padding: .5rem !important;
        border-radius: 0 0 10px 10px !important;
    }

    .ui-dialog.sefra-discard-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
        height: auto !important;
        padding: .6rem !important;
    }
}