/* C4 (CoCo Client Connect) – coco- prefix, CoCoTheme colors */
:root {
    --coco-primary: #e86825;
    --coco-primary-dark: #b84f1d;
    --coco-primary-light: #f5a66d;
    --coco-accent: #f5f1e1;
    --coco-primary-rgb: 232, 104, 37;
    --coco-text-primary: #212529;
    --coco-text-secondary: #6c757d;
    --coco-border-color: #dee2e6;
    --coco-bg-subtle: #f8f9fa;
}

html, body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.mud-main-content a:not(.mud-button-root):not(.mud-nav-link):not(.mud-link) {
    color: var(--coco-primary);
    text-decoration: none;
}
.mud-main-content a:not(.mud-button-root):not(.mud-nav-link):not(.mud-link):hover {
    color: var(--coco-primary-dark);
    text-decoration: underline;
}

/* Article view: last breadcrumb item (article title) is gray, not orange */
.coco-article-breadcrumbs .mud-breadcrumb-item:last-child,
.coco-article-breadcrumbs .mud-breadcrumb-item:last-child a {
    color: var(--coco-text-secondary) !important;
    text-decoration: none;
}
.coco-article-breadcrumbs .mud-breadcrumb-item:last-child a:hover {
    text-decoration: none;
}

/* Add Article page: title and slug */
.coco-add-article-title {
    max-width: 50%;
    width: 50%;
}
.mud-input-control.coco-add-article-title .mud-input .mud-input-slot {
    font-size: 1.5rem;
    font-weight: 500;
}
.coco-add-article-url-prefix {
    font-size: 0.875rem;
    color: var(--coco-text-secondary);
    font-family: ui-monospace, monospace;
    line-height: 1.5;
    vertical-align: baseline;
}
.coco-add-article-url-slug {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
}
.coco-add-article-url-slug .mud-input-slot {
    font-size: 0.875rem;
}
/* Add Article page: editor container */
.coco-add-article-editor {
    width: 100%;
}

/* TinyMCE: calculate height directly from viewport
   Subtracting: app bar area (80px) + title row (~70px) + slug row (~50px) 
   + gaps/margins (~30px) + bottom padding (16px) + editor border (2px)
   Note: !important needed to override TinyMCE's inline style attribute */
.coco-add-article-editor .tox-tinymce {
    height: calc(100vh - 250px) !important;
}

/* -------------------------------------------------------------------------
   TinyMCE dialogs (Insert/Edit Image, Link, etc.) – match CoCo/MudBlazor
   Dialog container, title, tabs, inputs, buttons only; close button and
   icons left as default.
   ------------------------------------------------------------------------- */

/* Dialog container: white surface, rounded corners on outer shell, shadow */
.tox .tox-dialog,
.tox .tox-dialog__content-js {
    background-color: #fff !important;
    border-radius: 8px !important;
}
.tox .tox-dialog__content-js {
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12) !important;
}
/* No rounded corners on dialog body (form area) – TinyMCE uses tox-dialog_body in DOM */
.tox .tox-dialog__body,
.tox .tox-dialog_body {
    background-color: #fff !important;
    border-radius: 0 !important;
}
.tox .tox-dialog__body .tox-dialog__body-content,
.tox .tox-dialog__body .tox-dialog_body-content,
.tox .tox-dialog_body .tox-dialog__body-content,
.tox .tox-dialog_body .tox-dialog_body-content {
    border-radius: 0 !important;
}

/* Title: match MudText Typo.h6 (dialog title) */
.tox .tox-dialog__header {
    background-color: #fff !important;
    border-bottom: 1px solid var(--coco-border-color) !important;
    padding: 16px 24px !important;
    border-radius: 8px 8px 0 0 !important;
}
.tox .tox-dialog__title {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--coco-text-primary) !important;
}

/* Tabs: active = pale orange background, bright orange border-bottom.
   (TinyMCE skin uses .tox-dialog_body-nav-item--active with #e5f0fd bg, #144782 border.) */
.tox .tox-dialog__body .tox-tab-list,
.tox .tox-dialog_body .tox-dialog_body-nav {
    background-color: #fff !important;
    border-bottom: 1px solid var(--coco-border-color) !important;
}
.tox .tox-dialog__body .tox-tab,
.tox .tox-dialog_body .tox-dialog_body-nav-item {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--coco-text-secondary) !important;
}
.tox .tox-dialog__body .tox-tab--active,
.tox .tox-dialog__body-nav-item--active,
.tox .tox-dialog_body .tox-dialog_body-nav-item--active {
    color: var(--coco-primary) !important;
    background-color: rgba(var(--coco-primary-rgb), 0.12) !important;
    border-bottom: 2px solid var(--coco-primary) !important;
}
.tox .tox-dialog__body .tox-tab:hover,
.tox .tox-dialog_body .tox-dialog_body-nav-item:hover {
    color: var(--coco-primary) !important;
}
.tox .tox-dialog__body .tox-tab--active::after {
    background-color: var(--coco-primary) !important;
    height: 2px !important;
}

/* Inputs: outlined style like MudTextField */
.tox .tox-dialog__body .tox-textfield,
.tox .tox-dialog__body .tox-textarea {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1rem !important;
    color: var(--coco-text-primary) !important;
    background-color: #fff !important;
    border: 1px solid var(--coco-border-color) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
}
.tox .tox-dialog__body .tox-textfield:focus,
.tox .tox-dialog__body .tox-textarea:focus {
    border-color: var(--coco-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--coco-primary) !important;
}
.tox .tox-dialog__body .tox-label {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.875rem !important;
    color: var(--coco-text-primary) !important;
}

/* Dropdown / listbox: CoCo primary only – remove TinyMCE blue outline completely */
.tox .tox-dialog__body .tox-listboxfield .tox-listbox--select,
.tox .tox-dialog__body .tox-listboxfield .tox-listbox--select:focus,
.tox .tox-dialog__body .tox-listbox .tox-listbox--select,
.tox .tox-dialog__body .tox-listbox .tox-listbox--select:focus {
    border: 1px solid var(--coco-border-color) !important;
    color: var(--coco-text-primary) !important;
    background-color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}
.tox .tox-dialog__body .tox-listboxfield .tox-listbox--select:hover,
.tox .tox-dialog__body .tox-listboxfield .tox-listbox--select:focus,
.tox .tox-dialog__body .tox-listbox .tox-listbox--select:hover,
.tox .tox-dialog__body .tox-listbox .tox-listbox--select:focus {
    border-color: var(--coco-primary) !important;
    box-shadow: 0 0 0 1px var(--coco-primary) !important;
}
.tox .tox-dialog__body .tox-listbox .tox-listbox__select-label {
    color: var(--coco-text-primary) !important;
}

/* Dropdown open list: selected/highlight items orange (menu can render outside dialog) */
.tox .tox-collection__item--active,
.tox .tox-collection__item--active .tox-collection__item-label,
.tox .tox-collection--list .tox-collection__item--active {
    background-color: var(--coco-primary) !important;
    color: var(--coco-accent) !important;
}
.tox .tox-collection--list .tox-collection__item--active .tox-collection__item-label {
    color: var(--coco-accent) !important;
}
.tox .tox-collection__item:hover:not(.tox-collection__item--active) {
    background-color: rgba(var(--coco-primary-rgb), 0.08) !important;
}

/* Footer: same as rest of form – no separate canvas, no border/shadow */
.tox .tox-dialog__footer,
.tox .tox-dialog__footer .tox-dialog__footer-start,
.tox .tox-dialog__footer .tox-dialog__footer-end {
    background-color: #fff !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.tox .tox-dialog__footer {
    padding: 0 24px 24px 24px !important;
    gap: 8px !important;
}
.tox .tox-dialog__footer .tox-button {
    border: none !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 500 !important;
}
/* Cancel – text only, dark grey (like EXIT EDIT MODE) */
.tox .tox-dialog__footer .tox-button--secondary,
.tox .tox-dialog__footer .tox-button:not([class*="primary"]) {
    background-color: transparent !important;
    color: var(--coco-text-primary) !important;
    box-shadow: none !important;
}
.tox .tox-dialog__footer .tox-button--secondary:hover,
.tox .tox-dialog__footer .tox-button:not([class*="primary"]):hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}
/* Save – filled orange, rounded, drop shadow (like SAVE CHANGES) */
.tox .tox-dialog__footer .tox-button--primary {
    background-color: var(--coco-primary) !important;
    color: var(--coco-accent) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !important;
}
.tox .tox-dialog__footer .tox-button--primary:hover {
    background-color: var(--coco-primary-dark) !important;
    box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.2), 0 6px 10px 1px rgba(0, 0, 0, 0.14), 0 2px 14px 2px rgba(0, 0, 0, 0.12) !important;
}