:root{
    /* =========================================
       CORES
    ========================================= */
    --primary:#d4af37;
    --primary-dark:#b8860b;
    --bg:#f8fafc;
    --surface:#ffffff;
    --surface-soft:#f1f5f9;
    --text:#0f172a;
    --muted:#64748b;
    --border:#dbe2ea;
    --success:#16a34a;
    --error:#dc2626;
    --radius:16px;
    --shadow:
        0 10px 30px rgba(15,23,42,.08);
}
/* =========================================
   RESET
========================================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html,
body{
    width:100%;
    min-height:100vh;
    overflow-x:hidden;
}
body{
    font-family:
        'Segoe UI',
        system-ui,
        sans-serif;
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #eef2f7 100%
        );
    color:var(--text);
    line-height:1.5;
}
/* =========================================
   LINKS
========================================= */
a{
    text-decoration:none;
    color:var(--primary-dark);
    transition:.25s ease;
}
a:hover{
    color:var(--primary);
}
/* =========================================
   TEXTOS
========================================= */
.text-muted{
    color:var(--muted);
    font-size:.92rem;
}
/* =========================================
   LAYOUT
========================================= */
.app-layout{
    display:flex;
    min-height:100vh;
}
/* =========================================
   SIDEBAR DESKTOP
========================================= */
.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100vh;
    background:#ffffff;
    border-right:1px solid var(--border);
    padding:24px 16px;
    overflow-y:auto;
    z-index:1000;
    box-shadow:var(--shadow);
    transition:left .3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* =========================================
   MAIN CONTENT
========================================= */
.main-content{
    width:100%;
    margin-left:260px;
    padding:100px 20px 20px;
}
/* =========================================
   TOP HEADER
========================================= */
.top-header{
    position:fixed;
    top:0;
    left:260px;
    right:0;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    z-index:998;
    background:
        linear-gradient(
            90deg,
            rgba(2,8,23,.96),
            rgba(15,23,42,.96)
        );
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:
        0 4px 20px rgba(0,0,0,.18);
    transition: left .3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* =========================================
   HEADER LEFT
========================================= */
.top-header-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}
.top-header-left h2{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#ffffff;
    line-height:1.2;
}
.top-header-left p{
    margin-top:4px;
    color:#94a3b8;
    font-size:14px;
}
/* =========================================
   HEADER RIGHT
========================================= */
.top-header-right{
    display:flex;
    align-items:center;
    gap:14px;
}
/* =========================================
   BADGE
========================================= */
.badge{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    padding:8px 14px;
    border-radius:999px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
}
/* =========================================
   PROFILE BUTTON
========================================= */
.profile-button{
    width:44px;
    height:44px;
    border-radius:50%;
    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f5d76e
        );
    color:#111827;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    box-shadow:
        0 5px 18px rgba(212,175,55,.25);
    transition:.25s ease;
}
.profile-button:hover{
    transform:translateY(-2px);
    box-shadow:
        0 10px 24px rgba(212,175,55,.35);
}
/* =========================================
   CARDS
========================================= */
.card{
    background:rgba(255,255,255,.92);
    border:1px solid var(--border);
    border-radius:20px;
    padding:24px;
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow);
}
/* =========================================
   INPUTS
========================================= */
input,
textarea,
select{
    width:100%;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 16px;
    outline:none;
    color:var(--text);
    transition:.25s ease;
}
input::placeholder,
textarea::placeholder{
    color:#94a3b8;
}
input:focus,
textarea:focus,
select:focus{
    border-color:var(--primary);
    box-shadow:
        0 0 0 4px rgba(212,175,55,.15);
}
/* =========================================
   PASSWORD
========================================= */
.password-wrapper{
    position:relative;
}
.password-wrapper input{
    padding-right:55px;
}
.toggle-password{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border:none;
    background:transparent;
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border-radius:50%;
}
.toggle-password:hover{
    background:rgba(15,23,42,.05);
    color:var(--text);
}
/* =========================================
   BOTÕES
========================================= */
.btn{
    border:none;
    border-radius:14px;
    padding:14px 22px;
    cursor:pointer;
    font-weight:600;
}
.btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #f5d76e
        );
    color:#111827;
}
.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:
        0 10px 25px rgba(212,175,55,.22);
}
/* =========================================
   SCROLLBAR
========================================= */
::-webkit-scrollbar{
    width:6px;
}
::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.4);
    border-radius:10px;
}

/* =========================================
   COLUNA AÇÕES (mantido original)
========================================= */
.actions{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}
.actions form{
    margin:0;
    display:inline-flex;
}
.actions .btn{
    width:auto !important;
    min-width:75px;
    height:34px;
    padding:0 12px;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
/* FORÇA TAMANHO DOS BOTÕES DA TABELA */
td.actions .btn,
td.actions a.btn,
td.actions button.btn{
    width:auto !important;
    min-width:unset !important;
    max-width:unset !important;
    padding:6px 12px !important;
    height:34px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:none !important;
}

/* =========================================
   RESPONSIVIDADE MELHORADA
========================================= */

/* TABLET */
@media(max-width:992px){
    .sidebar{
        position:fixed !important;
        top:74px !important;
        left:-260px;
        width:260px;
        height:calc(100vh - 74px) !important;
        background:#ffffff;
        border-radius:0 18px 18px 0;
        overflow-y:auto;
        box-shadow:
            0 15px 40px rgba(15,23,42,.18);
        transition:left .3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index:1000;
    }
    .sidebar.open,
    .sidebar.active{
        left:0;
        top:74px !important;
        height:calc(100vh - 74px) !important;
    }

    .top-header{
        left:0;
        height:74px;
        padding:0 20px;
    }

    .main-content{
        margin-left:0;
        padding:90px 20px 20px;
    }
}

/* MOBILE */
@media(max-width:768px){
    .top-header{
        height:90px;
        padding:10px 16px 10px 70px;
        align-items:flex-start;
    }

    .sidebar{
        position:fixed;
        top:88px;
        left:-260px;
        width:260px;
        height:calc(100vh - 100px);
        background:#ffffff;
        border-radius:0 18px 18px 0;
        overflow-y:auto;
        box-shadow:
            0 15px 40px rgba(15,23,42,.18);
        transition:left .3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index:1000;
    }
    .sidebar.active{
        left:0;
    }

    .top-header-left{
        flex:1;
        max-width:none;
    }
    .top-header-left h2{
        font-size:15px;
        line-height:1.3;
        white-space:normal;
    }
    .top-header-left p{
        display:block;
        font-size:12px;
    }

    .badge{
        display:none;
    }
    .profile-button{
        width:40px;
        height:40px;
        font-size:14px;
    }
    .main-content{
        padding:105px 16px 24px;
    }
    .card{
        padding:18px;
    }
    .btn:not(.btn-inline){
        width:100%;
    }
}

/* SMALL MOBILE */
@media(max-width:480px){
    .top-header{
        height:68px;
        padding:0 14px 0 60px;
    }
    .top-header-left h2{
        font-size:16px;
    }
    .profile-button{
        width:36px;
        height:36px;
        font-size:13px;
    }
    .main-content{
        padding:82px 12px 20px;
    }
    .card{
        padding:16px;
    }

    /* Melhorias adicionais */
    input, textarea, select{
        font-size:16px; /* Evita zoom automático no iOS */
    }
}

/* VERY SMALL MOBILE */
@media(max-width:360px){
    .main-content{
        padding:82px 10px 16px;
    }
    .top-header{
        padding-left:56px;
    }
    .card{
        padding:14px;
        border-radius:16px;
    }
}

/* Melhorias gerais de touch e usabilidade */
@media (max-width: 992px) {
    .btn{
        min-height: 44px;
    }
    
    .profile-button{
        min-width: 44px;
    }
}

/* Scrollbar mais fina em mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar{
        width:4px;
    }
}