/* ============================================================
   GLOBAL LAYOUT
   ============================================================ */

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* Bakgrundsbild – RÄTT sökväg i Razor Pages */
    background-image: url('/images/TPC_Sawgrass_hole_17.jpg');
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: Arial, Helvetica, sans-serif;
}

/* Wrapper för centrerat innehåll */
.center-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Standardiserad sidbredd */
.page-content {
    width: 90%;
    max-width: 900px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Listan */
.page-center {
    width: 760px;
    margin: 40px auto;
}

.wait-cursor {
    cursor: url('/images/Golf_Cart_UnFilled.cur'), auto;
}

.success-message {
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
    padding: 6px 10px;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 6px;
}

/* Basstil för alla statusmeddelanden */
.status-message {
    width: 80%;
    max-width: 600px;
    margin: 0 auto 15px auto;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

/* Fel */
.status-error {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    color: #842029;
}

/* Success */
.status-success {
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}

/* Info */
.status-info {
    background-color: #cce5ff;
    border: 1px solid #004085;
    color: #004085;
}

/* ============================================================
   PAGE STRUCTURE (ersätter WebForms #page, #header, #content)
   ============================================================ */

#page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

#header {
    background: #C3DAE6 url('/images/header.bg.shadow.png') no-repeat right 41px;
    padding: 10px 0;
}

#contentContainer {
    position: relative;
    min-height: 400px;
}

/* ============================================================
   LOADING INDICATORS
   ============================================================ */

#hourglass {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.content-overlay {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* ============================================================
   TEXT & TYPOGRAPHY
   ============================================================ */

h1 {
    font-size: 18pt;
    font-weight: bold;
    margin-bottom: 14pt;
    color: #000;
}

h2 {
    text-align: center;
    font-size: 16pt;
    font-weight: bold;
    margin-bottom: 10pt;
    color: #2B4A90;
}

h3 {
    font-size: 14pt;
    font-weight: bold;
    margin-bottom: 6pt;
    color: #000;
    text-align: center;
}

h4 {
    font-size: 12pt;
    font-weight: bold;
    margin-bottom: 0;
    color: #2B4A90;
}

h5, h6 {
    font-size: 10pt;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 0;
    color: #000;
}

.textcenter {
    text-align: center;
}

.textleft {
    text-align: left;
}

.title-cell {
    text-align: center;
    padding-bottom: 2px; /* mindre luft */
    padding-top: 2px; /* mindre luft ovanför */
}

.title-cell h4 {
    margin: 2px 0; /* tajtare rubrik */
    font-size: 12pt; /* samma som innan, men du kan minska om du vill */
}

.brödtext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    background-color: white;
    border: thin;
}

.rubriktext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    line-height: 14pt;
    font-weight: bold;
    margin-bottom: 2px;
    color: #000000;
    text-align: left;
    margin-right: 6px; /* lite avstånd till ev textbox */
    white-space: nowrap; /* så att labeln inte bryts */
}

.textbox {
    background-color: #e8f2ff;
    border: 1px solid #b8c6d6;
    border-radius: 4px;
    margin: 0 6px;
    padding: 3px 5px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.textbox:focus {
    outline: none;
    border-color: #4A6C8F;
    box-shadow: 0 0 4px rgba(74,108,143,0.4);
}

.input-validation-error {
    background-color: #e8f2ff !important;
}

.inputbox {
    background-color: beige;
    border: 1px solid #ccc;
    text-align: right;
}

/* Panelen låser bredden */
.boknings-panel {
    width: 420px;
    margin: 0 auto;
    border: 5px solid darkgray;
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
}

/* Reservplats så sidan inte hoppar */
.validering-container {
    min-height: 60px;
}

/* Själva felrutan */
.validering-box .validation-summary-errors {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    color: #842029;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
}

.validering-box ul {
    margin: 0;
    padding-left: 18px;
}

/* Tvinga radbrytning */
.validering-box li {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.validering-box .validation-summary-errors {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
}

.validering-box .validation-summary-errors ul {
    display: block !important;
    width: 100%;
    padding-left: 18px;
    margin: 0;
}

.validering-box .validation-summary-errors li {
    display: list-item !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* ============================================================
   TABLES
   ============================================================ */

/* Din befintliga stil */
.custom-table {
    background-color: rgba(245,245,245,0.88);
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    margin: 10px auto;
}

.custom-table {
    max-width: 100%;
}

.custom-table td {
    padding: 6px 10px;
}

.custom-table.compact td {
    padding: 2px 4px;
}

.custom-table.compact input.textbox,
.custom-table.compact textarea.textbox {
    margin: 0;
    padding: 3px 4px;
    font-size: 9pt;
    background-color: #e8f2ff;
}

.custom-table.compact h4 {
    margin: 4px 0 6px 0;
}

.form-table td:first-child,
table td.rubriktext {
    width: 80px;
}

.form-table td {
    padding: 3px 6px;
}

.label-cell {
    width: 80px;
    padding-left: 5px;
    white-space: nowrap;
}

/* Zebra-ränder för kalendern */
.kalender-table tbody tr:nth-child(odd) {
    background-color: #f8f8f8; /* ljus */
}

.kalender-table {
    border-collapse: separate;
    border-spacing: 0;
}

.kalender-table tbody tr:nth-child(even) {
    background-color: #ececec; /* lite mörkare */
}

.kalender-table tbody td {
    border-right: 1px solid rgba(0,0,0,0.15); /* 15% svart */
}

.kalender-table tbody td:last-child {
    border-right: none;
}

/* Svag avskiljare mellan raderna */
.kalender-table tbody tr {
    border-bottom: 1px solid #dcdcdc;
}

 /* Hover-effekt (valfri men snygg) */
 .kalender-table tbody tr:hover {
    background-color: #dfeaf5;
}

/* Zebra-ränder för spelformer-listan */
.spelformer-table tbody tr:nth-child(odd) {
    background-color: #f8f8f8;
}

.spelformer-table tbody tr:nth-child(even) {
    background-color: #ececec;
}

/* Svag linje mellan kolumnerna – samma som Eclectic */
.spelformer-table tbody td {
    border-right: 1px solid rgba(0,0,0,0.15); /* 15% svart */
}

/* Kompakt meny */
.menu-table {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    border-collapse: collapse;
}

.menu-table td {
    padding: 3px 5px;
    font-size: 14px;
    vertical-align: middle;
}

.menu-table tr:first-child td {
    text-align: center;
    padding: 8px 5px;
    font-size: 16px;
    font-weight: bold;
}

/* Vänsterkolumnen: fet text */
.menu-table td:first-child {
    width: 55%;
    text-align: left;
    font-weight: bold;
}

/* Högerkolumnen */
.menu-table td:last-child {
    text-align: right;
}

/* Knappar */
 .menu-table button {
    min-width: 110px;
    font-size: 13px;
    padding: 6px 10px;
}
.menu-actions {
text-align: center !important;
padding-top: 12px; /* extra luft ovanför knapparna */
}

.menu-actions button {
    min-width: 110px;
    margin: 0 10px; /* space mellan knapparna */
}

/* Avskiljare */
.menu-separator {
    height: 3px;
    background: linear-gradient(to right, #91BADD, #4A6C8F);
    border-radius: 2px;
}

td {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.header-row th {
    background-color: #91BADD; /* lägger tillbaka färgen */
    color: white;
    border:none;
    padding: 6px 8px;
}

.header-row th:last-child {
    border-right: none;
}

.inputfield {
    display: inline-block;
    width: 200px;
    margin-left: 10px;
}

.formfield {
    height: 24px;
    line-height: 24px;
    padding: 2px 4px;
    box-sizing: border-box;
}

.readonly {
    background-color: lightgray;
    border: 1px solid #ccc;
    pointer-events: none;
}

.messagetext {
    background-color: lightgrey;
    border: none;
    text-align: center;
}
/* Ta bort spinner (upp/ner-pilar) från number-fält */

/* Chrome/Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* ============================================================
   MISC
   ============================================================ */

.buttonclass {
    cursor:pointer;
    padding: 3px 8px;
    font-size: 9pt;
    background-color: #4A6C8F;
    color: white;
    border: 1px solid #3a5873;
    border-radius: 4px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Hover-effekt */
.buttonclass:hover {
    background-color: #3a5873;
}

/* Fokusmarkering */
.buttonclass:focus {
    outline: none;
    box-shadow: 0 0 3px rgba(74,108,143,0.6);
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.button-cell {
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

.kolumn-ut {
    text-align: center;
    width: 30px;
    border: solid 1px black;
}

.btn-primary {
    background-color: #0044cc;
    border-color:  #003399;
}

.btn-secondary {
    background-color: lightblue;
    color: white;
}
/* =========================================
   PLAYER DROPDOWN – REN & STABIL VERSION
   ========================================= */

.spelare-select {
    cursor:pointer;
    width: 170px;
    padding: 4px 6px;
    font-size: 9pt;
    border: 1px solid #bbb;
    border-radius: 4px;
    background-color: #f2f2f2; /* tom = grå */
}

.spelare-select:disabled {
    background-color: #e0e0e0;
    color: #777;
    cursor: not-allowed;
}

 /* vald spelare = vit */
.spelare-select.has-value {
    background-color: #ffffff;
}

/* Hover */
.spelare-select:hover {
    border-color: #4A6C8F;
}

/* Fokus */
.spelare-select:focus {
    outline: none;
    border-color: #4A6C8F;
    box-shadow: 0 0 4px rgba(74,108,143,0.4);
}

.spelare-wrapper {
    display: flex;
    align-items: center;
}

select.spelare-select {
    background-color: #f2f2f2 !important;
}

select.spelare-select.has-value {
    background-color: #ffffff !important;
}
/* =========================================
   Scorekort – GLOBAL VERSION
   ========================================= */
.scorekort-container {
    margin: 20px auto;
    border-collapse: collapse;
}

.scorekort-container td {
    vertical-align: top;
    padding: 0 6px;
}

.scorekort-panel .scorekort {
    border-collapse: collapse;
    table-layout: fixed;
}

.scorekort-panel .scorekort th {
    background: #8fb3d9;
    color: white;
    font-size: 9pt;
    padding: 4px 6px;
}

.scorekort-panel .scorekort td {
    font-size: 9pt;
    white-space: nowrap;
    padding: 2px 3px !important;
    text-align: center;
}

.scorekort-panel .scorekort input {
    width: 38px;
    height: 18px;
    text-align: center;
}

.scorekort thead tr:first-child th {
    text-align: center;
    font-weight: bold;
    padding: 4px 0;
}

.scorekort thead tr.header-row th {
    background-color: #8fb3d9;
    color: white;
    border-right: 1px solid white;
}

.scorekort thead tr.header-row th:last-child {
    border-right: none;
}

.scorebox {
    width: 38px;
    height: 18px;
    text-align: center;
    background-color: #e0e0e0;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    font-size: 9pt;
}

.score-total {
    width: 38px;
    height: 18px;
    text-align: center;
    background-color: #e0e0e0;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    font-size: 9pt;
}

.scorekort tbody td:first-child {
    text-align: center;
    font-weight: bold;
}

/* kolumnbredder */

.scorekort td:nth-child(2),
.scorekort td:nth-child(3) {
    background-color: transparent;
}

.scorekort td:nth-child(4) input {
    background-color: #fff6bf;
}

.scorekort td:nth-child(5) {
    text-align: center;
}

.rond-input {
    width: 120px;
}

.rond-small {
    width: 60px;
}

.rond-wide {
    width: 420px;
}

.slagg-cell {
    max-width: 65px;
    white-space: normal;
    word-break: break-word;
    font-size: 9pt;
    line-height: 11pt;
}

/* =========================================
   Gäller för mobil – GLOBAL VERSION
   ========================================= */
@media (max-width: 768px) {

    #page {
        padding: 0 10px;
    }

    h1, h2, h3 {
        text-align: center;
    }

    .page-content {
        padding: 10px;
    }

    td {
        font-size: 9pt;
    }

    .inputfield {
        width: 100%;
        margin-left: 0;
    }

    /* NYTT – gör layouten mobilvänlig */
    .page-center {
        width: 95% !important;
        max-width: 760px;
        margin: 20px auto;
    }

    .textbox {
        width: 100% !important;
    }

    .button-row {
        flex-direction: column;
        gap: 10px;
    }
}