/* FileLocation: root/assets/css/styles.css */

/* Task Tracker basic styling */
body {
    font-size: 0.9rem;
    background-color: #f8f9fa;
}

.sidebar {
    width: 240px;
    background-color: #fff;
    transition: width 0.2s;
    overflow-x: hidden;
    height: 100vh;
    position: sticky;
    top: 0;
}

.sidebar .app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap; /* prevents name from breaking */
}

/* COLLAPSED SIDEBAR STATE */
.sidebar.collapsed {
    width: 60px;
    overflow: hidden;
}

/* ---- SIDEBAR LINK LAYOUT ---- */
.sidebar ul li a {
    display: flex;
    align-items: center; /* vertically center icon + text */
    gap: 0.65rem; /* spacing between icon + text */
    padding: 0.45rem 0.75rem; /* nice click target */
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}

.sidebar ul li a:hover {
    background-color: #f1f1f1;
}

/* icon + text */
.sidebar-icon {
    font-size: 1.2rem;
    width: 22px; /* fixed width keeps column aligned */
    text-align: center;
}

.sidebar-text {
    display: inline-block;
}

/* ---- COLLAPSED SIDEBAR BEHAVIOR ---- */
.sidebar.collapsed ul li a {
    justify-content: center; /* center icons horizontally in narrow bar */
    padding-left: 0;
    padding-right: 0;
}

.sidebar.collapsed .sidebar-text {
    display: none; /* hide text in collapsed mode */
}

/* section titles (MASTERS, SYSTEM) hidden when collapsed */
.sidebar.collapsed .mt-2.text-uppercase {
    font-size: 0;
}

/* ---- HOVER LABEL (TEXT POPUP WHEN COLLAPSED) ---- */
.sidebar ul li a[data-label] {
    position: relative;
}

.sidebar.collapsed ul li a[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(8px, -50%);
    background: #fff;
    border: 1px solid #ddd;
    padding: 2px 8px;
    white-space: nowrap;
    font-size: 0.8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.sidebar.collapsed ul li a[data-label]:hover::after {
    opacity: 1;
}

/* header in sidebar when collapsed:
   hide app name, keep toggle button centered & visible */
.sidebar.collapsed .p-3 {
    justify-content: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Hide logo in collapsed sidebar header so toggle has room */
.sidebar.collapsed .p-3 img {
    display: none;
}

.sidebar.collapsed .p-3 span.fw-bold {
    display: none;
}

/* Top bar and general stuff */
.topbar {
    background-color: #fff;
    height: 64px;
}

.progress-slim {
    height: 5px;
    border-radius: 2px;
}

.table-actions button {
    margin-right: 4px;
}

.btn-outline-warning {
    color: #ffb700;
    border-color: #ffb700;
}

.btn-outline-warning:hover {
    background-color: #ffb700;
    color: #fff;
}

/* DataTables small tweaks */
.dataTables_wrapper .dataTables_filter input {
    border-radius: 4px;
    padding: 2px 6px;
}

/* remove bullets from any nav lists */
.sidebar .nav,
.sidebar ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
/* ACTIVE LINK STYLING */
.sidebar ul li a.active {
    background-color: #e7f1ff;
    color: #0b5ed7;
    font-weight: 600;
}

.sidebar ul li a.active .sidebar-icon {
    color: #0b5ed7;
}

/* left accent bar */
.sidebar ul li a.active {
    position: relative;
}

.sidebar ul li a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    background-color: #0b5ed7;
    border-radius: 2px;
}

/* COLLAPSED MODE — still highlight properly */
.sidebar.collapsed ul li a.active {
    background-color: #e7f1ff;
}

.sidebar.collapsed ul li a.active::before {
    left: 0; /* show accent bar */
}

/* tooltip (hover label) remains visible */
.sidebar.collapsed ul li a.active:hover::after {
    opacity: 1;
}

.task-id-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #084298 !important;
    text-decoration: none !important;
    padding: 4px 8px;
    border-radius: 50px;
    transition: 0.2s;
    background: rgba(13, 110, 253, 0.08);
}

.task-id-link i {
    font-size: 1rem;
    opacity: 0.8;
}

.task-id-link:hover {
    color: #0d6efd !important;
}

.dt-processing {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Enabled buttons */
.btn-edit,
.btn-del {
    cursor: pointer;
}

/* Disabled buttons */
.btn-edit:disabled,
.btn-del:disabled {
    cursor: not-allowed !important;
    opacity: 0.6; /* optional: visually show it's disabled */
}

/* --- DARK MODE SUPPORT --- */
.dark-mode body {
    background-color: #121212;
    color: #e9ecef;
}

/* Sidebar + topbar in dark mode */
.dark-mode .sidebar {
    background-color: #1e1e1e;
    border-color: #333;
}

.dark-mode .topbar {
    background-color: #1e1e1e;
    border-bottom-color: #333;
}

/* Sidebar links */
.dark-mode .sidebar ul li a {
    color: #e9ecef;
}

.dark-mode .sidebar ul li a:hover {
    background-color: #2a2a2a;
}

/* Active link */
.dark-mode .sidebar ul li a.active {
    background-color: #25324a;
    color: #9ec5fe;
}

.dark-mode .sidebar ul li a.active::before {
    background-color: #9ec5fe;
}

.dark-mode .sidebar ul li a.active .sidebar-icon {
    color: #9ec5fe;
}

.dark-mode div.modal-content,
.dark-mode div.modal-content div.ql-container,
.dark-mode textarea {
    background-color: #121212;
}

/* Dark-mode textareas – kill blue focus ring completely */
.dark-mode textarea.form-control,
.dark-mode textarea.form-control:focus {
    background-color: #121212 !important;
    color: #e9ecef !important;

    /* override Bootstrap focus border + ring */
    border: 1px solid #e9ecef !important;
    box-shadow: none !important;
    outline: none !important;
}

/* All dark-mode textareas */
.dark-mode textarea.form-control::placeholder,
.dark-mode textarea.form-control::-webkit-input-placeholder,
.dark-mode textarea.form-control:-ms-input-placeholder,
.dark-mode textarea.form-control::-ms-input-placeholder {
    color: #e9ecef !important;   /* light gray, change if you want */
    opacity: 1;                  /* make sure it’s not faded */
}

/* Cards / tables */
.dark-mode .card {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e9ecef;
}

.dark-mode .table,
.dark-mode .dt-info,
.dark-mode div.dt-length,
.dark-mode div.dt-search,
.dark-mode .form-label {
    color: #e9ecef;
}

.dark-mode .table thead {
    background-color: #1a1a1a;
}

.dark-mode .table tbody tr:nth-child(even) {
    background-color: #181818;
}

/* SweetAlert2 dark tweak (optional, simple) */
.dark-mode .swal2-popup {
    background: #1f1f1f !important;
    color: #e9ecef !important;
}

/* --- GLOBAL AJAX LOADER OVERLAY (FULL-PAGE, GLASSY, UNCICKABLE) --- */
#global-loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px); /* glass blur */
    -webkit-backdrop-filter: blur(6px);
    display: none; /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 999999; /* highest layer */
    pointer-events: all; /* block clicks */
}

#global-loader .spinner-border {
    width: 3.5rem;
    height: 3.5rem;
}

/* Dark mode support */
.dark-mode #global-loader {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.status-card {
    cursor: default;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

.extra-small {
    font-size: 0.75rem;
}

/* task_view.php */

/* Images inserted via CKEditor */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Basic iframe resizing */
iframe {
    max-width: 100%;
    width: 100%;
}

.ck-block {
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;

    /* Prevent scroll chaining: keep scroll inside this element */
    overscroll-behavior: contain; /* both axes */
    /* or, if you only care about vertical: overscroll-behavior-y: contain; */

    /* Hide scrollbars (optional) */
    /* Firefox */
    /* scrollbar-width: none; */
    /* IE/Edge */
    /* -ms-overflow-style: none; */
}
.ck-block::-webkit-scrollbar {
    /* Chrome/Safari/Edge */
    /* display: none; */
}

/* --------------------------------------------- */
/* CKEditor toolbar + content area (Dark Mode)   */
/* --------------------------------------------- */

.dark-mode .cke_button_icon {
    filter: invert(1) brightness(1.2);
}

.dark-mode .cke_chrome {
    border-color: #444;
}

.dark-mode .cke_top,
.dark-mode .cke_bottom {
    background-color: #262626 !important;
}

.dark-mode .cke_button,
.dark-mode .cke_combo_button {
    background-color: #262626;
    border-color: #444;
}

.dark-mode .cke_button:hover,
.dark-mode .cke_button:focus,
.dark-mode .cke_combo_button:hover {
    background-color: #333;
}

.dark-mode .cke_button_label,
.dark-mode .cke_combo_text,
.dark-mode .cke_combo_open {
    color: #eeeeee;
}

.dark-mode .cke_combo_open span {
    filter: invert(1) brightness(1.2);
}

/* Source mode */
.dark-mode .cke_contents {
    background-color: #121212;
}

.dark-mode textarea.cke_source,
.dark-mode pre.cke_source {
    background-color: #121212;
    color: #e9ecef;
    border-color: #444;
}

.bi-question-circle {
    cursor: help;
}

/* --------------------------------------------- */
/* CKEditor Dialogs – FINAL CLEAN VERSION        */
/* --------------------------------------------- */

/* Dark overlay behind dialog */
.dark-mode .cke_dialog_background_cover {
    background: #000;
    opacity: 0.55;
}

/* Dialog shell */
.dark-mode .cke_dialog {
    background-color: #2b2b2b !important;
    color: #f1f1f1;
    border: 1px solid #444;
}

.dark-mode .cke_dialog_title {
    background-color: #333 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #444;
}

.dark-mode .cke_dialog_contents {
    background-color: #2b2b2b;
}

.dark-mode .cke_dialog_footer {
    background-color: #262626;
    border-top: 1px solid #444;
}

/* Inputs (#e9ecef fields, your chosen behavior) */
.dark-mode .cke_dialog_ui_input_text,
.dark-mode .cke_dialog_ui_input_select,
.dark-mode .cke_dialog_ui_input_textarea {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #555 !important;
}

/* Dropdown select + options */
.dark-mode .cke_dialog_ui_input_select select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #666;
}

.dark-mode .cke_dialog_ui_input_select option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Buttons */
.dark-mode a.cke_dialog_ui_button {
    background-color: #333 !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

.dark-mode a.cke_dialog_ui_button:hover {
    background-color: #444 !important;
}

/* Optional: OK button highlight */
.dark-mode a.cke_dialog_ui_button_ok {
    background-color: #198754 !important;
    border-color: #157347 !important;
}

.dark-mode a.cke_dialog_ui_button_ok:hover {
    background-color: #157347 !important;
}

/* Labels / helper text */
.dark-mode .cke_dialog_ui_labeled_label,
.dark-mode .cke_dialog .cke_dialog_ui_hbox_child label,
.dark-mode .cke_dialog_ui_checkbox label,
.dark-mode .cke_dialog_ui_radio label,
.dark-mode .cke_dialog_ui_labeled_content {
    color: #f1f1f1 !important;
}

/* Required field asterisk */
.dark-mode .cke_dialog_ui_labeled_label span {
    color: #ff6666 !important;
}

/* Helper HTML inside dialogs (e.g., "No anchors available") */
.dark-mode .cke_dialog .cke_dialog_ui_html,
.dark-mode .cke_dialog .cke_dialog_ui_html * {
    color: #e9ecef !important;
}

.bi-x-lg {
    cursor: pointer;
    transition: all 0.2s ease;
}

.bi-x-lg:hover {
    transform: scale(0.9);
}