body
{
    background-color: #090a0a;
    color: #eeefff;
    margin: 0;
    padding: 0;
}

a 
{
    color: #eeefff;
    text-decoration: none;
}

h1
{
    padding: 0;
    margin: 0;
}

h3
{
    padding: 0;
    margin: 0;
}

#selected
{
    background-color: #2f4e4e;
}

.navbar_header
{
    border-bottom: solid #eeefff 1px;
    border-collapse: collapse;
    background-color: #1b1e1e;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    margin: 0;
}

.navbar_header_links
{    
    display: flex;
    align-items: center;
}

.navbar_header_links a
{
    border: solid #eeefff 1px;
    padding: 10px;
    height: 40px;
}

#main_header
{
     margin: 30px 150px;
}

.main_showcase
{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    margin: 30px 100px;
    gap: 40px;
}

.main_showcase div
{ 
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main_showcase a
{ 
    border: solid #eeefff 1px;
    padding: 10px 20px;
    text-align: center;
    width: 70%;
    border-radius: 20px;
    background-color: #2a2f2f;
    transition: ease-in-out 100ms;
    margin-top: 20px;
}

.main_showcase a:hover
{
    background-color: #647171;
    scale: 110%;
}

#book_cover
{
    width: 200px;
    height: 300px;
    margin-bottom: 20px;
    object-fit: cover;
}

.book_covers
{
    width: 200px;
    height: 300px;
    object-fit: cover;
    overflow: hidden;
}



.navbar_books
{
    border-top: solid #eeefff 1px;
    border-bottom: solid #eeefff 1px;
    border-collapse: collapse;
    background-color: #1b1e1e;
    display: flex;
    padding: 0 40px;
    margin: 0;
}

.navbar_books a
{
    border: solid #eeefff 1px;
    padding: 20px;
    
}

.main_books_viewbox
{
    margin: 50px 100px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 50px;
}

.main_books_viewbox a
{ 
    border: solid #eeefff 1px;
    padding: 10px 30px;
    text-align: center;
    width: 33%;
    border-radius: 20px;
    background-color: #2a2f2f;
    transition: ease-in-out 100ms;
    margin-top: 20px;
}

.main_books_viewbox a:hover
{
    background-color: #647171;
    scale: 110%;
}

.main_books_viewbox section
{
    display: flex;
    gap: 30px;
    width: 100%;
}

.main_books_viewbox div
{
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: center;
}
.main_books_viewbox h1{
    font-size: 2rem;
}
.main_books_viewbox hr
{
    width: 100%;
    
}
/* login, register, and so on */
.auth_main
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 62px);
}

.auth_box
{
    background-color: #1b1e1e;
    border: 1px solid #eeefff;
    padding: 40px 50px;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth_box h1
{
    margin-bottom: 8px;
}

.auth_field
{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth_field label
{
    font-size: 0.9rem;
    color: #aab;
}

.auth_field input
{
    background-color: #0d0f0f;
    border: 1px solid #445;
    color: #eeefff;
    padding: 10px;
    font-size: 1rem;
    outline: none;
    transition: border-color 150ms;
}

.auth_field input:focus
{
    border-color: #eeefff;
}

.auth_btn
{
    background-color: #2f4e4e;
    color: #eeefff;
    border: 1px solid #eeefff;
    padding: 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 150ms;
    width: 100%;
}

.auth_btn:hover
{
    background-color: #647171;
}

.auth_error   { color: tomato;      font-size: 0.9rem; }
.auth_success { color: lightgreen;  font-size: 0.9rem; }

.auth_switch
{
    text-align: center;
    font-size: 0.9rem;
    color: #aab;
    margin-top: 4px;
}

/* lišta pro navigování */
.navbar_user
{
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
}

.navbar_role
{
    color: #7ab;
    font-size: 0.8rem;
}

.navbar_logout
{
    border: 1px solid tomato !important;
    color: tomato !important;
    padding: 10px !important;
    height: 40px;
    transition: background-color 150ms;
}

.navbar_logout:hover
{
    background-color: #4a1010 !important;
}

/* informace o knížkách */
.detail_main
{
    padding: 40px 100px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.detail_hero
{
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.detail_cover
{
    width: 220px;
    height: 330px;
    object-fit: cover;
    border: 1px solid #445;
    flex-shrink: 0;
}

.detail_info
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail_info h1 { font-size: 2rem; }
.detail_info h2 { font-size: 1.2rem; color: #aab; font-weight: normal; }

.badge
{
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    width: fit-content;
}

.badge_available { background-color: #1a3d2b; border: 1px solid #2e7d52; color: #6fcf97; }
.badge_borrowed  { background-color: #3d1a1a; border: 1px solid #7d2e2e; color: #eb5757; }

.detail_btn
{
    display: inline-block;
    background-color: #2f4e4e;
    color: #eeefff;
    border: 1px solid #eeefff;
    padding: 10px 24px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 150ms;
    text-align: center;
    width: fit-content;
}

.detail_btn:hover       { background-color: #647171; }
.detail_btn_edit        { background-color: #2e3d5e; border-color: #5588cc; margin-top: 4px; }
.detail_btn_edit:hover  { background-color: #3a5080; }
.detail_btn_sm          { padding: 6px 14px; font-size: 0.85rem; }

/* historie vypůjčení knížek */
.detail_loans h2
{
    margin-bottom: 14px;
}

.loans_table
{
    border-collapse: collapse;
    width: 100%;
}

.loans_table th,
.loans_table td
{
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #334;
}

.loans_table th
{
    background-color: #1b1e1e;
    color: #aab;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.loans_table tr:nth-child(even) { background-color: #0f1111; }

.loan_edit_details
{
    margin-top: 8px;
}

.loan_edit_details summary
{
    cursor: pointer;
    color: #7ab;
    font-size: 0.85rem;
}

.loan_edit_form
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    background-color: #0d0f0f;
    border: 1px solid #334;
}

.loan_edit_form label
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: #aab;
}

.loan_edit_form input,
.loan_edit_form select
{
    background-color: #1b1e1e;
    border: 1px solid #445;
    color: #eeefff;
    padding: 6px;
}

/* tečka pro dostupnost */
.avail_dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 8px;
}
.avail_dot_yes { background-color: #6fcf97; box-shadow: 0 0 4px #2e7d52; }
.avail_dot_no  { background-color: #eb5757; box-shadow: 0 0 4px #7d2e2e; }

/* nějaké "menší" změny */
.main_books_viewbox section {
    align-items: stretch;
}

.main_books_viewbox div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 300px;
}

.main_books_viewbox p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.main_books_viewbox a {
    margin-top: auto;
}