/* =========================

   ZÁKLAD

========================= */



* {

    box-sizing: border-box;

}



html,

body {

    margin: 0;

    padding: 0;

    min-height: 100%;

}



body {

    font-family: Arial, sans-serif;

}



.my-text {

    color: #3f9692;

    font-style: italic;

    font-weight: 600;

}



.salidi-text {

    color: #173553;

    font-style: normal;

    font-weight: 700;

}





/* =========================

   HLAVNÍ STRUKTURA

========================= */



.site-wrapper {

    position: relative;

    min-height: calc(100vh - 60px);

}





/* =========================

   FOOTER

========================= */



.site-footer {

    text-align: center;

    padding: 20px 10px;

    border-top: 1px solid #ddd;

    margin-top: 40px;

}



.site-footer .footer-links {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-bottom: 8px;

}



.site-footer .footer-links a {

    color: #2a9d8f;

    text-decoration: none;

}



.site-footer .footer-links a:hover {

    text-decoration: underline;

}



.site-footer .footer-copy {

    font-size: 14px;

}



/* =========================

   PŘIHLÁŠENÍ – MOJE SALIDI

========================= */



.login-page {

    min-height: calc(100vh - 60px);



    display: flex;

    align-items: center;

    justify-content: center;



    padding: 40px 20px;

}





.login-card {

    width: 100%;

    max-width: 420px;



    text-align: center;

}





.login-brand {

    margin-bottom: 45px;

}





.login-logo {

    width: 170px;

    max-width: 60vw;



    display: block;



    margin: 0 auto 25px;

}





.login-title {

    margin: 0;



    font-size: 36px;

    font-weight: 700;



    color: #2f9b91;

}





/* =========================

   FORMULÁŘ

========================= */



.login-form {

    display: flex;

    flex-direction: column;



    gap: 20px;

}





.form-group {

    text-align: left;

}





.form-group label {

    display: block;



    margin-bottom: 8px;



    font-size: 14px;

    font-weight: 600;



    color: #203750;

}





.form-group input {

    width: 100%;



    padding: 15px 16px;



    border: 1px solid #d7dde3;

    border-radius: 10px;



    font-size: 16px;



    outline: none;



    transition: border-color 0.2s ease;

}





.form-group input:focus {

    border-color: #2f9b91;

}





/* =========================

   HLAVNÍ TLAČÍTKO

========================= */



.btn-login {

    width: 100%;



    padding: 15px;



    border: none;

    border-radius: 10px;



    font-size: 16px;

    font-weight: 600;



    cursor: pointer;



    background: #2f9b91;

    color: #ffffff;



    transition: opacity 0.2s ease;

}





.btn-login:hover {

    opacity: 0.9;

}





/* =========================

   ODDĚLOVAČ

========================= */



.login-divider {

    display: flex;

    align-items: center;



    gap: 15px;



    margin: 30px 0;

}





.login-divider span {

    flex: 1;



    height: 1px;



    background: #d7dde3;

}





.login-divider p {

    margin: 0;



    font-size: 14px;



    color: #6d7a88;

}





/* =========================

   GOOGLE

========================= */



.btn-google {

    width: 100%;



    padding: 14px;



    border: 1px solid #d7dde3;

    border-radius: 10px;



    background: #ffffff;



    font-size: 16px;

    font-weight: 600;



    color: #203750;



    cursor: pointer;



    transition: background 0.2s ease;

}





.btn-google:hover {

    background: #f6f8f9;

}





/* =========================

   REGISTRACE

========================= */



.login-register {

    margin-top: 30px;

}





.login-register p {

    margin: 0 0 8px;



    font-size: 14px;



    color: #6d7a88;

}





.login-register a {

    font-weight: 600;



    color: #2f9b91;



    text-decoration: none;

}





.login-register a:hover {

    text-decoration: underline;

}





/* =========================

   MOBIL

========================= */



@media (max-width: 600px) {



    .usage-history-row{

        grid-template-columns:

            50px

            1fr

            auto;

    }



    .usage-history-actions{

        grid-column:1 / -1;

        justify-content:flex-start;

        margin-left:50px;

        margin-top:4px;

    }



    .usage-history-edit-form{

        padding-left:50px;

    }





    .login-page {

        padding: 30px 20px;

    }





    .login-brand {

        margin-bottom: 35px;

    }





    .login-logo {

        width: 145px;

    }





    .login-title {

        font-size: 30px;

    }



}



/* =========================

   CHYBA FORMULÁŘE

========================= */



.form-error {

    margin-bottom: 20px;

    padding: 12px 15px;



    border-radius: 10px;



    font-size: 14px;

    text-align: left;



    background: #f8e5e5;

    color: #9b2f2f;

}



/* =========================

   MOJE SALIDI – DASHBOARD

========================= */



.user-dashboard-layout {

    display: flex;

    min-height: 100vh;



    background: #f5f7f8;

}



/* =========================

   MOJE SALIDI – LAYOUT

========================= */



.user-topbar {

    height: 70px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    padding: 0 30px;



    background: #ffffff;



    border-bottom: 1px solid #d7dde3;

}





/* =========================

   TOPBAR LEFT

========================= */



.user-topbar-left {

    display: flex;

    align-items: center;



    gap: 15px;

}





.user-logo {

    width: 58px;

    height: auto;



    display: block;

}





.user-brand {

    font-size: 26px;

    font-weight: 700;

}





/* =========================

   TOPBAR RIGHT

========================= */



.user-topbar-right {

    display: flex;

    align-items: center;



    gap: 14px;



    font-size: 14px;

    font-weight: 500;



    color: #203750;

}





.user-topbar-right a {

    color: #203750;



    text-decoration: none;

}





.user-topbar-right a:hover {

    color: #3f9692;

}





.topbar-separator {

    color: #b8c1c9;

}





/* =========================

   HLAVNÍ LAYOUT

========================= */



.user-wrapper {

    min-height: calc(100vh - 70px);



    display: flex;

}





/* =========================

   SIDEBAR

========================= */



.user-sidebar {

    width: 255px;

    flex-shrink: 0;



    padding: 20px 10px;



    background: #ffffff;



    border-right: 1px solid #d7dde3;

}





.user-sidebar a {

    display: block;



    padding: 13px 15px;



    margin-bottom: 5px;



    border-radius: 8px;



    font-size: 15px;

    font-weight: 600;



    color: #203750;



    text-decoration: none;

}





.user-sidebar a:hover {

    background: #eef6f5;

}





.user-sidebar a.active {

    background: #4b9692;



    color: #ffffff;

}





/* =========================

   OBSAH

========================= */



.user-content {

    flex: 1;

    min-width: 0;

    max-width: 100%;

    overflow-x: hidden;



    padding: 35px;



    background: #f6f8fa;

}





/* =========================

   MOBIL

========================= */



@media (max-width: 700px) {



    .user-topbar {

        padding: 0 15px;

    }





    .user-brand {

        font-size: 21px;

    }





    .user-logo {

        width: 45px;

    }





    .user-wrapper {

        flex-direction: column;

    }





    .user-sidebar {

        width: 100%;



        display: flex;



        gap: 5px;



        overflow-x: auto;



        border-right: none;

        border-bottom: 1px solid #d7dde3;

    }





    .user-sidebar a {

        white-space: nowrap;



        margin-bottom: 0;

    }





    .user-content {

        padding: 25px 20px;

    }



}



/* =========================

   SIDEBAR

========================= */



.user-sidebar {

    width: 250px;

    min-height: 100vh;



    display: flex;

    flex-direction: column;



    background: #ffffff;



    border-right: 1px solid #e2e7ea;

}





.user-sidebar-brand {

    padding: 30px 25px;



    font-size: 26px;

}





.user-sidebar-nav {

    display: flex;

    flex-direction: column;



    padding: 25px 10px;

}





.user-sidebar-link,

.user-sidebar-logout {

    display: block;



    padding: 13px 15px;



    border-radius: 8px;



    color: #173553;



    font-size: 15px;

    font-weight: 600;



    text-decoration: none;

}





.user-sidebar-link:hover {

    background: #eef6f5;

}





.user-sidebar-link.active {

    background: #3f9692;

    color: #ffffff;

}





.user-sidebar-bottom {

    margin-top: auto;



    padding: 15px;

}





.user-sidebar-logout {

    color: #8a3a3a;

}





.user-sidebar-logout:hover {

    background: #f8eeee;

}





/* =========================

   HLAVNÍ ČÁST

========================= */



.user-dashboard-main {

    flex: 1;



    min-width: 0;

}





/* =========================

   TOPBAR

========================= */



.user-topbar {

    height: 70px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    padding: 0 35px;



    background: #ffffff;



    border-bottom: 1px solid #e2e7ea;

}





.user-topbar-logo {

    width: 90px;



    height: auto;



    display: block;

}





.user-topbar-name {

    color: #173553;



    font-size: 15px;

    font-weight: 600;

}



.user-topbar-left {

    display: flex;

    align-items: center;



    gap: 14px;

}





.user-topbar-logo {

    width: 60px;



    height: auto;



    display: block;

}





.user-topbar-brand {

    font-size: 24px;

}





.user-topbar-right {

    display: flex;

    align-items: center;



    gap: 12px;

}





.user-topbar-name {

    color: #173553;



    font-size: 15px;

    font-weight: 600;

}





.user-topbar-separator {

    color: #aab4bc;

}





.user-topbar-logout {

    color: #173553;



    font-size: 15px;



    text-decoration: none;

}





.user-topbar-logout:hover {

    color: #3f9692;

}





/* =========================

   OBSAH

========================= */



.user-dashboard-content {

    padding: 35px;

    padding-bottom: 70px;

}





.user-page-title {

    margin: 0 0 30px;



    color: #173553;



    font-size: 32px;

}





.user-dashboard-grid {

    display: grid;



    grid-template-columns:

        repeat(auto-fit, minmax(220px, 1fr));



    gap: 20px;

}





.user-dashboard-card {

    padding: 25px;



    background: #ffffff;



    border: 1px solid #e2e7ea;

    border-radius: 12px;

}





.user-dashboard-card-title {

    margin-bottom: 12px;



    color: #173553;



    font-size: 16px;

    font-weight: 700;

}





.user-dashboard-card-value {

    color: #6d7a88;



    font-size: 15px;

}





/* =========================

   MOBIL

========================= */



@media (max-width: 800px) {



    .user-dashboard-layout {

        flex-direction: column;

    }





    .user-sidebar {

        width: 100%;

        min-height: auto;

    }





    .user-sidebar-brand {

        padding: 20px;

    }





    .user-sidebar-nav {

        flex-direction: row;



        overflow-x: auto;

    }





    .user-sidebar-link {

        white-space: nowrap;

    }





    .user-sidebar-bottom {

        margin-top: 0;

    }





    .user-dashboard-content {

        padding: 25px 20px 80px;

    }





    .user-topbar {

        padding: 0 20px;

    }



}



.user-dashboard {

    padding: 55px 35px;

}



.user-welcome {

    margin: 0;

    font-size: 32px;

    font-weight: 700;

    color: #173553;

}



/* =========================

   MŮJ ÚČET

========================= */



.user-page-title {

    margin: 0 0 30px;



    font-size: 32px;

    font-weight: 700;



    color: #173553;

}





.account-card {

    width: 100%;

    max-width: 750px;



    background: #ffffff;



    border: 1px solid #d7dde3;

    border-radius: 10px;



    overflow: hidden;

}





.account-row {

    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 30px;



    padding: 20px 25px;



    border-bottom: 1px solid #e5e9ed;

}





.account-row:last-child {

    border-bottom: none;

}





.account-label {

    font-size: 15px;

    font-weight: 600;



    color: #6d7a88;

}





.account-value {

    font-size: 16px;

    font-weight: 600;



    color: #173553;



    text-align: right;

}



.account-section {

    margin-bottom: 35px;

}



.account-section h2 {

    margin: 0 0 8px;



    font-size: 20px;

    font-weight: 700;



    color: #173553;

}



.account-description {

    margin: 0 0 15px;



    font-size: 14px;

    line-height: 1.5;



    color: #6d7a88;

}



.account-form-row {

    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 30px;



    padding: 20px 26px;



    border-bottom: 1px solid #d8dde3;

}



.account-form-row:last-child {

    border-bottom: none;

}



.account-form-row input,

.account-form-row select {

    width: 220px;



    padding: 10px 12px;



    border: 1px solid #cfd6dd;

    border-radius: 6px;



    font-size: 15px;



    color: #20364d;

    background: #ffffff;

}



.account-save-button {

    margin-top: 15px;



    padding: 12px 22px;



    border: none;

    border-radius: 6px;



    background: #4d918f;



    color: #ffffff;



    font-size: 15px;

    font-weight: 600;



    cursor: pointer;

}



.account-save-button:hover {

    opacity: 0.9;

}



.account-message {

    margin-bottom: 15px;



    padding: 12px 16px;



    border-radius: 6px;



    font-size: 14px;

}



.account-message.success {

    color: #1d6b45;

    background: #e7f6ed;

}



.account-message.error {

    color: #a62d2d;

    background: #fdeaea;

}





/* =========================

   MOBIL – MŮJ ÚČET

========================= */



@media (max-width: 600px) {



    .account-row {

        flex-direction: column;

        align-items: flex-start;



        gap: 6px;

    }





    .account-value {

        text-align: left;

    }



}



.password-card {

    width: 100%;

    max-width: 680px;



    padding: 28px;



    border: 1px solid #cfd8df;

    border-radius: 14px;



    background: #ffffff;

}





.form-group {

    display: flex;

    flex-direction: column;



    margin-bottom: 20px;

}





.form-group label {

    margin-bottom: 8px;



    font-weight: 600;

    color: #2c4054;

}





.form-group input {

    width: 100%;



    padding: 13px 15px;



    border: 1px solid #c5d0d9;

    border-radius: 10px;



    font-size: 16px;



    box-sizing: border-box;

}





.form-group input:focus {

    outline: none;



    border-color: #4d8f8d;

}





.save-button {

    padding: 13px 24px;



    border: none;

    border-radius: 8px;



    background: #4d8f8d;

    color: #ffffff;



    font-size: 16px;

    font-weight: 600;



    cursor: pointer;

}





.save-button:hover {

    opacity: 0.9;

}





.form-message {

    margin-bottom: 20px;

    padding: 14px 16px;



    border-radius: 8px;

}





.form-error {

    background: #fde8e8;

    color: #9b2c2c;

}





.form-success {

    background: #e6f4ea;

    color: #256c3c;

}



.forgot-password-link {

    text-align: center;

    margin-top: 8px;

    margin-bottom: 10px;

}



.forgot-password-link a {

    color: #3f8f8b;

    font-size: 15px;

    font-weight: 500;

    text-decoration: none;

    transition: opacity 0.2s ease;

}



.forgot-password-link a:hover {

    opacity: 0.7;

    text-decoration: underline;

}



/* =========================

   VÝBĚR JAZYKA

========================= */



.language-selector-wrapper {



    position: fixed;



    top: 30px;



    right: 40px;



    z-index: 9999;



}





.language-switcher {



    position: relative;



    display: inline-block;



}





.language-button {



    cursor: pointer;



    border: none;



    background: transparent;



    color: #2d435c;



    font-size: 16px;



    font-weight: 600;



    font-family: inherit;



    padding: 8px 0;



}





.language-dropdown {

    display: none;

    position: absolute;

    top: calc(100% + 5px);

    right: 0;



    min-width: 180px;

    max-height: calc(100vh - 90px);



    background: #ffffff;

    border: 1px solid #ddd;

    border-radius: 8px;



    overflow-y: auto;



    z-index: 10000;



    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}





.language-switcher:hover .language-dropdown {



    display: block;



}





.language-dropdown a {



    display: block;



    padding: 10px 15px;



    color: #333;



    text-decoration: none;



}





.language-dropdown a:hover {



    background: #f3f3f3;



}





.language-dropdown a.active {



    font-weight: 600;



}





/* =========================

   MOJE ZÁSOBY

========================= */



.supplies-page {

    width: 100%;

    max-width: 1000px;

    min-width: 0;

    margin-left: 0;

    margin-right: 0;

    box-sizing: border-box;

}



.supplies-page-content {

    width: 100%;

    max-width: 1000px;

    min-width: 0;

    margin-left: 0;

    margin-right: 0;

    box-sizing: border-box;

}



.supplies-header {

    margin-bottom: 25px;

}



.supplies-header h1 {

    margin-bottom: 8px;

}



.supplies-header p {

    margin: 0;

}





/* =========================

   SOUHRN ZÁSOB

========================= */



.supplies-summary {

    margin-bottom: 25px;

}





/* MŘÍŽKA STATISTIK */



.supplies-summary-grid {

    display: grid;



    grid-template-columns:

        repeat(3, minmax(0, 1fr));



    gap: 20px;

}





/* JEDNOTLIVÁ STATISTIKA */



.supplies-summary-card {

    min-height: 115px;



    display: flex;

    flex-direction: column;

    justify-content: space-between;



    padding: 20px 24px;



    background: #ffffff;



    border: 1px solid #e3e7eb;

    border-radius: 14px;

}





/* POPISEK STATISTIKY */



.supplies-summary-label {

    font-size: 15px;

    font-weight: 600;



    color: #6d7a88;



    line-height: 1.4;

}





/* HLAVNÍ HODNOTA */



.supplies-summary-value {

    display: flex;

    align-items: baseline;



    gap: 8px;



    margin-top: 12px;



    font-size: 36px;

    font-weight: 700;

    line-height: 1;



    color: #173553;

}





.supplies-summary-value span {

    font-size: 16px;

    font-weight: 600;



    color: #3f9692;

}





/* TEXT PŘI SBĚRU DAT */



.supplies-summary-note {

    margin-top: 20px;



    font-size: 15px;

    line-height: 1.4;



    color: #6d7a88;

}





/* =========================

   SEZNAM PRODUKTŮ

========================= */



.supplies-list {

    width: 100%;

    max-width: 1000px;

    min-width: 0;

    margin-left: 0;

    margin-right: 0;

    box-sizing: border-box;



    display: grid;



    grid-template-columns:

        repeat(3, minmax(0, 1fr));



    gap: 20px;

}





/* =========================

   KLIKACÍ DLAŽDICE PRODUKTU

========================= */



.supply-card {

    margin: 0;

    padding: 0 0 14px;



    background: #ffffff;

    border: 1px solid #e3e7eb;

    border-radius: 14px;



    overflow: hidden;

    box-sizing: border-box;

}





.supply-card-button {

    width: 100%;

    min-height: 210px;



    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-between;



    padding: 25px;



    border: 0;

    border-radius: 0;



    background: #ffffff;



    color: #173553;



    text-align: left;



    font-family: inherit;



    cursor: pointer;



    transition:

        transform 0.2s ease,

        box-shadow 0.2s ease,

        border-color 0.2s ease,

        background 0.2s ease;

}



.supply-card-button {

    width: 100%;

    background: #ffffff;

    box-shadow: none;

}



.supply-card-button:hover {

    transform: translateY(-4px);



    border-color: #3f9692;



    background: #f9fcfc;



    box-shadow:

        0 10px 25px

        rgba(23, 53, 83, 0.10);

}





.supply-card-button:active {

    transform: translateY(-1px);



    box-shadow:

        0 4px 12px

        rgba(23, 53, 83, 0.10);

}





/* NÁZEV PRODUKTU */



.supply-card-name {

    display: block;



    width: 100%;



    font-size: 17px;

    font-weight: 700;

    line-height: 1.4;



    color: #173553;

}





/* POČET KUSŮ */



.supply-card-quantity {

    display: flex;

    align-items: baseline;



    gap: 8px;



    font-size: 52px;

    font-weight: 700;

    line-height: 1;



    color: #3f9692;

}





.supply-card-quantity-label {

    font-size: 16px;

    font-weight: 600;



    color: #6d7a88;

}





/* INFORMACE O AKCI */



.supply-card-action {

    display: block;



    font-size: 14px;

    font-weight: 600;



    color: #3f9692;

}





/* PRODUKT BEZ ZÁSOB */



.supply-card-button:disabled {

    cursor: not-allowed;



    opacity: 0.55;



    background: #f5f6f7;

}





.supply-card-button:disabled:hover {

    transform: none;



    border-color: #e3e7eb;



    box-shadow: none;

}





/* =========================

   PŘIDÁNÍ NOVÉ ZÁSOBY

========================= */



.add-supply {

    margin-top: 30px;



    padding: 28px;



    background: #ffffff;



    border: 1px solid #e3e7eb;

    border-radius: 14px;

}





.add-supply h2 {

    margin: 0 0 24px;



    color: #173553;



    font-size: 24px;

    font-weight: 700;

}





.add-supply form {

    display: flex;

    flex-direction: column;



    gap: 20px;

}





/* POLE FORMULÁŘE */



.add-supply .form-group {

    margin: 0;

}





.add-supply .form-group label {

    display: block;



    margin-bottom: 8px;



    font-size: 14px;

    font-weight: 600;



    color: #203750;

}





/* INPUTY A SELECTY */



.add-supply .form-group input,

.add-supply .form-group select {

    width: 100%;



    min-height: 48px;



    padding: 12px 15px;



    border: 1px solid #d7dde3;

    border-radius: 10px;



    background: #ffffff;



    color: #173553;



    font-family: inherit;

    font-size: 16px;



    outline: none;



    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}





.add-supply .form-group input:focus,

.add-supply .form-group select:focus {

    border-color: #3f9692;



    box-shadow:

        0 0 0 3px

        rgba(63, 150, 146, 0.12);

}





/* TLAČÍTKO PŘIDÁNÍ */



.add-supply .btn-login {

    margin-top: 4px;



    min-height: 50px;

}





/* JINÝ PRODUKT */



#other-product-fields {

    display: flex;

    flex-direction: column;



    gap: 20px;



    padding-top: 4px;

}



/* =========================

   MOJE ZÁSOBY – RESPONSIVE

========================= */



@media (max-width: 900px) {



    .supplies-list {

        grid-template-columns:

            repeat(2, minmax(0, 1fr));

    }



}





@media (max-width: 600px) {



    .supplies-list {

        grid-template-columns: 1fr;



        gap: 15px;

    }





    .supply-card-button {

        min-height: 190px;



        padding: 22px;

    }





    .supply-card-quantity {

        font-size: 48px;

    }



}



/* =========================

   SOUHRN ZÁSOB – RESPONSIVE

========================= */



@media (max-width: 900px) {



    .supplies-summary-grid {

        grid-template-columns:

            repeat(2, minmax(0, 1fr));

    }



}





@media (max-width: 600px) {



    .supplies-summary-grid {

        grid-template-columns: 1fr;



        gap: 10px;

    }





    .supplies-summary-card {

        min-height: 90px;



        padding: 16px 20px;

    }





    .supplies-summary-value {

        margin-top: 8px;



        font-size: 32px;

    }



}



/* =========================

   PŘIDÁNÍ NOVÉ ZÁSOBY – MOBILE

========================= */



@media (max-width: 600px) {



    .add-supply {

        margin-top: 25px;



        padding: 22px;

    }





    .add-supply h2 {

        margin-bottom: 20px;



        font-size: 22px;

    }





    .add-supply form {

        gap: 18px;

    }





    #other-product-fields {

        gap: 18px;

    }



}



/* =========================

   DASHBOARD – STAV ZÁSOB

========================= */



.dashboard-supply-status {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;



    width: 100%;



    padding: 8px 12px;



    border: 1px solid var(--border-color);

    border-radius: 8px;



    background: #ffffff;



    font-size: 14px;

    line-height: 1.3;



    box-sizing: border-box;

}





.dashboard-supply-status span {

    white-space: nowrap;

}





.dashboard-supply-status strong {

    color: var(--primary-color);

    white-space: nowrap;

}



/* =========================

   DASHBOARD – VAROVÁNÍ

========================= */



.dashboard-supply-warning {

    width: 100%;



    box-sizing: border-box;



    margin-top: 8px;

    padding: 8px 12px;



    border: 1px solid #d8b36a;

    border-radius: 8px;



    background: #fff8e8;



    color: #75530d;



    font-size: 13px;

    line-height: 1.3;



    text-align: center;

}



/* ========================================

   DASHBOARD – RYCHLÉ POUŽITÍ ZÁSOB

======================================== */



.dashboard-quick-supplies {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-top: 16px;

}





.dashboard-quick-use-form {

    margin: 0;

}





.dashboard-quick-supply {

    width: 100%;

    min-height: 125px;



    display: flex;

    flex-direction: column;

    justify-content: space-between;



    padding: 16px;



    background: #ffffff;



    border: 1px solid #d8e0e3;

    border-radius: 12px;



    color: inherit;

    text-align: left;



    cursor: pointer;



    transition:

        transform 0.15s ease,

        box-shadow 0.2s ease,

        border-color 0.2s ease;

}





.dashboard-quick-supply:hover {

    transform: translateY(-2px);



    border-color: #4d8f8f;



    box-shadow:

        0 5px 14px

        rgba(23, 53, 83, 0.08);

}





.dashboard-quick-supply:active {

    transform: scale(0.98);

}





.dashboard-quick-supply-name {

    display: block;



    font-size: 15px;

    font-weight: 700;

    line-height: 1.35;



    color: #2f4358;

}





.dashboard-quick-supply-action {

    display: block;



    margin-top: 14px;



    font-size: 14px;

    font-weight: 700;



    color: #4d8f8f;

}



.dashboard-quick-supply {

    position: relative;

    overflow: hidden;

}





.dashboard-quick-success {

    position: absolute;



    inset: 0;



    display: flex;

    align-items: center;

    justify-content: center;



    background: #4d8f8f;



    color: #ffffff;



    font-size: 42px;

    font-weight: 700;



    opacity: 0;



    pointer-events: none;



    transition:

        opacity 0.2s ease;

}



.other-product-button {

    width: 100%;



    margin-top: 0;

    margin-bottom: 4px;



    padding: 13px 16px;



    border-radius: 10px;



    font-size: 15px;

    font-weight: 600;



    cursor: pointer;

}



.g_id_signin {

    width: 100% !important;

    display: flex;

    justify-content: center;

}



.privacy-confirm-acknowledgement {

    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid #ddd;

}



.privacy-confirm-acknowledgement label {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    line-height: 1.5;

}



.privacy-confirm-acknowledgement input[type="checkbox"] {

    margin-top: 4px;

}



.privacy-confirm-action {

    margin-top: 18px;

}



.register-privacy-link {

    color: #2a9d8f;

    text-decoration: none;

    font-weight: bold;

}



.register-privacy-link:hover {

    text-decoration: underline;

}



/* =========================

   Přidat novou zásobu

========================= */



.add-supply{

    width: 100%;

    max-width: 1000px;

    min-width: 0;

    margin-left: 0;

    margin-right: 0;

    box-sizing: border-box;



    background:#fff;

    border:1px solid #dfe5e7;

    border-radius:8px;

    margin-top:20px;

    overflow:hidden;

    padding:0;

}



.add-supply summary{

    list-style:none;

    cursor:pointer;



    display:flex;

    align-items:center;

    justify-content:space-between;



    padding:18px 20px;



    font-size:17px;

    font-weight:600;



    color:#1f2937;

}



.add-supply summary::-webkit-details-marker{

    display:none;

}



.add-supply-icon{

    display:flex;

    align-items:center;

    justify-content:center;



    width:32px;

    height:32px;



    border-radius:50%;



    background:#2f9e96;

    color:#fff;



    font-size:25px;

    font-weight:400;

    line-height:1;



    transition:.2s;

}



.add-supply[open] .add-supply-icon{

    transform:rotate(45deg);

}



.add-supply-content{

    padding:0 20px 20px;

    border-top:1px solid #e5e7eb;

}



/* =========================

   Připomenutí vyřízení pomůcek

========================= */



.supply-reminder-box{

    width:100%;

    max-width:100%;

    min-width:0;

    box-sizing:border-box;

    overflow:hidden;

    border:1px solid #dfe5e7;

    border-radius:8px;

    background:#fff;

}



.supply-reminder{

    width: 100%;

    max-width: 100%;

    min-width: 0;

    margin-top: 20px;

    box-sizing: border-box;

}



.supply-reminder-strip{

    min-height:52px;

    padding:10px 14px;

    border:1px solid #d5dde2;

    border-radius:8px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}



.supply-reminder-not-set{

    border-color:#2f9e96;

}



.supply-reminder-warning{

    border-color:#e2a93b;

    background:#fffaf0;

}



.supply-reminder-today,

.supply-reminder-expired{

    border-color:#d9534f;

    background:#fff5f5;

}



.supply-reminder-main{

    min-width:0;

}



.supply-reminder-title{

    font-size:15px;

    font-weight:700;

    color:#1f2937;

}



.supply-reminder-status{

    margin-top:3px;

    font-size:14px;

    color:#667085;

}



.supply-reminder-warning .supply-reminder-status{

    color:#8a5b00;

}



.supply-reminder-today .supply-reminder-status,

.supply-reminder-expired .supply-reminder-status{

    color:#b42318;

    font-weight:600;

}



.supply-reminder-toggle{

    flex:0 0 auto;

    min-width:38px;

    height:38px;

    padding:0 12px;

    border:1px solid #2f9e96;

    border-radius:19px;

    background:#fff;

    color:#2f9e96;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

}



.supply-reminder-toggle:hover{

    background:#f0fbfa;

}



.supply-reminder-form-wrapper{

    display:none;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    margin: 0;

    box-sizing: border-box;

    overflow: hidden;

    padding:18px 20px 20px;

    border:1px solid #dfe5e7;

    border-top:none;

    border-radius:0 0 8px 8px;

    background:#fff;

}



.supply-reminder-form-wrapper.is-visible{

    display:block;

}



.supply-reminder-form-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:15px;

}



.supply-reminder-form .form-group{

    position:relative;

    min-width:0;

}



.supply-reminder-form{

    display: block;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    margin: 0;

    box-sizing: border-box;

}



.supply-reminder-form-grid,

.supply-reminder-form-actions{

    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

}



.supply-reminder-form-grid > .form-group{

    min-width:0;

}



.supply-reminder-form label{

    display:block;

    margin-bottom:7px;

    font-weight:600;

    color:#1f2937;

}



.supply-reminder-form input[type="date"],

.supply-reminder-form input[type="number"]{

    width:100%;

    box-sizing:border-box;

    padding:10px 12px;

    border:1px solid #cfd8dc;

    border-radius:6px;

    background:#fff;

    color:#1f2937;

}



.supply-reminder-unit{

    display:block;

    margin-top:5px;

    font-size:13px;

    color:#667085;

}



.supply-reminder-next-preview{

    margin-top:15px;

    padding:10px 12px;

    border-radius:6px;

    background:#f7fafb;

    color:#344054;

    font-size:14px;

}



.supply-reminder-form-actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;

}



.supply-reminder-form-actions .btn-login,

.supply-reminder-form-actions .btn-secondary,

.supply-reminder-delete{

    width:auto;

    margin:0;

}



.supply-reminder-delete{

    padding:10px 14px;

    border:1px solid #d9534f;

    border-radius:6px;

    background:#fff;

    color:#b42318;

    cursor:pointer;

}



.supply-reminder-delete:hover{

    background:#fff5f5;

}



@media (max-width: 600px){

    .supply-reminder-form-grid{

        grid-template-columns: 1fr;

    }



    .supply-reminder-form-wrapper{

        padding: 16px;

    }

}



/* =========================

   Historie použití

========================= */



.usage-history{

    width: 100%;

    max-width: 1000px;

    min-width: 0;

    margin-left: 0;

    margin-right: 0;

    box-sizing: border-box;



    background:#fff;

    border:1px solid #dfe5e7;

    border-radius:8px;

    margin-top:20px;

    overflow:hidden;

}



.usage-history summary{

    list-style:none;

    cursor:pointer;



    display:flex;

    align-items:center;

    justify-content:space-between;



    padding:18px 20px;



    font-size:17px;

    font-weight:600;



    color:#1f2937;



    transition:

        background 0.2s ease;

}



.usage-history summary:hover{

    background:#f9fcfc;

}



.usage-history summary::-webkit-details-marker{

    display:none;

}



.usage-history-icon{

    display:flex;

    align-items:center;

    justify-content:center;



    width:32px;

    height:32px;



    border-radius:50%;



    background:#2f9e96;

    color:#fff;



    font-size:25px;

    font-weight:400;

    line-height:1;



    transition:.2s;

}



.usage-history[open] .usage-history-icon{

    transform:rotate(45deg);

}



.usage-history-content{

    padding:0 20px 20px;

    border-top:1px solid #e5e7eb;

}



.usage-history-date{

    padding:18px 0 8px;



    font-size:15px;

    font-weight:700;



    color:#1f2937;

}



.usage-history-row{

    display:grid;



    grid-template-columns:

        60px

        1fr

        auto

        auto;



    align-items:center;



    padding:10px 0;



    border-bottom:1px solid #ececec;

}



.usage-history-row:last-child{

    border-bottom:none;

}



.usage-history-time{

    font-weight:600;

    color:#4b5563;

}



.usage-history-name{

    color:#1f2937;

}



.usage-history-quantity{

    font-weight:600;

    color:#1f2937;

    margin-left:15px;

}



.usage-history-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

    margin-left:15px;

}



.usage-history-edit-button,

.usage-history-delete-button,

.usage-history-save-button,

.usage-history-cancel-button{

    border:0;

    background:none;

    padding:0;

    font:inherit;

    cursor:pointer;

}



.usage-history-edit-button{

    color:#2f9e96;

    font-weight:600;

}



.usage-history-delete-button{

    color:#d9534f;

    font-weight:600;

}



.usage-history-edit-form{

    display:none;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    padding:12px 0 14px 60px;

    border-bottom:1px solid #ececec;

}



.usage-history-edit-form.is-visible{

    display:flex;

}



.usage-history-edit-form label{

    font-size:14px;

    font-weight:600;

    color:#374151;

}



.usage-history-edit-form input[type="datetime-local"]{

    min-height:38px;

    border:1px solid #d9e0e2;

    border-radius:6px;

    padding:6px 9px;

    font:inherit;

    color:#1f2937;

    background:#fff;

}



.usage-history-save-button,

.usage-history-cancel-button{

    min-height:38px;

    padding:7px 12px;

    border-radius:6px;

    font-size:14px;

    font-weight:600;

}



.usage-history-save-button{

    background:#2f9e96;

    color:#fff;

}



.usage-history-cancel-button{

    background:#eef2f3;

    color:#374151;

}



.usage-history-empty{

    padding:20px 0;



    color:#6b7280;

}



.dashboard-quick-supply.is-submitting

.dashboard-quick-success {

    opacity: 1;

}



/* ========================================

   DASHBOARD – ZPĚTNÁ VAZBA

======================================== */



.dashboard-feedback {

    width: 100%;

    margin-top: 24px;

}



.dashboard-feedback-card {

    width: 100%;

    box-sizing: border-box;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #d8e0e3;

    border-radius: 12px;

}



.dashboard-feedback-title {

    margin: 0;

    font-size: 19px;

    font-weight: 700;

    color: #173553;

}



.dashboard-feedback-description {

    margin: 7px 0 16px;

    font-size: 14px;

    line-height: 1.5;

    color: #6d7a88;

}



.dashboard-feedback-message {

    margin-bottom: 14px;

    padding: 10px 12px;

    border-radius: 8px;

    font-size: 14px;

    line-height: 1.4;

}



.dashboard-feedback-message.success {

    background: #edf9f7;

    border: 1px solid #a8ddd6;

    color: #216d67;

}



.dashboard-feedback-message.error {

    background: #fff1f1;

    border: 1px solid #e3b3b3;

    color: #8a3030;

}



.dashboard-feedback-textarea {

    width: 100%;

    min-height: 120px;

    box-sizing: border-box;

    padding: 12px;

    border: 1px solid #cfd8de;

    border-radius: 8px;

    background: #ffffff;

    color: #173553;

    font: inherit;

    line-height: 1.5;

    resize: vertical;

}



.dashboard-feedback-textarea:focus {

    outline: none;

    border-color: #4d8f8f;

    box-shadow: 0 0 0 2px rgba(77, 143, 143, 0.12);

}



.dashboard-feedback-input {

    width: 100%;

    min-height: 48px;

    box-sizing: border-box;

    padding: 12px;

    border: 1px solid #cfd8de;

    border-radius: 8px;

    background: #ffffff;

    color: #173553;

    font: inherit;

    line-height: 1.5;

}



.dashboard-feedback-input:focus {

    outline: none;

    border-color: #4d8f8f;

    box-shadow: 0 0 0 2px rgba(77, 143, 143, 0.12);

}



.dashboard-feedback-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 12px;

}



.dashboard-feedback-limit {

    font-size: 12px;

    color: #8a96a3;

}



.dashboard-feedback-button {

    min-height: 40px;

    padding: 9px 18px;

    border: none;

    border-radius: 8px;

    background: #4d8f8f;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

}



.dashboard-feedback-button:hover {

    background: #3f7f7f;

}



@media (max-width: 600px) {



    .dashboard-feedback {

        margin-top: 18px;

    }



    .dashboard-feedback-card {

        padding: 16px;

    }



    .dashboard-feedback-footer {

        align-items: stretch;

        flex-direction: column;

    }



    .dashboard-feedback-button {

        width: 100%;

    }



}



/* =========================

   STAŽENÍ APLIKACE

========================= */



.app-download-badges {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 28px;

    flex-wrap: wrap;

}



.app-download-badge {

    width: 160px;

    min-height: 54px;

    box-sizing: border-box;



    display: flex;

    align-items: center;



    padding: 7px 12px;



    background: #ffffff;

    border: 2px solid #e0e2e4;

    border-radius: 11px;



    box-shadow:

        0 2px 4px rgba(23, 53, 83, 0.08);



    color: #3d3d3d;

}



.app-badge-icon {

    width: 30px;

    height: 30px;



    flex: 0 0 30px;



    display: flex;

    align-items: center;

    justify-content: center;



    margin-right: 9px;

}



.app-badge-icon svg {

    width: 28px;

    height: 28px;



    fill: #3d3d3d;

}



.google-play-icon svg {

    fill: #555555;

}



.app-badge-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;



    line-height: 1.1;

    text-align: left;

}



.app-badge-small {

    font-size: 11px;

    font-weight: 600;



    color: #555555;



    margin-bottom: 3px;

}



.app-badge-text strong {

    font-size: 16px;

    font-weight: 700;



    color: #3d3d3d;

}





/* MOBIL */



@media (max-width: 600px) {



    .app-download-badges {

        gap: 10px;

    }



    .app-download-badge {

        width: 150px;

    }



}



/* Hamburger je standardně skrytý */

.mobile-menu-toggle {

    display: none;

}



/* ========================================

   TABLET

======================================== */



@media (max-width: 900px) {



    .dashboard-quick-supplies {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



}





/* ========================================

   MOBIL

======================================== */



@media (max-width: 600px) {



    .dashboard-quick-supplies {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;

        margin-top: 12px;

    }





    .dashboard-quick-supply {

        min-height: 100px;

        padding: 12px;

        border-radius: 10px;

    }





    .dashboard-quick-supply-name {

        font-size: 14px;

        line-height: 1.3;

    }





    .dashboard-quick-supply-action {

        display: block;



        margin-top: 10px;



        font-size: 13px;

        font-weight: 700;



        color: #4d8f8f;

    }



}



/* =========================

   MOBILNÍ NAVIGACE

========================= */



@media (max-width: 768px) {



    /* Hamburger zobrazíme pouze na mobilu */

    .mobile-menu-toggle {

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 5px;



        width: 42px;

        height: 42px;



        padding: 0;

        margin-left: 12px;



        background: transparent;

        border: none;



        cursor: pointer;

    }





    /* Jednotlivé čárky hamburgeru */

    .mobile-menu-toggle span {

        display: block;



        width: 26px;

        height: 3px;



        background: #243b55;

        border-radius: 3px;

    }





    /* Na mobilu je menu standardně skryté */

    .user-sidebar {

        display: none;



        position: fixed;



        top: 64px;

        left: 0;

        right: 0;



        width: 100%;



        padding: 12px;



        box-sizing: border-box;



        background: #ffffff;

        border-bottom: 1px solid #d8dde3;



        z-index: 1000;

    }







    /* Otevřené mobilní menu */

    .user-sidebar.mobile-menu-open {

        display: flex;

        flex-direction: column;

    }





    /* Odhlášení nahoře na mobilu schováme */

    .desktop-logout,

    .topbar-separator {

        display: none;

    }





    /* Odhlášení v mobilním menu zobrazíme */

    .mobile-sidebar-logout {

        display: block;

    }



}





@media (max-width: 600px){

    .supply-reminder-form-grid{grid-template-columns:1fr;}

}



/* =========================

   SMAZÁNÍ ÚČTU

========================= */



.account-delete-button {

    appearance: none;

    -webkit-appearance: none;

    box-sizing: border-box;

    padding: 8px 14px;

    border: 1px solid #cbd5df;

    border-radius: 7px;

    background: #ffffff;

    color: #243b55;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 500;

    cursor: pointer;

}



.account-delete-button:hover {

    background: #f5f8fa;

}



/* Otevřená část */



#delete-account-form {

    margin-top: 0 !important;

    padding: 20px 22px 22px;

    border-top: 1px solid #e1e6eb;

    background: #fafbfc;

    box-sizing: border-box;

}



/* Upozornění */



#delete-account-form .account-description {

    margin: 0 0 18px;

    padding: 12px 14px;

    border: 1px solid #ead0d0;

    border-radius: 7px;

    background: #fffafa;

    color: #8a4a4a;

    font-size: 14px;

    line-height: 1.5;

}



/* Odeslání kódu */



#delete-account-form > form:first-of-type {

    margin: 0;

}



#delete-account-form > form:first-of-type .account-delete-button {

    background: #4d918f;

    border-color: #4d918f;

    color: #ffffff;

    font-weight: 600;

}



#delete-account-form > form:first-of-type .account-delete-button:hover {

    background: #438482;

}



/* Potvrzení */



#delete-account-form > div {

    margin-top: 22px !important;

    padding-top: 20px;

    border-top: 1px solid #e5e9ed;

}



#delete-account-form label {

    display: block;

    margin: 0 0 8px;

    color: #536b80;

    font-size: 14px;

    font-weight: 600;

}



/* Kód */



#delete_code {

    display: block;

    width: 180px;

    height: 42px;

    box-sizing: border-box;

    margin: 0 !important;

    padding: 8px 12px;

    border: 1px solid #cbd5df;

    border-radius: 7px;

    background: #ffffff;

    color: #243b55;

    font-family: inherit;

    font-size: 18px;

    letter-spacing: 4px;

    text-align: center;

    outline: none;

}



#delete_code:focus {

    border-color: #4d918f;

    box-shadow: 0 0 0 3px rgba(77, 145, 143, 0.12);

}



/* Definitivní smazání */



#delete-account-form > div form .account-delete-button {

    margin-top: 12px !important;

    background: #fffafa;

    border-color: #d9a6a6;

    color: #a44a4a;

    font-weight: 600;

}



#delete-account-form > div form .account-delete-button:hover {

    background: #fff3f3;

    border-color: #c98d8d;

}



@media (max-width: 600px) {



    #delete-account-form {

        padding: 18px 18px 20px;

    }



    #delete_code {

        width: 180px;

    }

}



/* =========================

   STATISTIKY

========================= */



.statistics-page {

    width: 100%;

    box-sizing: border-box;

}



.statistics-header {

    margin-bottom: 24px;

}



.statistics-header h1 {

    margin: 0 0 6px;

}



.statistics-header p {

    margin: 0;

    color: #536b80;

    font-size: 16px;

    line-height: 1.5;

}



/* =========================

   HLAVNÍ 3 STATISTIKY

========================= */



.statistics-summary {

    margin-bottom: 28px;

}



.statistics-summary-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;

}



.statistics-section > .statistics-summary-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}



.statistics-card {

    min-height: 145px;

    padding: 22px 24px;

    box-sizing: border-box;

    border: 1px solid #dfe5ea;

    border-radius: 14px;

    background: #ffffff;

}



.statistics-card-label {

    margin-bottom: 18px;

    color: #536b80;

    font-size: 15px;

    font-weight: 600;

}



.statistics-card-value {

    color: #1f2933;

    font-size: 38px;

    line-height: 1.1;

    font-weight: 700;

}



.statistics-card-value span {

    margin-left: 6px;

    color: #4d918f;

    font-size: 14px;

    font-weight: 600;

}



.statistics-card-note {

    color: #536b80;

    font-size: 15px;

    line-height: 1.5;

}



/* =========================

   SEKCE

========================= */



.statistics-section {

    margin-bottom: 30px;

}



.statistics-section h2 {

    margin: 0 0 16px;

    color: #1f2933;

    font-size: 24px;

    line-height: 1.3;

}



/* =========================

   OVLÁDÁNÍ OBDOBÍ

========================= */



.statistics-section-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;

}



.statistics-section-heading h2 {

    margin: 0;

}



.statistics-period-controls {

    display: inline-flex;

    align-items: center;

    gap: 0;

    padding: 3px;

    border: 1px solid #d6dde3;

    border-radius: 9px;

    background: #ffffff;

}



.statistics-period-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding: 6px 14px;

    box-sizing: border-box;

    border-radius: 6px;

    color: #536b80;

    background: transparent;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;

    transition: background-color 0.15s ease, color 0.15s ease;

}



.statistics-period-button:hover {

    color: #243b55;

    background: #f1f5f7;

}



.statistics-period-button.active {

    color: #ffffff;

    background: #4d918f;

}



.statistics-period-button.active:hover {

    color: #ffffff;

    background: #4d918f;

}



.statistics-period-form {

    display: flex;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 14px;

    margin: 0 0 20px;

    padding: 16px 18px;

    box-sizing: border-box;

    border: 1px solid #dfe5ea;

    border-radius: 12px;

    background: #ffffff;

}



.statistics-period-field {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.statistics-period-field label {

    color: #536b80;

    font-size: 13px;

    font-weight: 600;

}



.statistics-period-field input[type="date"] {

    width: 170px;

    height: 40px;

    padding: 7px 10px;

    box-sizing: border-box;

    border: 1px solid #cbd5df;

    border-radius: 7px;

    background: #ffffff;

    color: #243b55;

    font-family: inherit;

    font-size: 14px;

    outline: none;

}



.statistics-period-field input[type="date"]:focus {

    border-color: #4d918f;

    box-shadow: 0 0 0 3px rgba(77, 145, 143, 0.12);

}



.statistics-period-submit {

    height: 40px;

    padding: 7px 16px;

    border: 1px solid #4d918f;

    border-radius: 7px;

    background: #4d918f;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

}



.statistics-period-submit:hover {

    background: #43827f;

    border-color: #43827f;

}



.statistics-period-summary-grid {

    margin-top: 0;

}



/* =========================

   MENŠÍ STATISTIKY

========================= */



.statistics-small-card {

    min-height: 110px;

    padding: 20px 22px;

    box-sizing: border-box;

    border: 1px solid #dfe5ea;

    border-radius: 12px;

    background: #ffffff;

}



.statistics-small-label {

    margin-bottom: 10px;

    color: #536b80;

    font-size: 15px;

    font-weight: 600;

}



.statistics-small-value {

    color: #1f2933;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 700;

}



.statistics-small-value span {

    margin-left: 5px;

    color: #4d918f;

    font-size: 14px;

    font-weight: 600;

}



/* =========================

   GRAF

========================= */



.statistics-chart {

    display: flex;

    align-items: flex-end;

    gap: 20px;

    min-height: 260px;

    padding: 24px;

    box-sizing: border-box;

    border: 1px solid #dfe5ea;

    border-radius: 12px;

    background: #ffffff;

    overflow-x: auto;

}



.statistics-chart-column {

    flex: 1;

    min-width: 60px;

    height: 210px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

}



.statistics-chart-value {

    margin-bottom: 8px;

    color: #536b80;

    font-size: 13px;

    font-weight: 600;

}



.statistics-chart-bar-wrapper {

    width: 100%;

    height: 150px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

}



.statistics-chart-bar {

    width: 42px;

    max-height: 100%;

    min-height: 8px;

    border-radius: 7px 7px 0 0;

    background: #4d918f;

}



.statistics-chart-label {

    margin-top: 10px;

    color: #536b80;

    font-size: 13px;

}



/* =========================

   SPOTŘEBA PODLE POMŮCEK

========================= */



.statistics-product-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.statistics-product-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 16px 18px;

    box-sizing: border-box;

    border: 1px solid #dfe5ea;

    border-radius: 10px;

    background: #ffffff;

}



.statistics-product-name {

    color: #243b55;

    font-size: 15px;

    font-weight: 600;

}



.statistics-product-quantity {

    color: #4d918f;

    font-size: 16px;

    font-weight: 700;

    white-space: nowrap;

}



/* =========================

   NÁKLADY

========================= */



.statistics-cost-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 20px;

}



.statistics-cost-card {

    min-height: 110px;

    padding: 20px 22px;

    box-sizing: border-box;

    border: 1px solid #dfe5ea;

    border-radius: 12px;

    background: #ffffff;

}



.statistics-cost-value {

    margin-top: 10px;

}



.statistics-cost-value + .statistics-cost-value {

    margin-top: 8px;

}



/* =========================

   ŽÁDNÁ DATA

========================= */



.statistics-empty {

    padding: 18px 20px;

    border: 1px solid #dfe5ea;

    border-radius: 10px;

    background: #fafbfc;

    color: #536b80;

    font-size: 15px;

    line-height: 1.5;

}



/* =========================

   MOBIL

========================= */



@media (max-width: 900px) {



    .statistics-summary-grid,

    .statistics-cost-grid {

        grid-template-columns: 1fr;

    }



    .statistics-section-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }



    .statistics-period-controls {

        width: 100%;

    }



    .statistics-period-button {

        flex: 1;

    }

}



@media (max-width: 600px) {



    .statistics-card {

        min-height: auto;

        padding: 20px;

    }



    .statistics-card-value {

        font-size: 34px;

    }



    .statistics-section h2 {

        font-size: 22px;

    }



    .statistics-period-form {

        align-items: stretch;

        flex-direction: column;

    }



    .statistics-period-field input[type="date"],

    .statistics-period-submit {

        width: 100%;

    }



    .statistics-chart {

        gap: 12px;

        padding: 16px;

    }



    .statistics-chart-column {

        min-width: 50px;

    }



    .statistics-chart-bar {

        width: 32px;

    }



    .statistics-product-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 6px;

    }

}



/* =========================

   HODNOCENÍ VÝROBKU

========================= */



.product-rating-page {

    max-width: 760px;

    margin: 0 auto;

    padding: 10px 0 40px;

}



.product-rating-card {

    background: #ffffff;

    border: 1px solid #e1e6eb;

    border-radius: 10px;

    padding: 28px 30px 30px;

    box-sizing: border-box;

}



.product-rating-header {

    margin-bottom: 26px;

}



.product-rating-header h1 {

    margin: 0 0 16px;

    color: #243b55;

    font-size: 28px;

    line-height: 1.25;

}



.product-rating-product-name {

    color: #243b55;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.4;

}



.product-rating-product-size {

    margin-top: 4px;

    color: #6b7c8f;

    font-size: 14px;

}



.product-rating-error {

    margin-bottom: 20px;

    padding: 12px 14px;

    border: 1px solid #ead0d0;

    border-radius: 7px;

    background: #fffafa;

    color: #a44a4a;

    font-size: 14px;

}



.product-rating-form {

    width: 100%;

}



.product-rating-field {

    margin-bottom: 24px;

}



.product-rating-field > label {

    display: block;

    margin-bottom: 10px;

    color: #536b80;

    font-size: 15px;

    font-weight: 600;

}



/* Hvězdičky */



.product-rating-stars {

    display: flex;

    align-items: center;

    gap: 4px;

}



.product-rating-star {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

}



.product-rating-star input {

    position: absolute;

    opacity: 0;

    width: 1px;

    height: 1px;

}



.product-rating-star span {

    display: block;

    color: #cbd5df;

    font-size: 38px;

    line-height: 1;

    transition: color 0.15s ease, transform 0.15s ease;

}



.product-rating-star:hover span,

.product-rating-star input:checked + span,

.product-rating-star:has(~ .product-rating-star input:checked) span {

    color: #f2b84b;

    transform: scale(1.08);

}



.product-rating-star input:focus-visible + span {

    outline: 2px solid #4d918f;

    outline-offset: 4px;

    border-radius: 4px;

}



/* Recenze */



.product-rating-field textarea {

    display: block;

    width: 100%;

    min-height: 140px;

    padding: 12px 14px;

    box-sizing: border-box;

    border: 1px solid #cbd5df;

    border-radius: 7px;

    background: #ffffff;

    color: #243b55;

    font-family: inherit;

    font-size: 15px;

    line-height: 1.5;

    resize: vertical;

    outline: none;

}



.product-rating-field textarea:focus {

    border-color: #4d918f;

    box-shadow: 0 0 0 3px rgba(77, 145, 143, 0.12);

}



/* Tlačítka */



.product-rating-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 8px;

}



.product-rating-actions .btn-login,

.product-rating-actions .btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 9px 18px;

    box-sizing: border-box;

    border-radius: 7px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

}



.product-rating-actions .btn-login {

    border: 1px solid #4d918f;

    background: #4d918f;

    color: #ffffff;

}



.product-rating-actions .btn-secondary {

    border: 1px solid #cbd5df;

    background: #ffffff;

    color: #536b80;

}



/* Mobil */



@media (max-width: 600px) {



    .product-rating-page {

        padding: 0 0 30px;

    }



    .product-rating-card {

        padding: 22px 18px 24px;

    }



    .product-rating-header h1 {

        font-size: 24px;

    }



    .product-rating-product-name {

        font-size: 17px;

    }



    .product-rating-stars {

        gap: 2px;

    }



    .product-rating-star span {

        font-size: 34px;

    }



    .product-rating-actions {

        flex-direction: column;

        align-items: stretch;

    }



    .product-rating-actions .btn-login,

    .product-rating-actions .btn-secondary {

        width: 100%;

    }

}



/* =========================

   HODNOCENÍ V ZÁSOBÁCH

========================= */



.supply-rating-action {

    margin: 0 25px;

    padding-top: 12px;

    border-top: 1px solid #e5e9ed;

}



.supply-rate-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    min-height: 34px;

    padding: 6px 12px;



    border: 1px solid #4d918f;

    border-radius: 6px;



    background: #ffffff;

    color: #4d918f;



    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.2;



    text-decoration: none;

    cursor: pointer;

}



.supply-rate-button:hover {

    background: #4d918f;

    color: #ffffff;

}



@media (max-width: 600px) {

    .supply-rating-action {

        margin: 0 18px;

    }



    .supply-rate-button {

        width: 100%;

    }

}



/* =========================

   HODNOCENÍ VÝROBKŮ

========================= */



.ratings-page {

    max-width: 760px;

}



.ratings-header {

    margin-bottom: 24px;

}



.ratings-header .user-page-title {

    margin-bottom: 8px;

}



.ratings-description {

    margin: 0;

    color: #536b80;

    font-size: 15px;

    line-height: 1.5;

}



.ratings-product-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.ratings-product-card {

    background: #ffffff;

    border: 1px solid #dce3e8;

    border-radius: 10px;

    padding: 18px 22px;

    box-sizing: border-box;

}



.ratings-product-header {

    padding-bottom: 14px;

    border-bottom: 1px solid #e5e9ed;

}



.ratings-product-name {

    display: flex;

    flex-direction: column;

    gap: 1px;

    color: #173b63;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

}



.ratings-product-brand {

    font-size: 13px;

    font-weight: 600;

    color: #536b80;

}



.ratings-product-size {

    margin-top: 3px;

    color: #536b80;

    font-size: 13px;

}



.ratings-summary {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 10px;

}



.ratings-stars {

    display: flex;

    gap: 1px;

    line-height: 1;

}



.rating-star {

    font-size: 19px;

}



.rating-star.full {

    color: #f2b544;

}



.rating-star.half {

    color: #f2b544;

}



.rating-star.empty {

    color: #cbd5df;

}



.ratings-average {

    color: #173b63;

    font-size: 15px;

    font-weight: 700;

}



.ratings-count {

    color: #536b80;

    font-size: 13px;

}



.ratings-reviews {

    display: flex;

    flex-direction: column;

}



.rating-review {

    padding: 12px 0;

}



.rating-review + .rating-review {

    border-top: 1px solid #e5e9ed;

}



.rating-review-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}



.rating-review-stars {

    display: flex;

    gap: 1px;

    line-height: 1;

}



.rating-review-stars .full {

    color: #f2b544;

    font-size: 16px;

}



.rating-review-stars .empty {

    color: #cbd5df;

    font-size: 16px;

}



.rating-review-date {

    color: #7b8b99;

    font-size: 12px;

    white-space: nowrap;

}



.rating-review-text {

    margin-top: 7px;

    color: #334e68;

    font-size: 14px;

    line-height: 1.5;

}



.ratings-empty {

    padding: 20px;

    background: #ffffff;

    border: 1px solid #dce3e8;

    border-radius: 10px;

    color: #536b80;

    font-size: 14px;

}



@media (max-width: 600px) {



    .ratings-page {

        max-width: none;

    }



    .ratings-product-card {

        padding: 17px 18px;

    }



    .ratings-summary {

        gap: 7px;

    }



    .rating-review-top {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }



    .rating-review-date {

        white-space: normal;

    }

}





/* =========================

   MOBIL

========================= */



@media (max-width: 600px) {



    .ratings-product-card {

        padding: 20px;

        border-radius: 10px;

    }



    .ratings-summary {

        gap: 9px;

    }



    .rating-review-top {

        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

    }



    .rating-review-date {

        white-space: normal;

    }

}