/* ==========================================================================
   TOPD Kalkulator Tempa – topd-pace-calc.css
   Prefix: topd-pc-
   Accent: #edad00  |  Dark bg: #1a1a1a  |  Text-on-dark: #fff
   ========================================================================== */

/* ── Variables ─────────────────────────────────────────────────────────── */
.topd-pc-wrap {
    --topd-accent:       #edad00;
    --topd-accent-dark:  #c98f00;
    --topd-bg:           transparent;
    --topd-bg-left:      #00000040;
    --topd-bg-right:     #00000040;
    --topd-bg-row-alt:   #ffffff10;
    --topd-bg-row-head:  #2b2b2b;
    --topd-border:       #333333;
    --topd-text:         #f0f0f0;
    --topd-text-muted:   #999999;
    --topd-text-label:   #bbbbbb;
    --topd-input-bg:     #00000040;
    --topd-input-border: #444444;
    --topd-input-focus:  #edad00;
    --topd-disabled-bg:  #ffffff20;
    --topd-disabled-txt: #edad00;
    --topd-radius:       24px;
    --topd-font:         'Open Sans', 'Segoe UI', Arial, sans-serif;
}

/* ── Outer wrapper ──────────────────────────────────────────────────────── */
.topd-pc-wrap {
    display:         flex;
    flex-wrap:       nowrap;
    gap:             0;
    background:      var(--topd-bg);
    
    
    overflow:        hidden;
    font-family:     var(--topd-font);
    font-size:       14px;
    color:           var(--topd-text);
    box-sizing:      border-box;
    width:           100%;
}

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

/* ── LEFT panel (1/3) ───────────────────────────────────────────────────── */
.topd-pc-left {
    flex:            0 0 33%;
    max-width:       33%;
    background:      var(--topd-bg-left);
    border:          1px solid var(--topd-border);
	border-radius:   var(--topd-radius);
    display:         flex;
    flex-direction:  column;
    padding:         0 0 20px;
	margin-right:	 20px;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.topd-pc-tabs {
    display:         flex;
    border-bottom:   1px solid var(--topd-border);
}

.topd-pc-tab {
    flex:            1;
    padding:         12px 6px;
    background:      transparent;
    border:          none;
    border-bottom:   3px solid transparent;
    color:           var(--topd-text-muted);
    font-family:     var(--topd-font);
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  0.02em;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      color 0.2s, border-color 0.2s;
    margin-bottom:   -1px;
}

.topd-pc-tab:hover {
	background-color: #00000050;
}

.topd-pc-tab1 {
	border-top-left-radius:  var(--topd-radius);
}

.topd-pc-tab3 {
	border-top-right-radius:  var(--topd-radius);
}


.topd-pc-tab:hover {
    color:           var(--topd-text);
}

.topd-pc-tab:focus,
.topd-pc-tab:focus-visible {
    outline:         none;
    box-shadow:      none;
}

.topd-pc-tab--active {
    color:           var(--topd-accent);
    border-bottom-color: var(--topd-accent);
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.topd-pc-fields {
    padding:         20px 16px 0;
    display:         flex;
    flex-direction:  column;
    gap:             16px;
}

.topd-pc-field-group {
    display:         flex;
    flex-direction:  column;
    gap:             5px;
}

.topd-pc-label {
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    color:           var(--topd-text-label);
	margin-bottom:	0;
}

/* disabled field label */
.topd-pc-field-group--disabled .topd-pc-label {
    color:           var(--topd-accent);
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.topd-pc-input-wrap {
    display:         flex;
    align-items:     center;
    background:      var(--topd-input-bg);
    border:          none;
    border-radius:   var(--topd-radius);
    overflow:        hidden;
	
}

.topd-pc-time-inputs {
    display:         flex;
    align-items:     center;
    background:      var(--topd-input-bg);
    border:          none;
    border-radius:   var(--topd-radius);
    overflow:        hidden;
    padding:         0 8px 0 15px;
	
}


/* disabled state for wrappers */
.topd-pc-field-group--disabled .topd-pc-input-wrap,
.topd-pc-field-group--disabled .topd-pc-time-inputs {
    background:      var(--topd-disabled-bg);
    box-shadow:      none;
}

.topd-pc-input {
    background:      transparent;
    border:          none;
    outline:         none;
    font-family:     var(--topd-font);
    font-size:       20px;
    font-weight:     600;
    padding:         9px 0 9px 20px;
    width:           100%;
    min-width:       0;
	max-width: 		 90%;
    -moz-appearance: textfield;
}
.topd-pc-input:focus {
	color: #ffffff !important;
}

.topd-pc-input::-webkit-inner-spin-button,
.topd-pc-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.topd-pc-input::placeholder {
    color:           #4a4a4a;
}

/* time segment inputs */
.topd-pc-time-seg,
.topd-pc-pace-seg {
    width:           40px;
    flex:            0 0 40px;
    text-align:      center;
    padding:         9px 2px;
    font-size:       20px;
	border: 		 none !important;
}

.topd-pc-time-sep {
    color:           #fff;
    font-size:       20px;
    font-weight:     700;
    padding:         0 1px;
    flex-shrink:     0;
    user-select:     none;
}

/* distance standalone */
#topd-fg-distance .topd-pc-input {
    flex:            1;
	border: 		 none !important;

}

/* unit label */
.topd-pc-unit-label {
    font-size:       11px;
    color:           #ffffffa0;
    padding:         6px 0 0 0;
    white-space:     nowrap;
    flex-shrink:     0;
}

/* disabled inputs */
.topd-pc-field-group--disabled .topd-pc-input {
    color:           var(--topd-accent);
    font-weight:     700;
    cursor:          default;
}

.topd-pc-field-group--disabled .topd-pc-time-sep {color: var(--topd-accent);}
.topd-pc-field-group--disabled .topd-pc-input {color: var(--topd-accent) !important;}
.topd-pc-field-group--disabled .topd-pc-pace-seg {color: var(--topd-accent) !important;}



/* disabled field: no focus glow */
.topd-pc-field-group--disabled .topd-pc-input-wrap:focus-within,
.topd-pc-field-group--disabled .topd-pc-time-inputs:focus-within {
    box-shadow: none;
}

/* ── Button ─────────────────────────────────────────────────────────────── */
.topd-pc-btn-row {
    padding:         30px 16px 10px 16px;
}

.topd-pc-btn {
    display:         block;
    width:           100%;
    padding:         12px;
    background:      var(--topd-accent);
    border:          none;
    border-radius:   var(--topd-radius);
    font-family:     var(--topd-font);
    font-size:       16px;
    font-weight:     800;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      background 0.2s, transform 0.1s;
}



.topd-pc-btn:hover {
    background:      var(--topd-accent-dark);
}

.topd-pc-btn:active {
    transform:       translateY(1px);
}

/* ── Summary (left panel, under button) ────────────────────────────────── */
.topd-pc-summary {
    margin:          30px 16px 0;
    padding:         12px;
    background:      rgba(237,173,0,0.08);
    border:          1px solid rgba(237,173,0,0.25);
    border-radius:   10px;
    font-size:       13px;
    line-height:     1.7;
    color:           var(--topd-text);
}

.topd-pc-summary strong {
    color:           var(--topd-accent);
}

/* error state */
.topd-pc-summary--error {
    background:      rgba(220,50,50,0.08);
    border-color:    rgba(220,50,50,0.3);
    color:           #ff7070;
}

/* ── RIGHT panel (2/3) ──────────────────────────────────────────────────── */
.topd-pc-right {
    flex:            1 1 0;
    background:      var(--topd-bg-right);
    display:         flex;
    flex-direction:  column;
    min-width:       0;
	padding: 0 0px;
	border-radius:   var(--topd-radius);
    border:          1px solid var(--topd-border);


}

.topd-pc-right-placeholder {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--topd-text-muted);
    font-size:       13px;
    padding:         20px 20px;
    text-align:      center;
}

/* ── Results table ──────────────────────────────────────────────────────── */
.topd-pc-table {
    width:           100%;
    border-collapse: collapse;
    table-layout:    fixed;
	margin-top:		 9px;
	
}

.topd-pc-th {
    padding:         0 26px 11px 26px;
    font-size:       13px;
    font-weight:     300;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--topd-text-muted);
    border: 		 none;
    border-bottom:   1px solid var(--topd-border);
    text-align:      left;
}

.topd-pc-th--result {
    width:           34%;
}

.topd-pc-table tbody tr {
    border-bottom:   none;
    transition:      background 0.15s;
}

.topd-pc-table td {
    border:   none;
}

.topd-pc-table tbody tr:last-child {
    border-bottom:   none;
}


.topd-pc-table tbody tr:nth-child(even) td {
    background:      var(--topd-bg-row-alt);
}



.topd-pc-td {
    padding:         10px 26px;
    font-size:       14px;
    vertical-align:  middle;
}

.topd-pc-td--value {
    font-size:       15px;
    font-weight:     700;
    color:           var(--topd-accent);
    white-space:     nowrap;
}
.topd-pc-td--value b {
	color: #999 !important;
	font-size: 13px !important;
	font-weight: normal !important;
	text-transform:  uppercase !important;
	
}


.topd-pc-td--label {
    font-size:       11px;
    color:           var(--topd-text-muted);
    font-weight:     400;
}

/* Race times cells */
.topd-pc-td--race {
    font-size:       13px;
    color:           var(--topd-text);
}

.topd-pc-race-name {
    font-size:       13px;
    color:           var(--topd-text-muted);
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    display:         block;
    margin-bottom:   1px;
}

.topd-pc-race-time {
    font-size:       16px;
    font-weight:     600;
    color:           var(--topd-text);
}

/* ── Responsive: narrow right panel → single race column ───────────────── */
/* Controlled by JS via class on the table */
.topd-pc-table.topd-single-col .topd-pc-th--races {
    display: none;
}
.topd-pc-table.topd-single-col .topd-pc-col-race2 {
    display: none;
}

/* ── BREAKPOINT: tablet – stack layout ─────────────────────────────────── */
@media (max-width: 768px) {
    .topd-pc-wrap {
        flex-direction:  column;
    }

    .topd-pc-left {
        flex:            unset;
        max-width:       100%;
        border-right:    none;
        border-bottom:   1px solid var(--topd-border);
    }

    .topd-pc-right {
        flex:            unset;
    }

    /* In stacked mode the "narrow" logic is irrelevant — always show 2 race cols */
    .topd-pc-table.topd-single-col .topd-pc-th--races,
    .topd-pc-table.topd-single-col .topd-pc-col-race2 {
        display: revert;
    }
}

/* ── BREAKPOINT: very small – table race cols back to 1 ────────────────── */
@media (max-width: 480px) {
    .topd-pc-td {
        padding: 9px 10px;
    }
    .topd-pc-th {
        padding: 10px 10px;
    }
    .topd-pc-th--result {
        width: 40%;
    }
}