/* App panels (client, employee portal, main admin). The public website has its own theme in public.css. */
:root {
    --sidebar-bg: #1f2a44;
}

body {
    background: #f4f6fa;
    font-size: .92rem;
}

.sidebar {
    width: 240px;
    min-height: 100vh;
    background: var(--sidebar-bg);
    position: sticky;
    top: 0;
}

.sidebar .nav-link {
    border-radius: .4rem;
    padding: .45rem .75rem;
    opacity: .85;
}

.sidebar .nav-link:hover { opacity: 1; background: rgba(255,255,255,.07); }
.sidebar .nav-link.active { background: #3d63dd; opacity: 1; }

.main-content { min-width: 0; }

.card { border: 0; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.card-header { background: #fff; font-weight: 600; }

.stat-card .label { color: #6b7280; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .value { font-size: 1.45rem; font-weight: 700; }

.table-money td.num, .table-money th.num, .num { text-align: right; font-variant-numeric: tabular-nums; }

.input-grid input.form-control { min-width: 85px; text-align: right; }
/* "Pay" tick in the payroll inputs grid: a normal-size checkbox in a narrow, centred column. */
.input-grid .pay-col { width: 56px; text-align: center; }
.input-grid .pay-col .form-check-input { width: 1.25rem; height: 1.25rem; margin: 0; float: none; cursor: pointer; }
.input-grid td, .input-grid th { white-space: nowrap; vertical-align: middle; }

.status-Draft { background: #6b7280; }
.status-Processed { background: #2563eb; }
.status-Locked { background: #059669; }

.payslip-sheet { background: #fff; max-width: 900px; }
.payslip-sheet .netpay { background: #eef3ff; border: 1px solid #c7d6ff; }

.trend-bar { height: 10px; border-radius: 5px; background: #3d63dd; }
.trend-bar.net { background: #10b981; }

@media (max-width: 768px) {
    .sidebar { width: 100%; min-height: auto; position: static; }
    .d-flex:has(> .sidebar) { flex-direction: column; }
}

@media print {
    .sidebar, .no-print, .alert { display: none !important; }
    body { background: #fff; }
    .main-content { padding: 0 !important; }
    .card { box-shadow: none; }
}

.client-switch { background: rgba(255,255,255,.07); border-radius: .5rem; padding: .6rem .75rem; }

/* Salary calculator */
.calc-table td, .calc-table th { vertical-align: middle; }
.calc-table input.form-control-sm, .calc-table select.form-select-sm { min-width: 90px; }
.scenario-card .net { font-size: 1.6rem; font-weight: 700; }
.basis { color: #6b7280; font-size: .8rem; }
.manual-badge { font-size: .65rem; }

.admin-sidebar { background: #111827; }
.admin-sidebar .nav-link.active { background: #7c3aed; }

/* Plan picker (pricing page & billing) */
.plan-card { position: relative; border: 1px solid #e5e7eb; transition: box-shadow .15s, border-color .15s; }
.plan-card.plan-popular { border: 2px solid #3d63dd; }
.plan-ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #3d63dd; color: #fff; font-size: .72rem; font-weight: 600; padding: .15rem .7rem; border-radius: 999px; white-space: nowrap; }
.plan-selectable { cursor: pointer; }
.plan-selectable:hover { box-shadow: 0 4px 14px rgba(16,24,40,.08); }
/* When choosing a plan, only the chosen card is outlined – "Most popular" keeps its ribbon but not the blue border. */
.plan-card.plan-selectable.plan-popular { border: 1px solid #e5e7eb; }
.plan-card.plan-selectable.plan-popular .plan-ribbon { background: #6b7280; }
.plan-card.plan-selected, .plan-card.plan-selectable.plan-popular.plan-selected { border: 2px solid #3d63dd; background: #f5f8ff; box-shadow: 0 0 0 4px rgba(61,99,221,.18); }
.plan-selected-tag { display: none; align-self: flex-start; margin-top: .35rem; font-size: .75rem; font-weight: 600; color: #fff; background: #3d63dd; border-radius: 999px; padding: .1rem .6rem; }
.plan-card.plan-selected .plan-selected-tag { display: inline-block; }
.plan-estimate .est-row { display: flex; justify-content: space-between; gap: .5rem; }
.plan-estimate .est-total { border-top: 1px solid currentColor; margin-top: .2rem; padding-top: .2rem; font-weight: 600; }
.plan-card.plan-unavailable { opacity: .55; cursor: not-allowed; }
.order-summary { position: sticky; top: 1rem; }
.order-summary .line { display: flex; justify-content: space-between; padding: .3rem 0; }
.order-summary .line.discount { color: #198754; }
.order-summary .total { font-size: 1.35rem; font-weight: 700; border-top: 2px solid #e5e7eb; padding-top: .6rem; margin-top: .4rem; }

/* Plan price scales with the card width, so "₹2,399/month" never breaks inside "month" on narrow cards. */
.plan-card { container-type: inline-size; }
.plan-price { font-size: 2.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
@container (max-width: 260px) { .plan-price { font-size: 2rem; } }
@container (max-width: 210px) { .plan-price { font-size: 1.65rem; } }

/* "← Back to …" link above a page's title (set with ViewData["Back"] in the view). */
.back-link { display: inline-flex; align-items: center; margin-bottom: .5rem; font-size: .9rem; text-decoration: none; color: var(--bs-secondary-color); }
.back-link:hover { color: var(--bs-primary); }
/* Reason box for someone left out of a payroll month: room for the full placeholder. */
.input-grid input.exclude-reason { min-width: 200px; text-align: left; }

/* Team page: small password pop-over under the "Password" button. */
.team-pw { position: relative; }
.team-pw > summary { list-style: none; }
.team-pw > summary::-webkit-details-marker { display: none; }
.team-pw-panel { position: absolute; right: 0; top: 110%; z-index: 10; width: 280px; }

.link-inherit { color: inherit; text-decoration: none; }
.link-inherit:hover { text-decoration: underline; }