/* ==========================================================
   HISTORY
========================================================== */

.history-card{

    max-width:1400px;

}

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

.history-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}

.history-header h2{

    font-size:38px;

    font-weight:700;

    color:#111827;

    margin:0;

}

/* ==========================================================
   TOOLBAR
========================================================== */

.history-toolbar{

    margin-bottom:30px;

    display:flex;

    align-items:center;

    gap:16px;

}

.history-export-btn{

    display:inline-flex;

    align-items:center;

    gap:6px;

    background:#fff;

    border:1.5px solid #E2E8F0;

    color:#334155;

    font-size:13.5px;

    font-weight:600;

    padding:10px 18px;

    border-radius:10px;

    text-decoration:none;

    white-space:nowrap;

    transition:.2s;

}

.history-export-btn:hover{

    border-color:#BFE3D1;

    background:#F5FBF8;

    color:#0E6544;

}

/* ==========================================================
   SEARCH
========================================================== */

.history-search-wrapper{

    position:relative;

    max-width:520px;

    flex:1;

}

.history-search{

    width:100%;

    height:52px;

    padding:0 50px;

    border:1px solid #D9E1EC;

    border-radius:14px;

    background:#fff;

    font-size:15px;

    transition:.2s;

}

.history-search:focus{

    outline:none;

    border-color:#0E6544;

    box-shadow:0 0 0 4px rgba(14,101,68,.08);

}

.history-search-icon{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    font-size:18px;

    color:#94A3B8;

}

.history-clear{

    position:absolute;

    right:12px;

    top:50%;

    transform:translateY(-50%);

    width:30px;

    height:30px;

    border:none;

    border-radius:50%;

    background:#EEF2F7;

    cursor:pointer;

    transition:.2s;

}

.history-clear:hover{

    background:#E2E8F0;

}

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

#history-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

/* ==========================================================
   BULK SELECTION
========================================================== */

.history-bulk-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:10px 14px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:12px;

    margin-bottom:14px;

}

.history-select-all{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13.5px;

    font-weight:600;

    color:#334155;

    cursor:pointer;

}

.history-select-all input,
.history-item-checkbox{

    width:16px;

    height:16px;

    accent-color:#0E6544;

    cursor:pointer;

}

.history-delete-selected-btn{

    background:#EF4444;

    color:#fff;

    border:none;

    border-radius:9px;

    padding:8px 16px;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.history-delete-selected-btn:hover:not(:disabled){

    background:#DC2626;

}

.history-delete-selected-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

}

.history-item-select{

    display:flex;

    align-items:center;

    padding-top:2px;

    flex-shrink:0;

}

.history-title-row{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

    flex:1;

}

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

.history-item{

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:14px;

    padding:14px 16px;

    transition:.2s;

}

.history-item:hover{

    border-color:#D4DDE8;

    box-shadow:0 10px 24px rgba(15,23,42,.05);

    transform:translateY(-2px);

}

/* ==========================================================
   META
========================================================== */

.history-meta{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-bottom:8px;

}

.history-badge{

    padding:4px 10px;

    border-radius:999px;

    background:#EEF7F3;

    color:#0E6544;

    font-size:11.5px;

    font-weight:600;

}

/* ==========================================================
   DATE
========================================================== */

.history-date{

    color:#64748B;

    font-size:12px;

    margin-bottom:0;

}

/* ==========================================================
   EMPTY
========================================================== */

.history-empty{

    border:2px dashed #D9E1EC;

    border-radius:18px;

    padding:70px 30px;

    text-align:center;

    color:#64748B;

    font-size:18px;

}

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

.history-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:24px;

    margin-bottom:8px;

}

.history-title{

    margin:0;

    font-size:15.5px;

    font-weight:700;

    color:#111827;

    line-height:1.4;

    white-space:normal;

    overflow-wrap:break-word;

    word-break:break-word;

    min-width:0;

}

/* ==========================================
   ACTIONS
========================================== */

.history-actions{

    display:flex;

    align-items:center;

    gap:10px;

    flex-shrink:0;

}

/* ==========================================
   DELETE BUTTON
========================================== */

.history-delete{

    background:#EF4444;

    color:#fff;

    border:none;

}

.history-delete:hover{

    background:#DC2626;

}

/* ==========================================================
   HEADER (matches admin markup wrapper)
========================================================== */

.history-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.history-header h2{

    font-size:28px;

    font-weight:700;

    color:#111827;

    margin:0;

}

/* ==========================================================
   OPEN BUTTON
========================================================== */

.history-open,
.history-modal-load-btn{

    background:#fff;

    color:#0E6544;

    border:1.5px solid #0E6544;

    border-radius:10px;

    padding:8px 18px;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    white-space:nowrap;

}

.history-open:hover,
.history-modal-load-btn:hover{

    background:#0E6544;

    color:#fff;

}

/* ==========================================================
   DELETE BUTTON (icon style, refined)
========================================================== */

.history-delete{

    background:#FEF2F2;

    color:#EF4444;

    border:1.5px solid #FEE2E2;

    border-radius:10px;

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    cursor:pointer;

    transition:.2s;

    flex-shrink:0;

}

.history-delete:hover{

    background:#EF4444;

    color:#fff;

    border-color:#EF4444;

}

/* ==========================================================
   BADGE VARIANTS (style / holiday / bundle, by order of appearance)
========================================================== */

.history-meta .history-badge:nth-child(2){

    background:#FEF3C7;

    color:#B45309;

}

.history-meta .history-badge:nth-child(3){

    background:#DBEAFE;

    color:#1D4ED8;

}

/* ==========================================================
   LOADING STATE
========================================================== */

.history-loading{

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:70px 30px;

    text-align:center;

    color:#64748B;

    font-size:16px;

    background:#fff;

}

/* ==========================================================
   EMPTY STATE ICON
========================================================== */

.history-empty-icon{

    font-size:40px;

    margin-bottom:16px;

}

/* ==========================================================
   MODAL OVERLAY
========================================================== */

.history-modal-overlay{

    display:none;

    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:0;

    background:rgba(15,23,42,.55);

    z-index:9999;

    align-items:center;

    justify-content:center;

    padding:24px;

}

.history-modal-overlay.active{

    display:flex;

}

/* ==========================================================
   MODAL BOX
========================================================== */

.history-modal{

    background:#fff;

    border-radius:20px;

    width:100%;

    max-width:760px;

    max-height:88vh;

    display:flex;

    flex-direction:column;

    box-shadow:0 24px 60px rgba(15,23,42,.25);

    overflow:hidden;

}

/* ==========================================================
   MODAL HEADER
========================================================== */

.history-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:16px;

    padding:24px 28px 0;

}

.history-modal-header h3{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:#111827;

    line-height:1.4;

}

@media (max-width:600px){

    .history-modal{

        max-height:92vh;

        display:block;

        overflow-y:auto;

    }

    .history-modal-body{

        overflow-y:visible;

    }

    .history-modal-header h3{

        font-size:14.5px;

        line-height:1.4;

    }

    .history-modal-header{

        padding:18px 18px 0;

    }

    .history-modal-body{

        padding:14px 18px 4px;

    }

}

.history-modal-close{

    background:#F1F5F9;

    border:none;

    border-radius:50%;

    width:32px;

    height:32px;

    flex-shrink:0;

    cursor:pointer;

    font-size:14px;

    color:#475569;

    transition:.2s;

}

.history-modal-close:hover{

    background:#E2E8F0;

}

/* ==========================================================
   MODAL META (badges)
========================================================== */

.history-modal-meta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    padding:14px 28px 0;

}

/* ==========================================================
   MODAL BODY
========================================================== */

.history-modal-body{

    padding:20px 28px 4px;

    overflow-y:auto;

}

.history-modal-section{

    margin-bottom:22px;

}

.history-modal-section label{

    display:block;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

    color:#64748B;

    margin-bottom:8px;

}

.history-modal-section-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:8px;

}

.history-modal-section-head label{

    margin-bottom:0;

}

.history-copy-btn{

    background:#F1F5F9;

    border:1px solid #E2E8F0;

    border-radius:8px;

    padding:5px 12px;

    font-size:12px;

    font-weight:600;

    color:#334155;

    cursor:pointer;

    transition:.2s;

    flex-shrink:0;

    white-space:nowrap;

}

.history-copy-btn:hover{

    background:#E2E8F0;

}

.history-copy-btn.copied{

    background:#EEF7F3;

    border-color:#BFE3D1;

    color:#0E6544;

}

.history-modal-value{

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:12px;

    padding:14px 16px;

    font-size:14.5px;

    line-height:1.6;

    color:#1F2937;

    white-space:pre-wrap;

    word-break:break-word;

}

.history-modal-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.history-modal-tag{

    background:#EEF7F3;

    color:#0E6544;

    border-radius:999px;

    padding:6px 14px;

    font-size:13px;

    font-weight:600;

}

/* ==========================================================
   MODAL FOOTER
========================================================== */

.history-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:18px 28px;

    border-top:1px solid #EEF2F7;

}

.history-modal-cancel{

    background:#fff;

    color:#475569;

    border:1.5px solid #E2E8F0;

    border-radius:10px;

    padding:8px 20px;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.history-modal-cancel:hover{

    background:#F1F5F9;

}