/* ============================================================
   Balliante Staff Portal — Borders Bar Egyptian Cotton Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    /* Brand palette — Borders Bar Egyptian cotton */
    --bs-primary:     #3d2e1a;   /* dark warm brown — sidebar, shift blocks */
    --bs-accent:      #a07828;   /* gold — buttons, active nav, badges       */
    --bs-bronze:      #7a5c1e;   /* darker bronze — headings, stat numbers   */
    --bs-ok:          #2a6e45;
    --bs-warn:        #b06800;

    /* Surfaces */
    --bs-body-bg:     #d8d0c4;   /* warm taupe — login page outer            */
    --bs-bg:          #f5f0e8;   /* Egyptian cotton — main content area       */
    --bs-surface:     #faf8f2;   /* warm off-white — cards, inputs           */
    --bs-surface-alt: #f0ead8;   /* slightly deeper cream — table row alt    */

    /* Borders / dividers */
    --bs-border:      rgba(122, 92, 30, 0.20);   /* warm gold tint          */
    --bs-border-dark: rgba(122, 92, 30, 0.40);   /* stronger rule           */

    /* Text */
    --bs-text:        #3d2e1a;   /* dark warm brown — main text              */
    --bs-muted:       #8a7355;   /* mid brown — secondary / labels           */
    --bs-on-dark:     #f5f0e8;   /* text on dark/sidebar surfaces            */

    /* Typography */
    --bs-font-display: 'Bebas Neue', 'Gill Sans', Impact, sans-serif;
    --bs-font-body:    'Cormorant Garamond', 'Georgia', serif;
    --bs-font-ui:      system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Shape */
    --bs-sidebar-w: 240px;
    --bs-radius:    8px;
}

/* ── Base reset for portal ───────────────────────────────── */
body,
body.bs-portal-body,
body.bs-login-body {
    background: var(--bs-body-bg) !important;
    color: var(--bs-text) !important;
    font-family: var(--bs-font-ui) !important;
    -webkit-font-smoothing: antialiased;
}

/* Scoped font & color reset — overrides any theme bleed */
.bs-portal *,
.bs-login-wrap * {
    font-family: var(--bs-font-ui);
    color: inherit;
}
.bs-portal h1,
.bs-portal h2,
.bs-portal h3,
.bs-portal .bs-page h2,
.bs-login-title {
    font-family: var(--bs-font-display) !important;
    letter-spacing: 0.04em;
    text-wrap: balance;
}

/* ── Login page ──────────────────────────────────────────── */
.bs-login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bs-body-bg) !important;
}
.bs-login-wrap { width: 100%; max-width: 420px; padding: 1rem; }
.bs-login-card {
    background: var(--bs-surface);
    border: 1px solid var(--bs-border-dark);
    border-radius: var(--bs-radius);
    padding: 2.5rem 2rem;
    box-shadow: 0 12px 48px rgba(61,46,26,.18);
}
.bs-login-logo { max-height: 64px; margin-bottom: 1.25rem; display: block; }
.bs-login-title {
    font-family: var(--bs-font-display) !important;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--bs-bronze) !important;
    margin-bottom: 0.25rem;
}
.bs-login-subtitle { font-size: .875rem; color: var(--bs-muted); margin-bottom: 1.5rem; }
.bs-login-form { display: flex; flex-direction: column; gap: .9rem; }
.bs-login-footer { margin-top: 1rem; text-align: center; color: var(--bs-muted); font-size: .8rem; }

/* ── Inputs / fields (portal-wide) ──────────────────────── */
.bs-field { display: flex; flex-direction: column; gap: .3rem; position: relative; }
.bs-field label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.bs-field input,
.bs-field select,
.bs-field textarea {
    border: 1px solid var(--bs-border-dark);
    border-radius: 6px;
    padding: .65rem .85rem;
    font-size: .95rem;
    width: 100%;
    outline: none;
    background: var(--bs-surface) !important;
    color: var(--bs-text) !important;
    transition: border-color .2s, box-shadow .2s;
}
.bs-field input:focus,
.bs-field select:focus,
.bs-field textarea:focus {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px rgba(160,120,40,.15);
}
.bs-field textarea { min-height: 70px; resize: vertical; }
.bs-pw-toggle {
    position: absolute;
    right: .75rem;
    bottom: .65rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--bs-muted);
}

/* ── Buttons ─────────────────────────────────────────────── */
.bs-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem 1.1rem;
    border-radius: 6px;
    border: 1.5px solid var(--bs-border-dark);
    background: var(--bs-surface);
    color: var(--bs-text) !important;
    font-family: var(--bs-font-ui);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
    white-space: nowrap;
}
.bs-btn:hover {
    border-color: var(--bs-accent);
    background: var(--bs-bg);
    color: var(--bs-accent) !important;
}
.bs-btn:focus-visible {
    outline: 2px solid var(--bs-accent);
    outline-offset: 2px;
}

.bs-btn--primary,
.bs-login-btn {
    background: var(--bs-accent) !important;
    color: #fff !important;
    border-color: var(--bs-accent) !important;
    font-weight: 700;
    letter-spacing: .02em;
}
.bs-btn--primary:hover,
.bs-login-btn:hover {
    background: var(--bs-bronze) !important;
    border-color: var(--bs-bronze) !important;
    color: #fff !important;
    opacity: 1;
}
.bs-login-btn {
    border: none !important;
    border-radius: 6px;
    padding: .8rem;
    font-size: 1rem;
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.bs-btn--sm { padding: .3rem .7rem; font-size: .8rem; }

.bs-btn--danger {
    background: #fdf0ef !important;
    color: #7a2020 !important;
    border-color: #e8b4b4 !important;
}
.bs-btn--danger:hover {
    background: #f5c6c6 !important;
    color: #5a1010 !important;
}

/* ── Portal layout ───────────────────────────────────────── */
.bs-portal { display: flex; min-height: 100vh; }

/* Sidebar */
.bs-sidebar {
    width: var(--bs-sidebar-w);
    background: var(--bs-primary);
    color: var(--bs-on-dark);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 100;
}
.bs-sidebar-brand {
    padding: 1.5rem 1.25rem 1.1rem;
    border-bottom: 1px solid rgba(160,120,40,.25);
}
.bs-logo { max-height: 44px; }
.bs-sidebar-brand strong {
    font-family: var(--bs-font-display);
    font-size: 1.4rem;
    letter-spacing: .08em;
    color: var(--bs-on-dark);
    display: block;
}
.bs-sidebar-sub {
    display: block;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-accent);
    margin-top: .3rem;
}

.bs-nav { list-style: none; padding: .75rem 0; flex: 1; overflow-y: auto; }
.bs-nav-heading {
    padding: 1rem 1.25rem .3rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(245,240,232,.35);
}
.bs-nav li a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1.25rem;
    color: rgba(245,240,232,.7) !important;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.bs-nav li a:hover { background: rgba(160,120,40,.12); color: var(--bs-on-dark) !important; }
.bs-nav li.active a {
    background: rgba(160,120,40,.18);
    color: var(--bs-on-dark) !important;
    border-left: 3px solid var(--bs-accent);
    padding-left: calc(1.25rem - 3px);
}

.bs-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-accent);
    color: #fff;
    border-radius: 10px;
    font-size: .68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 .3rem;
    margin-left: auto;
}

.bs-sidebar-user {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(160,120,40,.2);
    font-size: .85rem;
    color: rgba(245,240,232,.7);
}
.bs-logout-link {
    display: block;
    margin-top: .3rem;
    color: rgba(245,240,232,.4) !important;
    font-size: .78rem;
    text-decoration: none;
    transition: color .15s;
}
.bs-logout-link:hover { color: var(--bs-accent) !important; }

/* Main content */
.bs-main {
    margin-left: var(--bs-sidebar-w);
    flex: 1;
    padding: 2rem;
    max-width: calc(100vw - var(--bs-sidebar-w));
    background: var(--bs-bg) !important;
    color: var(--bs-text) !important;
    min-height: 100vh;
}

/* ── Page sections ───────────────────────────────────────── */
.bs-page h2 {
    font-family: var(--bs-font-display) !important;
    font-size: 2rem;
    color: var(--bs-bronze) !important;
    letter-spacing: .05em;
    margin-bottom: 1.25rem;
}
.bs-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.bs-page-header h2 { margin: 0; }

/* ── Cards ───────────────────────────────────────────────── */
.bs-card {
    background: var(--bs-surface) !important;
    color: var(--bs-text) !important;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
    padding: 1.25rem 1.5rem;
}
.bs-card h3 {
    font-family: var(--bs-font-display) !important;
    font-size: 1rem;
    letter-spacing: .06em;
    color: var(--bs-bronze) !important;
    margin-bottom: 1rem;
}
.bs-card--alert { border-color: var(--bs-accent); border-left-width: 4px; }

/* ── Dashboard grid ──────────────────────────────────────── */
.bs-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }

/* ── Stat row ────────────────────────────────────────────── */
.bs-stat-row { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.bs-stat {
    background: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
    padding: 1.1rem 1.5rem;
    text-align: center;
    min-width: 100px;
}
.bs-stat-num {
    display: block;
    font-family: var(--bs-font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--bs-bronze) !important;
    letter-spacing: .04em;
}
.bs-stat-label { color: var(--bs-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .25rem; display: block; }

/* ── Table ───────────────────────────────────────────────── */
.bs-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bs-table th,
.bs-table td {
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--bs-border);
    text-align: left;
    color: var(--bs-text) !important;
    background: var(--bs-surface);
}
.bs-table th {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-muted) !important;
    background: var(--bs-surface-alt);
}
.bs-table tbody tr:hover td { background: var(--bs-bg); }

/* ── Rota week (staff view) ──────────────────────────────── */
.bs-week-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: .9rem; }
.bs-rota-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .75rem; }
@media(max-width:900px){ .bs-rota-week { grid-template-columns: repeat(3,1fr); } }
@media(max-width:500px){ .bs-rota-week { grid-template-columns: 1fr 1fr; } }

.bs-rota-day {
    background: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
    overflow: hidden;
}
.bs-rota-day--today { border-color: var(--bs-accent); box-shadow: 0 0 0 2px rgba(160,120,40,.25); }
.bs-rota-day--off { background: var(--bs-bg); }
.bs-rota-day-header {
    background: var(--bs-primary);
    color: var(--bs-on-dark);
    padding: .5rem .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.bs-rota-day-date { font-weight: 400; opacity: .65; font-size: .78rem; }
.bs-today-badge {
    background: var(--bs-accent);
    border-radius: 10px;
    padding: .1rem .5rem;
    font-size: .68rem;
    color: #fff;
    font-weight: 700;
}
.bs-rota-shift { padding: .6rem .75rem; border-bottom: 1px solid var(--bs-border); font-size: .85rem; }
.bs-rota-off { padding: .75rem; color: var(--bs-muted); font-size: .85rem; text-align: center; }
.bs-time { display: block; font-weight: 600; font-size: .9rem; color: var(--bs-text) !important; }
.bs-role-tag {
    display: inline-block;
    background: var(--bs-bronze);
    color: var(--bs-on-dark);
    border-radius: 3px;
    padding: .1rem .4rem;
    font-size: .7rem;
    margin-top: .25rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.bs-shift-note { display: block; color: var(--bs-muted); font-size: .78rem; margin-top: .15rem; }
.bs-shift-hours { display: block; color: var(--bs-muted); font-size: .78rem; }

/* ── Leave bar ───────────────────────────────────────────── */
.bs-leave-bar-wrap { margin-bottom: .75rem; }
.bs-leave-bar {
    background: var(--bs-border);
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
    margin-bottom: .5rem;
    background: rgba(122,92,30,.15);
}
.bs-leave-bar-fill { background: var(--bs-accent); height: 100%; transition: width .4s ease; border-radius: 20px; }

.bs-leave-row,
.bs-shift-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--bs-border);
    font-size: .9rem;
}
.bs-leave-row:last-child, .bs-shift-row:last-child { border-bottom: none; }
.bs-leave-item { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--bs-border); }
.bs-leave-list { margin-top: .5rem; }
.bs-manager-note { font-style: italic; color: var(--bs-muted); font-size: .8rem; display: block; margin-top: .2rem; }

/* ── Badges ──────────────────────────────────────────────── */
.bs-badge { display: inline-block; padding: .15rem .65rem; border-radius: 20px; font-size: .73rem; font-weight: 700; letter-spacing: .04em; }
.bs-badge-pending  { background: #f5e6c8; color: #7a4a00; }
.bs-badge-approved { background: #d4edd8; color: #1a5c28; }
.bs-badge-declined { background: #f5d5d5; color: #7a1a1a; }

/* ── Status badges ───────────────────────────────────────── */
.bs-status-badge {
    padding: .25rem .85rem;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.bs-status-draft     { background: #f5e6c8; color: #7a4a00; }
.bs-status-published { background: #d4edd8; color: #1a5c28; }

/* ── Rota toolbar ────────────────────────────────────────── */
.bs-rota-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
}
.bs-rota-status-row { display: flex; align-items: center; gap: .6rem; flex: 1; }

/* ── Rota builder table ──────────────────────────────────── */
.bs-rota-table-wrap {
    overflow-x: auto;
    border-radius: var(--bs-radius);
    border: 1px solid var(--bs-border);
}
.bs-rota-table { border-collapse: collapse; width: 100%; min-width: 800px; }
.bs-rota-table th,
.bs-rota-table td {
    border: 1px solid var(--bs-border);
    padding: .4rem .5rem;
    vertical-align: top;
    font-size: .85rem;
    background: var(--bs-surface);
    color: var(--bs-text) !important;
}
.bs-rota-table thead th {
    background: var(--bs-primary) !important;
    color: var(--bs-on-dark) !important;
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bs-col-name {
    min-width: 120px;
    font-weight: 600;
    background: var(--bs-surface-alt) !important;
    color: var(--bs-text) !important;
}
.bs-col-day  { min-width: 100px; text-align: center; }
.bs-weekend  { background: var(--bs-bg) !important; }
.bs-unavail  { background: #fdf0e8 !important; }
.bs-day-cell { position: relative; min-height: 55px; }

/* Shift pills in rota builder */
.bs-shift {
    background: var(--bs-bronze);
    color: var(--bs-on-dark);
    border-radius: 4px;
    padding: .22rem .45rem;
    margin-bottom: .2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    align-items: center;
    font-size: .78rem;
}
.bs-shift-time { font-weight: 700; }
.bs-shift-role {
    background: rgba(255,255,255,.2);
    border-radius: 3px;
    padding: 0 .3rem;
    font-size: .68rem;
}
.bs-shift-del {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(245,240,232,.5);
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    padding: 0;
    transition: color .15s;
}
.bs-shift-del:hover { color: var(--bs-on-dark); }

/* Add-shift button */
.bs-add-shift-btn {
    display: block;
    width: 100%;
    background: none;
    border: 1.5px dashed rgba(122,92,30,.35);
    border-radius: 4px;
    color: var(--bs-muted);
    cursor: pointer;
    padding: .2rem;
    font-size: .82rem;
    margin-top: .2rem;
    transition: border-color .15s, color .15s;
}
.bs-add-shift-btn:hover { border-color: var(--bs-accent); color: var(--bs-accent); }
.bs-unavail-label { font-size: .68rem; color: var(--bs-accent); display: block; margin-top: .15rem; }

/* ── Leave manager ───────────────────────────────────────── */
.bs-leave-manager-list { display: flex; flex-direction: column; gap: .75rem; }
.bs-leave-manager-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--bs-surface-alt);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
}
.bs-leave-manager-info { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .9rem; }
.bs-leave-manager-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* ── Hours blocks ────────────────────────────────────────── */
.bs-hours-block {
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
    margin-bottom: 1rem;
    overflow: hidden;
}
.bs-hours-block summary {
    padding: .75rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bs-surface);
    color: var(--bs-text);
}
.bs-hours-total {
    margin-left: auto;
    background: var(--bs-bronze);
    color: var(--bs-on-dark);
    border-radius: 20px;
    padding: .15rem .75rem;
    font-size: .82rem;
    font-weight: 700;
}
.bs-actual-inputs { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.bs-actual-inputs input { width: 90px; }

/* ── Notices ─────────────────────────────────────────────── */
.bs-notice {
    padding: .65rem 1rem;
    border-radius: 6px;
    font-size: .875rem;
    margin-bottom: .75rem;
    border-left: 3px solid;
}
.bs-notice--ok    { background: #e8f5ea; color: #1a5c28; border-color: var(--bs-ok); }
.bs-notice--error { background: #f5e6e6; color: #7a1a1a; border-color: #c04040; }
.bs-notice--info  { background: #e8edf5; color: #1a2a5c; border-color: #4060b0; }

/* ── Modal ───────────────────────────────────────────────── */
.bs-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.bs-modal-inner {
    background: var(--bs-surface);
    border: 1px solid var(--bs-border-dark);
    border-radius: var(--bs-radius);
    padding: 1.75rem 2rem;
    width: 440px;
    max-width: 95vw;
    box-shadow: 0 16px 60px rgba(61,46,26,.25);
    position: relative;
    z-index: 1001;
}
.bs-modal-inner h3 {
    font-family: var(--bs-font-display) !important;
    font-size: 1.4rem;
    letter-spacing: .05em;
    color: var(--bs-bronze) !important;
    margin-bottom: 1rem;
}
.bs-modal-actions { display: flex; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; }
#bs-modal-overlay { position: fixed; inset: 0; background: rgba(61,46,26,.4); z-index: 999; }

/* ── Forms ───────────────────────────────────────────────── */
.bs-form { display: flex; flex-direction: column; gap: .9rem; }
.bs-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.bs-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media(max-width:700px){ .bs-two-col { grid-template-columns: 1fr; } }
.bs-filter-form { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }

/* Availability */
.bs-avail-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.bs-avail-toggle { display: flex; align-items: center; gap: .4rem; cursor: pointer; min-width: 120px; }
.bs-avail-day { font-weight: 600; }
.bs-avail-note { flex: 1; }

/* ── Misc helpers ────────────────────────────────────────── */
.bs-highlight { color: var(--bs-bronze) !important; font-size: 1.25rem; font-weight: 700; }
.bs-muted { color: var(--bs-muted) !important; }
.bs-link { font-size: .875rem; color: var(--bs-accent) !important; text-decoration: none; }
.bs-link:hover { text-decoration: underline; }
.bs-dl dt { font-weight: 600; margin-top: .5rem; }
.bs-dl dd { color: var(--bs-muted); }

hr { border: none; border-top: 1px solid var(--bs-border); }

/* ── Mobile ──────────────────────────────────────────────── */
@media(max-width:700px) {
    .bs-sidebar { width: 100%; height: auto; position: relative; }
    .bs-nav { display: flex; flex-wrap: wrap; padding: .25rem; }
    .bs-nav li a { padding: .45rem .7rem; font-size: .8rem; }
    .bs-main { margin-left: 0; max-width: 100vw; padding: 1rem; }
    .bs-portal { flex-direction: column; }
    .bs-field-row { grid-template-columns: 1fr; }
    .bs-stat-num { font-size: 2rem; }
}

@media(prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}