/* ======================================================
   ERP DELL ANNO
   GRAFITE PREMIUM UI
   api/static/css/style.css
====================================================== */

/* ======================================================
   ROOT
====================================================== */

:root{

    --bg:#11161d;
    --bg-secondary:#161b22;
    --bg-card:#1b2430;
    --bg-hover:#232b36;

    --border:#2c3644;
    --border-light:#374151;

    --gold:#c5a059;
    --gold-hover:#d6aa52;

    --text:#d7dee8;
    --text-soft:#9aa4b2;

    --danger:#dc2626;
    --success:#16a34a;

    --shadow:
        0 10px 30px rgba(0,0,0,.35);
}

/* ======================================================
   RESET
====================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

html{
    font-size:14px;
}

body.erp-body{

    background:var(--bg) !important;

    color:var(--text);

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

    overflow:hidden;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* ======================================================
   LINKS
====================================================== */

a{
    text-decoration:none;
    color:inherit;
}

/* ======================================================
   SCROLLBAR
====================================================== */

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#151b23;
}

::-webkit-scrollbar-thumb{
    background:#2d3748;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#3c4758;
}


/* ======================================================
   CONTENT
====================================================== */

.erp-content{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow:hidden;
}

/* ======================================================
   HEADER
====================================================== */

.erp-header{

    height:78px;

    background:#1a2028;

    border-bottom:1px solid #232b36;

    padding:0 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

/* ======================================================
   MAIN
====================================================== */

.erp-main{

    flex:1;

    overflow-y:auto;

    padding:24px;

    background:#11161d;
}



/* ======================================================
   INPUTS
====================================================== */

input,
select,
textarea,
.form-control{

    width:100%;

    background:#232b36 !important;

    border:1px solid #374151 !important;

    border-radius:16px;

    color:#d7dee8 !important;

    font-size:14px;

    transition:
        border .2s,
        background .2s,
        box-shadow .2s;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
.form-control{

    min-height:54px;

    padding:0 16px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
}

textarea{

    min-height:120px;

    padding:16px;

    resize:vertical;
}

input::placeholder,
textarea::placeholder{

    color:#8b95a7 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus{

    outline:none !important;

    border-color:#c5a059 !important;

    background:#2b3542 !important;

    box-shadow:
        0 0 0 4px rgba(197,160,89,.10);
}


/* ======================================================
   CHECKBOX
====================================================== */

input[type="checkbox"],
input[type="radio"]{

    appearance:auto !important;
    -webkit-appearance:auto !important;
    -moz-appearance:auto !important;

    width:18px !important;
    height:18px !important;

    min-height:auto !important;

    padding:0 !important;

    border:none !important;

    cursor:pointer;

    accent-color:var(--gold);

    background:transparent !important;

    box-shadow:none !important;
}

/* ======================================================
   BUTTONS
====================================================== */

.btn{

    height:50px;

    padding:0 22px;

    border:none;

    border-radius:16px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:13px;

    font-weight:800;

    cursor:pointer;

    transition:
        transform .2s,
        opacity .2s;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-primary{

    background:linear-gradient(
        90deg,
        #c5a059 0%,
        #d6aa52 100%
    );

    color:#11161d;
}

.btn-dark{

    background:#232b36;

    color:#d7dee8;

    border:1px solid #374151;
}

.btn-danger{

    background:#dc2626;

    color:#fff;
}

/* ======================================================
   RANKING
====================================================== */

.ranking-number{

    width:28px;
    height:28px;

    border-radius:999px;

    background:#0f172a;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:900;
}

/* ======================================================
   STATUS
====================================================== */

.agenda-status{

    width:12px;
    height:12px;

    border-radius:50%;

    position:absolute;

    right:52px;

    top:22px;
}

.status-green{
    background:#16a34a;
}

.status-red{
    background:#dc2626;
}

/* ======================================================
   HIDDEN
====================================================== */

.hidden{
    display:none !important;
}

/* ======================================================
   RESPONSIVO
====================================================== */

@media(max-width:1200px){

    .agenda-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .erp-layout{
        flex-direction:column;
    }

    .erp-sidebar{

        width:100%;

        max-width:100%;

        min-width:100%;

        height:auto;
    }

    .erp-content{
        width:100%;
    }

    .erp-header{

        padding:16px;

        flex-direction:column;

        gap:12px;

        height:auto;

        align-items:flex-start;
    }

    .erp-main{
        padding:16px;
    }

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


/* ======================================================
   RESPONSIVO
====================================================== */

@media(max-width:768px){

    .erp-search,
    .erp-search.sm,
    .erp-search.lg{

        width:100%;
    }
}

/* ======================================================
   AGENDA HORARIOS
====================================================== */

.linha-livre{
    transition:.2s;
}

.linha-livre:hover{
    background:rgba(22,163,74,.08) !important;
}

.linha-ocupada{
    opacity:.65;
    background:rgba(220,38,38,.05) !important;
}

.linha-ocupada td{
    color:#f87171 !important;
}