/* ── Day Order Page Styles ── */
.do-card {
    background: #fff;
    border-radius: 14px;
    padding: 26px 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
    margin-bottom: 24px;
}
.do-card h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
}
.do-card h4 .badge-count {
    background: #eff6ff;
    color: #3b82f6;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}
.form-label-sm {
    font-weight: 600;
    color: #475569;
    font-size: 0.85rem;
    margin-bottom: 6px;
    display: block;
}
.form-ctrl {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 9px 13px;
    font-size: 0.9rem;
    color: #334155;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: auto;
}
.form-ctrl:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.btn-save {
    width: 100%;
    background: linear-gradient(135deg,#3b82f6,#6366f1);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 11px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(99,102,241,0.28);
    transition: opacity 0.2s, transform 0.15s;
}
.btn-save:hover { opacity: .9; transform: translateY(-1px); }

/* Table */
.do-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.do-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 11px 14px;
    border-bottom: 1px solid #e2e8f0;
    border-top: none;
}
.do-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}
.do-table tbody tr:hover { background: #f8fafc; }
.badge-active  { background:#dcfce7; color:#166534; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-inactive{ background:#fee2e2; color:#991b1b; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-ins  { background:#dbeafe; color:#1d4ed8; padding:3px 9px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-upd  { background:#fef9c3; color:#854d0e; padding:3px 9px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-del  { background:#fee2e2; color:#991b1b; padding:3px 9px; border-radius:20px; font-size:.72rem; font-weight:700; }

/* Action buttons */
.btn-edit {
    background: #eff6ff;
    color: #3b82f6;
    border: none;
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.btn-edit:hover { background: #dbeafe; }
.btn-del {
    background: #fff1f2;
    color: #e11d48;
    border: none;
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.btn-del:hover { background: #ffe4e6; }

/* Modal */
.do-modal-bg {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(3px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.do-modal-bg.open { display: flex; }
.do-modal {
    background: #fff;
    border-radius: 16px;
    padding: 30px 28px;
    width: 420px;
    max-width: 96vw;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    position: relative;
    animation: slideIn .22s ease;
}
@keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.do-modal h5 { font-family:'Outfit',sans-serif; font-weight:700; color:#1e293b; margin-bottom:20px; font-size:1.05rem; }
.do-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: #f1f5f9; border: none; border-radius: 50%;
    width: 30px; height: 30px; cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; transition: background .2s;
}
.do-modal-close:hover { background: #e2e8f0; }

/* Log diff display */
.log-diff {
    font-size: 0.78rem;
    color: #64748b;
}
.log-diff .chg { color: #d97706; font-weight: 600; }

/* ── Dark Theme Overrides for Day Order ── */
body.dark-theme .do-card {
    background: var(--surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
}
body.dark-theme .do-card h4 {
    color: var(--text, #f1f5f9) !important;
}
body.dark-theme .form-ctrl {
    background: #0f172a !important;
    border-color: var(--border, #334155) !important;
    color: var(--text, #f1f5f9) !important;
}
body.dark-theme .form-label-sm {
    color: var(--muted, #94a3b8) !important;
}
body.dark-theme .do-table thead th {
    background: #0f172a !important;
    color: var(--muted, #94a3b8) !important;
    border-bottom-color: var(--border, #334155) !important;
}
body.dark-theme .do-table tbody td {
    border-bottom-color: var(--border, #334155) !important;
    color: var(--text, #f1f5f9) !important;
}
body.dark-theme .do-table tbody tr:hover {
    background: var(--border, #334155) !important;
}
body.dark-theme .badge-active { background: #052e16 !important; color: #4ade80 !important; }
body.dark-theme .badge-inactive { background: #2d0a0a !important; color: #f87171 !important; }
body.dark-theme .badge-ins { background: #0c1a2e !important; color: #60a5fa !important; }
body.dark-theme .badge-upd { background: #1c1100 !important; color: #fbbf24 !important; }
body.dark-theme .badge-del { background: #2d0a0a !important; color: #f87171 !important; }

body.dark-theme .btn-edit { background: #0c1a2e !important; color: #60a5fa !important; }
body.dark-theme .btn-edit:hover { background: #1e3a8a !important; }
body.dark-theme .btn-del { background: #2d0a0a !important; color: #f87171 !important; }
body.dark-theme .btn-del:hover { background: #7f1d1d !important; }

body.dark-theme .do-modal {
    background: var(--surface, #1e293b) !important;
}
body.dark-theme .do-modal h5 {
    color: var(--text, #f1f5f9) !important;
}
body.dark-theme .do-modal-close {
    background: #0f172a !important;
    color: var(--muted, #94a3b8) !important;
}
body.dark-theme .do-modal-close:hover { background: #334155 !important; }
body.dark-theme .log-diff { color: var(--muted, #94a3b8) !important; }
body.dark-theme td[style*="color:#334155"] { color: var(--text, #f1f5f9) !important; }