/* =========================================================
   CMOROOM INSIGHTS — ARTICLE EDITOR
   ========================================================= */

/* =========================================
   RICH EDITOR LISTS
========================================= */
.ed-line-mark {
    color: var(--dash-gold);
    font-size: 10px;
}

.article-outline-number {
    flex: 0 0 32px;
    width: 32px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-gold, #c9a45c);
    text-align: left;
}



/* =========================================
   NEW CATEGORY
========================================= */
.h45{height: 45px;}
.category-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;border: 1px solid var(--dash-gold);

    height: 45px;
    background: transparent;

    color: var(--dash-gold, #c9a45c);

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.category-new-btn:hover {
    color: #ffffff;
}

.category-new-btn i {
    font-size: 14px;
}


/* =========================================
   ADD CATEGORY FORM
========================================= */

.category-add-form {
    display: none;

    margin-top: 10px;

}

.category-add-form.show {
    display: block;
}

.category-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-add-row .dash-input {
    flex: 1;
    min-width: 0;
}

.category-add-btn {
    flex: 0 0 auto;
   text-align: center;
    height: 45px;background: var(--dash-gold);color: #ffffff;
}

.category-error {
    display: block;

    margin-top: 7px;

    color: #dc3545;

    font-size: 11px;
}

@media (max-width: 575.98px) {

    .category-add-row {
        flex-direction: column;
        align-items: stretch;
    }

    .category-add-btn {
        width: 100%;
    }

}

.id-editor-body ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 24px;
    margin: 12px 0;
}

.id-editor-body ol {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 24px;
    margin: 12px 0;
}

.id-editor-body ul li,
.id-editor-body ol li {
    display: list-item;
    margin-bottom: 6px;
    padding-left: 4px;
}

.id-editor-body ul li::marker {
    color: #111111;
}

.id-editor-body ol li::marker {
    color: #111111;
}


 /* =========================================
           DATEPICKER WRAPPER
        ========================================= */
/* =========================================
   DATEPICKER
========================================= */

.custom-datepicker {
    position: relative;
    width: 100%;
}

.custom-datepicker .dash-input {
    width: 100%;
    height: 45px;
    padding-right: 42px;

    background: #050506;
    color: #ffffff;

    border: 1px solid #2a2a31;
    border-radius: 0;

    cursor: pointer;
    outline: none;
}

.custom-datepicker .dash-input:focus {
    border-color: #55555c;
    box-shadow: none;
}


/* =========================================
   CALENDAR ICON
========================================= */

/*.datepicker-icon {
    position: absolute;
    top: 50%;
    right: 14px;

    transform: translateY(-50%);

    color: #ffffff;
    font-size: 15px;

    pointer-events: none;
}
*/

/* =========================================
   POPUP
========================================= */

.datepicker-popup {
    position: absolute;

    top: calc(100% + 5px);
    left: 0;

    width: 280px;

    background: #171719;

    border: 1px solid #36363c;

    box-shadow: 0 12px 30px rgba(0,0,0,.55);

    z-index: 9999;

    display: none;
}

.datepicker-popup.show {
    display: block;
}


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

.datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 9px 10px;

    border-bottom: 1px solid #303035;
}

.datepicker-month {
    border: 0;
    background: transparent;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    padding: 5px 10px;

    cursor: pointer;
}

.datepicker-month:hover {
    background: #28282d;
}


/* =========================================
   NAV BUTTON
========================================= */

.datepicker-nav {
    width: 30px;
    height: 30px;

    border: 0;
    background: transparent;

    color: #dcdce0;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.datepicker-nav:hover {
    background: #29292e;
}

.datepicker-nav:disabled,
.datepicker-nav.disabled {
    opacity: .25;
    cursor: not-allowed;
    pointer-events: none;
}


/* =========================================
   WEEKDAYS
========================================= */

.datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    padding: 9px 10px 4px;
}

.datepicker-weekdays span {
    text-align: center;

    color: #ffffff;

    font-size: 11px;
}


/* =========================================
   DAYS
========================================= */

.datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    gap: 2px;

    padding: 5px 10px 12px;
}

.datepicker-day {
    width: 32px;
    height: 32px;

    margin: auto;
    padding: 0;

    border: 1px solid transparent;

    background: transparent;

    color: #ffffff;

    font-size: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.datepicker-day:hover {
    background: #303035;
}

.datepicker-day.other-month {
    color: #55555b;
}


/* =========================================
   TODAY
   BORDER ONLY
========================================= */

.datepicker-day.today {
    background: transparent;
    color: #ffffff;

    border: 1px solid #55555c;
}


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

.datepicker-day.active {
    background:var(--dash-gold);
    color: #ffffff;

    border-color:var(--dash-gold);
}

.datepicker-day.active:hover {
   background:var(--dash-gold);
    color: #ffffff;
}


/* =========================================
   FUTURE DATES
========================================= */

.datepicker-day.disabled {
    color: #55555b;

    background: transparent;

    opacity: 1;

    cursor: not-allowed;
    pointer-events: none;
}


/* =========================================
   YEAR / MONTH SELECT VIEW
========================================= */

.datepicker-select-view {
    display: none;
}

.datepicker-select-view.show {
    display: block;
}

.datepicker-select-header {
    height: 49px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #303035;

    padding: 0 10px;
}

.datepicker-select-header span {
    flex: 1;

    text-align: center;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}


/* =========================================
   YEAR GRID
========================================= */

.datepicker-select-content {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 6px;

    padding: 14px;
}

.datepicker-select-item {
    min-height: 36px;

    border: 1px solid transparent;

    background: transparent;

    color: #ffffff;

    font-size: 12px;

    cursor: pointer;
}

.datepicker-select-item:hover {
    background: #303035;
}


/* Current year */

.datepicker-select-item.current {
    border-color: #55555c;
}


/* Selected year/month */

.datepicker-select-item.active {
    background: #ffffff;
    color: #000000;

    border-color: #ffffff;
}


/* Future year/month */

.datepicker-select-item.disabled {
    color: #55555b;

    opacity: .45;

    cursor: not-allowed;
    pointer-events: none;
}


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

.datepicker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 9px 14px;

    border-top: 1px solid #303035;
}

.datepicker-footer button {
    border: 0;
    background: transparent;

    color:var(--dash-gold);

    font-size: 12px;

    cursor: pointer;
}

.datepicker-footer button:hover {
    color: #ffffff;
}




.id-outline{padding-left: 0px;}
.id-outline li {
    display: flex;
    gap:10px;
    padding: 9px 0;margin: 0px;
    border-bottom: 1px dashed var(--dash-line-soft);
    font-size: 13px;
    color: #c9c9d4;
}

.id-outline .bi{color: var(--dash-gold);}

.id-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px;
    margin-bottom: 22px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-radius: 12px;
}
.id-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 15px;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: #b7b7c3;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
}
.id-tab:hover { color: #fff; background: var(--dash-surface-2); }
.id-tab.active { background: var(--dash-gold-soft); color: var(--dash-gold); }




.id-panel[hidden]{display:none!important}

.id-check{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:11px;cursor:pointer}
.id-check input,.id-toc-list input{accent-color:var(--dash-gold)}

.id-rich-editor{border:1px solid var(--dash-line);background:#080808}
.id-editor-toolbar{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:8px;border-bottom:1px solid var(--dash-line);background:#101010}
.id-editor-toolbar button{width:31px;height:30px;border:1px solid transparent;background:transparent;color:#ccc;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px}
.id-editor-toolbar button:hover,.id-editor-toolbar button.is-active{border-color:var(--dash-line);background:#191919;color:var(--dash-gold)}
.id-editor-toolbar select{height:30px;background:#151515;border:1px solid var(--dash-line);color:#ddd;padding:0 7px;font-size:10px}
.id-editor-divider{width:1px;height:20px;background:var(--dash-line);margin:0 4px}
.id-color-control{height:30px;width:31px;border:1px solid transparent;color:#ccc;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.id-color-control:hover{border-color:var(--dash-line);color:var(--dash-gold)}
.id-color-control input{position:absolute;opacity:0;width:1px;height:1px}
.id-editor-body{min-height:560px;padding:28px;background:#fff;color:#161616;font-family:Arial,sans-serif;font-size:15px;line-height:1.75;outline:0}
.id-editor-body:focus{box-shadow:inset 0 0 0 1px var(--dash-gold)}
.id-editor-body p{margin:0 0 18px}
.id-editor-body h2{font-size:25px;line-height:1.25;margin:32px 0 15px;font-weight:700}
.id-editor-body h3{font-size:20px;margin:26px 0 12px}
.id-editor-body h4{font-size:17px;margin:22px 0 10px}
.id-editor-body strong{font-weight:700}
.id-editor-body blockquote{margin:25px 0;padding:15px 20px;border-left:3px solid var(--dash-gold);background:#f4f1e8;font-size:17px;font-style:italic}
.id-editor-body ul,.id-editor-body ol{padding-left:25px;margin-bottom:20px}
.id-editor-body li{margin-bottom:7px}
.id-editor-body a{color:#9b7c27;text-decoration:underline}
.id-editor-body img{max-width:100%;height:auto;display:block;margin:22px auto}
.id-editor-body .editor-image-block{margin:25px 0}
.id-editor-body .editor-image-block img{margin:0 auto}
.id-editor-body .editor-image-block small{display:block;text-align:center;color:#777;font-size:11px;margin-top:6px}
.id-editor-help{padding:10px 0;color:var(--dash-muted);font-size:10px}
.id-editor-help i{color:var(--dash-gold);margin-right:5px}

.id-module {
    padding: 16px;
    border-top: 1px dotted var(--dash-line);
    background: transparent;
}
.id-module h3{margin:0;color:#fff;font-size:13px}
.id-module p{margin:4px 0 0;color:var(--dash-muted);font-size:10px}
.id-toc-list{display:flex;flex-direction:column;gap:8px}
.id-toc-list label{display:flex;gap:8px;align-items:flex-start;color:#ddd;font-size:11px;padding:7px 0;border-bottom:1px solid var(--dash-line-soft)}
.id-takeaway-row{display:grid;padding: 9px 11px;grid-template-columns:18px minmax(0,1fr) 34px;gap:0px;align-items:center;margin-bottom:7px;

    background: var(--dash-bg);
    border: 1px solid var(--dash-line);}
.id-takeaway-row>i{color:var(--dash-muted);font-size:13px}
.id-related-row{align-items: center;display:grid;grid-template-columns:28px minmax(0,1fr) 34px;gap:10px;padding:12px 0;border-bottom:1px solid var(--dash-line-soft)}
.id-related-number{width:26px;height:26px;background:var(--dash-gold);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px}
.id-status-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--dash-line-soft);font-size:13px}
.id-status-row span{color:var(--dash-muted)}
.id-status-row b{color:#fff}
.id-save{display:flex;flex-direction:column;gap:9px}
.id-takeaway-row .dash-input{width: 98.7%;}

@media(max-width:767.98px){
 .id-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
 .id-tab{white-space:nowrap}
 .id-editor-toolbar{gap:2px}
 .id-editor-body{min-height:450px;padding:18px;font-size:14px}
 .id-editor-body h2{font-size:21px}
 .id-related-row{grid-template-columns:25px minmax(0,1fr)}
 .id-related-row .dash-act{grid-column:2;justify-self:start}
}