/* Ridge Travels QR Code Tracker - shared brand overrides for CoreUI/Bootstrap.
   Keep this as the single place for brand color, buttons, inputs, and text
   sizing so the login page and the admin panel always match. */

:root {
    --brand: #14497a;
    --brand-dark: #0a2647;
    --brand-light: #1f5fa8;

    /* Secondary action colors - kept distinct from the navy brand so
       buttons read at a glance (edit vs. delete vs. activate, etc). */
    --clr-secondary: #55697d;
    --clr-secondary-dark: #40515f;
    --clr-info: #1c8c8c;
    --clr-info-dark: #156b6b;
    --clr-success: #1f8a5f;
    --clr-success-dark: #166b48;
    --clr-warning: #c9822f;
    --clr-warning-dark: #a56825;
    --clr-danger: #b23a3a;
    --clr-danger-dark: #8f2d2d;
    --clr-dark: #2a2f36;
    --clr-dark-dark: #1a1e23;
}

body {
    font-size: 0.95rem;
}

.card-header h3,
.card-header h4 {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0;
}

.form-label {
    font-weight: 500;
    color: #4a4a4a;
}

/* Buttons - solid fills, one color per action so buttons are
   distinguishable at a glance instead of all sharing one outline style. */
.btn {
    border-radius: 0.5rem;
    font-weight: 600;
}

.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: var(--clr-secondary);
    border-color: var(--clr-secondary);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--clr-secondary-dark) !important;
    border-color: var(--clr-secondary-dark) !important;
    color: #fff !important;
}

.btn-info {
    background-color: var(--clr-info);
    border-color: var(--clr-info);
    color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--clr-info-dark) !important;
    border-color: var(--clr-info-dark) !important;
    color: #fff !important;
}

.btn-success {
    background-color: var(--clr-success);
    border-color: var(--clr-success);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--clr-success-dark) !important;
    border-color: var(--clr-success-dark) !important;
    color: #fff !important;
}

.btn-warning {
    background-color: var(--clr-warning);
    border-color: var(--clr-warning);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--clr-warning-dark) !important;
    border-color: var(--clr-warning-dark) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--clr-danger);
    border-color: var(--clr-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--clr-danger-dark) !important;
    border-color: var(--clr-danger-dark) !important;
    color: #fff !important;
}

.btn-dark {
    background-color: var(--clr-dark);
    border-color: var(--clr-dark);
    color: #fff;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: var(--clr-dark-dark) !important;
    border-color: var(--clr-dark-dark) !important;
    color: #fff !important;
}

/* Cards - a softer, more elevated look than CoreUI's flat 1px-border
   default, so tables sitting inside them read as "cards" rather than
   plain sheets. */
.card {
    border-color: #eef1f5;
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.5rem rgba(20, 38, 71, 0.06);
    /* Without this, a card whose last element (header, table, etc.) has
       square corners pokes past the card's own rounded corners - most
       visible on a header-only card, which looks clipped at the bottom. */
    overflow: hidden;
}

.card-header {
    background: #fff;
    border-bottom-color: #eef1f5;
}

/* Stat tiles (dashboard) - colored icon badge on a white card instead of
   a flat grey box, so each stat reads as its own thing at a glance. */
.stat-card {
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(20, 73, 122, 0.08);
    background: #fff;
}

.stat-card .card-body {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    background: var(--brand);
}

.stat-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.stat-card.stat-info .stat-icon {
    background: var(--clr-info);
}

.stat-card.stat-success .stat-icon {
    background: var(--clr-success);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1b1b1b;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.75rem;
    color: #8a94a6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

/* Tables - swap CoreUI's flat black-tinted zebra stripe/hover for a
   faint brand-tinted one, and give headers a lighter, modern label style
   instead of the default grey cap background. */
.table {
    --cui-table-striped-bg: rgba(20, 73, 122, 0.035);
    --cui-table-hover-bg: rgba(20, 73, 122, 0.06);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 0.85rem 1rem;
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #8a94a6;
    background: transparent;
    border-bottom: 2px solid #eef1f5;
}

.table td,
.table th {
    border-bottom-color: #eef1f5;
    vertical-align: middle;
}

/* Inputs */
.form-control,
.form-select {
    border-radius: 0.5rem;
}

.input-group-text {
    background: #f5f7f6;
    border-right: none;
    color: var(--brand);
}

.input-group .form-control {
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;
}

.input-group .input-group-text {
    border-radius: 0.5rem 0 0 0.5rem;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control {
    border-color: var(--brand);
}

/* Sidebar footer (e.g. Logout) - CoreUI only sizes .nav-link/.nav-icon
   inside .sidebar-nav, so anything placed in .sidebar-footer needs the
   same rules repeated here to match the rest of the nav. */
.sidebar-footer {
    /* .sidebar-footer normally carries its own padding; zero it out so the
       .nav-link's padding below is the only spacing, matching Home/QR Codes
       above it instead of being indented an extra step. */
    padding: 0;
}

.sidebar-footer .nav-link {
    display: flex;
    align-items: center;
    padding: var(--cui-sidebar-nav-link-padding-y) var(--cui-sidebar-nav-link-padding-x);
    color: var(--cui-sidebar-nav-link-color);
    text-decoration: none;
    white-space: nowrap;
    background: var(--cui-sidebar-nav-link-bg);
    border-radius: var(--cui-sidebar-nav-link-border-radius);
}

.sidebar-footer .nav-link:hover,
.sidebar-footer .nav-link:focus {
    color: var(--cui-sidebar-nav-link-hover-color);
    background: var(--cui-sidebar-nav-link-hover-bg);
}

.sidebar-footer .nav-icon {
    flex: 0 0 var(--cui-sidebar-nav-icon-width);
    height: var(--cui-sidebar-nav-icon-height);
    font-size: var(--cui-sidebar-nav-icon-font-size);
    color: var(--cui-sidebar-nav-link-icon-color);
    text-align: center;
    fill: currentcolor;
}

/* Login page */
.login-shell {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 55%, var(--brand-light) 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.login-card .card-body {
    padding: 2.5rem 2.25rem;
}

.login-logo {
    max-width: 190px;
    margin: 0 auto 1.25rem;
    display: block;
}

.login-title {
    font-weight: 600;
    font-size: 1.35rem;
    color: #1b1b1b;
}

.login-subtitle {
    color: #8a8a8a;
    font-size: 0.9rem;
}