/* Soubor: style.css */

/* Styly pro celou aplikaci. */



:root {

    --bg-color: #f0f2f5;

    --sidebar-bg: #ffffff;

    --timeline-bg: #ffffff;

    --header-bg: #f8f9fa;

    --border-color: #dee2e6;

    --text-color: #212529;

    --text-light: #6c757d;

    --primary-color: #0d6efd;

    --primary-hover: #0b5ed7;

    --danger-color: #dc3545;

    --danger-hover: #bb2d3b;

    --shadow: 0 2px 4px rgba(0,0,0,0.05);

    --font-family: 'Inter', sans-serif;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    font-family: var(--font-family);

    background-color: var(--bg-color);

    color: var(--text-color);

    font-size: 14px;

    overflow: hidden; /* Zabráníme scrollbaru na body */

}



.hidden {

    display: none !important;

}



/* --- Login Container --- */

.login-container {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}



.login-box {

    background: var(--sidebar-bg);

    padding: 40px;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    text-align: center;

    width: 100%;

    max-width: 400px;

}



.login-box h1 {

    margin-bottom: 10px;

    font-size: 24px;

}



.login-box p {

    margin-bottom: 20px;

    color: var(--text-light);

}



.login-box input {

    width: 100%;

    padding: 12px;

    margin-bottom: 15px;

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

    border-radius: 6px;

    font-size: 16px;

}



.login-box button {

    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 6px;

    background-color: var(--primary-color);

    color: white;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    transition: background-color 0.2s;

}



.login-box button:hover {

    background-color: var(--primary-hover);

}



/* --- App Container --- */

.app-container {

    display: flex;

    height: 100vh;

}



/* --- Sidebar --- */

.sidebar {

    width: 320px;

    background-color: var(--sidebar-bg);

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

    display: flex;

    flex-direction: column;

    padding: 20px;

    overflow-y: auto;

    flex-shrink: 0; /* Zabrání smrštění sloupce */

}



.sidebar-header {

    padding-bottom: 15px;

    margin-bottom: 15px;

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

}

.sidebar-header h2 {

    font-size: 18px;

}

.user-info {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 10px;

    font-weight: 500;

}

#logout-btn {

    background: none;

    border: none;

    cursor: pointer;

    font-size: 18px;

    padding: 5px;

    border-radius: 50%;

}

#logout-btn:hover {

    background-color: #f0f0f0;

}





.sidebar-section {

    margin-bottom: 25px;

}



.sidebar-section h3 {

    font-size: 14px;

    color: var(--text-light);

    margin-bottom: 10px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



#task-template-list, #printer-list {

    margin-bottom: 15px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    align-items: flex-start; /* Zarovnání položek doleva */

}



.task-template, .printer-item {

    padding: 10px;

    border-radius: 6px;

    cursor: grab;

    transition: box-shadow 0.2s, width 0.2s;

    font-weight: 500;

    display: flex;

    align-items: center;

    border: 1px solid transparent;

}



.printer-item {

    justify-content: space-between;

    width: 100%; /* Tiskárny zaberou celou šířku */

}



.task-template {

    color: white;

    justify-content: flex-start; /* Zarovnání obsahu doleva */

    min-width: 60px; /* Minimální šířka pro 1h úkol */

    max-width: 100%; /* Aby nepřetekl ze sidebaru */

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}





.task-template:active, .scheduled-task:active {

    cursor: grabbing;

    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

    z-index: 1000;

}

.printer-item {

    background-color: #f8f9fa;

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

}

.remove-printer-btn {

    background: none;

    border: none;

    color: var(--text-light);

    cursor: pointer;

    font-weight: bold;

    padding: 0 5px;

}

.remove-printer-btn:hover {

    color: var(--danger-color);

}





form {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



form input[type="text"], form input[type="number"] {

    padding: 8px;

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

    border-radius: 4px;

}

form input[type="color"] {

    height: 35px;

    padding: 2px;

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

    border-radius: 4px;

    cursor: pointer;

}



form button {

    padding: 8px;

    border: none;

    border-radius: 4px;

    background-color: var(--primary-color);

    color: white;

    font-weight: 500;

    cursor: pointer;

    transition: background-color 0.2s;

}

form button:hover {

    background-color: var(--primary-hover);

}



/* --- Trash Can --- */

.trash-can {

    margin-top: auto; /* Důležité pro posunutí na dno */

    padding: 20px;

    border: 2px dashed var(--border-color);

    border-radius: 8px;

    text-align: center;

    color: var(--text-light);

    transition: background-color 0.2s, border-color 0.2s;

}

.trash-can.drag-over {

    background-color: #ffebee;

    border-color: var(--danger-color);

}

.trash-icon {

    font-size: 24px;

    margin-bottom: 5px;

}





/* --- Timeline --- */

.timeline-wrapper {

    flex-grow: 1;

    overflow: auto; /* Povolí scrollbary jen pro timeline */

    background-color: var(--timeline-bg);

}



#timeline-container {

    display: grid;

    /* Sloupce budou definovány v JS */

}



.timeline-header, .timeline-hours-header {

    position: sticky;

    top: 0;

    background-color: var(--header-bg);

    z-index: 10;

    font-weight: 600;

    padding: 10px;

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

    text-align: center;

}

.timeline-hours-header {

    top: 41px; /* Výška .timeline-header */

}



.printer-header {

    position: sticky;

    left: 0;

    background-color: var(--header-bg);

    z-index: 5;

    padding: 10px;

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

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

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

}



.timeline-cell {

    border-right: 1px solid #e9ecef;

    border-bottom: 1px solid #e9ecef;

    min-height: 60px;

    position: relative;

    transition: background-color 0.2s;

}

.timeline-cell.drag-over {

    background-color: #e0eaff;

}



.scheduled-task {

    position: absolute;

    top: 5px;

    left: 2px;

    height: calc(100% - 10px);

    display: flex;

    align-items: center;

    justify-content: space-between; /* Změněno pro oddělení textu a tlačítka */

    color: white;

    padding: 4px 8px;

    border-radius: 4px;

    font-size: 13px;

    font-weight: 500;

    cursor: grab;

    overflow: hidden;

    z-index: 2;

    border: 1px solid rgba(0,0,0,0.15);

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

    transition: left 0.1s, top 0.1s, background-color 0.2s;

}



.task-name {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    padding-right: 5px; /* Odsazení od křížku */

}



.delete-task-btn {

    background: none;

    border: none;

    color: white;

    font-size: 18px;

    font-weight: bold;

    line-height: 1;

    cursor: pointer;

    padding: 0 5px;

    border-radius: 50%;

    opacity: 0.5;

    transition: opacity 0.2s, background-color 0.2s;

    flex-shrink: 0; /* Zabrání smrštění tlačítka */

}



.scheduled-task:hover .delete-task-btn {

    opacity: 1;

}



.delete-task-btn:hover {

    background-color: rgba(0,0,0,0.2);

}





/* --- Notification --- */

#notification {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    padding: 12px 25px;

    border-radius: 6px;

    color: white;

    font-weight: 500;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s, visibility 0.3s, bottom 0.3s;

    z-index: 9999;

}

#notification.show {

    opacity: 1;

    visibility: visible;

    bottom: 30px;

}

#notification.success {

    background-color: #28a745;

}

#notification.error {

    background-color: var(--danger-color);

}