/* ================================================================
   IPOA Employee Leave Manager — elm-style.css v5.0
   Premium Responsive Dashboard
================================================================ */

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

/* ══════════════════════════════════════════════
   DASHBOARD LAYOUT
══════════════════════════════════════════════ */
.elm-dashboard {
    font-family: 'Segoe UI', Inter, system-ui, -apple-system, Arial, sans-serif;
    color: #0f172a;
    line-height: 1.6;
}

.elm-layout {
    display: flex;
    min-height: 700px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
    background: #f1f5f9;
    position: relative;
}

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
.elm-sidebar {
    width: 255px;
    flex-shrink: 0;
    background: linear-gradient(175deg, #0b1120 0%, #111827 50%, #0d1526 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 200;
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    border-right: 1px solid rgba(255,255,255,.04);
}

/* Glow line at bottom of brand */
.elm-sidebar-brand {
    padding: 26px 20px 20px;
    position: relative;
}
.elm-sidebar-brand::after {
    content: '';
    position: absolute;
    bottom: 0; left: 18px; right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201,27,18,.6) 50%, transparent 100%);
}

.elm-sidebar-logo {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 4px;
    line-height: 1;
    text-shadow: 0 0 28px rgba(201,27,18,.4);
}
.elm-sidebar-logo span { color: #c91b12; }

.elm-sidebar-subtitle {
    font-size: 10.5px;
    color: #4b5a72;
    margin-top: 6px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Close button (mobile only) */
.elm-sidebar-close {
    display: none;
    position: absolute;
    top: 16px; right: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #94a3b8;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    z-index: 10;
    font-family: inherit;
    line-height: 1;
}
.elm-sidebar-close:hover { background: rgba(255,255,255,.16); color: #fff; }

.elm-sidebar-nav {
    flex: 1;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    scrollbar-width: none;
}
.elm-sidebar-nav::-webkit-scrollbar { display: none; }

.elm-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    color: #6b7fa3;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color .2s, background .2s, box-shadow .2s;
    border-radius: 10px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    position: relative;
    font-family: inherit;
    letter-spacing: .01em;
    overflow: hidden;
}

.elm-nav-item::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 55%;
    background: linear-gradient(180deg, #ff3b30, #c91b12);
    border-radius: 0 3px 3px 0;
    transition: transform .22s cubic-bezier(.4,0,.2,1);
}

.elm-nav-item:hover {
    color: #c8d6f0;
    background: rgba(255,255,255,.07);
}
.elm-nav-item:hover::before { transform: translateY(-50%) scaleY(1); }

.elm-nav-item--active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(201,27,18,.22), rgba(201,27,18,.06)) !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(201,27,18,.18),
                0 2px 12px rgba(201,27,18,.15) !important;
}
.elm-nav-item--active::before { transform: translateY(-50%) scaleY(1) !important; }
.elm-nav-item--active .elm-nav-icon { filter: drop-shadow(0 0 5px rgba(201,27,18,.5)); }

.elm-nav-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.elm-nav-label { flex: 1; }

.elm-sidebar-footer {
    padding: 10px 10px 14px;
    border-top: 1px solid rgba(255,255,255,.05);
}

/* Mobile overlay */
.elm-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 190;
    opacity: 0;
    transition: opacity .3s;
    cursor: pointer;
}
.elm-sidebar-overlay--visible {
    display: block;
    opacity: 1;
}

/* ══════════════════════════════════════════════
   MAIN AREA
══════════════════════════════════════════════ */
.elm-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f4f6fb;
}

.elm-main-header {
    background: #fff;
    padding: 0 26px;
    height: 62px;
    border-bottom: 1px solid #e8edf5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

.elm-main-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.elm-main-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Hamburger button */
.elm-menu-toggle {
    display: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    cursor: pointer;
    padding: 7px 11px;
    font-size: 17px;
    color: #475569;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
}
.elm-menu-toggle:hover { background: #f1f5f9; border-color: #c91b12; color: #c91b12; }

.elm-main-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.elm-user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    padding: 4px 14px 4px 4px;
    transition: border-color .15s, box-shadow .15s;
    cursor: default;
}
.elm-user-chip:hover { border-color: #c91b12; box-shadow: 0 0 0 3px rgba(201,27,18,.07); }

.elm-user-avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, #c91b12 0%, #e04040 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(201,27,18,.3);
}

.elm-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.elm-main-content {
    flex: 1;
    padding: 26px 28px;
    overflow-y: auto;
}

/* ══════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════ */
.elm-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
    transition: box-shadow .25s, transform .25s;
}
.elm-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07), 0 14px 32px rgba(0,0,0,.06); }
.elm-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.elm-card-title { font-size: 16px; font-weight: 700; margin: 0 0 20px; color: #0f172a; }

/* ══════════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════════ */
.elm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.elm-stat-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 16px;
    padding: 20px 18px;
    position: relative;
    overflow: hidden;
    transition: transform .22s, box-shadow .22s;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.elm-stat-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #c91b12, #e04040);
    border-radius: 16px 16px 0 0;
}
.elm-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.elm-stat-card--green::after  { background: linear-gradient(90deg,#10b981,#34d399); }
.elm-stat-card--red::after    { background: linear-gradient(90deg,#ef4444,#f87171); }
.elm-stat-card--yellow::after { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.elm-stat-card--green  { background: #f0fdf4; border-color: #d1fae5; }
.elm-stat-card--red    { background: #fff5f5; border-color: #fecaca; }
.elm-stat-card--yellow { background: #fffbeb; border-color: #fde68a; }

.elm-stat-icon { font-size: 24px; line-height: 1; order: -1; }
.elm-stat-value { font-size: 32px; font-weight: 800; color: #0f172a; line-height: 1; }
.elm-stat-label { font-size: 12px; color: #64748b; font-weight: 500; }

/* ══════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════ */
.elm-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid #e8edf5;
    -webkit-overflow-scrolling: touch;
}

.elm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: #fff;
}

.elm-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 13px 16px;
    border-bottom: 1px solid #e8edf5;
    text-align: left;
    white-space: nowrap;
}

.elm-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
}

.elm-table tbody tr { transition: background .15s; }
.elm-table tbody tr:hover { background: #f8fafc; }
.elm-table tbody tr:last-child td { border-bottom: none; }
.elm-comment-row td { padding: 4px 16px 12px; background: #f8fafc !important; }

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.elm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s, background .18s;
    line-height: 1.4;
    font-family: inherit;
    white-space: nowrap;
}
.elm-btn:hover { transform: translateY(-1px); }
.elm-btn:active { transform: none; }

.elm-btn--primary {
    background: linear-gradient(135deg,#c91b12,#e02b21);
    color: #fff;
    box-shadow: 0 2px 8px rgba(201,27,18,.28);
}
.elm-btn--primary:hover { box-shadow: 0 5px 16px rgba(201,27,18,.38); background: linear-gradient(135deg,#b01710,#c91b12); }

.elm-btn--secondary {
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.elm-btn--secondary:hover { background: #f8fafc; border-color: #c91b12; color: #c91b12; box-shadow: 0 3px 10px rgba(0,0,0,.08); }

.elm-btn--success   { background: linear-gradient(135deg,#059669,#10b981); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.25); }
.elm-btn--success:hover { box-shadow: 0 5px 16px rgba(16,185,129,.38); }
.elm-btn--danger    { background: linear-gradient(135deg,#dc2626,#ef4444); color: #fff; box-shadow: 0 2px 8px rgba(220,38,38,.25); }
.elm-btn--danger:hover { box-shadow: 0 5px 16px rgba(220,38,38,.38); }
.elm-btn--sm        { padding: 5px 12px; font-size: 12px; border-radius: 7px; }
.elm-btn--lg        { padding: 13px 28px; font-size: 15px; border-radius: 11px; }

/* ══════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════ */
.elm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.elm-badge--pending     { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.elm-badge--approved    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.elm-badge--rejected    { background: #fff5f5; color: #991b1b; border: 1px solid #fecaca; }
.elm-badge--todo        { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.elm-badge--in_progress { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.elm-badge--done        { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* ══════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════ */
.elm-alert {
    padding: 13px 18px;
    border-radius: 11px;
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.elm-alert--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.elm-alert--error   { background: #fff5f5; color: #991b1b; border: 1px solid #fecaca; }
.elm-alert--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.elm-alert--info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ══════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════ */
.elm-form { display: flex; flex-direction: column; gap: 16px; }
.elm-form-section { display: flex; flex-direction: column; gap: 14px; }
.elm-form-section h2 { font-size: 15px; font-weight: 700; color: #0f172a; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 4px; }
.elm-form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.elm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.elm-form-actions { padding-top: 4px; }

.elm-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    display: block;
    margin-bottom: 5px;
    letter-spacing: .01em;
}

.elm-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
    font-family: inherit;
}
.elm-input:focus {
    outline: none;
    border-color: #c91b12;
    box-shadow: 0 0 0 3px rgba(201,27,18,.1);
}
.elm-input--readonly { background: #f8fafc; color: #64748b; cursor: default; }
.elm-input--short  { max-width: 200px; }
.elm-input--inline { width: auto; flex: 1; min-width: 180px; }
.elm-textarea { resize: vertical; min-height: 100px; }
.elm-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.elm-year-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }

/* ══════════════════════════════════════════════
   PROFILE GRID
══════════════════════════════════════════════ */
.elm-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}
.elm-profile-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s;
}
.elm-profile-item:hover { border-color: #c91b12; }
.elm-profile-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.elm-profile-value {
    font-size: 14.5px;
    color: #0f172a;
    font-weight: 500;
}

/* ══════════════════════════════════════════════
   NOTES
══════════════════════════════════════════════ */
.elm-notes-container { }

.elm-notes-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.elm-notes-header-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.elm-note-form-wrap {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
}

.elm-note-form-type-strip {
    background: linear-gradient(90deg,#f1f5f9,#e8edf5);
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 14px;
    border-left: 3px solid #c91b12;
}

/* Note type tabs */
.elm-notes-type-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 11px;
    width: fit-content;
}
.elm-ntype-tab {
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    transition: all .18s;
    cursor: pointer;
    font-family: inherit;
}
.elm-ntype-tab:hover { color: #0f172a; background: rgba(255,255,255,.7); }
.elm-ntype-tab--active { background: #fff; color: #c91b12; box-shadow: 0 1px 5px rgba(0,0,0,.1); }

/* Note card */
.elm-note-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 12px;
    transition: box-shadow .22s, transform .22s;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.elm-note-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.elm-note-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.elm-note-header-left { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.elm-note-title { font-size: 15px; font-weight: 700; margin: 0; color: #0f172a; }
.elm-note-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.elm-note-text { color: #475569; margin: 0 0 10px; white-space: pre-wrap; font-size: 14px; line-height: 1.7; }
.elm-note-meta { font-size: 11.5px; color: #94a3b8; margin: 0; }

.elm-note-toggle {
    background: none; border: 1px solid #e2e8f0; cursor: pointer;
    font-size: 11px; color: #64748b; padding: 2px 8px; border-radius: 6px;
    transition: background .15s, border-color .15s, color .15s; flex-shrink: 0; line-height: 1.6;
}
.elm-note-toggle:hover { background: #f1f5f9; border-color: #c91b12; color: #c91b12; }

.elm-note-card--collapsed .elm-note-header { margin-bottom: 0; }
.elm-note-card--collapsed .elm-note-body { display: none; }

.elm-note-badge {
    display: none; align-items: center; font-size: 11px; font-weight: 700;
    border-radius: 20px; padding: 1px 8px; line-height: 1.6; white-space: nowrap;
}
.elm-note-badge--comments { background: #dbeafe; color: #1d4ed8; }
.elm-note-badge--mentions  { background: #fce7f3; color: #9d174d; }
.elm-note-open-btn { text-decoration: none; }
.elm-note-body { }
.elm-note-single-view { max-width: 800px; }
.elm-note-back-btn { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; text-decoration: none; }
.elm-note-card--single { margin-bottom: 0; }

/* Member check grid */
.elm-member-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}
.elm-member-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: all .15s;
    background: #f8fafc;
}
.elm-member-check-item:hover { background: #f1f5f9; border-color: #c91b12; }
.elm-member-check-item input[type="checkbox"] { accent-color: #c91b12; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.elm-member-check-avatar {
    width: 32px; height: 32px;
    background: linear-gradient(135deg,#c91b12,#e53535);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.elm-member-check-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.elm-member-check-name { font-size: 13px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elm-member-check-role { font-size: 11px; color: #94a3b8; }

.elm-note-members { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.elm-note-member-avatar {
    width: 26px; height: 26px;
    background: linear-gradient(135deg,#c91b12,#e53535);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 700; cursor: default;
}

/* ══════════════════════════════════════════════
   NOTES COMMENTS
══════════════════════════════════════════════ */
.elm-note-comments { margin-top: 12px; border-top: 1px solid #f1f5f9; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.elm-note-comment { background: #f8fafc; border-radius: 10px; padding: 9px 14px; font-size: 13px; border: 1px solid #f1f5f9; }
.elm-note-comment strong { color: #0f172a; }
.elm-note-comment p { margin: 4px 0 0; color: #334155; }
.elm-note-comment--me { background: #fff5f5 !important; border-color: #fecaca !important; border-left: 3px solid #c91b12; }
.elm-note-comment-form { margin-top: 12px; }
.elm-note-comment-row { display: flex; gap: 8px; align-items: center; }

/* ══════════════════════════════════════════════
   REPLACEMENT CARDS
══════════════════════════════════════════════ */
.elm-replacement-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
    border-left: 4px solid #c91b12;
    transition: box-shadow .2s;
}
.elm-replacement-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.elm-replacement-header { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #0f172a; }
.elm-replacement-details { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #475569; }

/* ══════════════════════════════════════════════
   BALANCE INFO
══════════════════════════════════════════════ */
.elm-balance-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 13px 18px;
    margin-bottom: 18px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.elm-green { color: #059669; font-weight: 700; font-size: 20px; }
.elm-red   { color: #dc2626; font-weight: 700; font-size: 20px; }

/* ══════════════════════════════════════════════
   WORKING DAYS PREVIEW
══════════════════════════════════════════════ */
.elm-working-days-preview {
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #1d4ed8;
    margin-bottom: 12px;
}

/* ══════════════════════════════════════════════
   FILTER TABS
══════════════════════════════════════════════ */
.elm-filter-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 11px;
    width: fit-content;
}
.elm-tab {
    padding: 7px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: all .18s;
    cursor: pointer;
}
.elm-tab:hover { color: #0f172a; background: rgba(255,255,255,.7); }
.elm-tab--active { background: #fff; color: #c91b12; box-shadow: 0 1px 5px rgba(0,0,0,.1); }

/* ══════════════════════════════════════════════
   SEARCH + ACTIONS
══════════════════════════════════════════════ */
.elm-search-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.elm-search-form .elm-input { max-width: 240px; }
.elm-mgr-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.elm-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ══════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════ */
.elm-empty {
    text-align: center;
    padding: 60px 24px;
    color: #94a3b8;
    font-size: 15px;
}
.elm-empty::before {
    content: '📭';
    display: block;
    font-size: 44px;
    margin-bottom: 14px;
    filter: grayscale(.3);
}

/* ══════════════════════════════════════════════
   CHAT
══════════════════════════════════════════════ */
.elm-chat-wrap {
    display: flex;
    height: calc(100vh - 140px);
    min-height: 500px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.elm-chat-sidebar {
    width: 280px; flex-shrink: 0;
    border-right: 1px solid #e2e8f0;
    display: flex; flex-direction: column; background: #fff;
}
.elm-chat-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 14px; border-bottom: 1px solid #f1f5f9; background: #fafbfc;
}
.elm-chat-sidebar-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.elm-chat-new-group-btn {
    width: 30px; height: 30px;
    background: linear-gradient(135deg,#c91b12,#e02b21);
    color: #fff; border: none; border-radius: 50%;
    font-size: 20px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s, box-shadow .18s; line-height: 1;
}
.elm-chat-new-group-btn:hover { transform: scale(1.1); box-shadow: 0 3px 10px rgba(201,27,18,.35); }
.elm-chat-rooms { flex: 1; overflow-y: auto; }
.elm-chat-loading { padding: 24px 16px; color: #94a3b8; font-size: 13px; text-align: center; }
.elm-chat-room-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; cursor: pointer;
    border-bottom: 1px solid #f8fafc; transition: background .15s;
}
.elm-chat-room-item:hover { background: #f8fafc; }
.elm-chat-room-item--active { background: #fff5f5 !important; border-left: 3px solid #c91b12; }
.elm-chat-room-ava {
    width: 44px; height: 44px;
    background: linear-gradient(135deg,#1e293b,#334155);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.elm-chat-room-ava--general { background: linear-gradient(135deg,#1d4ed8,#3b82f6); }
.elm-chat-room-ava--group   { background: linear-gradient(135deg,#059669,#10b981); }
.elm-chat-room-info { flex: 1; min-width: 0; }
.elm-chat-room-info-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.elm-chat-room-info-name { font-size: 13.5px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.elm-chat-room-info-time { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.elm-chat-room-info-last { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.elm-chat-unread { background: #c91b12; color: #fff; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 1px 7px; min-width: 20px; text-align: center; flex-shrink: 0; }
.elm-chat-panel { flex: 1; display: flex; flex-direction: column; background: #f4f6fb; min-width: 0; }
.elm-chat-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; gap: 10px; }
.elm-chat-placeholder-icon { font-size: 56px; }
.elm-chat-placeholder p { font-size: 15px; }
.elm-chat-active { display: none; flex-direction: column; height: 100%; }
.elm-chat-active.elm-chat-active--show { display: flex; }
.elm-chat-panel-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #fff; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.elm-chat-back-btn { display: none; background: none; border: none; cursor: pointer; font-size: 22px; color: #64748b; padding: 2px 8px; border-radius: 8px; transition: background .15s; }
.elm-chat-back-btn:hover { background: #f1f5f9; }
.elm-chat-room-avatar { font-size: 28px; flex-shrink: 0; }
.elm-chat-room-meta { flex: 1; min-width: 0; }
.elm-chat-room-name { font-size: 15px; font-weight: 700; color: #0f172a; }
.elm-chat-room-sub  { font-size: 12px; color: #64748b; margin-top: 1px; }
.elm-chat-messages { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; scroll-behavior: smooth; }
.elm-chat-day-sep { text-align: center; font-size: 11px; color: #94a3b8; margin: 10px 0; position: relative; }
.elm-chat-day-sep::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e2e8f0; }
.elm-chat-day-sep span { background: #f4f6fb; padding: 0 10px; position: relative; z-index: 1; }
.elm-chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 72%; margin-bottom: 4px; }
.elm-chat-msg--me    { margin-left: auto; flex-direction: row-reverse; }
.elm-chat-msg--other { margin-right: auto; }
.elm-chat-msg-ava { width: 30px; height: 30px; background: linear-gradient(135deg,#475569,#64748b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.elm-chat-msg-body { display: flex; flex-direction: column; }
.elm-chat-msg-author { font-size: 11px; color: #64748b; font-weight: 600; margin-bottom: 3px; padding: 0 2px; }
.elm-chat-msg--me .elm-chat-msg-author { text-align: right; }
.elm-chat-bubble { padding: 9px 14px; border-radius: 18px; font-size: 14px; line-height: 1.55; word-break: break-word; }
.elm-chat-msg--other .elm-chat-bubble { background: #fff; color: #0f172a; border-radius: 4px 18px 18px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.elm-chat-msg--me    .elm-chat-bubble { background: linear-gradient(135deg,#c91b12,#e02b21); color: #fff; border-radius: 18px 4px 18px 18px; box-shadow: 0 2px 8px rgba(201,27,18,.25); }
.elm-chat-msg-time { font-size: 10.5px; color: #94a3b8; margin-top: 3px; padding: 0 4px; }
.elm-chat-msg--me .elm-chat-msg-time { text-align: right; }
.elm-chat-attach-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 4px 10px; background: rgba(255,255,255,.25); border-radius: 8px; font-size: 12px; text-decoration: none; color: inherit; }
.elm-chat-msg--other .elm-chat-attach-link { background: #f1f5f9; color: #334155; }
.elm-chat-typing { min-height: 18px; padding: 2px 18px; font-size: 12px; color: #94a3b8; font-style: italic; }
.elm-chat-input-bar { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; background: #fff; border-top: 1px solid #e2e8f0; flex-shrink: 0; }
.elm-chat-attach { cursor: pointer; font-size: 20px; padding: 6px; border-radius: 50%; background: none; transition: background .15s; flex-shrink: 0; line-height: 1; }
.elm-chat-attach:hover { background: #f1f5f9; }
.elm-chat-attach input { display: none; }
.elm-chat-file-prev { font-size: 11px; color: #64748b; }
.elm-chat-textarea { flex: 1; border: 1.5px solid #e2e8f0; border-radius: 22px; padding: 10px 16px; font-size: 14px; font-family: inherit; resize: none; outline: none; max-height: 120px; overflow-y: auto; transition: border-color .18s; line-height: 1.5; background: #f8fafc; }
.elm-chat-textarea:focus { border-color: #c91b12; background: #fff; }
.elm-chat-send { width: 42px; height: 42px; background: linear-gradient(135deg,#c91b12,#e02b21); color: #fff; border: none; border-radius: 50%; font-size: 16px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform .18s, box-shadow .18s; box-shadow: 0 2px 8px rgba(201,27,18,.3); }
.elm-chat-send:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(201,27,18,.42); }
/* Header chat button */
.elm-header-chat-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: #f8fafc; border: 1px solid #e2e8f0;
    text-decoration: none; transition: background .15s, border-color .15s;
    flex-shrink: 0;
}
.elm-header-chat-btn:hover { background: #fff0f0; border-color: #c91b12; }
.elm-header-chat-icon { font-size: 18px; line-height: 1; }
.elm-header-chat-badge {
    position: absolute; top: -4px; right: -4px;
    background: #c91b12; color: #fff;
    font-size: 10px; font-weight: 800;
    border-radius: 20px; padding: 1px 5px;
    min-width: 18px; text-align: center;
    border: 2px solid #fff;
    line-height: 1.4;
}
.elm-header-chat-badge--mention {
    background: #9d174d;
}
/* Chat mention tag */
.elm-chat-mention-tag {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.22); color: inherit;
    border-radius: 20px; padding: 1px 8px;
    font-weight: 700; font-size: 13px; margin-right: 3px;
}
.elm-chat-msg--other .elm-chat-mention-tag { background: #eff6ff; color: #1d4ed8; }
/* Mention autocomplete dropdown */
.elm-chat-mention-dropdown {
    position: absolute; bottom: 100%; left: 0; right: 0;
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,.1);
    max-height: 200px; overflow-y: auto; z-index: 50;
}
.elm-chat-mention-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; cursor: pointer; transition: background .12s;
    font-size: 13.5px;
}
.elm-chat-mention-item:hover, .elm-chat-mention-item.elm-active { background: #fff5f5; }
.elm-chat-mention-ava {
    width: 28px; height: 28px;
    background: linear-gradient(135deg,#c91b12,#e53535);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.elm-chat-input-wrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.elm-chat-input-wrap .elm-chat-textarea { width: 100%; }
/* Highlighted bubble when mentioned */
.elm-chat-bubble--mentioned {
    box-shadow: 0 0 0 2px #fde68a, 0 2px 10px rgba(245,158,11,.2) !important;
    background: #fffbeb !important; color: #0f172a !important;
}

.elm-chat-members-btn {
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 9px;
    cursor: pointer; font-size: 18px; padding: 6px 10px;
    transition: background .15s, border-color .15s; flex-shrink: 0; line-height: 1;
}
.elm-chat-members-btn:hover { background: #fff0f0; border-color: #c91b12; }
.elm-member-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px; border: 1px solid #f1f5f9;
    margin-bottom: 6px; background: #fafafa; transition: background .15s;
}
.elm-member-row:hover { background: #f1f5f9; }
.elm-members-list { max-height: 250px; overflow-y: auto; }
@media (max-width: 700px) {
    .elm-chat-wrap { height: calc(100vh - 100px); border-radius: 10px; }
    .elm-chat-sidebar { width: 100%; border-right: none; }
    .elm-chat-sidebar--hidden { display: none; }
    .elm-chat-panel { display: none; position: absolute; inset: 0; z-index: 10; }
    .elm-chat-panel--active { display: flex; }
    .elm-chat-back-btn { display: flex; }
}

/* ══════════════════════════════════════════════
   REGISTRATION PAGE (old wrap — unused)
══════════════════════════════════════════════ */
.elm-register-wrap { max-width: 700px; margin: 40px auto; }

/* ══════════════════════════════════════════════
   ADMIN PANEL (wp-admin)
══════════════════════════════════════════════ */
.elm-wrap { max-width: 1200px; font-family: 'Segoe UI', system-ui, Arial, sans-serif; }
.elm-page-title { font-size: 24px; font-weight: 700; margin: 0 0 20px; color: #0f172a; }
.elm-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.elm-dashboard-header {
    background: linear-gradient(135deg, #c91b12 0%, #8b1009 100%);
    color: #fff;
    padding: 28px 32px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 6px 24px rgba(201,27,18,.3);
}
.elm-dashboard-title { font-size: 26px; font-weight: 700; margin: 0 0 6px; color: #fff; }
.elm-dashboard-user  { margin: 0; color: rgba(255,255,255,.8); font-size: 15px; }

/* Admin tabs */
.elm-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid #e2e8f0;
}
.elm-tab-link {
    padding: 10px 18px;
    border-radius: 8px 8px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    transition: all .18s;
    background: #f8fafc;
    margin-bottom: -2px;
}
.elm-tab-link:hover { color: #c91b12; background: #fff; }
.elm-tab-link--active { color: #c91b12; background: #fff; border-color: #e2e8f0; border-bottom-color: #fff; }

/* ══════════════════════════════════════════════
   TIME TRACKING
══════════════════════════════════════════════ */
.elm-time-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
}
.elm-time-status-box { display: flex; align-items: center; gap: 10px; }
.elm-time-status-label { font-size: 13px; font-weight: 600; color: #64748b; }
.elm-time-info-item { font-size: 13px; color: #334155; }
.elm-time-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* Break locked */
.elm-break-locked {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 60vh; text-align: center; padding: 40px;
}
.elm-break-locked-icon { font-size: 72px; margin-bottom: 16px; line-height: 1; }
.elm-break-locked-title { font-size: 26px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.elm-break-locked-time { font-size: 15px; color: #64748b; margin-bottom: 8px; }
.elm-break-locked-desc { font-size: 14px; color: #94a3b8; }

/* ══════════════════════════════════════════════
   IT SYSTEM
══════════════════════════════════════════════ */
.elm-urgency {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 100px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.elm-urgency--low    { background: #f0fdf4; color: #065f46; border: 1px solid #a7f3d0; }
.elm-urgency--medium { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.elm-urgency--high   { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.elm-urgency--urgent { background: #fff5f5; color: #991b1b; border: 1px solid #fecaca; }

.elm-it-chat { margin-top: 24px; }
.elm-it-chat-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: #0f172a; }
.elm-it-message { max-width: 72%; margin-bottom: 12px; }
.elm-it-message--me    { margin-left: auto; }
.elm-it-message--other { margin-right: auto; }
.elm-it-message-author { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
.elm-it-message--me .elm-it-message-author { text-align: right; }
.elm-it-message-body {
    padding: 10px 14px; border-radius: 14px;
    font-size: 14px; line-height: 1.6;
}
.elm-it-message--me    .elm-it-message-body { background: #c91b12; color: #fff; border-radius: 14px 14px 3px 14px; }
.elm-it-message--other .elm-it-message-body { background: #f1f5f9; color: #0f172a; border-radius: 14px 14px 14px 3px; }
.elm-it-msg-form { margin-top: 16px; border-top: 1px solid #e2e8f0; padding-top: 16px; }

/* ══════════════════════════════════════════════
   LATE NOTICES (manager view)
══════════════════════════════════════════════ */
.elm-late-notices-box {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 22px;
}
.elm-late-notices-title {
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 12px;
}
.elm-late-notice {
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 8px;
}
.elm-late-notice--unread {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.1);
}
.elm-late-notice:last-child { margin-bottom: 0; }
.elm-late-notice-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.elm-late-notice-meta strong { color: #0f172a; font-size: 13.5px; }
.elm-late-notice-time { font-size: 12px; color: #059669; font-weight: 600; background: #ecfdf5; padding: 2px 8px; border-radius: 20px; }
.elm-late-notice-ts { font-size: 11px; color: #94a3b8; margin-left: auto; }
.elm-late-notice-reason { font-size: 13px; color: #475569; margin: 0; }

/* ══════════════════════════════════════════════
   LATE ARRIVAL MODAL
══════════════════════════════════════════════ */
.elm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.elm-modal-box {
    background: #fff;
    border-radius: 20px;
    padding: 32px 30px 28px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1);
    animation: elm-modal-in .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes elm-modal-in {
    from { transform: scale(.9) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0);    opacity: 1; }
}

.elm-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.elm-modal-icon { font-size: 32px; line-height: 1; }
.elm-modal-title { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0; }

.elm-modal-desc {
    font-size: 14px;
    color: #475569;
    margin-bottom: 16px;
    line-height: 1.65;
}
.elm-modal-time { color: #c91b12; }

.elm-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════
   HEADER TIME TRACKING BUTTONS
══════════════════════════════════════════════ */
.elm-header-time {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.elm-htime-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    line-height: 1.4;
    transition: transform .18s, box-shadow .18s, opacity .18s;
    white-space: nowrap;
}
.elm-htime-btn:hover  { transform: translateY(-1px); }
.elm-htime-btn:active { transform: none; opacity: .85; }
.elm-htime-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.elm-htime-btn--warn   {
    background: #fff;
    color: #92400e;
    border: 1.5px solid #fde68a;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.elm-htime-btn--warn:hover { background: #fffbeb; border-color: #f59e0b; box-shadow: 0 3px 10px rgba(245,158,11,.2); }

.elm-htime-btn--start  {
    background: linear-gradient(135deg,#16a34a,#22c55e);
    color: #fff;
    box-shadow: 0 2px 8px rgba(22,163,74,.3);
}
.elm-htime-btn--start:hover { box-shadow: 0 4px 14px rgba(22,163,74,.45); }

.elm-htime-btn--break  {
    background: #fff;
    color: #92400e;
    border: 1.5px solid #fde68a;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.elm-htime-btn--break:hover { background: #fffbeb; border-color: #f59e0b; box-shadow: 0 3px 10px rgba(245,158,11,.2); }

.elm-htime-btn--end    {
    background: linear-gradient(135deg,#c91b12,#e02b21);
    color: #fff;
    box-shadow: 0 2px 8px rgba(201,27,18,.28);
}
.elm-htime-btn--end:hover { box-shadow: 0 4px 14px rgba(201,27,18,.42); }

.elm-htime-btn--return {
    background: linear-gradient(135deg,#059669,#10b981);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16,185,129,.28);
}
.elm-htime-btn--return:hover { box-shadow: 0 4px 14px rgba(16,185,129,.42); }

.elm-htime-done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #f0fdf4;
    border: 1.5px solid #a7f3d0;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: #065f46;
    white-space: nowrap;
}

.elm-htime-icon { font-size: 14px; line-height: 1; }
.elm-htime-label { }

/* ══════════════════════════════════════════════
   HEADER CLOCK
══════════════════════════════════════════════ */
.elm-header-clock {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 1px; padding-right: 2px;
}
.elm-header-clock-date {
    font-size: 10.5px; color: #94a3b8;
    font-weight: 600; letter-spacing: .05em;
}
.elm-header-clock-time {
    font-size: 19px; font-weight: 800; color: #0f172a;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ══════════════════════════════════════════════
   TYPING INDICATOR
══════════════════════════════════════════════ */
.elm-typing-indicator { min-height: 22px; padding: 2px 0 4px; }
.elm-typing-text {
    font-size: 12px; color: #94a3b8; font-style: italic;
    display: inline-flex; align-items: center; gap: 5px;
    animation: elm-blink 1.2s ease-in-out infinite;
}
@keyframes elm-blink {
    0%,100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* ══════════════════════════════════════════════
   MENTION + ATTACHMENT
══════════════════════════════════════════════ */
.elm-mention {
    display: inline-flex; align-items: center;
    background: #eff6ff; color: #1d4ed8;
    border: 1px solid #bfdbfe; border-radius: 100px;
    padding: 1px 8px; font-size: 11.5px; font-weight: 700;
    margin-right: 4px; cursor: default;
}
.elm-note-comment--me .elm-mention { background: #fff0f0; color: #c91b12; border-color: #fecaca; }
.elm-comment-attachment {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px; padding: 4px 10px;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 7px; font-size: 12px; color: #334155;
    text-decoration: none; transition: background .15s;
}
.elm-comment-attachment:hover { background: #e2e8f0; color: #0f172a; }
.elm-comment-file-label { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.elm-comment-file-preview { font-size: 11px; color: #64748b; margin-top: 3px; }

/* ══════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════ */
.elm-login-page {
    display: flex; height: 100vh; overflow: hidden;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.elm-login-brand {
    width: 440px; flex-shrink: 0;
    background: linear-gradient(150deg, #c91b12 0%, #6b0d09 100%);
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.elm-login-brand-inner { padding: 52px 48px; position: relative; z-index: 2; }
.elm-login-logo {
    font-size: 44px; font-weight: 900; color: #fff;
    letter-spacing: 5px; margin-bottom: 28px; line-height: 1;
}
.elm-login-logo span { color: rgba(255,255,255,.35); }
.elm-login-headline { font-size: 38px; font-weight: 800; color: #fff; line-height: 1.15; margin: 0 0 18px; }
.elm-login-brand-desc { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.8; }
.elm-dec-circle { position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.elm-dec-circle--1 { width: 360px; height: 360px; top: -120px; right: -100px; }
.elm-dec-circle--2 { width: 220px; height: 220px; bottom: 60px; right: -50px; }
.elm-dec-circle--3 { width: 130px; height: 130px; bottom: -30px; left: 30px; }
.elm-login-form-panel {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: #fff; overflow-y: auto;
}
.elm-login-form-inner { width: 100%; max-width: 440px; padding: 52px 44px; }
.elm-login-role-badge {
    display: inline-flex; align-items: center;
    background: #fff0f0; color: #c91b12; border: 1.5px solid #fecaca;
    border-radius: 100px; padding: 5px 16px; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 22px;
}
.elm-login-title { font-size: 32px; font-weight: 800; color: #0f172a; margin: 0 0 10px; line-height: 1.2; }
.elm-login-subtitle { font-size: 14px; color: #64748b; line-height: 1.65; margin: 0 0 34px; }
.elm-login-form-fields { display: flex; flex-direction: column; gap: 20px; }
.elm-login-field { display: flex; flex-direction: column; gap: 7px; }
.elm-login-label { font-size: 13px; font-weight: 600; color: #374151; letter-spacing: .01em; }
.elm-login-input-wrap { position: relative; }
.elm-login-input {
    width: 100%; padding: 14px 16px; border: 1.5px solid #e5e7eb;
    border-radius: 11px; font-size: 15px; color: #0f172a;
    background: #f9fafb; transition: all .2s; font-family: inherit; outline: none;
}
.elm-login-input:focus { border-color: #c91b12; background: #fff; box-shadow: 0 0 0 4px rgba(201,27,18,.09); }
.elm-pw-toggle {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 16px;
    padding: 4px; opacity: .4; transition: opacity .2s; line-height: 1;
}
.elm-pw-toggle:hover { opacity: .85; }
.elm-login-row { display: flex; align-items: center; font-size: 13.5px; color: #64748b; }
.elm-login-remember {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 13.5px; color: #475569;
}
.elm-login-remember input { accent-color: #c91b12; width: 15px; height: 15px; cursor: pointer; }
.elm-login-submit {
    width: 100%; padding: 16px;
    background: linear-gradient(135deg, #c91b12, #e02b21);
    color: #fff; border: none; border-radius: 11px;
    font-size: 16px; font-weight: 700; cursor: pointer;
    transition: all .2s; font-family: inherit; letter-spacing: .03em;
    box-shadow: 0 4px 18px rgba(201,27,18,.32); margin-top: 4px;
}
.elm-login-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(201,27,18,.44); }
.elm-login-submit:active { transform: none; }

/* ══════════════════════════════════════════════
   REGISTRATION PAGE
══════════════════════════════════════════════ */
.elm-reg-page .elm-login-brand { width: 380px; }

.elm-reg-inner {
    max-width: 560px;
    padding: 40px 44px;
}

.elm-reg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.elm-reg-full { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .elm-reg-page .elm-login-brand { display: none; }
    .elm-reg-inner { padding: 36px 24px; max-width: 100%; }
}

@media (max-width: 560px) {
    .elm-reg-grid { grid-template-columns: 1fr; }
    .elm-reg-full { grid-column: 1; }
}

/* ══════════════════════════════════════════════
   PRINT VIEW
══════════════════════════════════════════════ */
@media print {
    .elm-print-toolbar { display: none !important; }
    .no-print          { display: none !important; }
    body               { background: #fff !important; }
}

/* ══════════════════════════════════════════════
   ADMIN OVERRIDE
══════════════════════════════════════════════ */
#wpcontent .elm-wrap .elm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 960px)
══════════════════════════════════════════════ */
@media (max-width: 960px) {
    .elm-layout {
        border-radius: 16px;
        min-height: unset;
    }

    /* Sidebar becomes a slide-in drawer */
    .elm-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: 260px;
        transform: translateX(-100%);
        border-radius: 0;
        box-shadow: 4px 0 24px rgba(0,0,0,.22);
        z-index: 300;
    }
    .elm-sidebar--open {
        transform: translateX(0);
    }

    .elm-sidebar-close {
        display: flex;
    }

    .elm-menu-toggle {
        display: flex;
    }

    .elm-main {
        width: 100%;
    }

    .elm-main-content { padding: 18px 18px; }
    .elm-main-header  { padding: 0 18px; }

    .elm-form-grid, .elm-form-row { grid-template-columns: 1fr; }
    .elm-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .elm-mgr-actions { flex-direction: column; align-items: flex-start; }

    #wpcontent .elm-wrap .elm-form-grid { grid-template-columns: 1fr; }

    .elm-login-brand { width: 340px; }
    .elm-login-form-inner { padding: 40px 28px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — PHONE (≤ 640px)
══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .elm-layout { border-radius: 10px; }

    .elm-main-header { height: 56px; padding: 0 14px; }
    .elm-main-title  { font-size: 15px; }
    .elm-main-content { padding: 14px; }

    .elm-user-name    { display: none; }
    .elm-header-clock { display: none; }
    .elm-htime-label  { display: none; }
    .elm-htime-btn, .elm-htime-done { padding: 7px 10px; }
    .elm-htime-icon   { font-size: 16px; }

    .elm-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .elm-stat-value { font-size: 26px; }

    .elm-card { padding: 16px; border-radius: 14px; }

    .elm-table th, .elm-table td { padding: 9px 10px; font-size: 12px; }
    .elm-page-header { flex-direction: column; align-items: flex-start; }

    .elm-notes-header-btns { width: 100%; }
    .elm-notes-header-btns .elm-btn { flex: 1; justify-content: center; }
    .elm-notes-type-tabs { width: 100%; }
    .elm-ntype-tab { flex: 1; text-align: center; }

    .elm-note-card { padding: 14px 15px; }
    .elm-note-actions { width: 100%; justify-content: flex-end; }

    .elm-it-message { max-width: 88%; }

    .elm-login-brand { display: none; }
    .elm-login-form-inner { padding: 36px 22px; }
    .elm-login-title { font-size: 26px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — SMALL PHONE (≤ 420px)
══════════════════════════════════════════════ */
@media (max-width: 420px) {
    .elm-stats-grid { grid-template-columns: 1fr; }
    .elm-member-check-grid { grid-template-columns: 1fr; }
    .elm-form-row { grid-template-columns: 1fr; }
    .elm-btn--lg { padding: 11px 22px; font-size: 14px; }
}