/* Estilos compartilhados para área administrativa - RAT ATMs */



/* Reset e Base */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

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

    background-color: #F3F4F6;

    color: #1F2937;

    line-height: 1.6;

    --cor--siber: #6B7280!important;

    --header-bg: #500d0d;

    --fundo_sideber: white;

    --box-siber : 2px 0 10px rgba(0, 0, 0, 0.1);

    --card : white;

    --fundo-cursor-siber:#F3F4F6;

    --box-card:0 4px 6px rgba(0, 0, 0, 0.05);

    --color-cursor-siber: #1E3A8A;

    --borda-cursor-siber: #1E3A8A;

    --ative-fundo: #EFF6FF;

    --color-ative: #1E3A8A;

    --ative-borda: #1E3A8A ;

    --page-h1-cor: #1F2937;

    --page-p-color: #6B7280;

    --fundo-tabela:white;

    --tabela-borda: 0 4px 6px rgba(0, 0, 0, 0.05);

    --fundo-tabela-th:white;

    --tabela-th-cor: #1F2937;

    --tabela-color-td: #1F2937;

    --tabela-cursor-fundo: #F9FAFB;

    --filtro-fundo: white;

    --filtro-borda: 0 4px 6px rgba(0, 0, 0, 0.05);

    --fundo-stat-card: rgb(255, 255, 255) !important;

    --borda-stat-card: 0 4px 6px rgba(0, 0, 0, 0.05);

    --color-stat-content: #6B7280;

    --color-stat-number: #1F2937;

    --color-label-filtro: #6B7280;

   --fundo-modal: rgba(0, 0, 0, 0.5);

   --fundo-modal-content:white;

   --fundo--modal-header: #F8FAFC;

   --modal-header-border-butrton: 1px solid #E5E7EB;

   --color-modal-h3: #1F2937;

   --view-detalhes: #f8fafc;



}

/*Dark thema  */

body[data-theme="dark"]{

    background-color: #0e0e0e !important;

    color: #e0e0e0 !important;

    --header-bg: #280e0e !important;

    --fundo_sideber: rgb(26, 25, 25);

    --card : rgb(26, 25, 25) !important;

    --cor--siber: rgb(201, 200, 200) !important;

    --fundo-cursor-siber:#000000e0;

    --color-cursor-siber: rgb(201, 200, 200);

    --borda-cursor-siber: #806902;

    --box-card: 0 4px 6px rgba(0, 0, 0, 0.815);

    --ative-fundo: #000000e0;

    --color-ative: rgb(201, 200, 200);

   --ative-borda: #806902 ;

   --page-h1-cor: #8a8b8b;

   --page-p-color: #ddd9d9;

   --fundo-tabela: rgb(26, 25, 25);

   --tabela-borda: 0 4px 6px rgba(0, 0, 0, 0.829);

   --fundo-tabela-th:rgb(29, 28, 28);

   --tabela-th-cor: #ffffff;

   --tabela-color-td: #e4e4e4;

  --tabela-cursor-fundo: #000000e0;

  --filtro-fundo:  rgb(26, 25, 25);

  --filtro-borda: 0 4px 6px rgba(0, 0, 0, 0.692);

  --fundo-stat-card: rgb(26, 25, 25) !important;

  --borda-stat-card: 0 4px 6px rgba(0, 0, 0, 0.692) !important;

  --color-stat-content: #e2e2e2;

  --color-stat-number: #c9c9c9;

  --color-label-filtro: #e9e9e9;

  --fundo-modal: rgba(90, 90, 90, 0.144);

  --fundo-modal-content:rgb(36, 35, 35) !important;

  --fundo--modal-header: rgb(80, 80, 80) !important;

  --modal-header-border-butrton: 1px solid #000000;

  --color-modal-h3: #dfdfdf ;

  --view-detalhes: #1b1b1b;



  }



/*Dark thema  final */



/* Header */

.header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: 70px;

    background-color: var(--header-bg) ;

    color: white;

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 100%;

    padding: 0 30px;

}



.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 20px;

    font-weight: 700;

}



.logo i {

    font-size: 24px;

    color: #FACC15;

}



.user-info {

    display: flex;

    align-items: center;

}



.profile-button-container {

    display: flex;

    align-items: center;

    gap: 12px;

    background: linear-gradient(135deg, #500d0d 0%, #6b1515 100%);

    padding: 10px 18px 10px 22px;

    border-radius: 30px;

    cursor: pointer;

    transition: all 0.3s ease;

    height: 48px;

    box-shadow: 0 2px 8px rgba(80, 13, 13, 0.3);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.profile-button-container:hover {

    background: linear-gradient(135deg, #6b1515 0%, #7a1a1a 100%);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(80, 13, 13, 0.4);

    border-color: rgba(255, 255, 255, 0.2);

}



.admin-name {

    font-size: 15px;

    font-weight: 600;

    color: white;

    white-space: nowrap;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

    letter-spacing: 0.3px;

}



.profile-icons-group {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

}



.profile-icons-group .profile-icon,

.profile-icons-group .profile-shield-icon {

    font-size: 16px;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

    transition: transform 0.2s ease;

}



.profile-button-container:hover .profile-icon {

    transform: scale(1.1);

}



.profile-button-container:hover .profile-shield-icon {

    transform: scale(1.1);

}



/* Main Container */

.main-container {

    display: flex;

    margin-top: 70px;

    min-height: calc(100vh - 70px);

}



/* Sidebar */

.sidebar {

    width: 280px;

    background-color: var(--fundo_sideber) ;

    box-shadow: var(--box-siber); 

    color : var(--cor--siber);

    position: fixed;

    height: calc(100vh - 70px);

    overflow-y: auto;

}



.sidebar-nav ul {

    list-style: none;

    padding: 20px 0;

}



.sidebar-nav li {

    margin-bottom: 5px;

}



.sidebar-nav li a {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px 25px;

    color: var( --cor--siber) ;

    text-decoration: none;

    transition: all 0.3s;

    border-right: 3px solid transparent;

}



.sidebar-nav li a:hover {

    background-color: var(--fundo-cursor-siber) ;

    color: var(--color-cursor-siber);

    border-right-color: var(--borda-cursor-siber);

}



.sidebar-nav .active  {

    background-color: var(--ative-fundo);

    color: var(--color-ative);

    border-right-color: var(--ative-borda)  !important;

    

    font-weight: 500;





}



.sidebar-nav li a i {

    width: 20px;

    text-align: center;

    font-size: 16px;

}



.sidebar-nav li a span {

    font-size: 14px;

    font-weight: 500;

}



/* Main Content */

.main-content {

    flex: 1;

    margin-left: 280px;

    padding: 30px;

}



.page-header {

    margin-bottom: 30px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}



.page-header h1 {

    font-size: 32px;

    font-weight: 700;

    color: var(--page-h1-cor) #1F2937;

    margin-bottom: 10px;

}



.page-header p {

    font-size: 16px;

    color: var(--page-p-color) #6B7280;

}



.header-actions {

    display: flex;

    gap: 15px;

}



/* Cards */

.card {

    background-color: var(--card);

    border-radius: 12px;

    padding: 25px;

    box-shadow: var(--box-card);

    transition: transform 0.3s, box-shadow 0.3s;

}



.card:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

}



/* Buttons */

.btn {

    padding: 12px 20px;

    border-radius: 8px;

    font-weight: 500;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.3s;

    border: none;

    text-decoration: none;

    font-size: 14px;

}



.btn-primary {

    background-color: #1E3A8A;

    color: white;

}



.btn-primary:hover {

    background-color: #1E40AF;

    transform: translateY(-1px);

}



.btn-secondary {

    background-color: #6B7280;

    color: white;

}



.btn-secondary:hover {

    background-color: #4B5563;

    transform: translateY(-1px);

}



.btn-success {

    background-color: #10B981;

    color: white;

}



.btn-success:hover {

    background-color: #059669;

    transform: translateY(-1px);

}



.btn-warning {

    background-color: #F59E0B;

    color: white;

}



.btn-warning:hover {

    background-color: #D97706;

    transform: translateY(-1px);

}



.btn-danger {

    background-color: #EF4444;

    color: white;

}



.btn-danger:hover {

    background-color: #DC2626;

    transform: translateY(-1px);

}



.btn-sm {

    padding: 8px 16px;

    font-size: 12px;

}



.btn-lg {

    padding: 16px 24px;

    font-size: 16px;

}



/* Status Badges */

.status-badge {

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 500;

    display: inline-block;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.status-active {

    background-color: #DCFCE7;

    color: #16A34A;

}



.status-inactive {

    background-color: #FEE2E2;

    color: #DC2626;

}



.status-pending {

    background-color: #FEF3C7;

    color: #D97706;

}



.status-operational {

    background-color: #DCFCE7;

    color: #16A34A;

}



.status-maintenance {

    background-color: #FEF3C7;

    color: #D97706;

}



.status-offline {

    background-color: #FEE2E2;

    color: #DC2626;

}



/* Tables */

.table-container {

    background-color: var(--fundo-tabela);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--tabela-borda) ;

}



.table {

    width: 100%;

    border-collapse: collapse;

}



.table th {

    background-color: var(--fundo-tabela-th);

    padding: 15px 20px;

    text-align: left;

    font-weight: 600;

    color: var(--tabela-th-cor) ;

    border-bottom: var(--modal-header-border-butrton) !important;

    font-size: 14px;

}



.table td {

    padding: 15px 20px;

    border-bottom: 1px var(--modal-header-border-butrton) !important;

    font-size: 14px;

    color: var(--tabela-color-td);

}



.table tbody tr:hover {

    background-color: var(--tabela-cursor-fundo) ;

}



.table tbody tr:last-child td {

    border-bottom: none;

}



/* Forms */

.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    font-size: 14px;

    font-weight: 500;

    color: var( --color-stat-number);

    margin-bottom: 8px;

}



.form-control {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid #D1D5DB;

    border-radius: 6px;

    font-size: 14px;

    color: #1F2937;

    transition: border-color 0.3s;

}



.form-control:focus {

    outline: none;

    border-color: #1E3A8A;

    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);

}



.form-select {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid #D1D5DB;

    border-radius: 6px;

    font-size: 14px;

    color: #1F2937;

    background-color: white;

    transition: border-color 0.3s;

}



.form-select:focus {

    outline: none;

    border-color: #1E3A8A;

    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);

}



/* Filters */

.filters-section {

    background-color: var(--filtro-fundo);

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 25px;

    box-shadow:var(--filtro-borda) ;

}



.filters-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;

    align-items: end;

}



.filter-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.filter-group label {

    font-size: 12px;

    font-weight: 500;

    color: var(--color-label-filtro) ;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* Pagination */

.pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

}



.pagination button {

    padding: 8px 12px;

    border: 1px solid #D1D5DB;

    background-color: white;

    color: #6B7280;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.3s;

}



.pagination button:hover {

    background-color: #F3F4F6;

    border-color: #9CA3AF;

}



.pagination button.active {

    background-color: #1E3A8A;

    color: white;

    border-color: #1E3A8A;

}



.pagination button:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



/* Modals */

.modal {

    display: none;

    position: fixed;

    z-index: 2000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: var(--fundo-modal);

    backdrop-filter: blur(4px);

}



.modal.show {

    display: flex;

    align-items: center;

    justify-content: center;

}



.modal-content {

    background-color: var(--fundo-modal-content);

    border-radius: 12px;

    width: 90%;

    max-width: 600px;

    max-height: 85vh;

    overflow: hidden;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

    animation: modalSlideIn 0.3s ease;

    display: flex;

    flex-direction: column;

}



.modal-header {

    background-color: var(--fundo--modal-header) !important;

    padding: 20px 25px;

    border-bottom: var(--modal-header-border-butrton) !important;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex: 0 0 auto;

}



.modal-header h3 {

    font-size: 18px;

    font-weight: 600;

    color: var(--color-modal-h3) !important;

    margin: 0;

}



.modal-close {

    background: none;

    border: none;

    font-size: 18px;

    color: #6B7280;

    cursor: pointer;

    padding: 5px;

    border-radius: 4px;

    transition: all 0.3s;

}



.modal-close:hover {

    background-color: #E5E7EB;

    color: #1F2937;

}



.modal-body {

    padding: 25px;

    overflow: auto;

    -webkit-overflow-scrolling: touch;

    flex: 1 1 auto;

}



.modal-footer {

    background-color: var(--fundo--modal-header) ;

    padding: 20px 25px;

    border-top: var(--modal-header-border-butrton);

    display: flex;

    justify-content: flex-end;

    gap: 15px;

    flex: 0 0 auto;

}

.stat-card {

    background-color: var(--fundo-stat-card) !important;

    border-radius: 12px;

    padding: 25px;

    box-shadow: var(--borda-stat-card) !important;

    transition: transform 0.3s, box-shadow 0.3s;

    display: flex;

    align-items: center;

    gap: 20px;

    border-left: 4px solid transparent;

}

.stat-content h3 {

    font-size: 14px;

    font-weight: 500;

    color: var(--color-stat-content) !important;

    margin-bottom: 8px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.stat-number {

    font-size: 32px;

    font-weight: 700;

    color: var(--color-stat-number) !important;

    margin-bottom: 8px;

}



.view-details-modern p {

    display: flex;

    align-items: center;

    margin-bottom: 1rem;

    padding: 1rem;

    background: var(--view-detalhes) !important;

    border-radius: 8px;

    transition: all 0.2s;

}



.view-details-modern p:hover {

    background: #f1f5f9;

}



.view-details-modern strong {

    min-width: 140px;

    color: var( --color-stat-number);

    font-weight: 600;

}

.delete-warning {

    font-size: 1.1rem;

    color: var(--color-label-filtro) !important;

    margin-bottom: 1.5rem;

}



.company-detail-item label {

    font-size: 12px;

    font-weight: 500;

    color: var(--color-label-filtro) !important;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 5px;

    display: block;

}



.company-detail-item .value {

    font-size: 14px;

    color: var(--color-label-filtro) !important;

    font-weight: 500;

}

/* Scrollbar do conteúdo do modal */

.modal-body::-webkit-scrollbar { width: 8px; height: 8px; }

.modal-body::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }

.modal-body::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

.modal-body { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }



/* Animations */

@keyframes modalSlideIn {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Botão do menu mobile */

.mobile-menu-toggle {

    display: none;

    flex-direction: column;

    justify-content: space-around;

    width: 30px;

    height: 30px;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 0;

    z-index: 1001;

}



.hamburger-line {

    width: 25px;

    height: 3px;

    background-color: white;

    transition: all 0.3s ease;

    transform-origin: 1px;

}



.mobile-menu-toggle.active .hamburger-line:nth-child(1) {

    transform: rotate(45deg);

}



.mobile-menu-toggle.active .hamburger-line:nth-child(2) {

    opacity: 0;

    transform: translateX(20px);

}



.mobile-menu-toggle.active .hamburger-line:nth-child(3) {

    transform: rotate(-45deg);

}



/* Overlay para menu mobile */

.mobile-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 999;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.mobile-overlay.active {

    display: block;

    opacity: 1;

}



/* Responsive Design */

@media (max-width: 768px) {

    .header-content {

        padding: 0 20px;

    }



    .logo span {

        display: none;

    }



    .sidebar {

        width: 100%;

        transform: translateX(-100%);

        transition: transform 0.3s;

    }



    .sidebar.show {

        transform: translateX(0);

    }



    .main-content {

        margin-left: 0;

        padding: 20px;

    }



    .page-header {

        flex-direction: column;

        gap: 15px;

    }



    .header-actions {

        flex-direction: column;

        width: 100%;

    }



    .filters-grid {

        grid-template-columns: 1fr;

    }



    .modal-content {

        width: 95%;

        margin: 20px;

    }

}



@media (max-width: 480px) {

    .main-content {

        padding: 15px;

    }



    .card {

        padding: 20px;

    }



    .table th,

    .table td {

        padding: 10px 15px;

        font-size: 13px;

    }



    .modal-body {

        padding: 20px;

    }



    .modal-footer {

        flex-direction: column;

    }

}

@media (max-width: 768px) {

    /* Mostrar botão do menu mobile */

    .mobile-menu-toggle {

        display: flex;

    }

    

    /* Esconder elementos do header em mobile */

    .user-info .user-name,

    .user-info .admin-name {

        display: none;

    }

    

    .profile-button-container {

        padding: 8px;

        gap: 0;

    }

    

    /* Sidebar mobile */

    .sidebar {

        transform: translateX(-100%);

        transition: transform 0.3s ease;

        z-index: 1000;

    }

    

    .sidebar.mobile-open {

        transform: translateX(0);

    }

    

    .main-content {

        margin-left: 0;

        padding: 20px;

    }

    

    .filters-row {

        flex-direction: column;

        align-items: stretch;

    }

    

    .table-container {

        overflow-x: auto;

    }

}



@media (max-width: 480px) {

    .header-content {

        padding: 0 20px;

    }

    

    .logo span {

        display: none;

    }

    

    .nome_user {

        display: none !important;

    }

    #profileBtn {

        display: none;

    }

    .main-content {

        padding: 15px;

    }

    

    .page-header h1 {

        font-size: 24px;

    }

}