/* ========================================
   UNIVERSAL STYLES FOR ASP.NET WEB FORMS
   site-common.css
   ======================================== */

/* --- CSS RESET & BOX MODEL --- */
* {
    box-sizing: border-box;
}

/* --- BASE STYLES --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/*BASE PAGE STUFF*/
/* ============================================
   EMPLOYERS SECTION - HEADER & FOOTER STYLES
   ============================================ */

/* ---- Top Bar (Nebraska.gov branding) ---- */
#topBar {
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    background-color: #d7d7d7;
    position: relative;
    z-index: 100;
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
}

#topBar :link, 
#topBar :visited {
    color: #4C5A63;
}

#topBar :link:hover, 
#topBar :visited:hover, 
#topBar :link:active, 
#topBar :visited:active {
    color: #fff;
}

#topBar960 {
    width: 960px;
    height: 30px;
    padding: 0 20px;
    margin: 0 auto;
}

#topBar960:after {
    content: "";
    display: table;
    clear: both;
}

#topBarLeft {
    height: 30px;
    float: left;
}

#topBarLeftNeIcon {
    width: 29px;
    height: 13px;
    background: url(/images/nebraskaIconSprite.png) no-repeat;
    float: left;
    margin-top: 1px;
}

#topBarLeft a:hover #topBarLeftNeIcon {
    background-position: bottom;
}

#topBarLeft span {
    float: left;
    margin-left: 4px;
}

#topBarLeft a {
    height: 15px;
    margin-top: 7px;
    display: inline-block;
}

#topBarRight {
    height: 15px;
    float: right;
    margin-top: 7px;
}

/* ---- Header Container ---- */
header {
    width: 100%;
}

.headerBg {
    width: 100%;
    position: relative;
}

.headerBg.home {
    box-shadow: 0 0 3px 3px rgba(0,0,0,0.4);
}

.header960 {
    width: 960px;
    height: 120px;
    margin: 0 auto;
    position: relative;
}

/* ---- NCSPC Logo ---- */
.ncspcLogo {
    width: 377px;
    height: 86px;
    position: absolute;
    top: 18px;
    left: 20px;
    transition: all 0.21s ease-in-out 0s;
}

.ncspcLogoHover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.21s ease-in-out 0s;
}

.ncspcLogo:hover .ncspcLogoHover {
    opacity: 1;
    transition: all 0.21s ease-in-out 0s;
}

.ncspcLogo:hover .ncspcLogoNormal {
    opacity: 0;
    transition: all 0.21s ease-in-out 0s;
}

/* ---- User Info / Date Display ---- */
#UserAndPwFieldsDiv {
    position: absolute;
    right: 20px;
    top: 14px;
    z-index: 10;
}

/* ---- Main Navigation Bar ---- */
.employerMainNavBg {
    background: #003d7a;
    border-bottom: 3px solid #f4a525;
}

.employerMainNav {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.employerMainNav:after {
    content: "";
    display: table;
    clear: both;
}

.employerMainNav a {
    color: #fff;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s;
    flex: 0 0 auto;
}

.employerMainNav a:hover,
.employerMainNav a:focus {
    background: rgba(255, 255, 255, 0.1);
}

.employerMainNav a.last {
    margin-right: 0;
}

/* ---- Secondary Navigation (Piped Links) ---- */
#EmployerLinksUl,
#AdminLinksUl {
    list-style: none;
    margin: 30px auto;
    padding: 0;
    text-align: center;
    max-width: 960px;
}

#EmployerLinksUl:after,
#AdminLinksUl:after {
    content: "";
    display: table;
    clear: both;
}

#EmployerLinksUl li,
#AdminLinksUl li {
    display: inline-block;
    padding: 0 15px;
    border-right: 1px solid #ccc;
    line-height: 1.2;
}

#EmployerLinksUl li.first,
#AdminLinksUl li.first {
    padding-left: 0;
}

#EmployerLinksUl li:last-child,
#AdminLinksUl li:last-child {
    border-right: none;
    padding-right: 0;
}

#EmployerLinksUl li a,
#AdminLinksUl li a {
    font-size: 18px;
    color: #003d7a;
    text-decoration: none;
    font-weight: 600;
}

#EmployerLinksUl li a:hover,
#EmployerLinksUl li a:focus,
#AdminLinksUl li a:hover,
#AdminLinksUl li a:focus {
    text-decoration: underline;
    color: #f4a525;
}

/* ---- Footer ---- */
footer {
    width: 100%;
    background-color: #eee;
    margin-top: 40px;
}

.footer960 {
    width: 960px;
    height: 66px;
    padding: 25px 20px;
    margin: 0 auto;
}

.footer960:after {
    content: "";
    display: table;
    clear: both;
}

/* ---- Footer Piped Lists ---- */
.footer960 ul.piped {
    cursor: default;
    margin: 0;
    padding: 0;
}

.footer960 ul.piped.left {
    float: left;
}

.footer960 ul.piped.right {
    float: right;
}

.footer960 ul.piped li {
    line-height: 1.2;
    padding-left: 0.75em;
    border-left: 1px solid #cdcdcd;
    margin-left: 0.525em;
    display: inline;
}

.footer960 ul.piped li.first,
.footer960 ul.piped li:first-child {
    border-left: 0 none;
    margin-left: 0;
    padding-left: 0;
}

.footer960 ul.piped a {
    text-decoration: none;
}

.footer960 ul.piped :link,
.footer960 ul.piped :visited {
    color: #005C99;
}

.footer960 ul.piped :link:hover,
.footer960 ul.piped :visited:hover,
.footer960 ul.piped :link:active,
.footer960 ul.piped :visited:active {
    color: #e29025;
}

/* ---- Print Styles ---- */
@media print {
    #topBar,
    .employerMainNavBg,
    #EmployerLinksUl,
    #AdminLinksUl,
    footer {
        display: none;
    }
}

/* --- LAYOUT CONTAINERS --- */
.page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page {
    background: #fff;
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

/* Narrower container for forms */
.form-container {
    background-color: #fff;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 24px 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* --- TYPOGRAPHY --- */
h1 {
    margin: 0 0 16px 0;
    font-size: 1.5rem;
    color: #222;
    font-weight: 600;
}

h2 {
    margin: 0 0 12px 0;
    font-size: 1.2rem;
    color: #333;
    font-weight: 600;
}

h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #333;
    font-weight: 600;
}

p {
    margin: 0 0 12px 0;
}

/* Section titles with bottom border */
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #005a9c;
    margin: 24px 0 12px;
    border-bottom: 2px solid #005a9c;
    padding-bottom: 4px;
}

.subtitle {
    margin: 6px 0 18px;
    color: #555;
    font-size: 14px;
}

/* --- UTILITY CLASSES --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.bold { font-weight: bold; }
.muted { color: #666; }

.margin-0 { margin: 0; }
.margin-top-20 { margin-top: 20px; }
.margin-bottom-20 { margin-bottom: 20px; }
.padding-20 { padding: 20px; }

.float-left { float: left; }
.float-right { float: right; }

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.inline-block { display: inline-block; }

/* Line heights */
.line-height-12 { line-height: 1.2; }
.line-height-13 { line-height: 1.3; }
.line-height-14 { line-height: 1.4; }
.line-height-16 { line-height: 1.6; }

/* --- BUTTONS --- */
.form-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    text-align: center;
}

.btn-primary {
    background: #007acc;
    color: #fff;
}

.btn-primary:hover {
    background: #005a9c;
}

.btn-secondary {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
}

.btn-secondary:hover {
    background: #f5f5f5;
}

.btn-success {
    background: #28a745;
    color: #fff;
}

.btn-success:hover {
    background: #218838;
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Button groups */
.btn-group {
    display: flex;
    gap: 12px;
}

/* --- FORMS --- */
label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    font-size: 1rem;
}
td.label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    font-size: 1rem;
}


input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #007acc;
    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.15);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/* Form Card Stuff */
.form-card {
    max-width: 920px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    background: #fff;
}

.form-card h1 {
    margin: 0 0 16px 0;
    font-size: 1.5rem;
    color: #222;
}

.form-card h2 {
    margin: 0 0 12px 0;
    font-size: 1.2rem;
    color: #333;
}

/* Form grid layouts */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.form-grid .full,
.form-grid-3 .full {
    grid-column: 1 / -1;
}

.form-group {
    margin-bottom: 16px;
}

.form-section {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 24px;
}

.form-group-centered {
    text-align: center;
    margin: 20px auto;
}

.form-group-centered label {
    display: block;
    margin-bottom: 5px;
    font-weight: normal;
}

.form-input-small {
    width: 200px;
    padding: 5px;
    font-size: 14px;
}

/* Required field indicator */
.required {
    color: #b30000;
    margin-left: 4px;
    font-weight: 700;
}

/* Helper text */
.helper-text {
    color: #666;
    font-size: 0.9rem;
    margin-top: 4px;
    display: block;
}

/* Radio button lists */
.radio-list label {
    display: inline;
    font-weight: 400;
    margin-right: 20px;
}

.radio-list input[type="radio"] {
    margin-right: 8px;
    cursor: pointer;
}

/* --- VALIDATION --- */
.validation-summary {
    border: 1px solid #f5c6cb;
    background: #f8d7da;
    padding: 12px 16px;
    border-radius: 4px;
    color: #721c24;
    margin-bottom: 16px;
}

.validation-summary ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.field-error {
    color: #d9534f;
    font-size: 0.85rem;
    margin-top: 4px;
    display: block;
}

/* --- CALLOUTS & ALERTS --- */
.callout {
    background: #f7fbff;
    border-left: 4px solid #007acc;
    padding: 14px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.callout.warning {
    background: #fff8f8;
    border-left-color: #d9534f;
}

.callout.info {
    background: #f0f9ff;
    border-left-color: #0284c7;
}

.callout.success {
    background: #f0fdf4;
    border-left-color: #16a34a;
}

.callout strong {
    display: block;
    margin-bottom: 4px;
}

/* --- CARDS --- */
.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    background: #fff;
    margin-bottom: 24px;
}

.card h1 {
    margin: 0 0 8px 0;
}

.card h2 {
    margin: 0 0 16px 0;
}

/* --- TABLES --- */
/* --- SPECIAL TABLE ---*/
.ncsp-employers-list {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    border: 1px solid #dee2e6;
}

.ncsp-employers-list-header {
    display: table-header-group;
}

.ncsp-employers-list-body {
    display: table-row-group;
}

.ncsp-employers-list-row {
    display: table-row;
}

.ncsp-employers-list-cell {
    display: table-cell;
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    color: #555;
    vertical-align: middle;
}

.ncsp-employers-list-cell:last-child {
    border-right: none;
}

/* Header cells styling */
.ncsp-employers-list-header .ncsp-employers-list-cell {
    background: #f8f9fa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
}

/* Hover effect for data rows */
.ncsp-employers-list-body .ncsp-employers-list-row:hover .ncsp-employers-list-cell {
    background: #f8f9fa;
}

/* Footer row styling */
.ncsp-employers-list-footer {
    background: #f8f9fa;
}

.ncsp-employers-list-footer .ncsp-employers-list-cell {
    font-weight: bold;
    background: #f8f9fa;
}

/* GridView specific overrides */
.ncsp-employers-list.gridview-table {
    display: block;
}


.ncsp-employers-list.gridview-table table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
}

.ncsp-employers-list.gridview-table th {
    background: #f8f9fa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}

.ncsp-employers-list.gridview-table th:last-child {
    border-right: none;
}

.ncsp-employers-list.gridview-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    color: #555;
    vertical-align: middle;
}

.ncsp-employers-list.gridview-table td:last-child {
    border-right: none;
}
.ncsp-employers-list-select {
    background: #708090;
    background: #f0f9ff;
}
.ncsp-employers-list-select td, tr {
/*    color: #fff !important;*/
    color: #555 !important;
}
.ncsp-employers-list-select:hover tr, 
.ncsp-employers-list-select:hover td {
    color: #555 !important;
}


.ncsp-employers-list.gridview-table tr:hover td {
    background: #f8f9fa;
    color: #555;
}

/* Button styling inside tables */
.ncsp-employers-list .btn-table-action {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 6px 12px;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.ncsp-employers-list .btn-table-action:hover {
    background: #f5f5f5;
    text-decoration: none;
}
/* GridView Footer specific fixes */
.ncsp-employers-list.gridview-table tfoot td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    font-weight: bold;
    background: #f8f9fa;
    vertical-align: middle;
}

.ncsp-employers-list.gridview-table tfoot td:last-child {
    border-right: none;
}

/* Force footer cells to respect column widths */
.ncsp-employers-list.gridview-table table {
    table-layout: fixed;
} 

/* Text alignment utilities */
.tc { text-align: center; }
.tr { text-align: right; }
.tl { text-align: left; }


/* --- BADGES --- */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-secondary {
    background: #e5e7eb;
    color: #4b5563;
}

.badge-primary {
    background: #dbeafe;
    color: #1e40af;
}

/* --- LISTS --- */
.chevron-list {
    list-style: none;
    padding-left: 0;
}

.chevron-list li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}

.chevron-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #005a9c;
    font-weight: bold;
    font-size: 1.2em;
}

.piped-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 15px;
}

.piped-list li {
    position: relative;
}

.piped-list li:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: -10px;
    color: #959595;
}

/* --- MODALS --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: white;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: #222;
}

.modal-body {
    margin-bottom: 24px;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

/* --- INFO TOOLTIPS --- */
.info-tip {
    display: inline-block;
    margin-left: 8px;
    position: relative;
}

.info-tip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #007acc;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: help;
}

.info-tip__content {
    display: none;
    position: absolute;
    left: 0;
    top: 24px;
    z-index: 100;
    width: 280px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-size: 0.9rem;
    font-weight: 400;
}

.info-tip:hover .info-tip__content,
.info-tip:focus-within .info-tip__content {
    display: block;
}

/* --- BREADCRUMBS --- */
.breadcrumbs-container {
    background-color: #f0f0f0;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.breadcrumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.breadcrumbs li {
    display: inline;
}

.breadcrumbs li:not(:last-child)::after {
    content: ' › ';
    margin-left: 8px;
    color: #666;
}

.breadcrumbs a {
    color: #005a9c;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* --- EMPTY STATES --- */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #666;
}

.empty-state-icon {
    font-size: 3rem;
    color: #ccc;
    margin-bottom: 16px;
}

/* --- GRID LAYOUTS --- */
.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Reduced from 320px */
    gap: 24px;
    margin: 0 0 30px;
}

/* --- PRINT STYLES --- */
@media print {
    @page {
        size: auto;
        margin: 0.5in;
    }

    body {
        background-color: white;
        padding: 0;
        margin: 0;
    }

    .page,
    .form-container,
    .card {
        box-shadow: none;
        border: none;
        border-radius: 0;
        page-break-inside: avoid;
    }

    /* Hide interactive elements */
    .btn,
    .btn-group,
    .actions,
    .modal-overlay {
        display: none !important;
    }

    /* Ensure form inputs print their values */
    input,
    select,
    textarea {
        border: 1px solid #999 !important;
        background-color: white !important;
    }
}

/* ========================================
   RESPONSIVE BREAKPOINTS - CONSOLIDATED
   ======================================== */

/* Tablet breakpoint (768px and below) */
@media (max-width: 768px) {
    /* Top Bar */
    #topBar960 {
        width: 100%;
        height: auto;
        min-height: 30px;
        padding: 8px 15px;
    }

    #topBarLeft {
        float: none;
        width: 100%;
        margin-bottom: 8px;
        height: auto;
    }

        #topBarLeft a {
            display: flex;
            align-items: center;
            height: auto;
            margin-top: 0;
        }

        #topBarLeft span {
            margin-left: 8px;
            font-size: 12px;
        }

    #topBarRight {
        float: none;
        width: 100%;
        margin-top: 0;
        height: auto;
        text-align: left;
    }

        #topBarRight a {
            font-size: 12px;
        }

    /* Header */
    .header960 {
        width: 100%;
        height: auto;
        min-height: 120px;
        padding: 15px;
    }

    .ncspcLogo {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 300px;
        height: auto;
        margin: 0 auto 10px;
        display: block;
    }

        .ncspcLogo img {
            width: 100%;
            height: auto;
        }

    #UserAndPwFieldsDiv {
        position: relative;
        right: auto;
        top: auto;
        text-align: center;
        width: 100%;
        margin-top: 10px;
        padding: 0;
        font-size: 13px;
    }

    /* Main Navigation - Stack Vertically */
    .employerMainNav {
        flex-direction: column;
    }

        .employerMainNav a {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

            .employerMainNav a.last {
                border-bottom: none;
            }

    /* Secondary Navigation - Stack Vertically */
    #EmployerLinksUl li,
    #AdminLinksUl li {
        display: block;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding: 10px 15px;
    }

        #EmployerLinksUl li:last-child,
        #AdminLinksUl li:last-child {
            border-bottom: none;
        }

    /* Footer */
    .footer960 {
        width: 100%;
        height: auto;
        padding: 20px 15px;
    }

        .footer960 ul.piped.left,
        .footer960 ul.piped.right {
            float: none;
            text-align: center;
            margin: 10px 0;
            width: 100%;
        }

    /* Layout & Containers */
    .page-container {
        padding: 12px;
    }

    .page,
    .form-container,
    .card {
        padding: 16px;
    }

    .form-card {
        padding: 16px;
    }

    .form-container {
        padding: 16px 20px;
    }

    /* Grids - Stack all layouts */
    .form-grid,
    .form-grid-3,
    .address-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Buttons - Full width */
    .btn-group {
        flex-direction: column;
    }

        .btn-group .btn {
            width: 100%;
        }

    /* Modals */
    .modal-content {
        padding: 20px;
        width: 95%;
        max-width: 95%;
    }

    /* Typography */
    h1 {
        font-size: 1.3rem;
    }

    h2 {
        font-size: 1.1rem;
    }

    /* Info Tooltips */
    .info-tip__content {
        width: 260px;
        left: auto;
        right: 0;
        max-width: calc(100vw - 30px);
    }

    /* Enable horizontal scrolling */
    .grid-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px; /* Extend to edges on mobile */
        padding: 0 16px;
    }
    
    /* Prevent table from becoming too narrow */
    .ncsp-employers-list.gridview-table table {
        min-width: 100%;
        table-layout: auto; /* Allow columns to size naturally */
    }
    
    /* Reduce padding in all cells */
    .ncsp-employers-list.gridview-table td,
    .ncsp-employers-list.gridview-table th {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
    
    /* Stack action links vertically to prevent overlap */
    .ncsp-employers-list.gridview-table td a {
        display: block;
        padding: 6px 10px;
        margin: 2px 0;
        text-align: center;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    /* Allow header text to wrap */
    .ncsp-employers-list.gridview-table th {
        white-space: normal;
        line-height: 1.3;
    }
    
    /* Ensure minimum touch target size (44x44px) */
    .ncsp-employers-list.gridview-table td a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

}

/* Phone breakpoint (600px and below) */
@media (max-width: 600px) {
    /* Top bar smaller */
    #topBar960 {
        padding: 6px 12px;
    }

    #topBarLeft span,
    #topBarRight a {
        font-size: 11px;
    }

    #topBarLeftNeIcon {
        width: 24px;
        height: 11px;
    }

    /* Logo smaller */
    .ncspcLogo {
        max-width: 250px;
    }

    /* User info smaller */
    #UserAndPwFieldsDiv {
        font-size: 12px;
    }

    /* Navigation smaller */
    .employerMainNav a {
        font-size: 14px;
        padding: 12px 15px;
    }

    #EmployerLinksUl li a,
    #AdminLinksUl li a {
        font-size: 16px;
    }

    /* Footer - Stack items */
    .footer960 {
        padding: 15px 12px;
    }

        .footer960 ul.piped li {
            display: block;
            border-left: none;
            border-bottom: 1px solid #e0e0e0;
            margin: 0;
            padding: 8px 0;
            text-align: center;
        }

            .footer960 ul.piped li:last-child {
                border-bottom: none;
            }
}

/* Very small phones (480px and below) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.2rem;
    }

    h2 {
        font-size: 1rem;
    }

    h3 {
        font-size: 0.95rem;
    }

    .page-container {
        padding: 8px;
    }

    .page,
    .form-container,
    .card,
    .form-card {
        padding: 12px;
    }

    .form-container {
        padding: 12px 16px;
    }

    /* Modals on very small screens */
    .modal-content {
        padding: 16px;
        width: 95%;
    }

    .modal-header h2 {
        font-size: 1.1rem;
    }

    .modal-footer {
        flex-direction: column;
    }

        .modal-footer .btn {
            width: 100%;
        }

    /* Info tooltips even smaller */
    .info-tip__content {
        width: 220px;
        font-size: 0.85rem;
        padding: 10px;
    }

    /* Reduce button padding */
    .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .btn-small {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    .ncsp-employers-list.gridview-table td,
    .ncsp-employers-list.gridview-table th {
        padding: 8px 6px;
        font-size: 0.85rem;
    }
    
    .ncsp-employers-list.gridview-table td a {
        font-size: 0.8rem;
        padding: 5px 8px;
    }
}