/* ---------------------------------------------------------
   OCKLABS.SPORTS – COMPLETE THEME v3.0
   Sportlich, technisch, hell, Sport (Orange) + Health (Grün)
--------------------------------------------------------- */

/* ---------------------------------------------------------
   1. DESIGN TOKENS
--------------------------------------------------------- */
:root {
    --ock-black: #1A1A1A;
    --ock-gray: #F0F0F0;
    --ock-primary: #000000;
    --ock-secondary: #6c757d;
    /* NEW SPORT = WORK */
    --ock-sport-light: #FFD1A6;
    --ock-sport: #FF6A00;
    --ock-sport-dark: #CC5500;
    --ock-sport-deep: #993F00;
    /* NEW HEALTH = RECOVERY */
    --ock-health-light: #A6E8BF;
    --ock-health: #009624;
    --ock-health-dark: #006A19;
    --ock-health-deep: #004A11;
    --ock-success: #28a745;
    --ock-warning: #ffc107;
    --ock-danger: #dc3545;
    --ock-info: #17a2b8;
    --bs-primary: var(--ock-success);
    --bs-secondary: var(--ock-secondary);
    --bs-success: var(--ock-success);
    --bs-warning: var(--ock-warning);
    --bs-danger: var(--ock-danger);
    --bs-info: var(--ock-info);
    --bs-link-color: var(--ock-black);
    --bs-link-hover-color: var(--ock-sport-dark);
    --bs-body-color: var(--ock-primary);
    --bs-body-bg: #ffffff;
    --ock-space-1: .25rem;
    --ock-space-2: .5rem;
    --ock-space-3: .75rem;
    --ock-space-4: 1rem;
    --ock-space-5: 1.5rem;
    --ock-space-6: 2rem;
}

/* ---------------------------------------------------------
   2. TYPOGRAPHY
--------------------------------------------------------- */
.brand-title {
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: .5px;
}

.brand-strong {
    font-weight: 700;
}

.brand-accent {
    font-weight: 600;
}

.brand-subtitle {
    font-weight: 600;
    font-size: 1.1rem;
    opacity: .85;
}

.brand-label {
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ---------------------------------------------------------
   3. COLOR UTILITIES
--------------------------------------------------------- */
.text-sport {
    color: var(--ock-sport) !important;
}

.text-sport-dark {
    color: var(--ock-sport-dark) !important;
}

.text-health {
    color: var(--ock-health) !important;
}

.text-health-dark {
    color: var(--ock-health-dark) !important;
}

.bg-sport {
    background-color: var(--ock-sport) !important;
}

.bg-health {
    background-color: var(--ock-health) !important;
}

.bg-sport-light {
    background-color: var(--ock-sport-light) !important;
}

.bg-health-light {
    background-color: var(--ock-health-light) !important;
}

/* ---------------------------------------------------------
   4. TEXT ROLES
--------------------------------------------------------- */
.text-primary {
    color: var(--ock-primary) !important;
}

.text-secondary {
    color: var(--ock-secondary) !important;
}

/* ---------------------------------------------------------
   5. LAYOUT
--------------------------------------------------------- */
.main-layout {
    min-height: 100vh;
    background: var(--bs-body-bg);
}

/* ---------------------------------------------------------
   TOPBAR v2 – Sports Timer Style
--------------------------------------------------------- */

.topbar {
    background: #FFFFFF;
    border-bottom: 3px solid var(--ock-sport);
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Branding */
.topbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.topbar .navbar-brand-text {
    font-weight: 700;
    font-size: 1.35rem;
}

/* Navigation Links */
.topbar .nav-link {
    font-weight: 500;
    color: var(--ock-primary);
    padding: .5rem .75rem;
    border-radius: .35rem;
    transition: background-color .15s ease, color .15s ease;
}

/* Hover */
.topbar .nav-link:hover {
    background-color: rgba(255, 106, 0, 0.10); /* Work-Orange light */
    color: var(--ock-sport-dark);
}

/* Active (falls später nötig) */
.topbar .nav-link.active {
    background-color: rgba(255, 106, 0, 0.15);
    color: var(--ock-sport-dark);
    font-weight: 600;
}

/* Mobile Toggler */
.topbar .navbar-toggler {
    border: none;
    padding: .35rem .5rem;
}

.topbar .navbar-toggler-icon {
    filter: invert(0.2);
}

/* ---------------------------------------------------------
   7. NAVIGATION SYSTEM 2.0 (Unified)
--------------------------------------------------------- */
.nav-ock .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 1rem;
    font-weight: 500;
    color: var(--ock-primary);
    border-radius: .25rem;
    transition: background-color .15s ease, color .15s ease;
}

    .nav-ock .nav-link:hover {
        background-color: rgba(255, 167, 51, 0.12);
        color: var(--ock-sport-dark);
    }

    .nav-ock .nav-link.active {
        background-color: var(--ock-sport-light);
        color: var(--ock-sport-dark);
        font-weight: 600;
    }

    .nav-ock .nav-link .icon {
        stroke: var(--ock-primary);
    }

    .nav-ock .nav-link.active .icon {
        stroke: var(--ock-sport-dark);
    }

/* ---------------------------------------------------------
   7.1 NAVBAR
--------------------------------------------------------- */
.navbar-ock {
    background: #ffffff;
    border-bottom: 3px solid var(--ock-sport);
    padding: .75rem 1rem;
}

    .navbar-ock .nav-link {
        border-radius: .25rem;
    }

/* ---------------------------------------------------------
   7.2 SIDEBAR
--------------------------------------------------------- */
/* ---------------------------------------------------------
   SIDEBAR v2 – Sports Timer Style
--------------------------------------------------------- */

.sidebar-ock {
    width: 240px;
    background: #FFFFFF;
    border-right: 1px solid #E5E5E5;
    padding: 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Navigation Links */
.sidebar-ock .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    font-weight: 500;
    color: var(--ock-primary);
    border-left: 4px solid transparent;
    border-radius: .35rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Hover */
.sidebar-ock .nav-link:hover {
    background-color: rgba(255, 106, 0, 0.08); /* Work-Orange light */
    color: var(--ock-sport-dark);
}

/* Active */
.sidebar-ock .nav-link.active {
    background-color: rgba(255, 106, 0, 0.12);
    border-left-color: var(--ock-sport);
    color: var(--ock-sport-dark);
    font-weight: 600;
}

/* Icons */
.sidebar-icon {
    font-size: 1.5rem;
    color: var(--ock-primary);
    opacity: .85;
    transition: color .15s ease, opacity .15s ease;
}

.sidebar-ock .nav-link.active .sidebar-icon {
    color: var(--ock-sport-dark);
    opacity: 1;
}

/* ---------------------------------------------------------
   7.3 TABS
--------------------------------------------------------- */
.tabs-ock {
    display: flex;
    gap: 1rem;
    border-bottom: 2px solid #E5E5E5;
}

    .tabs-ock .tab-link {
        padding: .75rem 1rem;
        font-weight: 600;
        color: var(--ock-primary);
        border-bottom: 3px solid transparent;
    }

        .tabs-ock .tab-link:hover {
            color: var(--ock-sport-dark);
        }

        .tabs-ock .tab-link.active {
            color: var(--ock-sport);
            border-bottom-color: var(--ock-sport);
        }

/* ---------------------------------------------------------
   7.4 BREADCRUMBS
--------------------------------------------------------- */
.breadcrumb-ock {
    display: flex;
    gap: .5rem;
    font-size: .9rem;
    color: var(--ock-secondary);
}

    .breadcrumb-ock a {
        color: var(--ock-sport-dark);
        font-weight: 600;
    }

        .breadcrumb-ock a:hover {
            color: var(--ock-sport);
        }

    .breadcrumb-ock .separator {
        color: var(--ock-secondary);
    }

/* ---------------------------------------------------------
   8. OFFCANVAS
--------------------------------------------------------- */
.offcanvas {
    background: #FFFFFF;
}

.offcanvas-title {
    font-weight: 600;
    color: #1A1A1A;
}

.offcanvas .nav-link {
    color: #1A1A1A;
    font-weight: 500;
}

    .offcanvas .nav-link:hover {
        color: var(--ock-sport);
    }

/* ---------------------------------------------------------
   9. BUTTONS (PRIMARY / SECONDARY)
--------------------------------------------------------- */
.btn-primary {
    background-color: var(--ock-sport);
    border-color: var(--ock-sport);
    color: #fff;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--ock-sport-dark);
    border-color: var(--ock-sport-dark);
}

.btn-primary:active {
    background-color: var(--ock-sport-deep);
    border-color: var(--ock-sport-deep);
}

.btn-primary:disabled {
    background-color: var(--ock-sport-light);
    border-color: var(--ock-sport-light);
    opacity: .6;
}

.btn-secondary {
    background-color: var(--ock-health);
    border-color: var(--ock-health);
    color: #fff;
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: var(--ock-health-dark);
    border-color: var(--ock-health-dark);
}

.btn-secondary:active {
    background-color: var(--ock-health-deep);
    border-color: var(--ock-health-deep);
}

.btn-secondary:disabled {
    background-color: var(--ock-health-light);
    border-color: var(--ock-health-light);
    opacity: .6;
}

/* ---------------------------------------------------------
   10. BRAND BUTTONS
--------------------------------------------------------- */
.btn-sport {
    background-color: var(--ock-sport);
    border-color: var(--ock-sport);
    color: #fff;
    font-weight: 600;
}

.btn-sport:hover {
    background-color: var(--ock-sport-dark);
    border-color: var(--ock-sport-dark);
}

.btn-sport:active {
    background-color: var(--ock-sport-deep);
    border-color: var(--ock-sport-deep);
}

.btn-sport:disabled {
    background-color: var(--ock-sport-light);
    border-color: var(--ock-sport-light);
    opacity: .6;
}

.btn-health {
    background-color: var(--ock-health);
    border-color: var(--ock-health);
    color: #fff;
    font-weight: 600;
}

.btn-health:hover {
    background-color: var(--ock-health-dark);
    border-color: var(--ock-health-dark);
}

.btn-health:active {
    background-color: var(--ock-health-deep);
    border-color: var(--ock-health-deep);
}

.btn-health:disabled {
    background-color: var(--ock-health-light);
    border-color: var(--ock-health-light);
    opacity: .6;
}

/* Outline */
.btn-sport-outline {
    background: transparent;
    border: 2px solid var(--ock-sport);
    color: var(--ock-sport);
    font-weight: 600;
}

.btn-sport-outline:hover {
    background: var(--ock-sport-light);
    border-color: var(--ock-sport-dark);
    color: var(--ock-sport-dark);
}

.btn-sport-outline:active {
    background: var(--ock-sport);
    color: #fff;
}

.btn-health-outline {
    background: transparent;
    border: 2px solid var(--ock-health);
    color: var(--ock-health);
    font-weight: 600;
}

.btn-health-outline:hover {
    background: var(--ock-health-light);
    border-color: var(--ock-health-dark);
    color: var(--ock-health-dark);
}

.btn-health-outline:active {
    background: var(--ock-health);
    color: #fff;
}

/* Ghost */
.btn-sport-ghost {
    background: transparent;
    border: none;
    color: var(--ock-sport);
    font-weight: 600;
}

    .btn-sport-ghost:hover {
        background: var(--ock-sport-light);
    }

    .btn-sport-ghost:active {
        background: var(--ock-sport);
        color: #fff;
    }

.btn-health-ghost {
    background: transparent;
    border: none;
    color: var(--ock-health);
    font-weight: 600;
}

    .btn-health-ghost:hover {
        background: var(--ock-health-light);
    }

    .btn-health-ghost:active {
        background: var(--ock-health);
        color: #fff;
    }

/* ---------------------------------------------------------
   11. CARDS
--------------------------------------------------------- */
.card {
    border: 1px solid #E5E5E5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header {
    border-bottom: 2px solid var(--ock-sport);
    font-weight: 600;
}

.card-sport {
    border-top: 4px solid var(--ock-sport);
}

.card-health {
    border-top: 4px solid var(--ock-health);
}

.card-clean {
    border: 1px solid #E5E5E5;
    border-radius: .5rem;
    padding: 1rem;
}

/* ---------------------------------------------------------
   12. BADGES
--------------------------------------------------------- */
.badge-active {
    background-color: var(--ock-sport);
    color: #fff;
}

.badge-health {
    background-color: var(--ock-health);
    color: #fff;
}

.badge-neutral {
    background-color: #3A3A3A;
    color: #fff;
}

/* ---------------------------------------------------------
   13. LINKS
--------------------------------------------------------- */
a {
    color: var(--bs-link-color);
    text-decoration: none;
}

    a:hover {
        color: var(--bs-link-hover-color);
        text-decoration: underline;
    }

/* ---------------------------------------------------------
   14. INPUT SYSTEM
--------------------------------------------------------- */
.form-control {
    border-radius: .35rem;
    border: 1px solid #DCDCDC;
    padding: .55rem .75rem;
}

    .form-control:hover {
        border-color: var(--ock-sport);
    }

    .form-control:focus {
        border-color: var(--ock-sport);
        box-shadow: 0 0 0 .2rem rgba(255, 167, 51, .25);
    }

.input-label {
    font-weight: 600;
    margin-bottom: .25rem;
    color: var(--ock-primary);
}

/* ---------------------------------------------------------
   15. TABLES
--------------------------------------------------------- */
.table thead th {
    background: var(--ock-sport-light);
    color: var(--ock-sport-dark);
    font-weight: 600;
}

.table tbody tr:hover {
    background: var(--ock-health-light);
}

.table-ock {
    border-collapse: separate;
    border-spacing: 0 6px;
}

    .table-ock thead th {
        background: var(--ock-sport-light);
        color: var(--ock-sport-dark);
        font-weight: 600;
        border: none;
    }

    .table-ock tbody tr {
        background: #fff;
        border-radius: .35rem;
    }

        .table-ock tbody tr:hover {
            background: var(--ock-health-light);
        }

    .table-ock td {
        padding: .75rem 1rem;
        border: none;
    }

/* ---------------------------------------------------------
   16. ALERTS
--------------------------------------------------------- */
.alert {
    border-radius: .35rem;
    padding: 1rem 1.25rem;
    font-weight: 500;
}

.alert-sport {
    background: var(--ock-sport-light);
    border-left: 4px solid var(--ock-sport);
    color: var(--ock-sport-dark);
}

.alert-health {
    background: var(--ock-health-light);
    border-left: 4px solid var(--ock-health);
    color: var(--ock-health-dark);
}

/* ---------------------------------------------------------
   17. MODALS
--------------------------------------------------------- */
.modal-header {
    border-bottom: 3px solid var(--ock-sport);
}

.modal-content {
    border-radius: .5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.modal-title {
    font-weight: 600;
}

/* ---------------------------------------------------------
   18. SPACING
--------------------------------------------------------- */
.px-ock {
    padding-left: var(--ock-space-4);
    padding-right: var(--ock-space-4);
}

.py-ock {
    padding-top: var(--ock-space-4);
    padding-bottom: var(--ock-space-4);
}

/* ---------------------------------------------------------
   19. ELEVATION
--------------------------------------------------------- */
.shadow-ock-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.shadow-ock-2 {
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.shadow-ock-3 {
    box-shadow: 0 4px 12px rgba(0,0,0,.16);
}

/* ---------------------------------------------------------
   20. ICON SYSTEM
--------------------------------------------------------- */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
}

.icon-neutral {
    stroke: var(--ock-black);
}

.icon-sport {
    stroke: var(--ock-sport);
}

.icon-sport-dark {
    stroke: var(--ock-sport-dark);
}

.icon-health {
    stroke: var(--ock-health);
}

.icon-health-dark {
    stroke: var(--ock-health-dark);
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.btn-icon-sport {
    background: var(--ock-sport);
    color: #fff;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.btn-icon-sport:hover {
    background: var(--ock-sport-dark);
    transform: scale(1.05);
}

.btn-icon-sport.disabled,
.btn-icon-sport.is-disabled,
.btn-icon-sport:disabled {
    cursor: not-allowed;
    opacity: 0.35;
    transform: none;
    pointer-events: none;
}

.btn-icon-health {
    background: var(--ock-health);
    color: #fff;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.btn-icon-health:hover {
    background: var(--ock-health-dark);
    transform: scale(1.05);
}

.btn-icon-health.disabled,
.btn-icon-health.is-disabled,
.btn-icon-health:disabled {
    cursor: not-allowed;
    opacity: 0.35;
    transform: none;
    pointer-events: none;
}

/* ---------------------------------------------------------
   21. OCKLABS TIMER SYSTEM
--------------------------------------------------------- */
.timer-display {
    text-align: center;
    padding: 2rem 0;
}

.timer-display .time {
    font-size: 4rem;
    font-weight: 700;
    color: var(--ock-sport-dark);
}

.timer-display .phase {
    font-size: 4rem;
    font-weight: 600;
    color: var(--ock-secondary);
}
.timer-controls {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 0;
}
.phase-list {
    margin-top: 1rem;
    border-top: 2px solid var(--ock-sport-light);
    padding-top: 1rem;
}

.phase-item {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    font-weight: 500;
}
.phase-item.active {
    color: var(--ock-sport-dark);
    font-weight: 700;
}
.round-indicator {
    text-align: center;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--ock-primary);
}
.progress-outer {
    width: 100%;
    height: 12px;
    background: #E5E5E5;
    border-radius: 6px;
    margin-top: 1rem;
}
.progress-inner {
    height: 100%;
    background: var(--ock-sport);
    border-radius: 6px;
    transition: width .2s linear;
}
.timer-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.phase-row {
    display: grid;
    grid-template-columns: 120px 100px 100px 80px; /* feste Spaltenbreiten */
    align-items: center;
    gap: 0.6rem;
}

.phase-item {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.phase-item.active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.col-name,
.col-phase,
.col-goal,
.col-duration {
    text-align: left;
}

/* ---------------------------------------------------------
   CONTENT AREA v2 – Sports Timer Style
--------------------------------------------------------- */

.content-area {
    background: #FAFAFA; /* hell, ruhig */
    padding: var(--ock-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ock-space-5);
}

/* Optional: zentrierter Content-Wrapper */
.content-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ock-space-5);
}

/* Card-Style für Seiteninhalte */
.content-card {
    background: #FFFFFF;
    border-radius: .75rem;
    padding: var(--ock-space-5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border: 1px solid #E5E5E5;
}