* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:#f3f6fb; color:#1d2433; }
a { color:inherit; text-decoration:none; }
.layout { display:flex; min-height:100vh; }
.sidebar { width:260px; background:#16213e; color:#fff; padding:20px; }
.brand { padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:20px; display:flex; gap:12px; align-items:center; }
.brand-logo { width:52px; height:52px; object-fit:contain; background:#fff; border-radius:12px; padding:6px; }
.brand-title { font-size:22px; font-weight:700; }
.brand-sub { font-size:12px; opacity:.8; margin-top:4px; }
.user-box { background:rgba(255,255,255,.08); padding:14px; border-radius:12px; margin-bottom:18px; }
.menu { display:flex; flex-direction:column; gap:8px; }
.menu a { padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.06); }
.menu a:hover { background:rgba(255,255,255,.12); }
.main { flex:1; padding:26px; overflow-x:auto; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; gap:12px; }
.topbar h1 { margin:0; font-size:28px; }
.topbar-kicker { color:#6c7893; font-size:12px; margin-bottom:6px; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.card { background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(18,39,74,.08); padding:20px; margin-bottom:20px; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.col-3 { grid-column:span 3; }
.col-4 { grid-column:span 4; }
.col-5 { grid-column:span 5; }
.col-6 { grid-column:span 6; }
.col-7 { grid-column:span 7; }
.col-8 { grid-column:span 8; }
.col-12 { grid-column:span 12; }
.stat { padding:18px; border-radius:16px; background:linear-gradient(135deg,#ffffff 0%,#eef5ff 100%); border:1px solid #e2ebf8; }
.stat .label { color:#5f6b86; font-size:13px; margin-bottom:6px; }
.stat .value { font-size:28px; font-weight:700; }
label { display:block; font-size:14px; font-weight:700; margin-bottom:7px; color:#66717d; text-transform:uppercase; letter-spacing:.02em; }
input, select, textarea, button { font:inherit; }
input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="file"], select, textarea { width:100%; padding:12px 14px; border:1px solid #cad5e6; border-radius:10px; background:#fff; }
textarea { min-height:100px; resize:vertical; }
button, .btn { border:none; background:#2247ff; color:#fff; padding:11px 16px; border-radius:10px; cursor:pointer; display:inline-block; }
.btn.secondary { background:#5e6c84; }
.btn.success { background:#108a5e; }
.btn.danger { background:#d93025; }
.btn.light { background:#e8eefc; color:#183153; }
.btn.small { padding:8px 11px; font-size:13px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
table th, table td { text-align:left; padding:12px 10px; border-bottom:1px solid #e8edf5; vertical-align:top; }
table th { background:#f8fbff; font-size:14px; }
.alert { padding:12px 14px; border-radius:10px; margin-bottom:16px; }
.alert.success { background:#e8f7f0; color:#136642; }
.alert.error { background:#fdeceb; color:#a12a21; }
.login-wrap { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#0f172a,#2247ff); padding:20px; }
.login-card { width:100%; max-width:440px; background:#fff; border-radius:18px; padding:28px; box-shadow:0 24px 50px rgba(0,0,0,.2); }
.login-logo { display:flex; justify-content:center; margin-bottom:14px; }
.login-logo img { max-width:90px; max-height:90px; object-fit:contain; background:#fff; border-radius:14px; padding:6px; }
.login-card h1 { margin-top:0; }
.row-actions { display:flex; gap:8px; flex-wrap:wrap; }
.inline { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.muted { color:#677389; }
.invoice-box { max-width:980px; margin:0 auto; background:#fff; padding:30px; border-radius:18px; box-shadow:0 8px 24px rgba(18,39,74,.08); }
.invoice-head { display:flex; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:2px solid #e7ecf5; margin-bottom:20px; }
.invoice-brand { display:flex; gap:14px; align-items:flex-start; }
.invoice-logo { width:74px; height:74px; object-fit:contain; }
.invoice-title { text-align:right; }
.summary-list { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:12px; margin-top:14px; }
.summary-item { background:#f8fbff; border:1px solid #e2ebf8; border-radius:12px; padding:14px; }
.total-box { margin-left:auto; max-width:340px; }
.total-box table { min-width:100%; }
.badge { display:inline-block; padding:5px 9px; border-radius:999px; background:#eef4ff; color:#1d45d4; font-size:12px; font-weight:700; }
.badge.paid, .success-badge { background:#e8f7f0; color:#136642; }
.badge.due, .due-badge { background:#fdeceb; color:#a12a21; }
.badge.pending { background:#eef4ff; color:#1d45d4; }
.badge.ready, .warning-badge { background:#fff7db; color:#9a6b00; }
.badge.completed { background:#e8f7f0; color:#108a5e; }
.search-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
.totals { display:grid; grid-template-columns:repeat(4,minmax(160px,1fr)); gap:12px; margin-top:14px; }
.totals .box { background:#f7faff; border:1px solid #dce7fa; border-radius:12px; padding:12px; }
.right { text-align:right; }
.info-list { display:flex; flex-direction:column; gap:10px; }
.info-list > div { padding:10px 12px; border-radius:12px; background:#f8fbff; border:1px solid #e2ebf8; }
.notification-wrap { position:relative; }
.notification-btn { display:flex; align-items:center; gap:10px; background:#fff; color:#21314f; border:1px solid #d6e2f3; box-shadow:0 6px 20px rgba(18,39,74,.06); }
.notification-badge { min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#d93025; color:#fff; font-size:12px; }
.notification-badge.hidden { display:none; }
.notification-panel { position:absolute; top:calc(100% + 8px); right:0; width:360px; max-width:88vw; background:#fff; border:1px solid #dbe6f6; border-radius:16px; box-shadow:0 18px 50px rgba(18,39,74,.16); display:none; z-index:30; }
.notification-panel.open { display:block; }
.notification-head { padding:14px 16px; border-bottom:1px solid #edf2fb; font-weight:700; }
.notification-list { max-height:360px; overflow:auto; }
.notification-item, .notification-empty { display:flex; flex-direction:column; gap:5px; padding:12px 16px; border-bottom:1px solid #f0f4fa; }
.notification-item:hover { background:#f8fbff; }
.notification-item strong { color:#20304d; }
.notification-item span { color:#5e6b84; font-size:14px; }
.notification-item small { color:#8b95a8; font-size:12px; }
.toast-stack { position:fixed; top:18px; right:18px; z-index:50; display:flex; flex-direction:column; gap:10px; }
.toast { width:320px; max-width:86vw; background:#fff; border:1px solid #dbe6f6; border-left:4px solid #2247ff; border-radius:14px; padding:14px; box-shadow:0 18px 50px rgba(18,39,74,.16); }
.toast strong { display:block; margin-bottom:6px; }
.toast-body { color:#5f6b86; font-size:14px; }
.hidden { display:none !important; }

/* Reception patient entry */
.reception-entry { display:grid; grid-template-columns:minmax(300px, 0.95fr) minmax(420px, 1fr) minmax(320px, 0.85fr); gap:16px; align-items:start; }
.entry-panel { background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(18,39,74,.08); padding:18px; }
.entry-panel h3 { margin:0 0 16px; font-size:18px; }
.entry-panel .panel-section { margin-bottom:16px; }
.entry-panel .compact-label { font-size:12px; margin-bottom:6px; }
.type-switch { display:flex; gap:14px; flex-wrap:wrap; background:#f7f9fd; border:1px solid #d9e1ec; border-radius:12px; padding:10px 12px; }
.type-switch label { margin:0; text-transform:none; font-size:14px; display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#33415f; }
.old-patient-box { background:#f8fbff; border:1px solid #dfebf7; border-radius:12px; padding:12px; }
.patient-compact-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.patient-inline-grid { display:grid; grid-template-columns:minmax(80px,.7fr) minmax(100px,.8fr) minmax(100px,.7fr) minmax(180px,1.4fr); gap:8px; align-items:end; }
.patient-inline-grid label, .patient-compact-grid label { font-size:11px; margin-bottom:5px; }
.patient-inline-grid input, .patient-inline-grid select, .patient-compact-grid input, .patient-compact-grid select { padding:11px 12px; }
.catalog-search input { background:#f0f2f7; }
.catalog-list { border:1px solid #d9e1ec; border-radius:10px; overflow:hidden; background:#fff; max-height:420px; overflow-y:auto; }
.catalog-item { width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; background:#fff; color:#2e3a4f; border:none; border-bottom:1px solid #edf1f7; border-radius:0; padding:14px 16px; }
.catalog-item:hover { background:#e8f5ff; }
.catalog-item small { color:#66717d; }
.catalog-empty { padding:14px 16px; color:#66717d; }
.selected-head { display:grid; grid-template-columns:50px 1fr 120px 80px; gap:10px; align-items:center; padding:4px 8px 12px; color:#687486; border-bottom:1px solid #edf1f7; }
.selected-list { min-height:420px; }
.selected-row { display:grid; grid-template-columns:50px 1fr 120px 80px; gap:10px; align-items:center; padding:12px 8px; border-bottom:1px solid #edf1f7; }
.remove-x { width:30px; height:30px; border-radius:50%; background:transparent; color:#ef2d2d; padding:0; font-size:28px; line-height:1; }
.line-input { width:100%; padding:10px 12px; border:1px solid #dbe3ef; border-radius:8px; background:#f2f4f8; }
.qty-chip { width:100%; text-align:center; padding:10px 12px; border-radius:8px; background:#f2f4f8; }
.summary-field { margin-bottom:14px; }
.summary-field label { margin-bottom:8px; }
.value-box { padding:16px; border:1px solid #dbe3ef; border-radius:10px; background:#f2f4f8; font-size:20px; }
.value-box.large { font-size:22px; font-weight:700; }
.summary-split { display:grid; gap:10px; }
.summary-split.two-col { grid-template-columns:1fr 1fr; }
.entry-submit { width:100%; margin-top:10px; background:#cfe3fb; color:#17304c; font-weight:700; }

@media (max-width: 1180px) {
    .reception-entry { grid-template-columns:1fr; }
    .selected-list { min-height:0; }
}
@media (max-width: 960px) {
    .layout { flex-direction:column; }
    .sidebar { width:100%; }
    .main { padding:18px; }
    .grid { grid-template-columns:1fr; }
    .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-12 { grid-column:span 1; }
    .search-row { grid-template-columns:1fr; }
    .summary-list { grid-template-columns:1fr; }
    .invoice-head { flex-direction:column; }
    .invoice-title { text-align:left; }
    .patient-inline-grid, .summary-split.two-col, .totals { grid-template-columns:1fr; }
    .selected-head, .selected-row { grid-template-columns:42px 1fr 110px 70px; }
}
@media print {
    .sidebar, .topbar, .alert, .no-print, .toast-stack, .notification-wrap { display:none !important; }
    .main { padding:0; }
    body { background:#fff; }
    .invoice-box { box-shadow:none; max-width:none; border-radius:0; padding:0; }
}


.badge.paid { background:#e8f7f0; color:#108a5e; }
.badge.due { background:#fff1ef; color:#c23b30; }
.badge.pending { background:#eef2f7; color:#607089; }
.badge.ready { background:#fff7db; color:#9a6b00; }
.badge.completed { background:#e8f7f0; color:#108a5e; }

.row-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.inline-form { display:inline; }
.link-danger { color:#c62828; }
.invoice-summary-compact { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.invoice-summary-compact .summary-item { padding:8px 10px; font-size:12px; line-height:1.35; border-radius:10px; background:#f8fbff; border:1px solid #e6edf7; }
.invoice-summary-compact .summary-item strong { font-size:11px; display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; color:#6a778b; }
.invoice-table-compact table th, .invoice-table-compact table td { padding:8px 10px; }
.invoice-table-compact table th { font-size:13px; }
.invoice-total-compact table th, .invoice-total-compact table td { padding:7px 10px; }
.small-top-actions { max-width:980px; margin:0 auto 16px; display:flex; gap:10px; flex-wrap:wrap; }
.quick-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.modal-note { font-size:12px; color:#64748b; }
@media (max-width: 960px) {
  .invoice-summary-compact { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .invoice-summary-compact { grid-template-columns:1fr; }
}


/* Reception screen closer to requested screenshot */
.entry-panel-left { padding: 14px 18px 18px; }
.entry-panel-middle, .entry-panel-right { padding-top: 22px; }
.field-label {
    font-size: 19px;
    font-weight: 800;
    color: #65707f;
    letter-spacing: .02em;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.field-label span { color: #d14949; }
.field-gap { margin-top: 18px; }
.patient-select-wrap input,
.doctor-select-wrap select,
.catalog-search input,
.patient-mini-card input,
.patient-mini-card select,
.entry-panel-right input,
.entry-panel-right select,
.entry-panel-right textarea {
    background: #f3f4f8;
    border: 1px solid #d9dde7;
    border-radius: 8px;
}
.patient-select-wrap input,
.doctor-select-wrap select {
    min-height: 72px;
    font-size: 18px;
    color: #616d7a;
}
.patient-mode-row {
    display: flex;
    gap: 10px;
    margin: 10px 0 12px;
    flex-wrap: wrap;
}
.mode-chip {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 1px solid #d7dde8;
    background: #f6f8fc;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: #5b6776;
    margin: 0;
}
.patient-mini-card {
    background: #fbfcff;
    border: 1px solid #e6ebf3;
    border-radius: 12px;
    padding: 10px;
}
.patient-mini-grid {
    display: grid;
    grid-template-columns: minmax(140px,1.2fr) 74px 96px 110px 1.35fr;
    gap: 8px;
    align-items: end;
}
.patient-mini-col label { font-size: 11px; margin-bottom: 5px; color: #6f7a89; }
.patient-mini-col input,
.patient-mini-col select { padding: 10px 11px; min-height: 46px; }

.catalog-search input {
    min-height: 70px;
    font-size: 18px;
    color: #7c8794;
    margin-bottom: 0;
}
.catalog-list {
    margin-top: 0;
    max-height: 300px;
    border-radius: 8px;
}
.catalog-item {
    min-height: 84px;
    padding: 16px;
    font-size: 18px;
}
.catalog-item:hover,
.catalog-item:focus {
    background: #1187c8;
    color: #fff;
}
.catalog-item:hover small,
.catalog-item:focus small {
    color: rgba(255,255,255,.92);
}

.entry-panel-middle {
    min-height: 474px;
}
.selected-head-screenshot {
    grid-template-columns: 38px minmax(0,1fr) 110px 94px;
    padding: 0 6px 10px;
    font-size: 19px;
    color: #6d747d;
}
.selected-head-screenshot .items-span {
    grid-column: 2 / span 2;
}
.selected-row-screenshot {
    grid-template-columns: 38px minmax(0,1fr) 110px 94px;
    padding: 12px 6px;
}
.selected-item-main {
    display: flex;
    align-items: center;
    min-height: 62px;
    font-size: 17px;
    color: #2d3948;
}
.selected-item-title {
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}
.remove-x {
    width: 28px;
    height: 28px;
    font-size: 30px;
    color: #ff1f1f;
}
.selected-price-wrap {
    display: flex;
    justify-content: flex-end;
}
.line-price-inline {
    width: 96px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #dde2ea;
    border-radius: 6px;
    background: #f2f4f8;
    text-align: center;
    font-size: 18px;
}
.qty-chip {
    min-height: 64px;
    display: grid;
    place-items: center;
    font-size: 18px;
    background: #f2f4f8;
    border-radius: 0;
}
.entry-panel-right .summary-field label {
    font-size: 17px;
    color: #667280;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.entry-panel-right .summary-field input,
.entry-panel-right .summary-field select,
.entry-panel-right .summary-field textarea {
    min-height: 72px;
    font-size: 18px;
}
.entry-panel-right .summary-field textarea {
    min-height: 72px;
}
.entry-panel-right .value-box {
    min-height: 72px;
    display: flex;
    align-items: center;
    font-size: 20px;
}
.entry-submit {
    min-height: 62px;
    font-size: 20px;
    border-radius: 0;
}
@media (max-width: 1350px) {
    .patient-mini-grid {
        grid-template-columns: minmax(140px,1fr) 74px 96px 1fr;
    }
    .patient-mobile-col {
        grid-column: 1 / -1;
    }
}
@media (max-width: 960px) {
    .patient-mini-grid {
        grid-template-columns: 1fr 1fr;
    }
    .patient-name-col,
    .patient-mobile-col {
        grid-column: 1 / -1;
    }
    .selected-head-screenshot,
    .selected-row-screenshot {
        grid-template-columns: 34px minmax(0,1fr) 88px 72px;
    }
    .catalog-item {
        min-height: 66px;
        font-size: 16px;
    }
    .patient-select-wrap input,
    .doctor-select-wrap select,
    .catalog-search input,
    .entry-panel-right input,
    .entry-panel-right select,
    .entry-panel-right textarea {
        min-height: 58px;
        font-size: 16px;
    }
}