@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ==============================
   Dipharma – Custom Styles
   Brand colors:
     Blue  : #00AEEF
     Dark  : #231F20
     White : #FFFFFF
   ============================== */

:root {
    --dp-blue:    #00AEEF;
    --dp-dark:    #231F20;
    --dp-light:   #F4F9FD;
    --dp-gray:    #6c757d;
    --dp-blue-dk: #0090C8;
    --dp-font-family-base: 'Montserrat', 'Segoe UI', sans-serif;
    --dp-font-family-list: 'Source Sans 3', 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
html {
    scrollbar-gutter: stable;
}

/* Bootstrap adds scrollbar compensation on modal open.
   The page already reserves gutter space globally, so that compensation
   creates a phantom gap and shifts the layout left. */
body.modal-open {
    padding-right: 0 !important;
}

body.modal-open .sticky-top,
body.modal-open .fixed-top,
body.modal-open .fixed-bottom {
    padding-right: 0 !important;
}

/* Bootstrap's .modal overlay has overflow-y:auto, which renders a phantom
   scrollbar track on Windows even when the content doesn't need scrolling.
   Hide the track; inner .modal-body scrolling is unaffected. */
.modal {
    scrollbar-width: none;      /* Firefox */
}
.modal::-webkit-scrollbar {
    display: none;              /* Chrome / Safari / Edge */
}

body {
    font-family: var(--dp-font-family-base);
    color: var(--dp-dark);
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.dp-tabular-nums {
    font-family: "Roboto Mono", "SFMono-Regular", "Liberation Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ---------- Shared Buttons ---------- */
.btn-dp-link {
    background: none; border: none; padding: 0;
    color: var(--dp-blue-dk); text-decoration: none;
    font-weight: 600; font-size: .88rem;
    cursor: pointer; line-height: inherit;
}
.btn-dp-link:hover,
.btn-dp-link:focus { text-decoration: underline; color: var(--dp-blue-dk); outline: none; }

.btn-dp-primary,
.btn-dp-save,
.btn-new-record,
.master_records_blue_button {
    --bs-btn-border-color: var(--dp-blue);
    --bs-btn-hover-border-color: var(--dp-blue-dk);
    --bs-btn-active-border-color: var(--dp-blue-dk);
    --bs-btn-active-bg: var(--dp-blue-dk);
    --bs-btn-focus-shadow-rgb: 0, 174, 239;
    background-color: var(--dp-blue);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    border: 1px solid var(--dp-blue);
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-dp-primary:hover,
.btn-dp-save:hover,
.btn-new-record:hover,
.master_records_blue_button:hover,
.btn.btn-dp-primary:hover,
.btn.btn-dp-save:hover,
.btn.master_records_blue_button:hover,
.btn.btn-new-record:hover {
    background-color: var(--dp-blue-dk);
    border-color: var(--dp-blue-dk);
    color: #fff;
}

.btn.btn-dp-primary:focus,
.btn.btn-dp-primary:focus-visible,
.btn.btn-dp-primary:active,
.btn.btn-dp-save:focus,
.btn.btn-dp-save:focus-visible,
.btn.btn-dp-save:active,
.btn.btn-new-record:focus,
.btn.btn-new-record:focus-visible,
.btn.btn-new-record:active,
.btn.master_records_blue_button:focus,
.btn.master_records_blue_button:focus-visible,
.btn.master_records_blue_button:active,
.btn-dp-primary:focus,
.btn-dp-primary:focus-visible,
.btn-dp-primary:active,
.btn-dp-save:focus,
.btn-dp-save:focus-visible,
.btn-dp-save:active,
.btn-new-record:focus,
.btn-new-record:focus-visible,
.btn-new-record:active,
.master_records_blue_button:focus,
.master_records_blue_button:focus-visible,
.master_records_blue_button:active,
.btn-check:checked + .btn.btn-dp-primary,
.btn-check:checked + .btn.btn-dp-save,
.btn-check:checked + .btn.btn-new-record,
.btn-check:checked + .btn.master_records_blue_button {
    background-color: #fff;
    border-color: var(--dp-dark);
    color: var(--dp-dark);
}

#modalSaveBtn:disabled {
    background: #e2e8f0;
    border-color: #e2e8f0;
    color: #94a3b8;
    opacity: 1;
    cursor: not-allowed;
}

.btn-new-record {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--dp-blue);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn-new-record:hover,
.btn.btn-new-record:hover {
    background-color: var(--dp-blue-dk);
    border-color: var(--dp-blue-dk);
    color: #fff;
}

.btn-new-record:focus,
.btn-new-record:focus-visible,
.btn-new-record:active,
.btn.btn-new-record:focus,
.btn.btn-new-record:focus-visible,
.btn.btn-new-record:active {
    background-color: #fff;
    border-color: var(--dp-dark);
    color: var(--dp-dark);
}

.btn-dp-secondary,
.btn-dp-cancel,
.btn-toolbar-secondary,
.master_records_white_bar_button {
    background-color: #fff;
    color: var(--dp-dark);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    border: 1px solid #ced4da;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn-toolbar-secondary,
.master_records_white_bar_button {
    font-weight: 700;
}

.btn-dp-secondary:hover,
.btn-dp-secondary:focus,
.btn-dp-secondary:active,
.btn-dp-secondary:focus-visible,
.btn-dp-cancel:hover,
.btn-dp-cancel:focus,
.btn-dp-cancel:active,
.btn-dp-cancel:focus-visible,
.btn-toolbar-secondary:hover,
.btn-toolbar-secondary:focus,
.btn-toolbar-secondary:active,
.btn-toolbar-secondary:focus-visible,
.master_records_white_bar_button:hover,
.master_records_white_bar_button:focus,
.master_records_white_bar_button:active,
.master_records_white_bar_button:focus-visible {
    background-color: var(--dp-light);
    border-color: var(--dp-blue);
    color: var(--dp-blue);
}

.master_records_white_button {
    background-color: #fff;
    color: var(--dp-dark);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.master_records_white_button:hover,
.master_records_white_button:focus {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: #fff;
    color: var(--dp-blue);
}

.btn-dp-delete {
    background-color: #fff;
    color: #9b2020;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    border: 1px solid #f5c6c6;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-dp-delete:hover,
.btn-dp-delete:focus {
    background-color: #fde8e8;
    border-color: #9b2020;
    color: #9b2020;
}

.btn-row-action {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    line-height: 1.4;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn.btn-view,
.btn.btn-edit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 0.875rem !important;
}

.btn.btn-view > i,
.btn.btn-edit > i {
    font-size: 0.875rem;
    line-height: 1;
    display: block;
}

.btn.btn-view {
    background-color: var(--dp-blue);
    color: #fff;
    border-color: var(--dp-blue);
}

.btn.btn-view:hover,
.btn.btn-view:focus,
.btn.btn-view:active {
    background-color: var(--dp-blue-dk);
    border-color: var(--dp-blue-dk);
    color: #fff;
}

.btn.btn-edit {
    background-color: #fff;
    color: var(--dp-dark);
    border-color: #ced4da;
}

.btn.btn-edit:hover,
.btn.btn-edit:focus,
.btn.btn-edit:active {
    background-color: var(--dp-light);
    border-color: var(--dp-blue);
    color: var(--dp-blue);
}

.page-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dp-dark);
    border-radius: 4px !important;
    margin: 0 2px;
}

.page-item.active .page-link {
    background-color: var(--dp-blue);
    border-color: var(--dp-blue);
    color: #fff;
}

.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.page-item.active .page-link:active {
    background-color: var(--dp-blue);
    border-color: var(--dp-blue);
    color: #fff;
}

.page-link:hover {
    color: var(--dp-blue);
}

.page-link:active {
    background-color: var(--dp-light);
    border-color: var(--dp-blue);
    color: var(--dp-blue);
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 174, 239, 0.18);
}

/* ---------- Shared Confirmation Modals ---------- */
.modal-header-danger {
    background: linear-gradient(135deg, #9b2020 0%, #c0392b 100%);
    color: #fff;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.modal-header-warning {
    background: linear-gradient(135deg, #b06000 0%, #e67e22 100%);
    color: #fff;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.modal-header-primary {
    background: linear-gradient(135deg, var(--dp-blue) 0%, var(--dp-blue-dk) 100%);
    color: #fff;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}

/* ---------- Form field utilities (shared across modals and pages) ---------- */
.form-label-dp {
    font-size: .78rem;
    font-weight: 700;
    color: var(--dp-dark);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
    display: block;
}

.form-control-dp,
.form-select-dp {
    font-family: var(--dp-font-family-base);
    font-size: .9rem;
    border: 1.5px solid #d0d5dd;
    border-radius: 6px;
    padding: .625rem .875rem;
    color: var(--dp-dark);
    background-color: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.form-control-dp:focus,
.form-select-dp:focus {
    border-color: var(--dp-blue);
    box-shadow: 0 0 0 .2rem rgba(0, 174, 239, .16);
    outline: none;
}

.form-control-dp::placeholder {
    color: #adb5bd;
    font-weight: 400;
}

/* ---------- List Typography ---------- */
.list-section .table-card tbody td {
    font-family: var(--dp-font-family-list);
}

.list-section .table-card tbody td [class^="badge"],
.list-section .table-card tbody td [class*=" badge"],
.list-section .table-card tbody td .cl-avatar {
    font-family: var(--dp-font-family-base);
}

/* ---------- Navbar ---------- */
.navbar {
    background-color: #ffffff;
    border-bottom: 3px solid var(--dp-blue);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 174, 239, 0.12);
}

.navbar--staging {
    background-color: #ffe066 !important;
}

.navbar--impersonating {
    background-color: #ffd5d5 !important;
}

.impersonation-banner {
    font-size: 0.75rem;
    font-weight: 600;
    color: #7a1010;
    white-space: nowrap;
    margin-top: 0.1rem;
}

.impersonation-banner .btn-impersonate-stop {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    line-height: 1.4;
    border-radius: 3px;
    background-color: #c0392b;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-left: 0.4rem;
    transition: background-color 0.15s;
}

.impersonation-banner .btn-impersonate-stop:hover {
    background-color: #922b21;
}

.btn-impersonate {
    background-color: #fff;
    color: #c0392b;
    border-color: #f1948a;
}

.btn-impersonate:hover,
.btn-impersonate:focus,
.btn-impersonate:active {
    background-color: #fdf2f8;
    border-color: #c0392b;
    color: #922b21;
}

.navbar-brand img {
    height: 42px;
}

.navbar-brand span {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--dp-dark);
    letter-spacing: -0.5px;
}

.navbar-brand span em {
    font-style: normal;
    color: var(--dp-blue);
}

.navbar-nav .nav-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dp-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--dp-blue);
}

.nav-task-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    margin-left: 0.04rem;
    padding: 0 0.45rem;
    border-radius: 0.45rem;
    background: #0090C8;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 144, 200, 0.35);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
}
.nav-overdue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    margin-left: 0.3rem;
    margin-right: 0.04rem;
    padding: 0 0.45rem;
    border-radius: 0.45rem;
    background: #c0392b;
    color: #fff;
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.45);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
    animation: nav-overdue-pulse 1.8s ease-in-out infinite;
}
@keyframes nav-overdue-pulse {
    0%,100% { box-shadow: 0 2px 8px rgba(192,57,43,0.45); transform: scale(1); }
    50%      { box-shadow: 0 2px 14px rgba(192,57,43,0.75); transform: scale(1.12); }
}

.navbar-nav .nav-link-disegno {
    position: relative;
    padding-bottom: 0.35rem;
}

.navbar-nav .nav-link-disegno::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.12rem;
    height: 2px;
    background: var(--dp-blue);
    border-radius: 999px;
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.navbar-nav .nav-link-disegno img {
    position: relative;
    top: -7px;
    vertical-align: middle;
    transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.navbar-nav .nav-link-disegno:hover::after,
.navbar-nav .nav-link-disegno.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.navbar-nav .nav-link-disegno:hover img,
.navbar-nav .nav-link-disegno.active img {
    transform: translateY(-1px);
    filter: brightness(1.04) saturate(1.08);
    opacity: 0.96;
}

.navbar-nav .nav-item .btn-dp {
    background-color: var(--dp-blue);
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.45rem 1.2rem;
    transition: background-color 0.2s ease;
}

.navbar-nav .nav-item .btn-dp:hover {
    background-color: var(--dp-blue-dk);
    color: #fff;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--dp-blue-dk);
    color: #fff;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 144, 200, 0.18);
    color: var(--dp-blue-dk);
}

/* Toggler */
.navbar-toggler {
    border-color: var(--dp-blue);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2300AEEF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Hero Section ---------- */
.hero {
    background: linear-gradient(135deg, var(--dp-blue) 0%, var(--dp-blue-dk) 100%);
    color: #ffffff;
    padding: 50px 0 40px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
}

.hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.hero-greeting-line {
    display: block;
    width: fit-content;
}

.hero-welcome-line {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.42em;
    margin-top: -0.16em;
    transform: translateX(var(--hero-welcome-shift, 0px));
}

.hero-welcome-copy {
    font-size: 0.9em;
    line-height: 1;
}

.hero-dicore-logo-wrap {
    position: relative;
    display: inline-block;
    flex: 0 0 4.63em;
    width: 4.63em;
    height: 1em;
    line-height: 1;
    overflow: visible;
}

.hero-dicore-logo {
    position: absolute;
    left: 0;
    bottom: 0.11em;
    display: block;
    width: 4.63em;
    height: 2.16em;
    max-width: min(100%, 520px);
}

.hero p.lead {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.92;
    max-width: 720px;
}

.hero .btn-hero-primary {
    background-color: #ffffff;
    color: var(--dp-blue);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    border: none;
    transition: background-color 0.2s, color 0.2s;
}

.hero .btn-hero-primary:hover {
    background-color: var(--dp-dark);
    color: #fff;
}

.hero .btn-hero-outline {
    background-color: transparent;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.7);
    transition: background-color 0.2s, border-color 0.2s;
}

.hero .btn-hero-outline:hover {
    background-color: rgba(255,255,255,0.12);
    border-color: #fff;
}

/* ---------- Features / Cards ---------- */
.section-features {
    padding: 40px 0 80px;
    background-color: var(--dp-light);
}

.section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dp-dark);
    margin-bottom: 0.5rem;
}

.section-subtitle {
    color: var(--dp-gray);
    font-size: 1.05rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 2rem 1.75rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0,0,0,.13);
}

.feature-icon {
    width: 64px;
    height: 64px;
    background-color: var(--dp-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.feature-icon svg {
    color: #ffffff;
    width: 30px;
    height: 30px;
}

.feature-card h5 {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dp-dark);
    margin-bottom: 0.75rem;
}

.feature-card p {
    color: var(--dp-gray);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.feature-card .btn-outline-primary {
    color: var(--dp-blue);
    border-color: var(--dp-blue);
}

.feature-card .btn-outline-primary:hover {
    background-color: var(--dp-blue);
    border-color: var(--dp-blue);
    color: #ffffff;
}

.dp-video-card video {
    width: 100%;
    max-height: 380px;
    background-color: #000;
    border-radius: 0.75rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
    object-fit: contain;
}

.dp-video-controls .progress {
    height: 0.65rem;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.15);
}

.dp-video-controls .progress-bar {
    transition: width 0.15s ease;
    background-color: var(--dp-blue);
}

.dp-video-controls button {
    min-width: 4.2rem;
}

#videoPlayPause {
    width: 9rem;
}

/* ---------- Media Player (dp_media_player module) ---------- */

/* Relative wrapper so the overlay button can be absolutely positioned inside */
.dp-media-wrapper {
    position: relative;
    display: block;
}

/* Video element */
.dp-media-element {
    width: 100%;
    max-height: 380px;
    background-color: #000;
    border-radius: 0.75rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
    object-fit: contain;
    display: block;
}

/* Cover-art image shown above audio controls */
.dp-media-poster {
    width: 100%;
    border-radius: 0.75rem;
    display: block;
}

/* Circular play-arrow overlay — centred over the poster/video surface.
   Hidden via JS once playback starts; restored on reset. */
.dp-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    background: rgba(0, 0, 0, 0.50);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.dp-play-overlay:hover,
.dp-play-overlay:focus-visible {
    background: rgba(0, 174, 239, 0.85);
    transform: translate(-50%, -50%) scale(1.08);
    outline: none;
}

.dp-play-overlay .bi {
    font-size: 2rem;
    color: #fff;
    margin-left: 4px; /* optical centering — the play triangle sits slightly left of visual centre */
    line-height: 1;
}

/* Controls bar */
.dp-media-controls .progress {
    height: 0.65rem;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.08);
}

.dp-media-controls .progress-bar {
    transition: width 0.15s ease;
    background-color: var(--dp-blue);
}

.dp-media-controls button {
    min-width: 4.2rem;
}

.dp-media-controls .dp-ctrl-play {
    min-width: 9rem;
}

.dp-media-player:fullscreen,
.dp-media-player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none !important;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}

.dp-media-player:fullscreen .dp-media-element,
.dp-media-player:-webkit-full-screen .dp-media-element {
    max-height: calc(100vh - 96px);
    box-shadow: none;
}

.dp-media-player:fullscreen .dp-media-controls,
.dp-media-player:-webkit-full-screen .dp-media-controls {
    color: #fff;
}

.dp-media-player:fullscreen .dp-media-controls .text-muted,
.dp-media-player:-webkit-full-screen .dp-media-controls .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer {
    background-color: var(--dp-dark);
    color: rgba(255, 255, 255, 0.70);
    padding: 1.5rem 0;
    margin-top: auto;
}

footer a {
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
}

footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-brand {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
}

.footer-brand span {
    color: var(--dp-blue);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 767.98px) {
    .hero h1 { font-size: 1.6rem; }
    .hero { padding: 35px 0 30px; }
}

/* ================================================================
   Checklist component
   ================================================================ */

.cl-section {
    margin-top: 1rem;
}

#modalChecklistArea .cl-section {
    margin-top: 0;
}

/* When a checklist card is present, let it span the full width of the flex row */
#modalChecklistArea:has(.cl-card) {
    width: 100%;
}


/* Card wrapper */
.cl-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    container-type: inline-size;
}

/* ── Collapsed header ── */
.cl-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none;
    background: #f8fbfd;
    transition: background 0.15s;
}
.cl-header:hover { background: #edf4fb; }

.cl-hdr-icon { color: var(--dp-blue); font-size: 1rem; flex-shrink: 0; }

.cl-hdr-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.cl-hdr-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cl-progress {
    width: 90px;
    height: 6px;
    border-radius: 3px;
    background: #dee2e6;
    overflow: hidden;
    flex-shrink: 0;
}

.cl-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cl-progress-text {
    font-size: 0.72rem;
    color: var(--dp-gray);
    white-space: nowrap;
}

.cl-chevron {
    font-size: 0.72rem;
    color: var(--dp-gray);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.cl-chevron.cl-rotated { transform: rotate(-180deg); }

/* ── Expanded body ── */
.cl-body {
    padding: 0.75rem 0.9rem 0.9rem;
    border-top: 1px solid #e9ecef;
}

/* Header action buttons (Edit / Delete) — shown only when expanded, hidden in edit mode */
.cl-hdr-actions {
    display: none;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.cl-hdr-actions .btn {
    display: inline-flex;
    align-items: center;
}
.cl-card.cl-expanded .cl-hdr-actions { display: flex; }
.cl-card.cl-editing  .cl-hdr-actions { display: none; }

/* Edit bar (Drag to reorder + Done) */
.cl-edit-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* Medium card: keep room for the title by collapsing action buttons to icons first. */
@container (max-width: 620px) {
    .cl-btn-label { display: none; }
}

/* Narrow card: then hide the progress block as space gets even tighter. */
@container (max-width: 420px) {
    .cl-hdr-progress { display: none; }
}

/* ── Items list ── */
.cl-items { margin: 0; padding: 0; }

.cl-item {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.cl-item:last-child { border-bottom: none; }

.cl-item-check {
    margin-top: 3px;
    cursor: pointer;
    flex-shrink: 0;
}

.cl-drag-handle {
    color: #adb5bd;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: grab;
}
.cl-drag-handle:active { cursor: grabbing; }

.cl-sortable-ghost { opacity: 0.4; background: #e9f6ff; }

.cl-item-body { min-width: 0; }

.cl-item-text {
    font-size: 0.875rem;
    color: var(--dp-dark);
    word-break: break-word;
    cursor: pointer;
}

/* Meta area (due date + avatar + dots) */
.cl-item-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.25rem;
}

.cl-item-due {
    font-size: 0.72rem;
    color: var(--dp-gray);
    white-space: nowrap;
}
.cl-item-due .bi { font-size: 0.68rem; }
.cl-item-due--overdue { color: #9b2020; font-weight: 700; }
.cl-item-due--soon    { color: #856404; font-weight: 600; }

/* User avatars */
.cl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 22px;
    border-radius: 11px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    cursor: default;
    letter-spacing: 0.03em;
}
.cl-color-1 { background: #5c6bc0; }
.cl-color-2 { background: #26a69a; }
.cl-color-3 { background: #ef5350; }
.cl-color-4 { background: #ff7043; }
.cl-color-5 { background: #ab47bc; }
.cl-color-6 { background: #42a5f5; }
.cl-color-7 { background: #66bb6a; }
.cl-color-8 { background: #8d6e63; }

/* Dots button (edit mode) */
.cl-item-dots {
    color: #adb5bd;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
}
.cl-item:hover .cl-item-dots { opacity: 1; }

/* ── Add-item form ── */
.cl-add-form .cl-af-text { resize: vertical; min-height: 58px; }

/* ── "Add checklist" open button ── */
.cl-open-create { font-size: 0.8rem; }

/* ── Workflow stepper connector ── */
.workflow-step-connector {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 .35rem;
    color: #dbe5ee;
    font-size: .85rem;
}
.workflow-step-connector.active {
    color: #0a6640;
    font-size: 1.25rem;
}

/* ================================================================
   Hero Favorites Panel
   ================================================================ */
#hero-fav-col {
    padding-left: 1.5rem;
}

.fav-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}

.fav-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
    max-height: calc(3 * (52px + 8px) - 8px);
    overflow: hidden;
}

.fav-mini-card {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    padding: 6px 10px 6px 7px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    width: 140px;
    min-height: 52px;
    overflow: hidden;
    transition: background 0.18s, border-color 0.18s;
    box-sizing: border-box;
    flex-shrink: 0;
}

.fav-mini-card:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    text-decoration: none;
}

.fav-mini-icon {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fav-mini-icon i {
    font-size: 0.8rem;
    color: #ffffff;
}

.fav-mini-label {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.25;
    flex: 1;
}

.fav-dots {
    display: flex;
    gap: 7px;
    justify-content: flex-end;
}

.fav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
}

.fav-dot.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.25);
}

.fav-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.6);
}

/* ── Favorites: Reorder Mode ──────────────────────────────────── */
.fav-panel.reorder-mode {
    align-items: flex-start;
}

.fav-grid.reorder-mode {
    flex-direction: row;
    max-height: none;
    overflow: visible;
}

.fav-reorder-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    padding: 5px 10px 5px 6px;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, opacity .15s;
}

.fav-reorder-card:active { cursor: grabbing; }

.fav-reorder-card.dragging {
    opacity: .3;
}

.fav-reorder-card.drag-over {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.8);
}

.fav-reorder-handle {
    opacity: .45;
    font-size: .85rem;
    flex-shrink: 0;
}

.fav-reorder-done-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 6px;
    color: var(--dp-blue-dk);
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 14px;
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .15s, color .15s;
}

.fav-reorder-done-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    color: var(--dp-dark);
}

/* ================================================================
   Custom Context Menu
   ================================================================ */
.dp-ctx-menu {
    position: fixed;
    z-index: 9999;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
    padding: 4px 0;
    min-width: 195px;
    display: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    user-select: none;
}

.dp-ctx-menu.dp-ctx-open {
    display: block;
}

.dp-ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #231F20;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.14s;
    font-family: inherit;
}

.dp-ctx-menu-item:hover {
    background: #f4f9fd;
    color: var(--dp-blue);
}

.dp-ctx-menu-item i {
    font-size: 1rem;
    color: var(--dp-blue);
    flex-shrink: 0;
}

.dp-ctx-menu-item.dp-ctx-item-disabled,
.dp-ctx-menu-item.dp-ctx-item-disabled:hover {
    opacity: 0.42;
    cursor: default;
    background: none;
    color: #231F20;
}

/* ============================================================
   WYSIWYG HTML Editor (_wysiwyg_html_editor.php)
   Used by user-manual-edit.php and any other feature that
   embeds dp_wysiwyg_html_editor().
   ============================================================ */

/* ── Editor shell ── */
.editor-shell { background:#fff; border:1px solid #e5e7eb; border-radius:8px; }
.editor-toolbar { display:flex; flex-wrap:wrap; gap:.35rem; padding:.65rem .75rem; border-bottom:1px solid #e5e7eb; background:#fafafa; align-items:center; border-radius:7px 7px 0 0; position:sticky; top:var(--navbar-h,64px); z-index:1020; transition:box-shadow .15s; }
.editor-toolbar.is-stuck { box-shadow:0 2px 8px rgba(0,0,0,.10); }
.editor-toolbar button { height:32px; width:32px; border:0; background:#fff; border-radius:6px; color:#4b5563; display:flex; align-items:center; justify-content:center; font-size:.95rem; cursor:pointer; }
.editor-toolbar button:hover { background:#f3f4f6; color:#111827; }
.editor-toolbar button.active { background:#e0f2fe; color:#0369a1; }
.editor-toolbar select { height:32px; font-size:.82rem; border:1px solid #d1d5db; border-radius:6px; padding:0 .4rem; background:#fff; color:#374151; cursor:pointer; }
.editor-toolbar select:focus { outline:none; border-color:#29a8e0; }
.editor-separator { width:1px; height:24px; background:#e5e7eb; margin:0 .15rem; flex-shrink:0; }
.editor-toolbar .toolbar-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#9ca3af; padding:0 .25rem; }
.editor-color-btn { position:relative; flex-direction:column; gap:0; padding:3px 4px 10px; }
.editor-color-label { font-size:.78rem; font-weight:700; line-height:1; flex-shrink:0; }
.editor-color-bar { display:block; width:14px; height:3px; border-radius:1px; flex-shrink:0; margin-top:2px; }
.editor-color-arrow { position:absolute; bottom:2px; right:2px; font-size:.6rem; line-height:1; color:#9ca3af; }
.editor-color-palette { position:fixed; z-index:1055; background:#fff; border:1px solid #d1d5db; border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.15); padding:.45rem; display:none; }
.editor-color-grid { display:grid; grid-template-columns:repeat(5, 24px); gap:3px; }
.editor-color-swatch { width:24px; height:24px; border:1px solid rgba(0,0,0,.12); border-radius:3px; cursor:pointer; padding:0; }
.editor-color-swatch:hover { outline:2px solid #29a8e0; outline-offset:2px; }
.editor-color-nocolor { display:block; width:100%; margin-top:.4rem; padding:.2rem .5rem; background:#fff; border:1px solid #e5e7eb; border-radius:5px; font-size:.8rem; color:#374151; cursor:pointer; text-align:center; }
.editor-color-nocolor:hover { background:#f3f4f6; }
.editor-color-auto-row { display:flex; align-items:center; gap:.45rem; padding:.15rem .15rem .3rem; border-radius:5px; cursor:pointer; }
.editor-color-auto-row:hover { background:#f3f4f6; }
.editor-color-auto-row span:last-child { font-size:.78rem; color:#374151; }
.editor-color-auto-icon { display:inline-block; width:22px; height:22px; background:#000; border:1px solid rgba(0,0,0,.2); border-radius:2px; flex-shrink:0; }
.editor-color-section-sep { border-top:1px solid #e5e7eb; margin:.3rem 0; }
.editor-color-section-label { font-size:.75rem; font-weight:700; color:#374151; margin-bottom:.3rem; }
.editor-align-btn { position:relative; }
.editor-align-menu { position:fixed; z-index:1055; background:#fff; border:1px solid #d1d5db; border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.15); padding:.25rem; display:none; min-width:140px; }
.editor-align-item { display:flex; align-items:center; gap:.5rem; padding:.3rem .6rem; border-radius:5px; cursor:pointer; font-size:.85rem; color:#374151; border:none; background:transparent; width:100%; text-align:left; }
.editor-align-item:hover { background:#f3f4f6; }
.editor-align-item.active { color:#0369a1; background:#e0f2fe; }
.editor-emoji-grid { display:grid; grid-template-columns:repeat(12,28px); gap:2px; margin-bottom:.15rem; }
.editor-emoji-swatch { width:28px; height:28px; font-size:1.1rem; border:none; background:transparent; border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.editor-emoji-swatch:hover { background:#f3f4f6; }

/* ── Content editor ── */
.editor-content { padding:1.5rem 1.75rem; outline:0; font-family:'Montserrat', sans-serif; font-size:.9rem; line-height:1.7; color:#444; }
.editor-content:empty:before { content:attr(data-placeholder); color:#9ca3af; pointer-events:none; }
.editor-content p { margin-bottom:1rem; }
.editor-content h1 { font-size:1.25rem; font-weight:700; margin-top:2rem; margin-bottom:.75rem; color:#07111f; line-height:1.3; }
.editor-content h2 { font-size:1.15rem; font-style:italic; font-weight:700; margin-top:1.85rem; margin-bottom:.7rem; color:#07111f; line-height:1.35; }
.editor-content h3 { font-size:1rem; font-weight:700; margin-top:1.65rem; margin-bottom:.65rem; color:#07111f; }
.editor-content h4 { font-size:.9rem; font-weight:700; margin-top:1.4rem; margin-bottom:.55rem; color:#374151; }
.editor-content blockquote, .disegno-article-body blockquote { font-style:italic; text-align:center; margin:1rem 2rem; color:#555; }
.editor-content strong, .editor-content b { font-weight:700; }
.editor-content a { color:#29a8e0; text-decoration:none; font-weight:600; }
.editor-content ul, .editor-content ol { margin-bottom:1rem; padding-left:1.6rem; }
.editor-content li { margin-bottom:.35rem; }

/* ── Content blocks ── */
.editor-content .manual-tip { background:#e6f6fd; border-left:4px solid #29a8e0; border-radius:0 6px 6px 0; padding:.75rem 1rem; margin:1rem 0; font-size:.875rem; color:#07111f; }
.editor-content .manual-tip i { color:#29a8e0; }
.editor-content .manual-steps { list-style:none; padding:0; margin:0 0 1rem; counter-reset:step; }
.editor-content .manual-steps li { counter-increment:step; position:relative; padding-left:2.15rem; margin-bottom:.6rem; }
.editor-content .manual-steps li::before { content:counter(step); background:#29a8e0; color:#fff; font-size:.75rem; font-weight:700; border-radius:50%; width:1.4rem; height:1.4rem; display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:.15rem; }
.editor-content .manual-badge { display:inline-block; background:#eaf4fb; border:1px solid #c7dff0; border-radius:4px; font-size:.75rem; font-weight:600; padding:.1rem .5rem; color:#0369a1; }
.editor-content .manual-screenshot { background:#f0f6fc; border:1px dashed #b0cfe8; border-radius:8px; height:90px; display:flex; align-items:center; justify-content:center; color:#90b8d4; font-size:.8rem; font-weight:600; margin:1rem 0; cursor:pointer; transition:background .15s, border-color .15s; }
.editor-content .manual-screenshot:hover { background:#d9effa; border-color:#7ec8e8; }
.editor-content .manual-screenshot:hover::after { content:' — click to upload image'; font-size:.75rem; color:#0369a1; }
.editor-content .manual-img { max-width:100%; width:auto; height:auto; border-radius:6px; margin:1rem 0; display:inline-block; vertical-align:top; box-shadow:0 2px 8px rgba(0,0,0,.08); border:1px solid #e5eef6; }

/* ── Editor context menu ── */
.dp-ctx-menu { position:fixed; z-index:9999; background:#fff; border:1px solid #d1d5db; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.13); min-width:170px; padding:4px 0; font-family:'Montserrat',sans-serif; font-size:.82rem; }
.dp-ctx-item { display:flex; align-items:center; gap:.55rem; padding:.38rem .9rem; cursor:pointer; color:#374151; white-space:nowrap; user-select:none; }
.dp-ctx-item i { font-size:.88rem; width:1rem; text-align:center; flex-shrink:0; }
.dp-ctx-item:hover { background:#f3f4f6; color:#111827; }
.dp-ctx-item.danger { color:#dc2626; }
.dp-ctx-item.danger:hover { background:#fef2f2; }
.dp-ctx-divider { border:none; border-top:1px solid #e5e7eb; margin:3px 0; }

/* ── Image hover tip ── */
.img-hover-tip { position:fixed; z-index:9997; display:flex; flex-direction:column; align-items:center; background:#111; color:#fff; border-radius:6px; padding:.35rem .65rem; pointer-events:none; white-space:nowrap; font-family:'Montserrat',sans-serif; font-size:.75rem; line-height:1.4; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.img-hover-tip-line1 { font-weight:700; }
.img-hover-tip-line2 { opacity:.75; font-weight:400; }

/* ── Image resize overlay & handles ── */
.img-resize-overlay { position:absolute; pointer-events:none; z-index:9998; outline:2px solid #0369a1; outline-offset:-1px; box-sizing:border-box; }
.img-resize-handle { position:absolute; width:9px; height:9px; background:#fff; border:2px solid #0369a1; border-radius:2px; pointer-events:auto; box-sizing:border-box; }

@keyframes dp-spin { to { transform:rotate(360deg); } }

/* ── Notification bell ─────────────────────────────────────────────────────── */
.nav-notif-badge {
    position:absolute; top:2px; right:2px;
    min-width:1.1rem; height:1.1rem; padding:0 .3rem;
    border-radius:.55rem; background:#e53e3e; color:#fff;
    font-size:.7rem; font-weight:800; line-height:1.1rem;
    text-align:center; pointer-events:none;
}
.notif-dropdown { width:360px; box-shadow:0 8px 32px rgba(0,0,0,.16); border-radius:10px !important; }
.notif-item { display:block; padding:.55rem 1rem; border-bottom:1px solid #f0f0f0; color:var(--dp-dark); text-decoration:none; }
.notif-item:last-child { border-bottom:0; }
.notif-item:hover { background:#f8fafc; color:var(--dp-dark); }
.notif-unread { background:#f0f8ff; }
.notif-read { opacity:.72; }
.notif-msg { font-size:.83rem; white-space:normal; }
.notif-time { font-size:.74rem; margin-top:.1rem; }

/* ── Task modal collapsible sections ───────────────────────────────────────── */
.task-section-toggle {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    padding:.5rem .75rem; border:1px solid #e5edf4; border-radius:8px;
    background:#f8fbfd; font-size:.875rem; font-weight:600; color:var(--dp-dark);
    cursor:pointer; text-align:left;
}
.task-section-toggle:hover { background:#edf4fa; }
.task-section-toggle[aria-expanded="true"] { border-radius:8px 8px 0 0; }
.task-section-toggle-label { display:flex; align-items:center; }
.task-section-chevron { transition:transform .2s ease; font-size:.85rem; color:var(--dp-blue-dk); flex-shrink:0; }
.task-section-toggle[aria-expanded="true"] .task-section-chevron { transform:rotate(180deg); }
.task-section-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:1.2rem; height:1.2rem; padding:0 .35rem; border-radius:.6rem;
    background:var(--dp-blue); color:#fff; font-size:.7rem; font-weight:800;
    margin-left:.35rem; vertical-align:middle;
}
.task-section-body {
    padding:.75rem .5rem .5rem; border:1px solid #e5edf4;
    border-top:0; border-radius:0 0 8px 8px;
}

/* ── Task links ────────────────────────────────────────────────────────────── */
.task-link-row {
    display:flex; align-items:center; gap:.5rem;
    padding:.3rem 0; border-bottom:1px solid #f0f4f8; font-size:.875rem;
}
.task-link-row:last-child { border-bottom:0; }
.task-link-del {
    background:none; border:none; color:#DC2626; font-size:13px;
    padding:3px 7px; cursor:pointer; line-height:1;
    border-radius:4px; transition:background .12s, color .12s;
}
.task-link-del:hover { background:rgba(220,38,38,.15); color:#991B1B; }
.task-link-url { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Task comments ─────────────────────────────────────────────────────────── */
.task-comment-row {
    display:grid;
    grid-template-columns: 5rem auto 1fr;
    column-gap:.25rem;
    row-gap:.5rem;
    align-items:start;
    padding:.45rem 0;
    border-bottom:1px solid #f0f4f8;
}
.task-comment-row:last-child { border-bottom:0; }
.task-comment-dt {
    display:flex; flex-direction:column;
    font-size:.72rem; color:#6c757d; line-height:1.3;
    padding-top:.15rem; text-align:left;
}
.task-comment-date { white-space:nowrap; }
.task-comment-time { white-space:nowrap; }
.task-comment-text { font-size:.88rem; color:var(--dp-dark); white-space:pre-wrap; word-break:break-word; padding-top:.1rem; }

/* ── Emoji palette ─────────────────────────────────────────────────────────── */
#modalCommentEmojiPalette {
    position:absolute; bottom:100%; right:0; z-index:1060;
    display:none; grid-template-columns:repeat(6, 34px);
    gap:.2rem; padding:.4rem; background:#fff;
    border:1px solid #d1d5db; border-radius:8px;
    box-shadow:0 8px 24px rgba(15,23,42,.14);
}
#modalCommentEmojiPalette button {
    width:34px; height:34px; border:0; border-radius:5px;
    background:#fff; font-size:1.1rem; line-height:1; cursor:pointer;
}
#modalCommentEmojiPalette button:hover { background:#f3f4f6; }

/* ---------- Form switch — Dipharma blue ---------- */
.form-switch .form-check-input:checked {
    background-color: var(--dp-blue);
    border-color: var(--dp-blue);
}
.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 174, 239, 0.25);
    border-color: var(--dp-blue);
}


/* ---------- Tag pills ---------- */
.tag-pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .3em .85em;
    border-radius: 20px;
    color: #fff;
    white-space: nowrap;
    letter-spacing: .02em;
}
.tooltip.dp-tag-tooltip { --bs-tooltip-bg: rgba(17,24,39,.96); --bs-tooltip-opacity: 1; --bs-tooltip-max-width: 220px; }
.tooltip.dp-tag-tooltip .tooltip-inner { font-family: 'Montserrat','Segoe UI',sans-serif; font-size: .78rem; line-height: 1.45; text-align: left; padding: .5rem .7rem; }