/* ===== Tunables ===== */
:root {
    --sidebar-width: 260px;
    --sidebar-speed: .24s; /* velocidade da transicao */
}

/* ===== Base ===== */
html, body {
    position: relative;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin-bottom: 60px;
    font-size: 12px;
    background: #fafafa;
    font-family: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    overflow-x: hidden;
}

/* ===== Header look ===== */

.navbar {
    font-size: 12px;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
    background-color: #3A3B3C !important;
}
#sidebar .sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

    #sidebar .sidebar-scroll::-webkit-scrollbar {
        width: 8px;
    }

    #sidebar .sidebar-scroll::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.15);
        border-radius: 10px;
    }

    #sidebar .sidebar-scroll::-webkit-scrollbar-track {
        background: rgba(255,255,255,.06);
    }
/* ===== Sidebar: slide suave por transform ===== */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    z-index: 1030;
    background: #212529; /* tom de .bg-dark */
    transform: translate3d(0,0,0); /* aberta */
    transition: transform var(--sidebar-speed) ease-in-out;
    will-change: transform;
}
/* fechada -> sai para a esquerda */
body:not(.sidebar-open) #sidebar {
    transform: translate3d(-100%,0,0);
}

/* ===== Main wrapper (MOVE AQUI o offset) ===== */
#main-content {
    margin-left: 0;
    width: 100%;
    transition: margin-left var(--sidebar-speed) ease-in-out, width var(--sidebar-speed) ease-in-out;
}
/* sidebar aberta -> header + conteudo acompanham */
body.sidebar-open #main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

/* ===== Conteudo interno ===== */
#content {
    width: 100%;
    padding: 15px;
    min-height: 100vh;
}

/* ===== Links da sidebar ===== */
#sidebar .nav-link {
    color: #fff;
    border-radius: .5rem;
}

    #sidebar .nav-link:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

    #sidebar .nav-link.active,
    #sidebar .nav-link[aria-expanded="true"] {
        background: rgba(255,255,255,.12);
        color: #fff;
    }

/* seta dos submenus */
#sidebar .chev {
    transition: transform .2s ease;
}

#sidebar .nav-link[aria-expanded="true"] .chev {
    transform: rotate(180deg);
}

/* ===== Miscelanea ===== */
.small-label {
    color: grey;
    font-size: 10px;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed;
    margin: 20px 0;
}

input[type="file"].btn {
    padding: 8px 15px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    text-align: center;
}

/* ===== Responsivo ===== */
/* Em ecras pequenos, mantem header/conteudo a full width (sidebar sobrepoe) */
@media (max-width: 768px) {
    body.sidebar-open #main-content {
        margin-left: 0;
        width: 100%;
    }
}

/* ===== Acessibilidade ===== */
@media (prefers-reduced-motion: reduce) {
    #sidebar, #main-content, #sidebar .chev {
        transition: none !important;
    }
}
/* seta com transicao suave; rodamos conforme o estado do body */
#sidebarToggle .chev-icon {
    transition: transform var(--sidebar-speed, .24s) ease-in-out;
    transform: rotate(0deg); /* fechado -> seta para a direita */
}

/* aberto -> seta para a esquerda */
body.sidebar-open #sidebarToggle .chev-icon {
    transform: rotate(180deg);
}
#topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
}



/*----------------------------------------------------------*/

/* ===== Tema da página de Livros ===== */
.books-ui {
    --ui-dark: #242526; /* igual à topbar/sidebar */
    --ui-bg: #ffffff;
    --ui-soft: #f5f6f8;
    --ui-brd: rgba(0,0,0,.08);
    --ui-shadow: 0 6px 18px rgba(0,0,0,.05);
}

    /* Cartões */
    .books-ui .card {
        border: 0;
        border-radius: .6rem;
        background: var(--ui-bg);
        box-shadow: var(--ui-shadow);
    }

    .books-ui .card-header {
        background: var(--ui-bg);
        border-bottom: 1px solid var(--ui-brd);
    }

        .books-ui .card-header h5 {
            margin: 0;
            font-weight: 600;
        }

    /* ===== Barra de pesquisa (tamanho normal, look “clean”) ===== */
    .books-ui .searchbar .input-group {
        border: 1px solid var(--ui-brd);
        border-radius: .6rem;
        overflow: hidden; /* arredonda tudo */
        box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }

    .books-ui .searchbar .input-group-text {
        background: #fff;
        border: 0; /* junta com o input */
        color: #6c757d;
    }

    .books-ui .searchbar .form-control {
        border: 0; /* sem linhas a meio */
        box-shadow: none !important;
    }

    .books-ui .searchbar .btn {
        border: 0;
    }

    .books-ui .searchbar .btn-primary {
        box-shadow: none;
    }

    /* Royalties / inputs na header (alinhar com pesquisa) */
    .books-ui .card-header .form-inline .input-group,
    .books-ui .card-header .form-inline .form-control {
        margin-right: .5rem;
    }

        .books-ui .card-header .form-inline .input-group .input-group-text {
            background: #fff;
            border: 1px solid var(--ui-brd);
        }

        .books-ui .card-header .form-inline .input-group .form-control {
            border: 1px solid var(--ui-brd);
        }

    /* Botões “soft” a condizer */
    .books-ui .btn-light {
        background: #f4f5f7;
        border-color: #e9ecef;
    }

    .books-ui .btn-outline-secondary:hover {
        background: #f4f5f7;
    }

    /* ===== Tabelas ===== */
    .books-ui .table {
        border-collapse: separate;
        border-spacing: 0 2px;
    }

        .books-ui .table thead.thead-dark th {
            background: var(--ui-dark);
            color: #fff;
            border: 0;
        }

    .books-ui .table-striped tbody tr:nth-of-type(odd) {
        background-color: #fcfcfd;
    }

    .books-ui .table-hover tbody tr:hover {
        background: #f8f9fb;
    }

    .books-ui .table td, .books-ui .table th {
        border-top: 0;
        vertical-align: middle;
    }

    /* Cabeçalho sticky dentro do .table-responsive (útil com listas grandes) */
    .books-ui .table-responsive thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--ui-dark);
        color: #fff;
    }

    /* Badges de stock */
    .books-ui .badge {
        border-radius: 999px;
        padding: .45em .6em;
        font-weight: 600;
    }

    .books-ui .badge-success {
        background: #27ae60;
    }

    .books-ui .badge-danger {
        background: #e74c3c;
    }

    /* Botões de ação na tabela */
    .books-ui .btn-group .btn {
        min-width: 86px;
    }
    /* evita “saltar” quando texto muda */
    .books-ui .btn-outline-info {
        color: #17a2b8;
        border-color: #17a2b8;
    }

        .books-ui .btn-outline-info:hover {
            background: #17a2b8;
            color: #fff;
        }

    /* Secção “Criar novo” com leve destaque */
    .books-ui #criarNovo .card {
        background: #fcfcfe;
        border: 1px dashed #e9ecef;
    }

    /* Custom-file BS4: label com elipse e botão PT */
    .books-ui .custom-file-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-color: #e9ecef;
    }

    .books-ui .custom-file-input ~ .custom-file-label::after {
        content: "Procurar";
    }

    /* Paginação com chips */
    .books-ui .pagination .page-link {
        border: 0;
        border-radius: .5rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }

        .books-ui .pagination .page-link:hover {
            background: var(--ui-soft);
        }

/* Pequenos ajustes responsivos */
@media (max-width: 991.98px) {
    .books-ui .card-header .form-inline {
        width: 100%;
        justify-content: flex-end;
    }

        .books-ui .card-header .form-inline .input-group {
            margin-bottom: .5rem;
        }
}






/* ===== Orders (combina com a sidebar/topbar escuras) ===== */
.orders-ui {
    --ui-dark: #242526;
    --ui-brd: rgba(0,0,0,.08);
    --ui-shadow: 0 6px 18px rgba(0,0,0,.05);
}

    .orders-ui .card {
        border: 0;
        border-radius: .6rem;
        box-shadow: var(--ui-shadow);
    }

    .orders-ui .card-header {
        background: #fff;
        border-bottom: 1px solid var(--ui-brd);
    }

    /* inputs na tabela com look limpo */
    .orders-ui .input-group .input-group-text {
        background: #fff;
        border-color: var(--ui-brd);
    }

    .orders-ui .form-control {
        border-color: var(--ui-brd);
        box-shadow: none;
    }

        .orders-ui .form-control:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
        }

    /* tabela */
    .orders-ui .table thead.thead-dark th {
        background: var(--ui-dark);
        color: #fff;
        border: 0;
    }

    .orders-ui .table td, .orders-ui .table th {
        border-top: 0;
        vertical-align: middle;
    }

    .orders-ui .table-striped tbody tr:nth-of-type(odd) {
        background-color: #fcfcfd;
    }

    .orders-ui .table-hover tbody tr:hover {
        background: #f8f9fb;
    }

    /* botões */
    .orders-ui .btn-group .btn {
        min-width: 120px;
    }
/* evita “saltar” */