/*
 * Tema Orbsofty - Ponto Eletrônico
 * Paleta extraída do Manual de Marca v1.0 / 2025
 */

:root {
    --ob-laranja:        #ee7a59;
    --ob-coral:          #ec695c;
    --ob-creme:          #edece0;
    --ob-cinza-escuro:   #303030;
    --ob-cinza-claro:    #eaeaea;

    --ob-gradiente:      linear-gradient(135deg, #ee7a59 0%, #ec695c 100%);
    --ob-gradiente-suave: linear-gradient(135deg, #f4a78f 0%, #ec695c 100%);
    --ob-gradiente-dark: linear-gradient(135deg, #303030 0%, #1a1a1a 100%);

    --ob-shadow-sm:      0 2px 6px rgba(48, 48, 48, 0.06);
    --ob-shadow-md:      0 4px 14px rgba(48, 48, 48, 0.10);
    --ob-shadow-lg:      0 16px 40px rgba(238, 122, 89, 0.18);

    --ob-radius:         12px;
    --ob-radius-lg:      18px;
}

/* ==============================================
   Tipografia
   ============================================== */
body, .content-wrapper, .main-header, .main-sidebar,
.box, .box-body, .modal-content, .form-control,
button, .btn, input, select, textarea {
    font-family: 'Alexandria', 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .box-title {
    font-family: 'Alexandria', 'Barlow', system-ui, sans-serif !important;
    font-weight: 600;
    color: var(--ob-cinza-escuro);
}

body { color: var(--ob-cinza-escuro); }


/* ==============================================
   AdminLTE skin overrides
   (skin-black do template original)
   ============================================== */

/* Sidebar e header */
.skin-black .main-header .logo,
.skin-black .main-header .navbar {
    background: var(--ob-cinza-escuro) !important;
    color: #fff !important;
    border-bottom: 0;
}
.skin-black .main-header .logo:hover { background: #1f1f1f !important; }

/* Quando o sidebar está colapsado (mini), o logo encolhe para 50px.
   Mantemos a marca "O." visível e centralizada nesse modo. */
.sidebar-mini.sidebar-collapse .main-header .logo {
    width: 50px !important;
    padding: 0 !important;
}
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini {
    display: block !important;
    text-align: center;
    line-height: 50px;
}

/* Botão hambúrguer (sidebar-toggle): usa <i class="fas fa-bars"> embutido na view.
   Forçamos a remoção de qualquer pseudo-element herdado do AdminLTE para evitar
   o "quadradinho" branco quando a fonte do FA legado não está disponível. */
.skin-black .main-header .navbar .sidebar-toggle {
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.skin-black .main-header .navbar .sidebar-toggle:before { content: none !important; }
.skin-black .main-header .navbar .sidebar-toggle:hover,
.skin-black .main-header .navbar .nav > li > a:hover,
.skin-black .main-header .navbar .nav > li > a:focus {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}
.skin-black .main-header .navbar .nav > li > a { color: #fff !important; }

/* Nome do usuário no dropdown do header: limita largura para não estourar */
.skin-black .main-header .navbar .user-menu > .dropdown-toggle .hidden-xs {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 600;
}

.skin-black .main-sidebar,
.skin-black .left-side {
    background: #2a2a2a !important;
}
.skin-black .sidebar-menu > li.header {
    background: transparent !important;
    color: var(--ob-laranja) !important;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 11px;
    padding: 14px 18px 6px;
}
.skin-black .sidebar-menu > li > a {
    color: rgba(255,255,255,0.85) !important;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}
.skin-black .sidebar-menu > li > a:hover,
.skin-black .sidebar-menu > li.active > a {
    background: rgba(238, 122, 89, 0.12) !important;
    color: #fff !important;
    border-left-color: var(--ob-laranja) !important;
}
.skin-black .user-panel { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 12px 10px; }
.skin-black .user-panel > .info {
    padding: 5px 5px 5px 10px;
    max-width: calc(100% - 55px);
}
.skin-black .user-panel > .info > p {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600;
    margin: 0 0 4px 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
    line-height: 1.2;
}
.skin-black .user-panel > .info > a {
    color: var(--ob-laranja) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.skin-black .user-panel > .image > img { width: 36px; height: 36px; }

.skin-black .content-wrapper,
.skin-black .right-side { background: var(--ob-creme) !important; }


/* ==============================================
   Boxes / Cards
   ============================================== */
.box {
    border-top: 0 !important;
    border-radius: var(--ob-radius) !important;
    box-shadow: var(--ob-shadow-sm) !important;
    border: 1px solid rgba(48, 48, 48, 0.05) !important;
}
.box.box-primary { border-top: 3px solid var(--ob-laranja) !important; }
.box.box-success { border-top: 3px solid #28a745 !important; }
.box.box-info    { border-top: 3px solid var(--ob-laranja) !important; }
.box-header.with-border { border-bottom: 1px solid var(--ob-cinza-claro); }
.box-title { color: var(--ob-cinza-escuro); font-weight: 600; }

/* ==============================================
   Botões
   ============================================== */
.btn-primary {
    background: var(--ob-gradiente) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: var(--ob-shadow-sm);
    transition: all 0.15s;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #f08266 0%, #d05245 100%) !important;
    box-shadow: var(--ob-shadow-md);
    transform: translateY(-1px);
    color: #fff !important;
}
.btn { border-radius: 8px; }


/* ==============================================
   Cards info-box do dashboard
   ============================================== */
.info-box {
    border-radius: var(--ob-radius) !important;
    box-shadow: var(--ob-shadow-sm) !important;
    background: #fff !important;
    color: var(--ob-cinza-escuro) !important;
    min-height: 90px;
}
.info-box .info-box-icon {
    border-radius: var(--ob-radius) 0 0 var(--ob-radius);
    background: var(--ob-creme) !important;
    color: var(--ob-laranja) !important;
}
.info-box.bg-aqua .info-box-icon  { background: #fff5f1 !important; color: var(--ob-laranja) !important; }
.info-box.bg-green .info-box-icon { background: #ecfdf5 !important; color: #16a34a !important; }
.info-box.bg-yellow .info-box-icon{ background: #fef3c7 !important; color: #b45309 !important; }
.info-box.bg-red .info-box-icon   { background: #fee2e2 !important; color: #b91c1c !important; }
.info-box.bg-aqua, .info-box.bg-green, .info-box.bg-yellow, .info-box.bg-red {
    background: #fff !important;
    color: var(--ob-cinza-escuro) !important;
}
.info-box .info-box-text { color: #6b7280 !important; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; font-size: 11px; }
.info-box .info-box-number { color: var(--ob-cinza-escuro) !important; font-size: 26px; font-weight: 700; }


/* ==============================================
   Tabelas
   ============================================== */
.table > thead > tr > th {
    color: #6b7280;
    font-weight: 600;
    border-bottom: 2px solid var(--ob-cinza-claro);
    background: #fafafa;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.table > tbody > tr:hover { background: var(--ob-creme) !important; }


/* ==============================================
   Badges / Labels
   ============================================== */
.badge.bg-yellow { background: #fef3c7 !important; color: #b45309 !important; }
.badge.bg-green  { background: #dcfce7 !important; color: #166534 !important; }
.badge.bg-red    { background: #fee2e2 !important; color: #b91c1c !important; }
.badge.bg-aqua   { background: #ffe4d6 !important; color: var(--ob-coral) !important; }
.badge.bg-black  { background: var(--ob-cinza-escuro) !important; color: #fff !important; }


/* ==============================================
   Tabs (filtros de status nos ajustes)
   ============================================== */
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--ob-laranja) !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--ob-laranja) !important;
    font-weight: 600;
}
.nav-tabs-custom > .nav-tabs > li > a:hover { color: var(--ob-coral) !important; }

/* SweetAlert override leve */
.sweet-alert h2 { color: var(--ob-cinza-escuro) !important; font-family: 'Alexandria', sans-serif !important; }
.sweet-alert button.confirm { background-color: var(--ob-laranja) !important; }


/* ==============================================
   Login pages
   ============================================== */
body.login-page,
body.hold-transition.login-page {
    background:
        radial-gradient(ellipse at top left, rgba(238, 122, 89, 0.15), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(236, 105, 92, 0.18), transparent 50%),
        var(--ob-creme) !important;
}

.login-box-body {
    border-radius: var(--ob-radius) !important;
    box-shadow: var(--ob-shadow-md);
    border: 0;
}

/* Footer */
.main-footer {
    background: #fff !important;
    border-top: 1px solid var(--ob-cinza-claro);
    color: #6b7280;
    font-size: 13px;
}
.main-footer a { color: var(--ob-laranja); }