/* =========================================================
   GLOBAL RESET & BASE STYLES
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #222222;
    background: #ffffff;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* =========================================================
   MAIN APP CONTAINER
========================================================= */

.app-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 8px;
    overflow: hidden;
}

/* =========================================================
   HEADER / BRAND
========================================================= */

#sdiv {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.brand-text {
    width: 100%;
    text-align: center;
}

/* =========================================================
   TOP CONTROLS (#fdiv)
========================================================= */

#fdiv {
    width: 100%;
    max-width: 1100px;
    margin: 10px auto 15px;
    padding: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Date picker */
#datepicker {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    width: 190px;
    max-width: 100%;
    padding: 8px 10px;
    margin: 0;
    border: 1px solid #999;
    border-radius: 4px;
    background: #ffffff;
    color: #222222;
    font-size: 14px;
}

/* All top buttons */
#fdiv input[type="button"],
#fdiv input[type="submit"],
#fdiv button {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    min-width: 82px;
    margin: 0;
    padding: 8px 12px;

    border: 1px solid transparent;
    border-radius: 4px;

    color: #ffffff;
    background: #337ab7;

    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;

    transition: opacity 0.2s ease;
}

#fdiv input[type="button"]:hover,
#fdiv input[type="submit"]:hover,
#fdiv button:hover {
    opacity: 0.9;
}

#fdiv input[type="button"]:focus,
#fdiv input[type="submit"]:focus,
#fdiv button:focus,
#datepicker:focus {
    outline: 2px solid rgba(51, 122, 183, 0.35);
    outline-offset: 1px;
}

/* Individual button colors */
#getdate {
    background: #337ab7 !important;
    border-color: #286090 !important;
}

#oned {
    background: #59b957 !important;
    border-color: #4cae4c !important;
}

#twod {
    background: #df514c !important;
    border-color: #d43f3a !important;
}

#fref {
    background: #f0ad4e !important;
    border-color: #eea236 !important;
}

#lotus {
    background: #50b9d8 !important;
    border-color: #46b8da !important;
}

#refresh {
    min-width: 38px !important;
    width: 38px !important;
    padding: 6px !important;
    background: #777777 !important;
}

/* Countdown */
#xtime {
    box-sizing: border-box;
    width: 90px;
    min-width: 75px;
    height: 42px;
    padding: 8px 4px;
    margin: 0;

    border: 1px solid #999999;
    border-radius: 4px;

    background: #ffffff;
    color: #222222;

    font-size: 13px;
    text-align: center;
    white-space: nowrap;
}

/* =========================================================
   DISCLAIMER MARQUEE
========================================================= */

#marquee {
    width: 100%;
    max-width: 1100px;
    margin: 8px auto 12px;
    padding: 5px 8px;

    color: #222222;
    font-size: 13px;
    line-height: 1.5;

    overflow: hidden;
}

#marquee marquee {
    width: 100%;
}

/* =========================================================
   RESULT AREA & SLOT CARDS
========================================================= */

.result {
    width: 100%;
    max-width: 1100px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.slot-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 24px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #cccccc;

    background: #ffffff;
}

.result-slot-title,
.slot-title,
.result-title {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    padding: 10px;
    margin: 0;
    background: #fffbea;
    color: #222222;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.result-slot-title *,
.slot-title *,
.result-title * {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
}

/* =========================================================
   ALL RESULT TABLES
========================================================= */

.result table,
.result-table,
.normal-result-table,
.double-result-table,
.chart-result-table,
table.result-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed !important;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #222222;
}

.result table tr,
.result-table tr {
    width: 100%;
    min-width: 0;
}

.result table th,
.result table td,
.result-table th,
.result-table td {
    height: 28px;
    min-width: 0;
    padding: 4px 2px !important;
    margin: 0;
    border: 1px solid #999999 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;

    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.result table th,
.result-table th {
    background: #fffbea;
    font-weight: 700 !important;
}

/* First Column Colors */
.result-table td:first-child,
.normal-result-table td:first-child,
.double-result-table td:first-child,
.chart-result-table td:first-child,
.result-row-number,
.date-cell {
    background-color: #ffd400 !important;
    color: #222222 !important;
    font-weight: 750 !important;
}

.single-result-table .result-row-number,
.single-result-table .date-cell,
.double-result-table .result-row-number.blue-first-cell,
.double-result-table .date-cell.blue-first-cell,
.double-result-table tr td:first-child,
.single-result-table tr td:first-child {
    background-color: #82c9e5 !important;
}

/* Table Content Cell Background */
.result table td:not(:first-child),
.result-table td:not(:first-child) {
    background-color: #e1f1dc !important;
}

/* =========================================================
   LEGAL DISCLAIMER
========================================================= */

.legal {
    width: 100%;
    max-width: 1100px;
    margin: 15px auto;
    padding: 10px 5px;
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* =========================================================
   MOBILE & TABLET VIEW BREAKPOINTS (<= 767px)
========================================================= */

@media screen and (max-width: 767px) {
    .app-container {
        padding: 0 10px;
    }

    #fdiv {
        display: contents;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        max-width: 100%;
        margin: 8px auto;
        padding: 0;
    }

    /* Date picker takes full top row */
    #datepicker {
        grid-column: 1 / -1;
        width: 100% !important;
        max-width: none;
        height: 38px;
        
        min-height: 38px;
        margin: 2px !important;
       
        font-size: 13px;
    }

    /* 2x2 Button Grid Layout */
    #fdiv input[type="button"],
    #fdiv input[type="submit"],
    #fdiv button {
        width: 100% !important;
        min-width: 0;
        height: 38px;
         margin-inline: auto;
        min-height: 38px;
       margin: 2px !important;
        padding: 4px 6px;
        font-size: 13px !important;
    }

    #getdate {
        grid-column: 1;
        grid-row: 2;
    }

    #oned {
        grid-column: 2;
        grid-row: 2;
    }

    #twod {
        grid-column: 1;
        grid-row: 3;
    }

    #fref {
        grid-column: 2;
        grid-row: 3;
    }

    #lotus {
        grid-column: 1;
        grid-row: 4;
    }

    #xtime {
        grid-column: 2;
        grid-row: 4;
        width: 100% !important;
        min-width: 0;
        height: 38px;
        font-size: 13px;
    }

    #refresh {
        display: none !important;
    }

    #marquee {
        margin: 5px 0 8px;
        padding: 4px;
        font-size: 11px;
    }

    /* Mobile Table Optimizations */
    .result table,
    .result-table,
    .normal-result-table,
    .double-result-table,
    .chart-result-table {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 10px !important;
    }

    .result table td,
    .result table th,
    .result-table td,
    .result-table th {
        height: 25px;
        padding: 2px 1px !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    .legal {
        margin: 8px 0 15px;
        padding: 8px 3px;
        font-size: 11px;
    }
}

/* =========================================================
   VERY SMALL MOBILE SCREENS (<= 360px)
========================================================= */

@media screen and (max-width: 360px) {
    .app-container {
        padding: 0 2px;
    }

    #fdiv {
        gap: 5px;
    }

    #datepicker,
    #fdiv input[type="button"],
    #fdiv input[type="submit"],
    #fdiv button,
    #xtime {
        height: 34px;
        min-height: 34px;
        font-size: 11px;
    }

    .result table td,
    .result table th,
    .result-table td,
    .result-table th {
        height: 22px;
        padding: 1px !important;
        font-size: 10px !important;
        line-height: 12px !important;
    }

    .legal {
        font-size: 10px;
    }
}

/* =========================================================
   PRINT STYLES
========================================================= */

@media print {
    #fdiv,
    #marquee,
    #xtime,
    .legal {
        display: none !important;
    }

    .app-container,
    .result,
    .slot-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .result table,
    .result-table {
        width: 100% !important;
        min-width: 0 !important;
    }
}