/* General Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5   ; /* Light gray background */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;  
}

/* Header */
.header {
    background-color: #fff; /* Dark blue/gray */
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the title */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative; /* For logo positioning */
}

.header .logo {
    position: absolute;
    left: 20px;
}

.header .logo img {
    height: 40px; /* Adjust logo size */
    width: auto;
}

.header-title {
    margin: 0;
    font-size: 1.8em;
    font-weight: 600;
    text-align: center;
    flex-grow: 1; /* Allows title to take available space and center */
}

/* Main Content Area */
.main-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    min-height:60vh;
}

/* Card Box */
.card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 100%;
    max-width: 800px; /* Max width for desktop */
    box-sizing: border-box;
    margin-top: 20px; /* Spacing from header */
}

/* Tabs */
.tabs {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 2px solid #e0e0e0;
}

.tab-button {
    background-color: transparent;
    border: none;
    padding: 15px 25px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 500;
    color: #555;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 3px solid transparent;
}

.tab-button:hover {
    color: #007bff;
}

.tab-button.active {
    color: #007bff; /* Primary blue for active tab */
    border-bottom: 3px solid #007bff;
    font-weight: 600;
}

.tab-content {
    display: none; /* Hidden by default */
}

.tab-content.active {
    display: block; /* Shown when active */
}

/* Input Section */
.input-section {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    gap: 15px;
    margin-bottom: 25px;
}

.input-section label {
    font-size: 1.05em;
    font-weight: 500;
    color: #444;
}

.text-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.text-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.check-button {
    background-color: #007bff; /* Primary blue */
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    align-self: flex-start; /* Align button to start in column layout */
}

.check-button:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

.check-button:active {
    transform: translateY(0);
}

/* Loading Indicator */
.loading-indicator {
    display: none;
    text-align: center;
    padding: 15px;
    font-style: italic;
    color: #666;
    background-color: #e9f5ff;
    border: 1px solid #cceeff;
    border-radius: 8px;
    margin-top: 15px;
}

/* Data Display */
.data-display {
    border-top: 1px solid #eee;
    padding-top: 25px;
    margin-top: 25px;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out; /* Smooth expansion */
    max-height: 1000px; /* Arbitrarily large value for 'expansion' */
    opacity: 1;
    overflow: hidden; /* Hide overflow during transition */
}

.data-display h2 {
    color: #007bff;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    border-bottom: 1px dashed #e0e0e0;
    padding-bottom: 10px;
}

.data-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 15px 25px;
}

.data-item {
    padding: 10px 0;
    /*border-bottom: 1px dashed #f0f0f0;*/
    /*display:flex;*/
    column-gap: 10px;
}

.data-item:last-child {
    border-bottom: none;
}

.data-item strong {
    color: #333;
    /*display: block;*/ /* Make label block for better mobile stacking */
    margin-bottom: 5px;
}

/* Error Modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: center;
}

.modal-content h2 {
    color: #dc3545; /* Red for error */
    margin-top: 0;
    margin-bottom: 15px;
}

.modal-content p {
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 25px;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    text-decoration: none;
}

.modal-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.modal-button:hover {
    background-color: #0056b3;
}

/* Footer */
.footer {
    background-color: #34495e;
    color: #ecf0f1;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 0.9em;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top: auto; /* This is the key: pushes the footer to the bottom */
}

.footer-link {
    color: #ecf0f1; /* Lighter blue for links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    text-decoration: underline;
    color: #fff;
}

.grecaptcha-badge {
    bottom: 40px !important;
}

.message-indicator {
    display: none;
    text-align: center;
    padding: 15px;
    font-style: italic;
    color: #666;
    background-color: #FFEAEA;
    border: 1px solid #cceeff;
    border-radius: 8px;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* --- Responsive Design (Media Queries) --- */

.min-w-full {
    min-width: 100%;
}

.divide-y > * + * {
    border-top-width: 1px;
    border-color: #e5e7eb; /* gray-200 */
}

/* Table header styles */
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.text-left { text-align: left; }
.text-xs { font-size: 0.75rem; /* 12px */ }
.font-medium { font-weight: 500; }
.text-gray-500 { color: #6b7280; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }

/* Table row styles */
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; } /* For alternating rows */
.border-gray-200 { border-color: #e5e7eb; }

.overflow-x-auto-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.overflow-x-auto-wrapper .min-w-full {
    /* If your table is wider than the viewport, this will make it scrollable.
       min-width: 100% from your GridView's CssClass might already handle this,
       but sometimes an explicit width can help, especially if columns are narrow.
       You might need to adjust this value based on your actual content width.
    */
    /* For example, if you know the content will be roughly 700px wide always: */
    /* min-width: 700px; */
    /* Or if min-w-full is not sufficient, make it larger than 100% if content truly overflows */
    /* Example: min-width: max-content; for all content width, but careful with huge tables */
    /* For most cases, the GridView's auto-generated table width combined with the wrapper is enough */
}
/* Mobile devices (portrait and landscape) */
@media (max-width: 768px) {
    .data-item > .min-w-full { /* Target the gridview directly */
        display: block; /* Ensures scrollbar shows */
        overflow-x: auto;
        white-space: nowrap; /* Prevents text from wrapping within cells */
    }

    /* Adjust padding for smaller screens if needed */
    .px-6 { padding-left: 1rem; padding-right: 1rem; }
    .py-3 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

    .header {
        flex-direction: column;
        text-align: center;
        padding: 15px 10px;
    }

    .header .logo {
        position: static; /* Reset absolute positioning */
        margin-bottom: 10px;
    }

    .header-title {
        font-size: 1.5em;
    }

    .main-content {
        padding: 20px 10px;
    }

    .card {
        padding: 20px;
        margin-top: 10px;
        border-radius: 8px;
    }

    .tabs {
        margin-bottom: 15px;
    }

    .tab-button {
        font-size: 1em;
        padding: 12px 15px;
    }

    .input-section {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }

    .text-input,
    .check-button {
        padding: 10px 15px;
        font-size: 0.95em;
    }

    .data-display {
        padding-top: 15px;
        margin-top: 15px;
    }

    .data-display h2 {
        font-size: 1.3em;
        margin-bottom: 15px;
    }

    .data-grid {
        grid-template-columns: 1fr; /* Ensure single column on smaller screens */
        gap: 10px;
    }

    .data-item strong {
        margin-bottom: 2px;
    }

    .modal-content {
        padding: 20px;
    }
}

/* Tablets (landscape) and small desktops */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-title {
        font-size: 1.6em;
    }

    .main-content {
        padding: 30px 15px;
    }

    .card {
        padding: 25px;
    }

    .data-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Two columns, flexible */
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .header .logo {
        left: 50px; /* More spacing for large screens */
    }
    .header-title {
        font-size: 2em;
    }
    .main-content {
        padding: 50px 30px;
    }
    .card {
        padding: 40px;
    }
    .input-section {
        flex-direction: row; /* Horizontal layout for desktop */
        align-items: flex-end; /* Align button with text input bottom */
        gap: 20px;
    }
    .input-section label {
        flex-shrink: 0; /* Prevent label from shrinking */
        align-self: center; /* Vertically align label */
    }
    .text-input {
        flex-grow: 1; /* Allow text input to take available space */
        max-width: 300px; /* Max width for input field */
    }
    .check-button {
        flex-shrink: 0; /* Prevent button from shrinking */
    }
    .data-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
    }
}