/* ============================================================
   CKEditor — Application Theme Overrides
   ------------------------------------------------------------
   Purpose:
   - Provide a clean, MS Word / Gmail-like editing experience
   - Override CKEditor defaults WITHOUT modifying vendor files
   - Keep styling stable across editor + rendered content
============================================================ */


/* ============================================================
   Horizontal Line (Divider)
============================================================ */

.ck-horizontal-line {
    border-top: 1px solid #000000;
    margin: 10px 0;
    background-color: transparent;
}

/* Allow color inheritance from toolbar */
.ck-horizontal-line.ck-hr-color {
    border-top-color: inherit;
}

/* Improve spacing around draggable widget */
.ck-horizontal-line .ck-widget__type-around {
    margin: 5px 0;
}


/* ============================================================
   Toolbar Styling (MS Word / Gmail Feel)
============================================================ */

.ck-toolbar {
    background-color: #f3f3f3 !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 4px 4px 0 0 !important;
}

.ck-toolbar .ck-button:not(.ck-color-button) {
    background-color: transparent;
    border-radius: 3px !important;
    color: #333333 !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.ck-toolbar .ck-button:hover {
    background-color: #e0e0e0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Active / toggled buttons */
.ck-toolbar .ck-button.ck-on,
.ck-toolbar .ck-button:active {
    background-color: #d0d0d0 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}


/* ============================================================
   Dropdown Panels / Popups
============================================================ */

.ck.ck-dropdown__panel {
    background-color: #ffffff !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}


/* ============================================================
   Content Styling (Applies inside editor + rendered HTML)
============================================================ */

/* Link color (consistent with email style) */
.ck-content a {
    color: #1155cc !important;
}

/* Placeholder styling */
.ck-placeholder::before {
    color: #888888 !important;
}


/* ============================================================
   Highlight Markers (from CKEditor config)
   NOTE: intentionally NOT scoped to .ck-content
   so they render correctly in emails + previews
============================================================ */

.marker-blue   { background-color: #a2d2ff; }
.marker-gray   { background-color: #d3d3d3; }
.marker-green  { background-color: #62f962; }
.marker-orange { background-color: #ffd580; }
.marker-pink   { background-color: #fc7899; }
.marker-purple { background-color: #e0bbff; }
.marker-red    { background-color: #ffb3b3; }
.marker-yellow { background-color: #fdfd77; }


/* ============================================================
   TODO LIST (Scoped to editor content)
   Future-proof: uses .ck-content (NOT editor internals)
============================================================ */

.ck-content ul.todo-list {
    list-style: none;
    padding-left: 0;
}

.ck-content ul.todo-list li {
    list-style: none;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Custom checkbox styling */
.ck-content ul.todo-list input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background-color: #fff;
}

/* Checkmark */
.ck-content ul.todo-list input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid var(--primary-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Label styling */
.ck-content ul.todo-list label {
    font-style: italic;
    color: #004085;
    font-weight: 500;
}