/* ── Custom application styles (Tailwind CSS / TailAdmin design system) ─ */

/* ── TailAdmin: Base typography & body ───────────────────────────────── */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── TailAdmin: Admin layout ─────────────────────────────────────────── */
/* Full-height flex wrapper produced by navigation.php for admin users */
#admin-wrapper {
    min-height: 100vh;
}

/* ── Student Portal layout ───────────────────────────────────────────── */
/* Full-height flex wrapper for student users */
#student-wrapper {
    min-height: 100vh;
}

/* ── Company Portal layout ───────────────────────────────────────────── */
/* Full-height flex wrapper for company/recruiter users */
#company-wrapper {
    min-height: 100vh;
}

/* ── TailAdmin: Sidebar ──────────────────────────────────────────────── */
.ta-sidebar {
    width: 18rem; /* 288px / w-72 */
    flex-shrink: 0;
}

/* ── TailAdmin: Sidebar nav links ────────────────────────────────────── */
.ta-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;         /* gap-3 */
    padding: 0.625rem 0.75rem; /* py-2.5 px-3 */
    border-radius: 0.5rem;    /* rounded-lg */
    font-size: 0.875rem;      /* text-sm */
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.ta-nav-link-inactive {
    color: #4B5563;  /* gray-600 */
}
.ta-nav-link-inactive:hover {
    background-color: #F3F4F6; /* gray-100 */
    color: #1F2937;            /* gray-800 */
}
.ta-nav-link-active {
    background-color: #EFF6FF; /* blue-50, consistent with primary #3C50E0 */
    color: #3C50E0;            /* primary */
}

/* ── TailAdmin: Stat cards ───────────────────────────────────────────── */
.ta-stat-card {
    display: block;
    background-color: #ffffff;
    border-radius: 0.75rem;      /* rounded-xl */
    border: 1px solid #E5E7EB;   /* border-gray-200 */
    padding: 1.25rem 1.5rem;     /* p-5 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    text-decoration: none;
    color: inherit;
}
.ta-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    transform: translateY(-1px);
}
.ta-stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;     /* 44px */
    height: 2.75rem;
    border-radius: 0.625rem; /* rounded-xl */
}
.ta-stat-card-value {
    display: block;
    font-size: 1.75rem;   /* text-3xl-ish */
    font-weight: 700;
    color: #111827;       /* gray-900 */
    line-height: 1.2;
}
.ta-stat-card-label {
    font-size: 0.8125rem; /* ~text-sm */
    color: #6B7280;       /* gray-500 */
    margin-top: 0.125rem;
    font-weight: 500;
}

/* Hero / jumbotron background used on the home page */
.jumbotron-bg-image {
    position: relative;
    background-image: linear-gradient(180deg, rgba(150,105,97,0.67) 0%, rgba(2,0,76,0.84) 100%),
                      url("../images/mainbld.jpg") !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    margin-top: -1px;
    border-radius: 0 !important;
    margin-bottom: 10px;
}

/* Body background image (sign-in / sign-up pages) */
.body-bg-image {
    background-image: linear-gradient(180deg, rgba(150,105,97,0.67) 0%, rgba(2,0,76,0.84) 100%),
                      url("../images/mainbld.jpg") !important;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 !important;
    min-height: 100vh;
}

/* Fixed footer bar */
.footer-div {
    background: #000000;
    color: #ffffff;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 40;
}

.footer-div a {
    color: #ffffff;
}

/* Home page info boxes */
.info-box {
    height: 300px;
    overflow: hidden;
}

.info-box-icon {
    font-size: 36px;
}

/* Student profile helpers */
.students-profile-info-center { text-align: center; }
.students-profile-info-left   { text-align: left; }
.students-profile-cpa         { padding: 10px; }
.students-profile-course      { padding: 10px; }

/* Light background used in a few places */
.bg-gray { background: #f9f9f9; }

/* Icon-only (non-metric) variant: centered icon + label, no count value */
.ta-stat-card.ta-stat-card-icon-only {
    min-height: 7rem;
}

/* ── TailAdmin: Clean table (overrides bordered table defaults) ──────── */
table.ta-table th,
table.ta-table td {
    border: none;
    padding: 0;
    background-color: transparent;
}

/* ── Table cell / header styling ─────────────────────────────────────── */
table.min-w-full th,
table.min-w-full td {
    border: 1px solid #d1d5db;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
table.min-w-full thead th {
    background-color: #f9fafb;
    font-weight: 600;
}
table.min-w-full tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

/* ── Clearfix ─────────────────────────────────────────────────────────── */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* ── Pagination links (generated by CI3 Pagination library) ──────────── */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.pagination li a,
.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #2563eb;
    font-size: 14px;
    text-decoration: none;
}
.pagination li a:hover { background-color: #eff6ff; }
.pagination li.active a,
.pagination li span.current {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* ── Select2 overrides so it looks consistent with Tailwind inputs ──── */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    min-height: 38px;
}

/* ── Bootstrap Datepicker overrides ─────────────────────────────────── */
.datepicker td,
.datepicker th {
    border: none;
}

/* ── Modal system (TailAdmin-aligned) ───────────────────────────────── */
/* Outer overlay — hidden by default; JS toggles the 'hidden' class */
.tw-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.tw-modal.hidden { display: none; }

/* Dialog panel */
.modal-dialog {
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 36rem;
    margin: 0 auto 2rem;
    position: relative;
    border: 1px solid #e5e7eb;
}
.modal-dialog.modal-lg { max-width: 58rem; }
.modal-dialog.modal-sm { max-width: 22rem; }

/* Content wrapper */
.modal-content {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
}

/* Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #f1f3f9;
    background: #ffffff;
    gap: 0.75rem;
}
.modal-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #EEF0FC;
    color: #3C50E0;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.modal-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1a2233;
    margin: 0;
    flex: 1;
}

/* Body */
.modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: 66vh;
}

/* Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid #f1f3f9;
    background: #ffffff;
}

/* Close button */
.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #f3f4f6;
    border: none;
    font-size: 1.125rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.modal-close-btn:hover {
    background: #fee2e2;
    color: #ef4444;
}