@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap');

:root {
    --ios-bg: #f8eef3;
    --ios-bg-2: #fff8fb;
    --ios-surface: rgba(255,255,255,.84);
    --ios-surface-strong: #ffffff;
    --ios-line: rgba(217, 125, 163, .18);
    --ios-line-strong: rgba(191, 98, 141, .28);
    --ios-text: #2a1a26;
    --ios-muted: #8b6678;
    --ios-primary: #d94f86;
    --ios-primary-2: #bd3f70;
    --ios-success: #2a9d6f;
    --ios-warning: #f2a33a;
    --ios-danger: #df5a72;
    --ios-shadow: 0 20px 50px rgba(115, 40, 74, .12);
    --ios-shadow-soft: 0 10px 30px rgba(115, 40, 74, .08);
    --ios-radius-xl: 28px;
    --ios-radius-lg: 22px;
    --ios-radius-md: 18px;
    --ios-radius-sm: 14px;
}

html, body {
    font-family: "DM Sans", sans-serif;
    letter-spacing: -.01em;
}

body.sidebar-layout {
    background:
        radial-gradient(circle at top left, rgba(217,79,134,.14), transparent 26%),
        radial-gradient(circle at top right, rgba(244,173,201,.16), transparent 24%),
        linear-gradient(180deg, var(--ios-bg-2), var(--ios-bg));
    color: var(--ios-text);
}

.app-main::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 160px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
    z-index: 0;
}

.main-inner,
.app-footer {
    position: relative;
    z-index: 1;
}

.main-page-card {
    padding: 8px 0 0;
}

.app-screen {
    display: grid;
    gap: 18px;
}

.app-screen-title {
    padding: 18px 20px;
    background: var(--ios-surface);
    border: 1px solid var(--ios-line);
    border-radius: var(--ios-radius-lg);
    box-shadow: var(--ios-shadow-soft);
    backdrop-filter: blur(18px);
}

.app-screen-title .fw-bold {
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ios-muted);
}

.app-screen-title .text-muted,
.app-screen-title .small {
    color: var(--ios-muted) !important;
}

.card,
.hero-card,
.search-card,
.patient-hero,
.u-card,
.dashboard-kpi-card,
.main-page-card .shadow-sm {
    background: var(--ios-surface) !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: var(--ios-radius-lg) !important;
    box-shadow: var(--ios-shadow-soft) !important;
    backdrop-filter: blur(18px);
}

.card .card-body,
.hero-card,
.search-top,
.patient-hero {
    color: var(--ios-text);
}

.table-responsive {
    border-radius: var(--ios-radius-lg);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(217,79,134,.035);
    --bs-table-hover-bg: rgba(217,79,134,.06);
    --bs-table-border-color: rgba(217,125,163,.14);
}

.table thead.table-light th,
.table > :not(caption) > * > * {
    background: transparent !important;
    border-color: rgba(152,169,193,.16) !important;
}

.table thead th {
    font-size: .79rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ios-muted);
    font-weight: 800;
}

.table tbody td {
    vertical-align: middle;
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--ios-radius-md);
    box-shadow: var(--ios-shadow-soft);
}

.alert-success {
    background: rgba(31,157,104,.12);
    border-color: rgba(31,157,104,.18);
    color: #166948;
}

.alert-info {
    background: rgba(217,79,134,.10);
    border-color: rgba(217,79,134,.16);
    color: #9b2f5a;
}

.alert-danger {
    background: rgba(227,76,95,.11);
    border-color: rgba(227,76,95,.18);
    color: #a72f40;
}

.badge {
    border-radius: 999px;
    padding: .52rem .72rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background: rgba(245,165,36,.18) !important;
    color: #8b5b00 !important;
}

.badge.bg-info,
.badge.text-bg-info {
    background: rgba(217,79,134,.14) !important;
    color: #9b2f5a !important;
}

.badge.bg-success,
.badge.text-bg-success {
    background: rgba(31,157,104,.16) !important;
    color: #166948 !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary,
.badge.bg-light {
    background: rgba(107,122,144,.14) !important;
    color: #4a5a70 !important;
}

.btn,
.app-btn-pill,
.quick-btn,
.icon-btn,
.history-action-btn {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn:hover,
.app-btn-pill:hover,
.quick-btn:hover,
.icon-btn:hover,
.history-action-btn:hover {
    transform: translateY(-1px);
}

.btn {
    min-height: 40px;
    padding: .68rem 1rem;
    border-width: 1px;
}

.btn-sm {
    min-height: 34px;
    padding: .42rem .8rem;
}

.btn-primary,
.app-btn-primary {
    background: linear-gradient(180deg, var(--ios-primary), var(--ios-primary-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(217,79,134,.24);
}

.btn-primary:hover,
.btn-outline-primary:hover,
.app-btn-primary:hover {
    color: #fff !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-info,
.app-btn-light,
.quick-btn,
.icon-btn,
.history-action-btn {
    background: rgba(255,255,255,.78) !important;
    border-color: var(--ios-line-strong) !important;
    color: var(--ios-text) !important;
    box-shadow: 0 10px 20px rgba(16,32,59,.05);
}

.btn-outline-success {
    color: var(--ios-success) !important;
}

.btn-outline-danger,
.app-btn-danger {
    color: var(--ios-danger) !important;
    background: rgba(227,76,95,.08) !important;
    border-color: rgba(227,76,95,.18) !important;
}

.btn-warning {
    background: rgba(245,165,36,.16) !important;
    border-color: rgba(245,165,36,.22) !important;
    color: #8b5b00 !important;
}

.app-actions {
    gap: 10px;
    margin-bottom: 0;
}

.app-btn-pill {
    min-height: 40px;
    padding: 0 14px;
    box-shadow: 0 10px 20px rgba(16,32,59,.05);
}

.app-btn-pill i,
.btn i {
    font-size: .98rem;
}

.form-control,
.form-select,
.agenda-date-input,
.search-input {
    min-height: 46px;
    border-radius: 18px !important;
    border: 1px solid var(--ios-line-strong) !important;
    background: rgba(255,255,255,.84) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    color: var(--ios-text);
}

.form-control::placeholder,
.search-input::placeholder {
    color: #8b99ad;
}

.form-control:focus,
.form-select:focus,
.agenda-date-input:focus,
.search-input:focus {
    border-color: rgba(217,79,134,.34) !important;
    box-shadow: 0 0 0 .2rem rgba(217,79,134,.12) !important;
}

.form-check-input {
    border-color: rgba(120,141,173,.35);
}

.form-check-input:checked {
    background-color: var(--ios-primary);
    border-color: var(--ios-primary);
}

.page-wrap {
    max-width: 1100px;
}

.hero-card,
.search-card {
    overflow: hidden;
}

.search-top {
    background: transparent;
}

.switch-pill,
.badge-soft {
    border-radius: 999px;
    border: 1px solid var(--ios-line-strong);
    background: rgba(255,255,255,.78);
    color: var(--ios-muted);
}

.list-group-item {
    border-color: rgba(152,169,193,.16);
    background: transparent;
}

.list-group-item-action:hover {
    background: rgba(217,79,134,.05);
}

.app-footer .text-muted,
.app-footer {
    color: var(--ios-muted) !important;
}

.brand-logo-lg {
    max-height: 18px;
    width: auto;
    vertical-align: middle;
    margin: 0 4px;
}

@media (max-width: 991.98px) {
    .main-page-card {
        padding-top: 0;
    }

    .app-screen-title {
        padding: 16px;
    }

    .app-actions {
        gap: 8px;
    }
}