/* Custom styles for Reggie portal */

/* AG Grid */
.submitted-row {
    background-color: #9e9e9e;
    color: gray;
}

.failed-row {
    background-color: #ecbcbc;
}

.ready-to-submit-row {
    background-color: #abceae8a;
}

.processing-row {
    background-color: #fbffc7;
}

.name-match-cell {
    color: rgb(204, 204, 204);
}

/* Pages */

.page {
    width: 100%;
    max-width: 75rem; /* max-w-4xl */
    margin: 0 auto;
}

.page-box {
    border: 1px solid #D1D5DB; /* gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #ffffff; /* white */
    max-width: 75rem; /* max-w-4xl */
    margin: 1rem auto 0; /* mt-4 mx-auto */
}

.page-box--padded {
    padding: 2rem; /* px-8 py-8 */
}

.table-base {
    width: 100%;
    table-layout: fixed;
}

.table-header {
    background-color: #4B5563; /* gray-600 */
    color: #ffffff;
}

.table-header-cell {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    text-align: left;
    font-weight: 600; /* font-semibold */
}

.table-row {
    border-bottom: 1px solid #E5E7EB; /* gray-200 */
}

.table-cell {
    padding: 0.5rem 1rem; /* px-4 py-2 */
}

.icon-btn {
    border: 2px solid #9CA3AF; /* gray-400 */
    border-radius: 9999px; /* rounded-full */
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #4B5563; /* gray-600 for inner icon */
}
.icon-btn:hover {
    background-color: #F3F4F6; /* gray-100 */
}
.icon-btn:focus {
    outline: none;
}

.x-delete-icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    color: #EF4444; /* red-500 */
}
.x-delete-icon:hover {
    color: #B91C1C; /* red-700 */
}

/* Sidebar navigation active link */
.sidebar-link {
    display: block;
    padding-left: 0.75rem; /* pl-3 */
    color: #374151; /* gray-700 */
    font-weight: 500; /* font-medium */
}
.sidebar-link:hover {
    color: #4F46E5; /* indigo-600 */
}

/* Active state for sidebar navigation link */
.sidebar-link-active {
    border-left: 2px solid #4F46E5; /* indigo-600 */
    color: #4F46E5; /* indigo-600 */
}

/* Typography */
body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #374151; /* gray-700 */
}

.heading {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    color: #374151; /* gray-700 */
}

.subheading {
    font-size: larger;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: #4B5563; /* gray-600 */
}

/* Layout helpers extracted from templates */
.top-bar {
    background-color: #E5E7EB; /* gray-200 */
    height: 3rem; /* h-12 */
    display: flex;
    align-items: center;
    padding: 0 2rem; /* px-8 */
    border-bottom: 1px solid #D1D5DB; /* gray-300 */
}

.status-dot {
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
    border-radius: 9999px; /* rounded-full */
    background-color: #9CA3AF; /* gray-400 */
    display: inline-block;
}

.sidebar {
    width: 16rem; /* w-64 */
    border-right: 1px solid #E5E7EB; /* gray-200 */
    min-height: 100vh; /* min-h-screen */
    background-color: #ffffff; /* bg-white */
}

.page-box--center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12rem; /* h-48 */
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    border-radius: 9999px; /* rounded-full */
}
.badge--green {
    background-color: #bbf7d0; /* green-200 */
    color: #065f46; /* green-800 */
}
.badge--red {
    background-color: #fecaca; /* red-200 */
    color: #991b1b; /* red-800 */
}

.tab-btn {
    flex: 1;
    background-color: #4B5563; /* gray-600 */
    color: #ffffff;
    font-weight: 600; /* font-semibold */
    padding: 0.5rem 0; /* py-2 */
    outline: none;
}
.tab-btn--left {
    border-right: 1px solid #ffffff;
    border-top-left-radius: 0.375rem; /* rounded-tl-md */
}
.tab-btn--right {
    border-top-right-radius: 0.375rem; /* rounded-tr-md */
}

.icon-cell {
    padding: 0.5rem; /* px-2 py-2 */
    text-align: center;
    vertical-align: middle;
}

/* Additional helpers */
.status-group {
    display: flex;
    gap: 0.25rem; /* space-x-1 */
    margin-right: 1rem; /* mr-4 */
}

.icon-header-cell {
    padding: 0.5rem; /* px-2 py-2 */
    width: 2.5rem;   /* w-10 */
}

.form-select {
    border: 1px solid #D1D5DB; /* gray-300 */
    border-radius: 0.25rem; /* rounded */
    padding: 0.25rem 0.5rem; /* py-1 px-2 */
    width: 100%;
    color: #374151; /* text-gray-700 */
}

.flex-center {
    display: flex;
    justify-content: center;
}

.btn-inline {
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    outline: none;
}

.icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
}

.icon--gray {
    color: #4B5563; /* gray-600 */
}

.section-heading {
    margin-bottom: 1rem; /* mb-4 */
}

.page-box--padded-overflow {
    padding: 2rem; /* px-8 py-8 */
    overflow: hidden;
}
/* Form inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"] {
    border: 1px solid #D1D5DB; /* gray-300 */
    border-radius: 0.5rem;
    padding: 0.5rem;
    width: 100%;
    color: #374151; /* gray-700 */
    background-color: #ffffff; /* white */
    height: 2.5rem;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type='file']:focus+.upload-instructions,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus {
    outline: none;
    border-color: #4F46E5; /* indigo-600 */
    box-shadow: 0 0 0 1px #4F46E5;
}

input:disabled {
    background-color: lightgray;
}

input:user-invalid {
    border-color: red;
    box-shadow: 0;
}

.required-asterisk {
    color: red;
}

.divider {
    border: 1px solid lightgray;
    margin-top: 2rem;
}

/* File upload */
.file-upload-enabled,
.file-upload-disabled {
  position: relative;
}

input[type='file'] {
  /* Hide the file input keeping it focusable */
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.upload-instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: 0.5rem;
}

.file-upload-enabled {
    cursor: pointer;
    border-style: dashed;
}

.file-upload-disabled {
    background-color: lightgray;
}


.file-upload-action {
    /* font-size: larger; */
    font-weight: bold;
}

.file-upload-description {
    color: gray;
}

.file-upload--center:has(input:user-invalid) {
    border: 1px solid red;
}

.file-upload--center:hover {
    background-color: rgb(239, 239, 239);
}

.caption {
    font-size: small;
    color: gray;
    margin-top: 0.5rem;
}

/* Submit button */

.submit-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

input[type='submit'],
button {
    color: white;
    background-color: rgb(0, 170, 0);
    padding: 1rem;
    font-size: larger;
    border-radius: 0.5rem;
    cursor: pointer;
}

button.danger {
    background-color: rgb(170, 0, 0);
}

button.danger:hover {
    background-color: rgb(123, 0, 0);
}

input[type='submit']:hover {
    background-color: rgb(0, 123, 0);
}

input[type='submit']:disabled,
button.danger:disabled,
button:disabled {
    background-color: lightgray;
    cursor: default;
}

button.logout {
    background-color: rgba(0, 0, 0, 0);
}

.delete-icon {
    fill: lightgray;
}
.delete-icon:hover {
    fill: rgb(80, 80, 80);
}