/* ── IKRAM Claim System — Custom Styles ───────────────────────────────── */

/* Brand colours */
:root {
    --ikram-primary: #1a5276;
    --ikram-dark:    #154360;
    --ikram-light:   #aed6f1;
    --ikram-orange:  #e67e22;
}

/* Navbar & Brand */
.bg-ikram { background-color: var(--ikram-primary) !important; }

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

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

.text-ikram  { color: var(--ikram-primary) !important; }
.text-orange { color: var(--ikram-orange)  !important; }
.bg-orange   { background-color: var(--ikram-orange) !important; }

/* Card header */
.card-header.bg-ikram { background-color: var(--ikram-primary) !important; }

/* Form focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--ikram-light);
    box-shadow: 0 0 0 .25rem rgba(26,82,118,.15);
}

/* Stat cards */
.stat-card { transition: transform .15s; }
.stat-card:hover { transform: translateY(-2px); }

/* Timeline */
.timeline-status { padding-left: 0; }
.timeline-item {
    padding: 8px 0;
    border-left: 2px solid #dee2e6;
    padding-left: 16px;
    margin-left: 8px;
    position: relative;
}
.timeline-item::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #dee2e6;
    position: absolute;
    left: -6px; top: 14px;
}
.timeline-item.done::before  { background: var(--ikram-primary); }
.timeline-item.pending::before { background: #ffc107; }

/* Tables */
.table th { font-weight: 600; color: #555; font-size: 13px; }

/* Badge orange */
.badge.bg-orange { background-color: var(--ikram-orange); }

/* ── Mobile: navbar collapse behaviour ─────────────────────────────────── */
@media (max-width: 991.98px) {
    /* When collapsed, nav items stack vertically with full-width buttons */
    .navbar-collapse .navbar-nav .btn {
        width: 100%;
        text-align: left;
        margin-bottom: .25rem;
    }
    .navbar-collapse .navbar-nav span.small {
        display: block;
        padding: .4rem 0;
    }
}

/* ── Mobile: admin container padding ──────────────────────────────────── */
@media (max-width: 767.98px) {
    .container-fluid.px-4 {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
}

/* ── Mobile: modal full-width on small screens ─────────────────────────── */
@media (max-width: 575.98px) {
    .modal-dialog.modal-lg {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }
    .modal-body .table-sm td,
    .modal-body .table-sm th {
        font-size: 13px;
        padding: .3rem .4rem;
    }
}

/* ── Mobile: stat cards compact ──────────────────────────────────────── */
@media (max-width: 575.98px) {
    .stat-card .fs-2 { font-size: 1.5rem !important; }
    .stat-card .fs-4 { font-size: 1.2rem !important; }
    .stat-card .card-body { padding: .6rem !important; }
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .navbar-brand { font-size: 15px; }
    .card-body { padding: 1rem !important; }
    .card-header { padding: .75rem 1rem !important; }
    .card-header h5 { font-size: 1rem; }
    .btn-lg { font-size: 15px; padding: .75rem 1rem; }
    .table-responsive { font-size: 13px; }

    /* Larger tap targets for form controls */
    .form-control,
    .form-select {
        font-size: 16px; /* prevents iOS auto-zoom on focus */
        min-height: 46px;
    }
    .input-group-text { font-size: 16px; min-height: 46px; }
    .form-check-input { width: 1.2em; height: 1.2em; }

    /* File upload — bigger touch area */
    input[type="file"].form-control { padding: .6rem .75rem; }

    /* Alert notice — smaller text wraps cleanly */
    .alert.small { font-size: .8rem; }

    /* Section headers */
    h6.text-uppercase { font-size: .7rem; }

    /* Table header row — hide less critical columns on phones */
    .table-admin th:nth-child(4),
    .table-admin td:nth-child(4),
    .table-admin th:nth-child(6),
    .table-admin td:nth-child(6) {
        display: none;
    }
}

/* Admin panel sidebar spacing */
.container-fluid.px-4 { max-width: 1400px; }

/* Footer */
footer { border-top: 1px solid #dee2e6; background: #fff; }