/* =====================================================================
   SGPC Library — Shared UI Theme (visual refinements only)
   Loaded AFTER Bootstrap and after each page's inline <style>.
   This file changes ONLY the look & feel. It does not alter any markup,
   behaviour, workflow or JavaScript. Page background gradients and the
   Punjabi / Hindi font classes are intentionally left untouched.
   ===================================================================== */

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

:root {
    --ui-navy:      #10234b;
    --ui-ink:       #1f2a3d;
    --ui-muted:     #64748b;
    --ui-border:    #e6eaf1;
    --ui-surface:   #ffffff;
    --ui-radius:    14px;
    --ui-radius-sm: 9px;
    --ui-shadow:    0 1px 2px rgba(16,35,75,.04), 0 8px 24px rgba(16,35,75,.07);
    --ui-shadow-sm: 0 1px 2px rgba(16,35,75,.05), 0 2px 8px rgba(16,35,75,.06);
}

/* ---------- Base typography (Latin only; language fonts keep their own) ---------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ui-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .002em;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ui-navy);
    font-weight: 700;
    letter-spacing: -.01em;
}

a { text-decoration: none; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}
.card .card-body { padding: 1.35rem 1.5rem; }
/* Tame Bootstrap's heavy preset shadows into one refined elevation */
.card.shadow, .card.shadow-lg, .card.shadow-sm { box-shadow: var(--ui-shadow) !important; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--ui-radius-sm);
    font-weight: 500;
    letter-spacing: .01em;
    padding: .5rem 1.05rem;
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { border-radius: 7px; padding: .3rem .65rem; }
.btn-lg { border-radius: 11px; }
.btn:focus, .btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(16,35,75,.18);
    outline: none;
}

/* ---------- Top module navigation (pill bar on books/reports/users/roles/index) ---------- */
.module-row {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    box-shadow: var(--ui-shadow-sm);
    padding: .55rem .7rem;
    gap: .45rem !important;
}
.module-btn {
    min-width: 132px;
    border-radius: 999px !important;
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, transform .12s ease !important;
}
.module-btn:hover {
    transform: translateY(-1px) !important;   /* refined: no bouncy scale */
    box-shadow: var(--ui-shadow-sm) !important;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    border: 1px solid #d6dde8;
    border-radius: var(--ui-radius-sm);
    padding: .55rem .8rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: #93b4f5;
    box-shadow: 0 0 0 .2rem rgba(37,99,235,.14);
}
.form-control::placeholder { color: #9aa6b6; }
.form-label { font-weight: 600; color: #3a475b; margin-bottom: .35rem; }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(37,99,235,.18); }

/* ---------- Tables ---------- */
.table { --bs-table-border-color: #eef1f6; margin-bottom: 0; }
.table > thead th {
    text-transform: uppercase;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .045em;
    color: var(--ui-muted);
    background-color: #f6f8fb;
    border-bottom: 1px solid var(--ui-border) !important;
    vertical-align: middle;
    padding: .7rem .8rem;
    white-space: nowrap;
}
.table > tbody td {
    vertical-align: middle;
    padding: .62rem .8rem;
    border-color: #eef1f6;
}
.table-hover > tbody > tr:hover > * {
    background-color: #f4f8ff;
}
.table-responsive { border-radius: var(--ui-radius); }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    letter-spacing: .02em;
    padding: .4em .65em;
    border-radius: 7px;
}

/* ---------- Modals ---------- */
.modal-content {
    border: none;
    border-radius: var(--ui-radius);
    box-shadow: 0 20px 60px rgba(16,35,75,.25);
    overflow: hidden;
}
.modal-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--ui-border);
    padding: 1rem 1.25rem;
}
.modal-header .modal-title { font-size: 1.1rem; }
.modal-body { padding: 1.25rem; }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--ui-radius-sm); border: 1px solid transparent; }

/* ---------- Pagination ---------- */
.pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    border-color: var(--ui-border);
    color: var(--ui-navy);
}
.pagination .page-item.active .page-link {
    background-color: var(--ui-navy);
    border-color: var(--ui-navy);
}

/* ---------- Misc polish ---------- */
::selection { background: rgba(37,99,235,.18); }

/* Subtle, modern scrollbars (WebKit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: #c4ccd8;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #aab4c4; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }