/* Clinic Manager Pro - Styles */
:root {
    --cm-primary: #4f46e5;
    --cm-primary-dark: #4338ca;
    --cm-success: #059669;
    --cm-warning: #d97706;
    --cm-danger: #dc2626;
    --cm-info: #0891b2;
    --cm-light: #f8fafc;
    --cm-border: #e7e9f1;
    --cm-text: #0f172a;
    --cm-text-light: #64748b;
    --cm-white: #ffffff;
    --cm-shadow: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
    --cm-shadow-md: 0 8px 20px -6px rgba(15,23,42,.12);
    --cm-radius: 12px;
}

* { box-sizing: border-box; }

.cm-wrap { max-width: 1600px; margin: 0 auto; padding: 20px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--cm-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* Header */
.cm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--cm-border); }
.cm-header h1 { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--cm-text); display: flex; align-items: center; gap: 10px; }
.cm-header h1 i { color: var(--cm-primary); font-size: 1.15rem; }
.cm-date { font-size: 0.82rem; font-weight: 500; color: var(--cm-text-light); background: var(--cm-light); padding: 6px 14px; border-radius: 20px; border: 1px solid var(--cm-border); }

/* Cards */
.cm-card { background: var(--cm-white); border-radius: var(--cm-radius); padding: 22px; margin-bottom: 20px; box-shadow: var(--cm-shadow); border: 1px solid var(--cm-border); }
.cm-card h3 { margin: 0 0 18px; font-size: .96rem; font-weight: 700; color: var(--cm-text); display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--cm-border); }
.cm-card h3 i { color: var(--cm-primary); }

/* Dashboard Stats */
.cm-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.cm-stat-card { background: var(--cm-white); border-radius: var(--cm-radius); padding: 20px; box-shadow: var(--cm-shadow); border: 1px solid var(--cm-border); border-left: 3px solid var(--cm-primary); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.cm-stat-card:hover { transform: translateY(-2px); box-shadow: var(--cm-shadow-md); }
.cm-stat-card.success { border-color: var(--cm-success); }
.cm-stat-card.warning { border-color: var(--cm-warning); }
.cm-stat-card.danger { border-color: var(--cm-danger); }
.cm-stat-card.info { border-color: var(--cm-info); }
.cm-stat-label { font-size: 0.74rem; color: var(--cm-text-light); text-transform: uppercase; font-weight: 600; letter-spacing: .5px; margin-bottom: 10px; }
.cm-stat-value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; color: var(--cm-text); line-height: 1; }
.cm-stat-icon { font-size: 1.3rem; margin-bottom: 10px; width: 38px; height: 38px; border-radius: 9px; background: var(--cm-accent-soft, #eef2ff); display: flex; align-items: center; justify-content: center; color: var(--cm-primary); }
.cm-stat-card.success .cm-stat-icon { color: var(--cm-success); background: #dcfce7; }
.cm-stat-card.warning .cm-stat-icon { color: var(--cm-warning); background: #fef3c7; }
.cm-stat-card.danger .cm-stat-icon { color: var(--cm-danger); background: #fee2e2; }
.cm-stat-card.info .cm-stat-icon { color: var(--cm-info); background: #e0f2fe; }

/* Grids */
.cm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.cm-full-width { grid-column: 1 / -1; }
.text-center { text-align: center; }
@media (max-width: 900px) { .cm-grid-2, .cm-grid-3 { grid-template-columns: 1fr; } }

/* Forms */
.cm-form-group { display: flex; flex-direction: column; gap: 6px; }
.cm-form-group label { font-size: 0.78rem; font-weight: 600; color: var(--cm-text-light); text-transform: uppercase; letter-spacing: .3px; }
.cm-input { width: 100%; padding: 9px 12px; border: 1px solid var(--cm-border); border-radius: 8px; font-size: 0.88rem; color: var(--cm-text); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; background: var(--cm-white); font-family: inherit; }
.cm-input:focus { outline: none; border-color: var(--cm-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.cm-input::placeholder { color: #a1a9ba; }
select.cm-input { cursor: pointer; }

/* Buttons */
.cm-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .15s; white-space: nowrap; font-family: inherit; }
.cm-btn { background: var(--cm-primary); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.25); }
.cm-btn:hover { background: var(--cm-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(79,70,229,.3); }
.cm-btn:active { transform: translateY(0); }
.cm-btn-success { background: var(--cm-success) !important; box-shadow: 0 1px 2px rgba(5,150,105,.25); }
.cm-btn-success:hover { background: #047857 !important; }
.cm-btn-secondary { background: var(--cm-white) !important; color: var(--cm-text) !important; border-color: var(--cm-border) !important; box-shadow: none !important; }
.cm-btn-secondary:hover { background: var(--cm-light) !important; border-color: #cbd5e1 !important; }
.cm-btn-warning { background: var(--cm-warning) !important; }
.cm-btn-danger { background: var(--cm-danger) !important; color: #fff !important; }
.cm-btn-sm { padding: 6px 12px !important; font-size: 0.76rem !important; }

/* Search Box */
.cm-search-box { display: flex; gap: 10px; margin-bottom: 15px; }
.cm-search-box .cm-input { flex: 1; }

/* Tabs */
.cm-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; background: var(--cm-light); padding: 5px; border-radius: 10px; border: 1px solid var(--cm-border); width: fit-content; }
.cm-tab { padding: 8px 16px; border-radius: 7px; font-size: 0.83rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--cm-text-light); transition: all .15s; display: flex; align-items: center; gap: 6px; }
.cm-tab:hover { color: var(--cm-primary); }
.cm-tab.active { background: var(--cm-white); color: var(--cm-primary); border-color: var(--cm-border); box-shadow: var(--cm-shadow); }

/* Tables — wide tables (many columns / action buttons, e.g. Patient List,
   Bill History, Sales Record) used to have no horizontal-scroll boundary,
   so once a row got too wide the *whole page* stretched sideways instead
   of just the table. Scroll containment now lives on .cm-card (the
   table's actual parent everywhere) instead of on the <table> itself —
   putting display:block directly on a <table> makes the browser generate
   an anonymous inner table box that IGNORES width:100% and shrinks to fit
   its content, which is exactly why tables were rendering far narrower
   than their card (visible as a half-empty page). A real <table
   width:100%> fills its container properly; .cm-card just needs to catch
   the rare case content is still wider than that. */
.cm-card { overflow-x: auto; }
.cm-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.86rem; border-radius: 10px; border: 1px solid var(--cm-border); }
.cm-table th { background: #f1f5f9; color: #475569; font-size: 0.72rem; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cm-border); white-space: nowrap; }
.cm-table td { padding: 9px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.cm-table tr:last-child td { border-bottom: none; }
.cm-table tbody tr:nth-child(even) { background: #fbfcfe; }
.cm-table tr:hover { background: #eef2ff !important; }
.cm-table td b { color: #1e293b; }

/* Badges */
.cm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 20px; font-size: 0.71rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.cm-badge-waiting { background: #fef3c7; color: #92400e; }
.cm-badge-consultation { background: #dbeafe; color: #1e40af; }
.cm-badge-completed { background: #dcfce7; color: #14532d; }
.cm-badge-danger { background: #fee2e2; color: #991b1b; }
.cm-badge-warning { background: #fef3c7; color: #92400e; }
.cm-badge-info { background: #e0f2fe; color: #075985; }


/* Token Cards — stacked layout so long content (addon chips, badges)
   wraps cleanly instead of squeezing everything into one row. */
.cm-token-list { display: flex; flex-direction: column; gap: 10px; max-height: 450px; overflow-y: auto; }
.cm-token-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--cm-border); background: var(--cm-white); cursor: pointer; transition: all .2s; }
.cm-token-item:hover { border-color: var(--cm-primary); box-shadow: var(--cm-shadow-md); }
.cm-token-item-top { display: flex; align-items: center; gap: 12px; }
.cm-token-no { flex-shrink: 0; font-size: 1.15rem; font-weight: 800; color: var(--cm-primary); min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; background: #eff6ff; border-radius: 8px; padding: 0 6px; }
.cm-token-info { flex: 1; min-width: 0; }
.cm-token-name { font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; }
.cm-token-meta { font-size: 0.78rem; color: var(--cm-text-light); margin-top: 2px; line-height: 1.5; }
.cm-token-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cm-token-chip { display: inline-flex; align-items: center; background: #eef2ff; color: #4338ca; border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.cm-token-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--cm-border); }
.cm-token-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

/* Medicine Dropdown */
.cm-medicine-search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.cm-hint { font-size: 0.78rem; color: var(--cm-text-light); }
.cm-med-dropdown { background: var(--cm-white); border: 1px solid var(--cm-border); border-radius: 8px; box-shadow: var(--cm-shadow-md); max-height: 280px; overflow-y: auto; position: relative; z-index: 100; margin-bottom: 10px; }
.cm-med-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--cm-border); transition: background .15s; display: flex; justify-content: space-between; align-items: center; }
.cm-med-item:hover { background: #eff6ff; }
.cm-med-item:last-child { border-bottom: none; }
.cm-med-name { font-weight: 600; font-size: 0.9rem; }
.cm-med-meta { display: flex; gap: 10px; font-size: 0.78rem; color: var(--cm-text-light); }
.cm-med-meta span { display: flex; align-items: center; gap: 3px; }
.cm-stock-low { color: var(--cm-danger) !important; font-weight: 700; }
.cm-stock-nil { color: #9f1239 !important; }
.cm-not-found { padding: 14px; text-align: center; color: var(--cm-text-light); }
.cm-not-found-add { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Prescription table */
#prescription-table td select, #prescription-table td input { width: 100%; padding: 5px 8px; border: 1px solid var(--cm-border); border-radius: 5px; font-size: 0.85rem; }

/* Doctor Module — consultation prescription table. Fixed layout + explicit
   column widths so fields never get squeezed narrow enough to truncate
   their own text (e.g. a Route value like "Ear Drops" showing as "Ear
   Dro..."); the table instead grows past its container and the .cm-tab-content
   wrapper (overflow-x:auto in the template) scrolls horizontally on
   smaller screens. Remarks column removed — table is now 8 columns:
   Medicine, Dose, Timing, How to Take, Duration, Route, Qty, (delete). */
.cmd-rx-table { table-layout: fixed; min-width: 960px; }
.cmd-rx-table col.cmd-col-medicine, .cmd-rx-table th:nth-child(1), .cmd-rx-table td:nth-child(1) { width: 190px; }
.cmd-rx-table th:nth-child(2), .cmd-rx-table td:nth-child(2) { width: 90px; }
.cmd-rx-table th:nth-child(3), .cmd-rx-table td:nth-child(3) { width: 90px; }
.cmd-rx-table th:nth-child(4), .cmd-rx-table td:nth-child(4) { width: 110px; }
.cmd-rx-table th:nth-child(5), .cmd-rx-table td:nth-child(5) { width: 115px; }
.cmd-rx-table th:nth-child(6), .cmd-rx-table td:nth-child(6) { width: 140px; }
.cmd-rx-table th:nth-child(7), .cmd-rx-table td:nth-child(7) { width: 160px; }
.cmd-rx-table th:nth-child(8), .cmd-rx-table td:nth-child(8) { width: 40px; }
.cmd-rx-table td { overflow: visible; }
.cmd-rx-table td select, .cmd-rx-table td input[type="text"], .cmd-rx-table td input[type="number"] {
    width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px;
    border: 1px solid var(--cm-border); border-radius: 5px; font-size: 0.84rem;
}
.cmd-med-qty-wrap { display: flex; gap: 4px; align-items: center; }
.cmd-med-qty-wrap .cmd-field-wrap { flex: 1.3; min-width: 0; }
/* NOTE: the generic ".cmd-rx-table td input/select { width:100% }" rule
   above has HIGHER CSS specificity than a plain ".cmd-duration-wrap input"
   or ".cmd-med-qty-wrap input" selector (2 classes+2 elements beats 1
   class+1 element), so it was silently winning and stretching the
   duration/qty inputs to fill their whole column no matter what width was
   set here — that's why the fix looked like it "did nothing" before. Every
   override below is written with an equal-or-higher-specificity selector
   (prefixed with .cmd-rx-table td) so it actually wins the cascade. */
.cmd-rx-table td .cmd-med-qty-wrap input[type="number"] { flex: 0 1 56px; width: 56px; min-width: 46px; }

/* Duration cell: number input + "Day"/"Days" suffix, side by side. The
   input is capped to a fixed compact width so it can't balloon to fill the
   whole column, and the suffix has its own guaranteed slot next to it —
   neither one bleeds into the Route column anymore. */
.cmd-duration-wrap { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.cmd-rx-table td .cmd-duration-wrap input[type="number"] { flex: 0 1 42px; width: 42px; min-width: 38px; }
.cmd-duration-suffix { flex: 0 0 auto; min-width: 30px; font-size: .78rem; color: var(--cm-text-light); white-space: nowrap; }

/* Dose / Timing / How-to-Take / Route / Unit fields in the Rx table — each
   normally shows the system's dropdown list, but flips to a free-text box
   (with a small "back to list" button) the moment a doctor picks "Manually
   type..." or if a saved value was typed manually earlier. See
   CMD.renderFieldControl() / CMD.maybeCustomField() in doctor.js. */
.cmd-field-wrap { display: flex; align-items: center; gap: 3px; width: 100%; }
.cmd-field-wrap select, .cmd-field-wrap input[type="text"] { flex: 1; min-width: 0; }
.cmd-custom-back-btn { flex-shrink: 0; width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cm-border); border-radius: 5px; background: #fff; color: var(--cm-text-light); cursor: pointer; font-size: .68rem; }
.cmd-custom-back-btn:hover { background: var(--cm-primary); color: #fff; border-color: var(--cm-primary); }

/* Family members */
.cm-family-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cm-family-chip { padding: 5px 12px; background: #eff6ff; border-radius: 20px; font-size: 0.82rem; border: 1px solid #bfdbfe; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.cm-family-chip:hover { background: #dbeafe; }

/* Patient info */
.cm-patient-info-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-info-row { display: flex; gap: 8px; font-size: 0.88rem; }
.cm-info-label { color: var(--cm-text-light); min-width: 80px; }
.cm-info-val { font-weight: 600; }

/* Complaint checkboxes */
.cm-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-check-label { display: flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--cm-light); border-radius: 5px; cursor: pointer; font-size: 0.85rem; border: 1px solid var(--cm-border); }
.cm-check-label:hover { background: #dbeafe; }
.cm-check-label input { margin: 0; }
.cm-radio-label { display: inline-flex; align-items: center; gap: 5px; margin-right: 15px; cursor: pointer; font-size: 0.88rem; }

/* History */
.cm-visit-card { border: 1px solid var(--cm-border); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.cm-visit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cm-visit-date { font-weight: 700; color: var(--cm-primary); }
.cm-visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.85rem; }
.cm-rx-list { margin-top: 8px; padding: 10px; background: #f0fff4; border-radius: 6px; }
.cm-rx-item { display: flex; gap: 12px; font-size: 0.85rem; padding: 3px 0; border-bottom: 1px solid #bbf7d0; }
.cm-rx-item:last-child { border-bottom: none; }

/* Modal */
.cm-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.cm-modal-content { background: var(--cm-white); border-radius: 16px; padding: 28px; max-width: 460px; width: 90%; max-height: 88vh; overflow-y: auto; box-shadow: 0 30px 70px -12px rgba(15,23,42,.35); border: 1px solid var(--cm-border); }
.cm-modal-content h3 { margin: 0 0 20px; color: var(--cm-text); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cm-modal-content h3 i { color: var(--cm-primary); }

/* Loading */
.cm-loading { text-align: center; padding: 30px; color: var(--cm-text-light); font-size: 1.2rem; }
.cm-no-data { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--cm-text-light); gap: 10px; }
.cm-no-data i { font-size: 2.5rem; opacity: 0.4; }
.cm-no-data span { font-size: 0.95rem; opacity: 0.7; }

/* Alert boxes */
.cm-alert { padding: 12px 16px; border-radius: 7px; margin-bottom: 12px; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; }
.cm-alert-success { background: #dcfce7; color: #14532d; border: 1px solid #bbf7d0; }
.cm-alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.cm-alert-info { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.cm-alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Print */
@media print {
    .cm-wrap > *:not(#print-area) { display: none !important; }
    #print-area { display: block !important; }
    .cm-no-print { display: none !important; }
}
.cm-print-prescription { max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; }
.cm-print-header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 15px; }
.cm-print-header h2 { margin: 0; }
.cm-print-patient { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 15px; font-size: 0.9rem; }
.cm-print-rx-table { width: 100%; border-collapse: collapse; }
.cm-print-rx-table th, .cm-print-rx-table td { border: 1px solid #333; padding: 6px 10px; text-align: left; font-size: 0.88rem; }
.cm-print-rx-table th { background: #f5f5f5; }
.cm-print-footer { margin-top: 30px; text-align: right; font-size: 0.85rem; }

/* Stock alerts in pharmacy */
.cm-stock-alert-row { background: #fff7ed !important; }
.cm-out-of-stock-row { background: #fef2f2 !important; }

/* ── Follow-up quick-pick chips ── */
.cm-followup-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-chip-btn { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 18px; padding: 5px 14px; font-size: .78rem; font-weight: 600; cursor: pointer; transition: .15s; }
.cm-chip-btn:hover { background: #dbeafe; }
.cm-chip-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.cm-chip-btn.cm-chip-clear { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.cm-chip-btn.cm-chip-clear:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

/* ── Gradient header (CRM-style page banners) ── */
.cm-gradient-header { background: linear-gradient(135deg,#312e81 0%,#4f46e5 55%,#6366f1 100%); color: #fff; border-radius: var(--cm-radius); padding: 22px 26px; margin-bottom: 20px; box-shadow: 0 10px 28px -8px rgba(79,70,229,.4); }
.cm-gradient-header h1 { color: #fff; margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.cm-gradient-header h1 i { color: #c7d2fe; }
.cm-header-sub { margin: 6px 0 0; opacity: .85; font-size: .85rem; }
.cm-expiry-soon { background: #fef2f2 !important; }
.cm-nil-stock-row { background: #fdf4ff !important; }

/* Hint text */
.cm-hint-text { color: var(--cm-text-light); font-size: 0.85rem; margin-bottom: 15px; }

/* Give medicine list */
.cm-give-med-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--cm-border); font-size: 0.88rem; }
.cm-give-med-item input[type=number] { width: 70px; padding: 5px; border: 1px solid var(--cm-border); border-radius: 5px; }

/* Scrollbar */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Nil stock badge */
.cm-nil-badge { background: #fae8ff; color: #6b21a8; border: 1px solid #e9d5ff; display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; }
.cm-new-badge { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.72px; font-weight: 700; }

/* ===== EMERGENCY TOKEN STYLES =====
   Kept calm and single-signal: a red left accent + soft tint + one
   "EMERGENCY" tag. No pulsing animation and no duplicate 🚨/red-border
   stacking — those were the main source of the cluttered look. */
.cm-token-emergency {
    border-color: #fecaca !important;
    border-left: 4px solid #dc2626 !important;
    background: #fff7f7 !important;
}
.cm-token-emergency .cm-token-name { color: #b91c1c; }
.cm-token-tag-emergency { display: inline-flex; align-items: center; gap: 4px; background: #dc2626; color: #fff; font-weight: 700; font-size: 0.68rem; letter-spacing: .3px; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; }
.cm-badge-emergency { background: #dc2626; color: #fff; font-weight: 800; }

/* ===== ADD TOKEN BUTTON ===== */
.cm-btn-emergency {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(220,38,38,.35) !important;
}
.cm-btn-emergency:hover { background: linear-gradient(135deg, #b91c1c, #991b1b) !important; }

/* Add Token big button */
#btn-add-token-main {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    border: none;
    box-shadow: 0 4px 18px rgba(59,130,246,.4);
    transition: all .2s;
}
#btn-add-token-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59,130,246,.5);
}

/* ===== TOKEN MODAL ===== */
#token-modal { animation: cm-modal-in .2s ease; z-index: 100000 !important; position: fixed !important; }
#tm-addon-list label:hover { background: #f8fafc; }
@keyframes cm-modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* ===== DUPLICATE WARNING ===== */
.cm-alert-warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 8px; padding: 10px 14px; }

/* ===== FORM LABEL ===== */
.cm-label { display: block; font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: 4px; }

/* ===== DASHBOARD EMERGENCY SECTION ===== */
.cm-emg-token-row { background: #fff5f5; border-left: 4px solid #dc2626; }

/* ═══════════════════════════════════════
   PATIENT VITALS TRACKER
═══════════════════════════════════════ */
.cm-vitals-card { border-top: 3px solid #7c3aed; }
.cm-vitals-card h3 { color: #7c3aed; }

.cm-vitals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.cm-vital-group {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 8px;
    padding: 12px;
}

.cm-vital-label {
    font-size: .78rem;
    font-weight: 700;
    color: #6d28d9;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cm-vital-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.cm-vital-input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px !important;
    font-size: .9rem !important;
    text-align: center;
}

.cm-vital-sep {
    color: #94a3b8;
    font-weight: 700;
    font-size: .9rem;
}

.cm-vital-unit {
    font-size: .75rem;
    color: #94a3b8;
    white-space: nowrap;
}

.cm-vital-normal {
    font-size: .72rem;
    color: #94a3b8;
    margin-top: 3px;
}

.cm-vital-alert {
    font-size: .76rem;
    font-weight: 700;
    margin-top: 4px;
    min-height: 16px;
}

.cm-vital-alert.high {
    color: #dc2626;
}

.cm-vital-alert.low {
    color: #2563eb;
}

/* Abnormal input highlight */
.cm-vital-input.abnormal-high {
    border-color: #dc2626 !important;
    background: #fff5f5 !important;
    color: #dc2626;
    font-weight: 700;
}

.cm-vital-input.abnormal-low {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    color: #2563eb;
    font-weight: 700;
}

/* Vitals alert badge in heading */
#vitals-alert-badge {
    background: #fee2e2;
    color: #dc2626;
    font-size: .72rem;
    padding: 2px 9px;
    border-radius: 20px;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: middle;
}

/* Vitals history table inside graph modal */
.cm-vitals-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    margin-top: 8px;
}

.cm-vitals-history-table th {
    background: #f5f3ff;
    color: #6d28d9;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 7px 10px;
    border-bottom: 2px solid #e9d5ff;
}

.cm-vitals-history-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.cm-vitals-history-table tr:hover {
    background: #faf5ff;
}

.cm-vital-val-high { color: #dc2626; font-weight: 700; }
.cm-vital-val-low  { color: #2563eb; font-weight: 700; }
.cm-vital-val-ok   { color: #16a34a; }

/* Dashboard vitals alert box */
.cm-vitals-alert-box {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 16px;
}

.cm-vitals-alert-box h4 {
    color: #dc2626;
    margin: 0 0 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cm-vitals-alert-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #fecdd3;
    font-size: .84rem;
}

.cm-vitals-alert-item:last-child { border-bottom: none; }

/* Graph tab buttons */
.graph-tab-btn { transition: all .15s; }
.graph-tab-btn.active {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
}

/* ── Reception area fixes ── */
#all-patients-card .cm-table th,
#all-patients-card .cm-table td {
    padding: 8px 10px;
    font-size: .84rem;
    white-space: nowrap;
}
#all-patients-card .cm-table tr:hover td { background: #f8fafc; }

/* Responsive: stack 2-col to 1-col on small screens */
@media (max-width: 768px) {
    .cm-wrap > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Token list scroll fix */
.cm-token-list { max-height: 500px; }

/* Token actions inline */
.cm-token-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }

/* ── Token Records Page ── */
.cm-token-list { max-height: 520px; }
.cm-token-item { transition: box-shadow .18s, border-color .18s; }
.cm-token-item:hover { border-color: #3b82f6; box-shadow: 0 2px 12px rgba(59,130,246,.12); }

/* ── Dashboard token list ── */
#dash-token-list .cm-table td, #dash-token-list .cm-table th { font-size: .82rem; padding: 6px 10px; }

/* ── Responsive improvements ── */
@media (max-width: 640px) {
    .cm-token-no { font-size: 1rem; min-width: 40px; padding: 6px; }
    .cm-token-name { font-size: .85rem; }
    #tr-summary .cm-stat-card { min-width: 100px; padding: 10px; }
}

/* WordPress converts emoji characters (🚨, ❤️, etc.) into small <img class="emoji">
   tags. Some themes apply a global "img { width:100%; height:auto }"-style
   responsive rule that isn't aware of these tiny inline icons, which blows
   them up to fill their container (e.g. the 🚨 emergency-token label). Lock
   them back down to normal inline-icon size wherever this plugin renders. */
.cm-wrap img.emoji,
.cmm-wrap img.emoji,
img.emoji {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    margin: 0 .05em 0 .1em !important;
    vertical-align: -0.1em !important;
    border: none !important;
    box-shadow: none !important;
}

/* Same theme-override problem as the emoji fix above, but for the small
   logo/stamp/signature/letterhead preview thumbnails in Settings and the
   Doctor modal: the theme's global "img{width:100%;height:auto}" rule
   forces these to stretch full-width while max-height clips the height,
   distorting them. Lock width back to auto so they scale proportionally. */
#clinic-logo-preview, #clinic-stamp-preview,
#doctor-logo-preview, #doctor-stamp-preview,
#doctor-signature-preview, #doctor-letterhead-preview {
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
}


/* ═══════════════════════════════════════════════════════════════
   SETTINGS PAGE — page header, per-tab section headers, filter
   bars, modal chrome (Doctors/Addons/Categories/Diseases/etc all
   share these). None of these had rules before, so native browser
   defaults were leaking through (unstyled buttons/inputs/selects,
   header text with no hierarchy) which is what looked broken.
   ═══════════════════════════════════════════════════════════════ */

/* Page title block at the top of Settings */
.cm-page-header { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--cm-border); }
.cm-page-header h1 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--cm-text); display: flex; align-items: center; gap: 10px; }
.cm-page-header h1 i { color: var(--cm-primary); font-size: 1.15rem; }
.cm-page-header p { margin: 0; font-size: .88rem; color: var(--cm-text-light); }

/* Title + action-button row at the top of each tab */
.cm-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cm-section-header h2 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--cm-text); }

.cm-page-header code { background: var(--cm-light); border: 1px solid var(--cm-border); border-radius: 5px; padding: 2px 7px; font-size: .82em; color: var(--cm-primary-dark); }

/* --- Form layout: grid + chips + switch + segmented control ---
   Reusable building blocks for cleaner data-entry forms (e.g. Staff Management). */
.cm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 20px; }
.cm-form-grid .cm-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .cm-form-grid { grid-template-columns: 1fr; } }

/* Doctor Module quick-pick chips (Chief Complaint / Investigation / Advice) —
   click to add/remove that line from the textarea below it. */
.cmd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--cm-border); border-radius: 18px; font-size: .78rem; font-weight: 600; color: var(--cm-text-light); background: var(--cm-white); cursor: pointer; user-select: none; transition: all .15s; }
.cmd-chip:hover { border-color: #c7d2fe; color: var(--cm-text); }
.cmd-chip i { font-size: .74rem; opacity: .8; }
.cmd-chip.cmd-chip-active { background: var(--cm-primary); border-color: var(--cm-primary); color: #fff; }
.cmd-chip.cmd-chip-active i { opacity: 1; }

/* Searchable checkbox-list + inline "Add" pickers — Chief Complaint,
   Investigation, Advice all share this pattern via CMD.pickerConfig. */
.cmd-complaint-item { display: flex; align-items: center; gap: 9px; padding: 7px 12px; cursor: pointer; font-size: .85rem; color: var(--cm-text); transition: background .12s; }
.cmd-complaint-item:hover { background: #f3f4f6; }
.cmd-complaint-item input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; accent-color: var(--cm-primary); }
.cmd-complaint-item span { line-height: 1.3; }
.cmd-picker-dropdown::-webkit-scrollbar, #cmd-complaint-list::-webkit-scrollbar { width: 6px; }
.cmd-picker-dropdown::-webkit-scrollbar-thumb, #cmd-complaint-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

.cm-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-chip { position: relative; display: inline-flex; }
.cm-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cm-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid var(--cm-border); border-radius: 20px; font-size: .82rem; font-weight: 600; color: var(--cm-text-light); background: var(--cm-white); transition: all .15s; user-select: none; }
.cm-chip span i { font-size: .78rem; opacity: .8; }
.cm-chip span:hover { border-color: #c7d2fe; color: var(--cm-text); }
.cm-chip input:checked + span { background: var(--cm-primary); border-color: var(--cm-primary); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.25); }
.cm-chip input:checked + span i { opacity: 1; }
.cm-chip input:focus-visible + span { outline: 2px solid var(--cm-primary); outline-offset: 2px; }

.cm-hint { font-size: .78rem; color: var(--cm-text-light); margin: 8px 0 0; line-height: 1.45; }

.cm-toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--cm-light); border: 1px solid var(--cm-border); border-radius: 10px; }
.cm-toggle-row strong { display: block; font-size: .88rem; color: var(--cm-text); margin-bottom: 2px; }
.cm-toggle-row p { margin: 0; font-size: .78rem; color: var(--cm-text-light); line-height: 1.45; }
.cm-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; margin-top: 1px; }
.cm-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.cm-switch-track { position: absolute; inset: 0; background: #cbd5e1; border-radius: 22px; transition: .15s; cursor: pointer; }
.cm-switch-track:before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cm-switch input:checked + .cm-switch-track { background: var(--cm-primary); }
.cm-switch input:checked + .cm-switch-track:before { transform: translateX(18px); }

.cm-seg-control { display: inline-flex; background: var(--cm-light); border: 1px solid var(--cm-border); border-radius: 9px; padding: 3px; gap: 2px; }
.cm-seg-control label { position: relative; }
.cm-seg-control input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cm-seg-control span { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 7px; font-size: .82rem; font-weight: 600; color: var(--cm-text-light); cursor: pointer; transition: all .15s; }
.cm-seg-control input:checked + span { background: #fff; color: var(--cm-primary); box-shadow: 0 1px 3px rgba(15,23,42,.1); }

.cm-manual-cred-box { margin-top: 12px; padding: 14px 16px; background: var(--cm-light); border: 1px dashed #cbd5e1; border-radius: 10px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 480px) { .cm-manual-cred-box { flex-direction: row; } .cm-manual-cred-box .cm-form-group { flex: 1; } }

/* Filter/search row above a list (Categories, Diseases, etc) */
.cm-filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.cm-filter-bar select, .cm-filter-bar input {
    padding: 9px 12px; border: 1px solid var(--cm-border); border-radius: 8px;
    font-size: .85rem; color: var(--cm-text); background: var(--cm-white);
    font-family: inherit; min-width: 200px; transition: border-color .15s, box-shadow .15s;
}
.cm-filter-bar select { cursor: pointer; }
.cm-filter-bar select:focus, .cm-filter-bar input:focus { outline: none; border-color: var(--cm-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
@media (max-width: 560px) { .cm-filter-bar select, .cm-filter-bar input { min-width: 0; flex: 1; } }

/* Settings/modal forms — two-column field grid. Fields inside use plain
   <input>/<select> without the .cm-input class, so style them structurally
   via the wrapping .cm-field-group instead (excluding checkbox/radio/file/
   hidden inputs, which have their own look e.g. the day-of-week chips). */
.cm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cm-field-group { display: flex; flex-direction: column; gap: 6px; }
.cm-field-group label { font-size: .78rem; font-weight: 600; color: var(--cm-text-light); text-transform: uppercase; letter-spacing: .3px; }
.cm-field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.cm-field-group select,
.cm-field-group textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--cm-border); border-radius: 8px;
    font-size: .88rem; color: var(--cm-text); box-sizing: border-box; background: var(--cm-white);
    font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.cm-field-group input:focus, .cm-field-group select:focus, .cm-field-group textarea:focus {
    outline: none; border-color: var(--cm-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.cm-field-group select { cursor: pointer; }
.cm-field-group input::placeholder, .cm-field-group textarea::placeholder { color: #a1a9ba; }
@media (max-width: 700px) { .cm-form-grid { grid-template-columns: 1fr; } }

/* Modal chrome — header/body/footer regions inside .cm-modal-content */
.cm-modal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: -28px -28px 20px; padding: 18px 28px; border-bottom: 1px solid var(--cm-border);
    position: sticky; top: -28px; background: var(--cm-white); z-index: 2; border-radius: 16px 16px 0 0;
}
.cm-modal-header h3 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--cm-text); display: flex; align-items: center; gap: 8px; }
.cm-modal-header h3 i { color: var(--cm-primary); }
.cm-modal-close {
    border: none; background: var(--cm-light); color: var(--cm-text-light); width: 30px; height: 30px;
    border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.cm-modal-close:hover { background: #fee2e2; color: var(--cm-danger); }
.cm-modal-body { padding-right: 2px; }
.cm-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    margin: 20px -28px -28px; padding: 16px 28px; border-top: 1px solid var(--cm-border);
    position: sticky; bottom: -28px; background: var(--cm-white); border-radius: 0 0 16px 16px;
}
.cm-modal-lg { max-width: 760px !important; }

/* Small Edit/Delete action buttons used in Settings list tables — these
   are used WITHOUT the base .cm-btn class (just cm-btn-xs + a color
   variant), so cm-btn-xs needs to be a fully self-contained button. */
.cm-btn-xs {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    font-family: inherit; font-weight: 600; white-space: nowrap; transition: all .15s;
    padding: 4px 10px; font-size: .72rem; border-radius: 6px;
    background: var(--cm-light); color: var(--cm-text); border: 1px solid var(--cm-border);
}
.cm-btn-edit { background: var(--cm-white) !important; color: var(--cm-primary) !important; border: 1px solid #c7d2fe !important; box-shadow: none !important; }
.cm-btn-edit:hover { background: #eef2ff !important; transform: none !important; }
.cm-btn-del { background: var(--cm-white) !important; color: var(--cm-danger) !important; border: 1px solid #fecaca !important; box-shadow: none !important; }
.cm-btn-del:hover { background: #fee2e2 !important; transform: none !important; }

/* Available-days checkbox chips (Doctor modal) */
.cm-day-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-day-label { display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--cm-light); border: 1px solid var(--cm-border); border-radius: 20px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.cm-day-label:hover { border-color: var(--cm-primary); }
.cm-day-label input { margin: 0; accent-color: var(--cm-primary); }

.cm-badge-success { background: #dcfce7; color: #14532d; }
.cm-row-overdue { background: #fef2f2 !important; }
.cm-row-overdue td { color: #991b1b; }
.cm-outstanding-total { font-size: 1.6rem; font-weight: 800; color: #dc2626; }
.cm-outstanding-company-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: #fafafa; margin-bottom: 6px; }
.cm-outstanding-company-row.is-overdue { background: #fef2f2; border-left: 3px solid #dc2626; }

/* ── Rx typeahead boxes (Instruction + Qty unit) + ⭐ medicine default ── */
.cmd-combo { position: relative; display: block; width: 100%; min-width: 0; }
.cmd-med-qty-wrap .cmd-combo { flex: 1.3; min-width: 0; }
.cmd-rx-table td .cmd-combo input.cmd-combo-input { width: 100%; padding-right: 22px; text-overflow: ellipsis; }
.cmd-combo-caret { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 20px; padding: 0; border: 0; background: transparent; color: var(--cm-text-light); cursor: pointer; font-size: .65rem; }
.cmd-combo-caret:hover { color: var(--cm-primary); }
#cmd-combo-panel { position: fixed; z-index: 100000; display: none; overflow-y: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); padding: 4px 0; font-size: .84rem; }
.cmd-combo-item { padding: 7px 12px; cursor: pointer; white-space: normal; line-height: 1.3; }
.cmd-combo-item:hover, .cmd-combo-item.active { background: #eff6ff; color: #1e40af; }
.cmd-combo-new { color: #15803d; font-weight: 600; border-bottom: 1px solid #f1f5f9; }
.cmd-combo-empty { padding: 8px 12px; color: #94a3b8; }
.cmd-name-wrap { display: flex; align-items: center; gap: 4px; }
.cmd-name-wrap .cmd-med-name { flex: 1; min-width: 0; }
.cmd-star-btn { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; color: #94a3b8; cursor: pointer; font-size: .95rem; border-radius: 5px; }
.cmd-star-btn:hover { background: #fef9c3; color: #eab308; }
.cmd-star-btn.active { color: #eab308; }

/* Prescription row: clean manual Days entry (no browser number-spinner or
   datalist popup). The doctor can type 1, 5, 30, etc. directly. */
.cmd-rx-table td .cmd-duration-wrap input.cmd-med-duration[type="text"] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
/* Schedule / Instruction / Route are editable typeahead boxes. Keep the
   controls compact enough for the prescription table while still allowing
   the doctor to type a complete custom reference. */
.cmd-rx-table td .cmd-combo-input.cmd-med-dose,
.cmd-rx-table td .cmd-combo-input.cmd-med-how-to-take,
.cmd-rx-table td .cmd-combo-input.cmd-med-route {
    min-width: 0;
    font-size: .78rem;
}