html, body {
    font-family: 'Pirata One', Helvetica, Arial, sans-serif;
    background-image: url('images/site/IRRbackground.webp'); /* Use WebP for modern browsers */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keep background fixed across all pages */
}

/* Font preference system - applies to entire page except FormatCertificate dropdowns */
/* Applied to .page div in MainLayout (pure Blazor, no JavaScript!) */
.page.font-pirata-one {
    font-family: 'Pirata One', Helvetica, Arial, sans-serif;
}

.page.font-arial {
    font-family: Arial, Helvetica, sans-serif;
}

/* Ensure font cascades to all children except icons and specific containers */
.page.font-pirata-one *:not(.format-certificate-container):not(.control-panel):not(select):not(option):not(i):not(.fas):not(.fa):not(.far):not(.fab):not(.bi) {
    font-family: inherit;
}

.page.font-arial *:not(.format-certificate-container):not(.control-panel):not(select):not(option):not(i):not(.fas):not(.fa):not(.far):not(.fab):not(.bi) {
    font-family: inherit;
}

/* Ensure select and option elements inside format-certificate and control-panel use their own fonts */
.format-certificate-container select,
.format-certificate-container option,
.control-panel select,
.control-panel option {
    font-family: inherit !important;
}

/* Preserve specific fonts in FormatCertificate dropdowns regardless of global font */
.format-certificate-dropdown,
.format-certificate-dropdown select,
.format-certificate-dropdown option {
    font-family: inherit !important; /* Keep dropdown's own font selection */
}

/* Center text utility classes */
.text-center {
    text-align: center;
}

.text-center-large {
    text-align: center;
    margin: 0 auto;
    max-width: 900px;
}

/* Center specific headings */
.welcome-heading {
    text-align: center;
    margin-bottom: 2rem;
}

/* Home page two-column layout */
.home-layout-table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
    table-layout: auto;
}

/* Home page layout table using IDs */
#maintable {
    width: 100%;
    border-collapse: collapse;
}

#maintable td {
    vertical-align: top;
}

/* Desktop/Tablet: titlecolumn on left, searchcolumn on right, both top-aligned and left-justified */
@media (min-width: 993px) {
    #maintable {
        display: table;
    }
    
    #maintable tbody,
    #maintable tr {
        display: table-row;
    }
    
    #titlecolumn {
        width: 70%;
        padding-right: 2rem;
        vertical-align: top;
        text-align: left;
    }
    
    #searchcolumn {
        width: 30%;
        padding-left: 2rem;
        vertical-align: top;
        text-align: left;
    }
}

/* Mobile: searchcolumn on top, titlecolumn below */
@media (max-width: 992px) {
    /* Convert outer layout table to block and reverse order */
    #maintable {
        display: block !important;
        width: 100% !important;
    }
    
    #maintable > tbody,
    #maintable > tbody > tr {
        display: flex !important;
        flex-direction: column-reverse !important;
        width: 100% !important;
    }
    
    #maintable > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }
    
    #titlecolumn,
    #searchcolumn {
        padding: 0 !important;
        margin-bottom: 2rem;
        text-align: left;
    }
    
    /* Keep inner data table (#titletable) displaying normally */
    #titletable,
    #titletable tbody,
    #titletable tr {
        display: table !important;
        width: 100% !important;
    }
    
    #titletable tbody {
        display: table-row-group !important;
    }
    
    #titletable tr {
        display: table-row !important;
    }
    
    #titletable td,
    #titletable th {
        display: table-cell !important;
    }
}

/* Legacy class-based selectors - kept for backwards compatibility */
.home-layout-table td {
    vertical-align: top;
    padding: 0;
}

.home-layout-table .left-column {
    width: auto;
    padding-right: 1rem;
}

.home-layout-table .right-column {
    width: auto;
    padding-left: 1rem;
}

/* Responsive layout - stack columns on smaller screens with search form on top */
@media (max-width: 992px) {
    /* Convert outer layout table to block and reverse columns */
    .home-layout-table {
        display: block !important;
        width: 100% !important;
    }
    
    .home-layout-table > tbody,
    .home-layout-table > tbody > tr {
        display: flex !important;
        flex-direction: column-reverse !important;
        width: 100% !important;
    }
    
    .home-layout-table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }
    
    .home-layout-table .left-column,
    .home-layout-table .right-column {
        padding: 0 !important;
        margin-bottom: 2rem;
    }
    
    /* Keep inner data table displaying normally (don't reverse rows) */
    .home-layout-table .table-wrapper-compact table,
    .home-layout-table .table-wrapper-compact tbody,
    .home-layout-table .table-wrapper-compact tr {
        display: table !important;
        width: 100% !important;
    }
    
    .home-layout-table .table-wrapper-compact tbody {
        display: table-row-group !important;
    }
    
    .home-layout-table .table-wrapper-compact tr {
        display: table-row !important;
    }
    
    .home-layout-table .table-wrapper-compact td,
    .home-layout-table .table-wrapper-compact th {
        display: table-cell !important;
    }
}


/* Transparent pricing table styles */
.pricing-table {
    background-color: transparent !important;
    width: auto;
    max-width: 300px;
    margin: 0;
}

.pricing-table thead th {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333;
    font-weight: bold;
    padding: 0.75rem 1rem;
}

.pricing-table tbody td {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #333;
    padding: 0.75rem 1rem;
}

.pricing-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Transparent table styles for Home, Search, and Profile pages */
.table {
    background-color: transparent !important;
}

.table thead th {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333;
    font-weight: bold;
}

.table tbody td {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #333;
}

.table tbody tr {
    background-color: transparent !important;
}

.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Make table-striped completely transparent */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
    background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(even) td {
    background-color: transparent !important;
}

/* Table dark header - make semi-transparent */
.table-dark th {
    background-color: rgba(33, 37, 41, 0.7) !important;
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Compact table layout for home page newest titles */
.table-compact {
    width: auto !important;
    max-width: 100%;
    margin: 0; /* Left-aligned (removed auto centering) */
    font-size: 1.2rem; /* 20% larger than default 1rem */
    table-layout: auto;
}

.table-compact th,
.table-compact td {
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}

/* Title column - allow wrapping with max-width constraint */
.table-compact th.title-column,
.table-compact td.title-column {
    white-space: normal;
    word-wrap: break-word;
    max-width: 40ch; /* Maximum 40 characters before wrapping */
    min-width: 10ch;
}

/* Search result messages - match table font size */
.search-result-message {
    font-size: 1.2rem; /* Match .table-compact font size */
    margin-bottom: 1rem;
}

/* Responsive table wrapper - left-aligned on all screens */
.table-wrapper-compact {
    max-width: 1200px;
    margin: 0; /* Left-aligned */
    overflow-x: auto;
}

/* On medium to large screens, keep table left-aligned */
@media (min-width: 768px) {
    .table-wrapper-compact {
        max-width: fit-content;
        display: block; /* Changed from flex to block for left alignment */
    }
    
    .table-compact {
        width: auto !important;
    }
}

/* On small screens, allow full width for better mobile experience */
@media (max-width: 767px) {
    .table-compact th,
    .table-compact td {
        white-space: normal;
        word-wrap: break-word;
    }
}

/* Card transparency for profile page */
.card {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.card-header {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.card-body {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.card-footer {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
  color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

@media (min-width: 768px) {
    .search-input-80 {
        width: 100%;
        min-width: 250px;
    }
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.8rem; }
    h3 { font-size: 2.2rem; }
    h4 { font-size: 1.8rem; }
}

/* Style for 80-character search input */
.search-input-80 {
    width: 80ch; /* 80 character width */
    max-width: 100%; /* Ensure it doesn't overflow on small screens */
    min-width: 300px; /* Minimum usable width */
    padding: 0.5rem;
    font-size: 1rem;
    font-family: monospace, 'Courier New', monospace; /* Monospace for accurate character counting */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Responsive adjustments */


@media (max-width: 480px) {
    .search-input-80 {
        min-width: 200px;
        font-size: 0.9rem;
    }
}