/* ============================================================
   ALBS Agency — Roundcube Elastic Theme Modernisation
   Primary: #E95421 | Background: #1A2035
   ============================================================ */

/* --- CSS Variables ----------------------------------------- */
:root {
    --albs-primary: #E95421;
    --albs-primary-light: #FF7043;
    --albs-primary-dark: #C43E10;
    --albs-bg: #1A2035;
    --albs-bg-light: #222B45;
    --albs-bg-lighter: #2A3454;
    --albs-bg-card: #242E4A;
    --albs-text: #E0E6ED;
    --albs-text-muted: #8F9BB3;
    --albs-border: rgba(255, 255, 255, 0.08);
    --albs-border-light: rgba(255, 255, 255, 0.12);
    --albs-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    --albs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --albs-radius: 12px;
    --albs-radius-sm: 8px;
    --albs-radius-xs: 6px;
    --albs-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Global Base ------------------------------------------- */
body {
    background-color: var(--albs-bg) !important;
    color: var(--albs-text) !important;
}

a {
    color: var(--albs-primary) !important;
    transition: color var(--albs-transition);
}

a:hover {
    color: var(--albs-primary-light) !important;
}

/* Smooth transitions everywhere */
*, *::before, *::after {
    transition-property: background-color, border-color, box-shadow, color, opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

/* --- Scrollbars ------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--albs-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--albs-bg-lighter);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--albs-primary-dark);
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.task-login #layout-content {
    background: linear-gradient(145deg, var(--albs-bg) 0%, #10152A 100%) !important;
    min-height: 100vh;
}

.task-login #logo {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    top: 12vh !important;
    max-height: 80px !important;
}

#login-form {
    background: var(--albs-bg-card) !important;
    border: 1px solid var(--albs-border-light) !important;
    border-radius: var(--albs-radius) !important;
    padding: 2rem 1.75rem !important;
    box-shadow: var(--albs-shadow), 0 0 60px rgba(233, 84, 33, 0.06) !important;
    max-width: 380px !important;
    top: 14vh !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#login-form .form-control {
    background: var(--albs-bg) !important;
    border: 1px solid var(--albs-border-light) !important;
    border-radius: var(--albs-radius-xs) !important;
    color: var(--albs-text) !important;
    padding: 0.65rem 0.9rem !important;
    font-size: 0.92rem !important;
    height: auto !important;
}

#login-form .form-control:focus {
    border-color: var(--albs-primary) !important;
    box-shadow: 0 0 0 3px rgba(233, 84, 33, 0.15) !important;
    background: var(--albs-bg-light) !important;
    outline: none !important;
}

#login-form .form-control::placeholder {
    color: var(--albs-text-muted) !important;
    opacity: 0.7;
}

#login-form label {
    color: var(--albs-text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.35rem !important;
}

#login-form .row {
    margin-bottom: 0.4rem !important;
}

#login-form .custom-select {
    background-color: var(--albs-bg) !important;
    border: 1px solid var(--albs-border-light) !important;
    border-radius: var(--albs-radius-xs) !important;
    color: var(--albs-text) !important;
}

#login-form .input-group-text {
    background: var(--albs-bg) !important;
    border: 1px solid var(--albs-border-light) !important;
    color: var(--albs-text-muted) !important;
    border-radius: var(--albs-radius-xs) 0 0 var(--albs-radius-xs) !important;
}

/* Login submit button */
#rcmloginsubmit,
#login-form .btn-primary,
#login-form .formbuttons .button,
#login-form input[type="submit"] {
    background: linear-gradient(135deg, var(--albs-primary) 0%, var(--albs-primary-light) 100%) !important;
    border: none !important;
    border-radius: var(--albs-radius-xs) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.03em !important;
    padding: 0.7rem 1.5rem !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(233, 84, 33, 0.3) !important;
    width: 100%;
    margin-top: 0.5rem !important;
}

#rcmloginsubmit:hover,
#login-form .btn-primary:hover,
#login-form input[type="submit"]:hover {
    background: linear-gradient(135deg, var(--albs-primary-light) 0%, var(--albs-primary) 100%) !important;
    box-shadow: 0 6px 20px rgba(233, 84, 33, 0.4) !important;
    transform: translateY(-1px);
}

#login-footer {
    color: var(--albs-text-muted) !important;
    font-size: 0.8rem !important;
    margin-top: 1.5rem !important;
}

#login-footer > div {
    background: transparent !important;
    border-top: 1px solid var(--albs-border) !important;
    padding-top: 1rem !important;
}

#login-footer a,
.support-link {
    color: var(--albs-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#login-footer a:hover,
.support-link:hover {
    color: var(--albs-primary-light) !important;
    text-decoration: underline !important;
}

/* ============================================================
   TASK MENU (left sidebar navigation)
   ============================================================ */
#layout-menu {
    background: var(--albs-bg) !important;
    border-right: 1px solid var(--albs-border) !important;
}

#taskmenu {
    background: transparent !important;
}

#taskmenu a {
    color: var(--albs-text-muted) !important;
    border-radius: var(--albs-radius-sm) !important;
    margin: 2px 4px !important;
    transition: all var(--albs-transition) !important;
}

#taskmenu a:hover {
    color: #fff !important;
    background: var(--albs-bg-lighter) !important;
}

#taskmenu a.selected {
    color: #fff !important;
    background: var(--albs-bg-lighter) !important;
    position: relative;
}

/* Active indicator bar */
#taskmenu a.selected::after {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 3px;
    background: var(--albs-primary);
    border-radius: 0 3px 3px 0;
}

#taskmenu .action-buttons a {
    color: var(--albs-primary) !important;
}

#taskmenu .action-buttons a:hover {
    background: rgba(233, 84, 33, 0.12) !important;
    color: var(--albs-primary-light) !important;
}

#taskmenu a.logout {
    color: #ff5552 !important;
}

#taskmenu a.logout:hover {
    background: rgba(255, 85, 82, 0.12) !important;
}

/* Special buttons group (bottom: dark mode, about, logout) */
#taskmenu .special-buttons {
    background-color: var(--albs-bg) !important;
    border-top: 1px solid var(--albs-border) !important;
}

/* Mode clair + ITN Alb's : dégradé orange transparent, texte/icône blancs */
#taskmenu .special-buttons a.theme,
#taskmenu .special-buttons a.itn {
    background: linear-gradient(135deg, rgba(233, 84, 33, 0.45) 0%, rgba(255, 112, 67, 0.45) 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(233, 84, 33, 0.15) !important;
}

#taskmenu .special-buttons a.theme::before,
#taskmenu .special-buttons a.itn::before {
    color: #fff !important;
}

#taskmenu .special-buttons a.theme:hover,
#taskmenu .special-buttons a.itn:hover {
    background: linear-gradient(135deg, rgba(255, 112, 67, 0.6) 0%, rgba(233, 84, 33, 0.6) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(233, 84, 33, 0.25) !important;
}

/* Déconnexion : dégradé rouge transparent, texte/icône blancs */
#taskmenu .special-buttons a.logout {
    background: linear-gradient(135deg, rgba(217, 54, 62, 0.45) 0%, rgba(255, 85, 82, 0.45) 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(217, 54, 62, 0.15) !important;
}

#taskmenu .special-buttons a.logout::before {
    color: #fff !important;
}

#taskmenu .special-buttons a.logout:hover {
    background: linear-gradient(135deg, rgba(255, 85, 82, 0.6) 0%, rgba(217, 54, 62, 0.6) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(217, 54, 62, 0.25) !important;
}

/* ITN Alb's intranet button (replaces "about") — fa-sitemap solid */
#taskmenu a.itn::before {
    font-family: "Icons" !important;
    content: "\f0e8" !important;
    font-weight: 900 !important;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Popover header (mobile menu) */
#layout-menu .popover-header {
    background: var(--albs-bg) !important;
    border-bottom: 1px solid var(--albs-border) !important;
}

#layout-menu .popover-header img {
    opacity: 0.9;
}

/* ============================================================
   HEADERS
   ============================================================ */
#layout > div > .header,
.topleft, .topright, #header {
    background-color: var(--albs-bg-light) !important;
    border-bottom: 1px solid var(--albs-border) !important;
    color: var(--albs-text) !important;
}

#layout > div > .header .header-title {
    color: var(--albs-text) !important;
    font-weight: 500 !important;
}

#layout > div > .header a.button {
    color: var(--albs-text-muted) !important;
    border-radius: var(--albs-radius-xs) !important;
}

#layout > div > .header a.button:hover {
    color: var(--albs-primary) !important;
    background: rgba(233, 84, 33, 0.1) !important;
}

/* ============================================================
   SIDEBAR (folders)
   ============================================================ */
#layout-sidebar {
    background: var(--albs-bg-light) !important;
    border-right: 1px solid var(--albs-border) !important;
}

#layout-sidebar .header {
    background: var(--albs-bg-light) !important;
    border-bottom: 1px solid var(--albs-border) !important;
}

#layout-sidebar .header .header-title {
    color: var(--albs-text) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
}

/* Folder list */
.folderlist li a {
    color: var(--albs-text) !important;
    border-radius: var(--albs-radius-xs) !important;
    margin: 1px 6px !important;
    padding-left: 8px !important;
}

.folderlist li a:hover {
    background: var(--albs-bg-lighter) !important;
    color: #fff !important;
}

.folderlist li.selected > a {
    background: rgba(233, 84, 33, 0.12) !important;
    color: var(--albs-primary-light) !important;
    font-weight: 500;
}

.folderlist li.selected > a::before {
    color: var(--albs-primary) !important;
}

/* Unread count badges */
.folderlist .unreadcount {
    background: var(--albs-primary) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 1px 7px !important;
    min-width: 18px;
    text-align: center;
}

/* Sidebar footer / Quota */
#layout-sidebar .footer {
    background: var(--albs-bg-light) !important;
    border-top: 1px solid var(--albs-border) !important;
    color: var(--albs-text-muted) !important;
}

.quota-widget {
    color: var(--albs-text-muted) !important;
}

/* ============================================================
   MESSAGE LIST
   ============================================================ */
#layout-list {
    background: var(--albs-bg-light) !important;
    border-right: 1px solid var(--albs-border) !important;
}

#layout-list > .header {
    background: var(--albs-bg-light) !important;
}

.messagelist {
    background: transparent !important;
}

.messagelist tr {
    border-bottom: 1px solid var(--albs-border) !important;
    transition: background var(--albs-transition) !important;
}

.messagelist tr td {
    color: var(--albs-text) !important;
    border-bottom: none !important;
}

.messagelist tr:hover td {
    background: var(--albs-bg-lighter) !important;
}

.messagelist tr.selected td {
    background: rgba(233, 84, 33, 0.1) !important;
    color: var(--albs-text) !important;
}

.messagelist tr.selected td a {
    color: var(--albs-primary-light) !important;
}

/* Unread messages */
.messagelist tr.unread td {
    font-weight: 600 !important;
}

.messagelist tr.unread td.subject span.subject {
    color: #fff !important;
}

/* Secondary text (date, size) */
.messagelist td.date,
.messagelist td.size,
.messagelist td.fromto span.secondary {
    color: var(--albs-text-muted) !important;
    font-size: 0.82rem !important;
}

/* Flag icon */
.messagelist span.flagged::before {
    color: #FFD452 !important;
}

/* Focus indicator */
.messagelist tr.focused td {
    box-shadow: inset 3px 0 0 var(--albs-primary) !important;
}

/* Attachment icon */
.messagelist span.attachment span {
    color: var(--albs-text-muted) !important;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.searchbar {
    background: var(--albs-bg) !important;
    border-bottom: 1px solid var(--albs-border) !important;
}

.searchbar input {
    background: var(--albs-bg-lighter) !important;
    border: 1px solid var(--albs-border-light) !important;
    border-radius: var(--albs-radius-xs) !important;
    color: var(--albs-text) !important;
}

.searchbar input:focus {
    border-color: var(--albs-primary) !important;
    box-shadow: 0 0 0 2px rgba(233, 84, 33, 0.15) !important;
}

.searchbar a::before {
    color: var(--albs-text-muted) !important;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
#layout-content {
    background: var(--albs-bg) !important;
}

#layout-content .iframe-wrapper {
    background: var(--albs-bg) !important;
}

#layout-content .iframe-wrapper iframe {
    background: var(--albs-bg) !important;
}

#layout-content > .content,
#layout-content > .formcontent,
#layout-content > .scroller {
    background: var(--albs-bg) !important;
}

html.iframe body,
html.iframe #layout-content {
    background: var(--albs-bg) !important;
}

/* ============================================================
   BUTTONS — Global
   ============================================================ */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
    background: linear-gradient(135deg, var(--albs-primary) 0%, var(--albs-primary-light) 100%) !important;
    border: none !important;
    border-radius: var(--albs-radius-xs) !important;
    color: #fff !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(233, 84, 33, 0.25) !important;
    transition: all var(--albs-transition) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
    background: linear-gradient(135deg, var(--albs-primary-light) 0%, var(--albs-primary) 100%) !important;
    box-shadow: 0 4px 14px rgba(233, 84, 33, 0.35) !important;
    transform: translateY(-1px);
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(233, 84, 33, 0.25) !important;
}

.btn-secondary,
.btn.btn-secondary {
    background: var(--albs-bg-lighter) !important;
    border: 1px solid var(--albs-border-light) !important;
    border-radius: var(--albs-radius-xs) !important;
    color: var(--albs-text) !important;
}

.btn-secondary:hover {
    background: var(--albs-bg-card) !important;
    border-color: var(--albs-text-muted) !important;
}

/* Remove the overly aggressive old button override */
button:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-link),
input[type="submit"]:not(.btn-primary) {
    border-radius: var(--albs-radius-xs) !important;
}

/* Floating action button (compose) */
.floating-action-buttons a.button {
    background: linear-gradient(135deg, var(--albs-primary) 0%, var(--albs-primary-light) 100%) !important;
    box-shadow: 0 6px 20px rgba(233, 84, 33, 0.4) !important;
    border-radius: 50% !important;
}

.floating-action-buttons a.button:hover {
    box-shadow: 0 8px 28px rgba(233, 84, 33, 0.5) !important;
    transform: scale(1.05);
}

/* ============================================================
   FORMS — Global
   ============================================================ */
.form-control {
    background: var(--albs-bg) !important;
    border: 1px solid var(--albs-border-light) !important;
    border-radius: var(--albs-radius-xs) !important;
    color: var(--albs-text) !important;
    transition: border-color var(--albs-transition), box-shadow var(--albs-transition) !important;
}

.form-control:focus {
    background: var(--albs-bg-light) !important;
    border-color: var(--albs-primary) !important;
    box-shadow: 0 0 0 3px rgba(233, 84, 33, 0.12) !important;
    color: var(--albs-text) !important;
}

.form-control::placeholder {
    color: var(--albs-text-muted) !important;
    opacity: 0.6;
}

.custom-select {
    background-color: var(--albs-bg) !important;
    border: 1px solid var(--albs-border-light) !important;
    border-radius: var(--albs-radius-xs) !important;
    color: var(--albs-text) !important;
}

.input-group-text {
    background: var(--albs-bg-lighter) !important;
    border: 1px solid var(--albs-border-light) !important;
    color: var(--albs-text-muted) !important;
}

/* Checkboxes */
.custom-switch .custom-control-label::before {
    background-color: var(--albs-bg-lighter) !important;
    border-color: var(--albs-border-light) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--albs-primary) !important;
    border-color: var(--albs-primary) !important;
}

/* ============================================================
   POPOVER MENUS
   ============================================================ */
.popover {
    background: var(--albs-bg-card) !important;
    border: 1px solid var(--albs-border-light) !important;
    border-radius: var(--albs-radius-sm) !important;
    box-shadow: var(--albs-shadow) !important;
}

.popover .menu li a {
    color: var(--albs-text) !important;
    border-radius: var(--albs-radius-xs) !important;
}

.popover .menu li a:hover,
.popover .menu li a.active {
    background: var(--albs-primary) !important;
    color: #fff !important;
}

/* ============================================================
   LISTING — Generic (contacts, settings, etc.)
   ============================================================ */
.listing li,
.listing tbody td {
    border-color: var(--albs-border) !important;
}

.listing li a,
.listing tbody td {
    color: var(--albs-text) !important;
}

.listing li.selected,
.listing tr.selected td {
    background: rgba(233, 84, 33, 0.1) !important;
}

.listing li a:hover,
.listing tr:hover td {
    background: var(--albs-bg-lighter) !important;
}

/* ============================================================
   DIALOGS / MODALS
   ============================================================ */
.ui-dialog {
    background: var(--albs-bg-card) !important;
    border: 1px solid var(--albs-border-light) !important;
    border-radius: var(--albs-radius) !important;
    box-shadow: var(--albs-shadow) !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--albs-bg-light) !important;
    border-bottom: 1px solid var(--albs-border) !important;
    border-radius: var(--albs-radius) var(--albs-radius) 0 0 !important;
    color: var(--albs-text) !important;
}

.ui-dialog .ui-dialog-content {
    color: var(--albs-text) !important;
}

.ui-dialog .ui-dialog-buttonpane {
    background: var(--albs-bg-light) !important;
    border-top: 1px solid var(--albs-border) !important;
    border-radius: 0 0 var(--albs-radius) var(--albs-radius) !important;
}

.ui-widget-overlay {
    background: rgba(10, 14, 29, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ============================================================
   ALERTS / NOTIFICATIONS
   ============================================================ */
.ui.alert {
    border-radius: var(--albs-radius-sm) !important;
    border: none !important;
    box-shadow: var(--albs-shadow-sm) !important;
}

.ui.alert.alert-info,
.ui.alert.information {
    background: rgba(233, 84, 33, 0.12) !important;
    color: var(--albs-primary-light) !important;
}

.ui.alert.alert-success,
.ui.alert.confirmation {
    background: rgba(65, 184, 73, 0.12) !important;
    color: #6DD472 !important;
}

.ui.alert.alert-warning,
.ui.alert.warning {
    background: rgba(255, 212, 82, 0.12) !important;
    color: #FFD452 !important;
}

.ui.alert.alert-danger,
.ui.alert.error {
    background: rgba(255, 85, 82, 0.12) !important;
    color: #FF7875 !important;
}

/* ============================================================
   COMPOSE PAGE
   ============================================================ */
.compose-headers {
    background: var(--albs-bg-light) !important;
}

.compose-headers label {
    color: var(--albs-text-muted) !important;
}

/* ============================================================
   MESSAGE VIEW
   ============================================================ */
#message-header {
    background: var(--albs-bg-light) !important;
    border-bottom: 1px solid var(--albs-border) !important;
}

#message-header .header-title {
    color: var(--albs-text) !important;
}

#message-header .header-links a {
    color: var(--albs-primary) !important;
}

/* ============================================================
   SETTINGS
   ============================================================ */
.propform .form-group,
.propform .row {
    border-color: var(--albs-border) !important;
}

.propform label {
    color: var(--albs-text-muted) !important;
}

fieldset legend {
    color: var(--albs-text) !important;
    font-weight: 600 !important;
}

/* ============================================================
   PAGE NAVIGATION
   ============================================================ */
.menu.pagenav {
    background: var(--albs-bg-light) !important;
    border-top: 1px solid var(--albs-border) !important;
}

.menu.pagenav a {
    color: var(--albs-text-muted) !important;
}

.menu.pagenav a:hover {
    color: var(--albs-primary) !important;
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.toolbar a {
    color: var(--albs-text-muted) !important;
    border-radius: var(--albs-radius-xs) !important;
}

.toolbar a:hover:not(.disabled) {
    color: var(--albs-primary) !important;
    background: rgba(233, 84, 33, 0.1) !important;
}

.toolbar a.disabled {
    opacity: 0.35 !important;
}

/* ============================================================
   ATTACHMENT LIST
   ============================================================ */
.attachmentslist {
    background: var(--albs-bg-light) !important;
    border-color: var(--albs-border) !important;
}

.attachmentslist li {
    border-color: var(--albs-border) !important;
}

.attachmentslist li::before {
    color: var(--albs-text-muted) !important;
}

/* ============================================================
   DARK MODE — Harmonise with the already-dark base
   ============================================================ */
html.dark-mode body {
    background-color: var(--albs-bg) !important;
    color: var(--albs-text) !important;
}

html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
    background-color: transparent !important;
    border-color: var(--albs-border) !important;
}

html.dark-mode .popover {
    background: var(--albs-bg-card) !important;
    border-color: var(--albs-border-light) !important;
}

html.dark-mode #login-footer {
    color: var(--albs-text-muted) !important;
}

/* ============================================================
   SPECIAL BUTTONS (from original custom.css)
   ============================================================ */
.special-buttons a.button-website {
    display: inline-block;
}

.special-buttons a.button-website::before {
    font-family: "Icons";
    content: "\e922";
    font-style: normal;
    font-weight: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 5px;
}

/* ============================================================
   ALB'S — Scheduled sending: compact pill next to "Envoyer"
   No chevron, no popover — just a clean inline bar.
   ============================================================ */
.formbuttons {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.formbuttons .float-right {
    float: none !important;
    margin-left: auto !important;
    order: 99;
}

.formbuttons .btn.btn-primary.send {
    order: 1;
    flex-shrink: 0;
}

#ss-inline-schedule {
    order: 2;
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem !important;
    margin: 0 !important;
    padding: 0.35rem 0.6rem !important;
    background: rgba(36, 46, 74, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-shrink: 0;
}

#ss-inline-schedule::before {
    content: "\f017";
    font-family: "Icons";
    font-weight: 900;
    color: #E95421;
    font-size: 1.05rem;
    line-height: 1;
}

#ss-inline-schedule .ss-label {
    display: none !important;
}

#ss-inline-schedule #ss-when {
    background: rgba(26, 32, 53, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    color: #E0E6ED !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.85rem !important;
    color-scheme: dark;
    width: 200px;
    min-width: 0;
    height: auto !important;
}

#ss-inline-schedule #ss-when:focus {
    border-color: #E95421 !important;
    box-shadow: 0 0 0 3px rgba(233, 84, 33, 0.15) !important;
    outline: none !important;
}

#ss-inline-schedule #ss-when::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.7);
    cursor: pointer;
}

#ss-inline-schedule #ss-schedule-btn {
    background: linear-gradient(135deg, rgba(233, 84, 33, 0.9) 0%, rgba(255, 112, 67, 0.9) 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    padding: 0.4rem 0.75rem !important;
    box-shadow: 0 2px 6px rgba(233, 84, 33, 0.25) !important;
    cursor: pointer;
    transition: all 0.15s ease !important;
    white-space: nowrap;
    height: auto !important;
    min-height: 0;
    line-height: 1.2;
}

#ss-inline-schedule #ss-schedule-btn:hover {
    background: linear-gradient(135deg, rgba(255, 112, 67, 1) 0%, rgba(233, 84, 33, 1) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 84, 33, 0.35) !important;
}

/* Hide any chevron remnant from old code */
#ss-chevron { display: none !important; }

@media (max-width: 720px) {
    #ss-inline-schedule {
        flex-basis: 100%;
        justify-content: space-between;
    }
    #ss-inline-schedule #ss-when { flex: 1; width: auto; }
}

/* ============================================================
   NOSCRIPT WARNING
   ============================================================ */
.noscriptwarning {
    background: rgba(255, 212, 82, 0.15) !important;
    color: #FFD452 !important;
    border-radius: var(--albs-radius-sm) !important;
    padding: 1rem !important;
    text-align: center;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media screen and (max-width: 768px) {
    #login-form {
        padding: 1.5rem 1.25rem !important;
        margin: 0 1rem !important;
    }

    .task-login #logo {
        top: 8vh !important;
    }

    #login-form {
        top: 10vh !important;
    }
}