/* ==========================================================================
   TEMA IPHONE / iOS - SISTEMA DE GESTÃO (ERP / CRM)
   Inspirado nas diretrizes Human Interface Guidelines (HIG) da Apple.
   Fontes SF Pro, App Icon Squircles, Vidro Fosco (Frosted Glass), Cards
   Agrupados (Inset Grouped), Controles e Paleta de Cores iOS.
   ========================================================================== */

:root {
    --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", -system-ui, sans-serif;
    
    /* Cores de Sistema da Apple */
    --ios-bg: #F2F2F7;
    --ios-card-bg: #FFFFFF;
    --ios-sidebar-bg: rgba(246, 246, 248, 0.86);
    --ios-separator: rgba(60, 60, 67, 0.12);
    --ios-separator-opaque: #C6C6C8;
    
    --ios-blue: #007AFF;
    --ios-blue-rgb: 0, 122, 255;
    --ios-green: #34C759;
    --ios-indigo: #5856D6;
    --ios-orange: #FF9500;
    --ios-pink: #FF2D55;
    --ios-purple: #AF52DE;
    --ios-red: #FF3B30;
    --ios-teal: #30B0C7;
    --ios-yellow: #FFCC00;
    --ios-gray: #8E8E93;
    --ios-gray2: #AEAEB2;
    --ios-gray3: #C7C7CC;
    --ios-gray4: #D1D1D6;
    --ios-gray5: #E5E5EA;
    --ios-gray6: #F2F2F7;
    
    --ios-label: #000000;
    --ios-secondary-label: #3C3C43;
    --ios-tertiary-label: rgba(60, 60, 67, 0.6);
    --ios-quaternary-label: rgba(60, 60, 67, 0.18);
    
    --ios-radius-squircle: 9px;
    --ios-radius-card: 18px;
    --ios-radius-btn: 11px;
    --ios-radius-pill: 980px;
    
    --ios-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --ios-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --ios-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);

    /* Sobrescreve as variáveis do sistema de gestão */
    --primary-color: #007AFF !important;
    --secondary-color: #5856D6 !important;
    --success-color: #34C759 !important;
    --danger-color: #FF3B30 !important;
    --warning-color: #FF9500 !important;
    --body-background: #F2F2F7 !important;
    --body-font-family: var(--ios-font) !important;
    --sidebar-max-width: 270px !important;
}

/* Tipografia e Fundo Geral */
body {
    font-family: var(--ios-font) !important;
    background-color: var(--ios-bg) !important;
    color: var(--ios-label) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
}

.content-area {
    background-color: var(--ios-bg) !important;
    min-height: 100vh;
}

@media (min-width: 768px) {
    .d-flex.flex-column.flex-md-row {
        margin-left: 270px !important;
    }
}

/* --------------------------------------------------------------------------
   SIDEBAR ESTILO iPHONE / macOS (Vidro Fosco Translúcido)
   -------------------------------------------------------------------------- */
.dashboard-sidebar {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    background: var(--ios-sidebar-bg) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    border-right: 1px solid var(--ios-separator) !important;
    color: var(--ios-label) !important;
    padding: 16px 14px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Cabeçalho da Sidebar */
.sidebar-brand {
    color: var(--ios-label) !important;
    padding: 8px 10px 16px 10px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--ios-separator) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* Itens e Links da Sidebar */
.dashboard-sidebar .nav-link,
.sidebar-link {
    color: #1C1C1E !important;
    background: transparent !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    transition: all 0.18s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    margin-bottom: 3px !important;
    border: none !important;
}

.dashboard-sidebar .nav-link:hover,
.sidebar-link:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    transform: none !important;
    color: #000000 !important;
}

.dashboard-sidebar .nav-link:active,
.sidebar-link:active {
    transform: scale(0.98) !important;
}

.dashboard-sidebar .nav-link.active,
.sidebar-link.active {
    background: rgba(0, 122, 255, 0.12) !important;
    color: var(--ios-blue) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* SQUIRCLES DE ÍCONE DO iPHONE (App Icons do iOS Settings) */
.ios-app-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: var(--ios-radius-squircle) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 0.92rem !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    flex-shrink: 0;
}

.sidebar-link:hover .ios-app-icon {
    transform: scale(1.06);
}

/* Gradientes dos Ícones do iOS */
.icon-blue    { background: linear-gradient(180deg, #2997FF 0%, #0071E3 100%) !important; }
.icon-green   { background: linear-gradient(180deg, #30D158 0%, #248A3D 100%) !important; }
.icon-indigo  { background: linear-gradient(180deg, #7D7AFF 0%, #5856D6 100%) !important; }
.icon-orange  { background: linear-gradient(180deg, #FF9F0A 0%, #FF8000 100%) !important; }
.icon-pink    { background: linear-gradient(180deg, #FF375F 0%, #D70040 100%) !important; }
.icon-purple  { background: linear-gradient(180deg, #BF5AF2 0%, #9A30D0 100%) !important; }
.icon-red     { background: linear-gradient(180deg, #FF453A 0%, #D70015 100%) !important; }
.icon-teal    { background: linear-gradient(180deg, #64D2FF 0%, #007AFF 100%) !important; }
.icon-yellow  { background: linear-gradient(180deg, #FFD60A 0%, #FF9F0A 100%) !important; }
.icon-gray    { background: linear-gradient(180deg, #A2AAAD 0%, #6E7781 100%) !important; }
.icon-dark    { background: linear-gradient(180deg, #48484A 0%, #1C1C1E 100%) !important; }
.icon-cyan    { background: linear-gradient(180deg, #5AC8FA 0%, #007AFF 100%) !important; }
.icon-mint    { background: linear-gradient(180deg, #63E6BE 0%, #34C759 100%) !important; }
.icon-violet  { background: linear-gradient(180deg, #9955FF 0%, #6811E5 100%) !important; }

/* Chevrons */
.sidebar-chevron {
    font-size: 0.72rem !important;
    color: var(--ios-gray3) !important;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
    margin-left: auto !important;
}

.sidebar-submenu-wrap.open > .sidebar-submenu-toggle .sidebar-chevron {
    transform: rotate(90deg) !important;
    color: var(--ios-blue) !important;
}

/* Submenu Container */
.sidebar-submenu-container {
    padding-left: 42px !important;
    border-left: none !important;
    margin-left: 0 !important;
    position: relative !important;
}

.sidebar-submenu-container::before {
    content: '';
    position: absolute;
    left: 26px;
    top: 4px;
    bottom: 8px;
    width: 1.5px;
    background: var(--ios-separator);
    border-radius: 2px;
}

.sidebar-submenu-item {
    color: #48484A !important;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    margin-bottom: 2px !important;
    text-decoration: none !important;
    display: block !important;
    transition: all 0.15s ease !important;
}

.sidebar-submenu-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #000000 !important;
}

.sidebar-submenu-item.active {
    background: rgba(0, 122, 255, 0.12) !important;
    color: var(--ios-blue) !important;
    font-weight: 600 !important;
}

/* Rodapé da Sidebar */
.sidebar-footer {
    border-top: 1px solid var(--ios-separator) !important;
    padding-top: 14px !important;
    margin-top: auto !important;
}

.sidebar-status {
    color: var(--ios-tertiary-label) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.sidebar-footer strong {
    color: var(--ios-label) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}

.sidebar-btn {
    border: none !important;
    background: rgba(120, 120, 128, 0.08) !important;
    color: #1C1C1E !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
}

.sidebar-btn:hover {
    background: rgba(120, 120, 128, 0.15) !important;
    color: #000000 !important;
}

.sidebar-btn:active {
    transform: scale(0.97) !important;
}

/* Botão Sair no Rodapé */
.sidebar-footer a[href*="logout"] {
    background: rgba(255, 59, 48, 0.08) !important;
    color: var(--ios-red) !important;
}

.sidebar-footer a[href*="logout"]:hover {
    background: rgba(255, 59, 48, 0.16) !important;
    color: var(--ios-red) !important;
}

/* --------------------------------------------------------------------------
   CARDS ESTILO INSET GROUPED DO iPHONE
   -------------------------------------------------------------------------- */
.card {
    background: var(--ios-card-bg) !important;
    border-radius: var(--ios-radius-card) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: var(--ios-shadow-card) !important;
    overflow: hidden !important;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease !important;
}

.card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ios-shadow-float) !important;
}

.card-header {
    background: #FAFAFC !important;
    border-bottom: 1px solid var(--ios-separator) !important;
    padding: 16px 20px !important;
}

.card-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--ios-label) !important;
    letter-spacing: -0.02em !important;
}

.card-body {
    padding: 20px 22px !important;
}

/* Indicadores de Métricas no Dashboard */
.card h2 {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #000000 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   BOTÕES ESTILO iPHONE (TEXTO NO CENTRO E FEEDBACK TÁTIL)
   -------------------------------------------------------------------------- */
.btn,
button.btn,
a.btn,
input[type="submit"].btn {
    font-family: var(--ios-font) !important;
    border-radius: var(--ios-radius-btn) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    letter-spacing: -0.01em !important;
    transition: all 0.18s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.btn:active {
    transform: scale(0.96) !important;
}

.btn-primary {
    background: var(--ios-blue) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
}

.btn-primary:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

.btn-outline-secondary,
.btn-secondary {
    background: rgba(120, 120, 128, 0.12) !important;
    color: var(--ios-blue) !important;
    border: none !important;
}

.btn-outline-secondary:hover,
.btn-secondary:hover {
    background: rgba(120, 120, 128, 0.18) !important;
    color: var(--ios-blue) !important;
}

.btn-success {
    background: var(--ios-green) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3) !important;
}

.btn-danger {
    background: var(--ios-red) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3) !important;
}

.btn-sm {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.84rem !important;
    border-radius: 9px !important;
}

.sidebar-footer .sidebar-btn {
    height: 36px !important;
    min-height: 36px !important;
    justify-content: flex-start !important;
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
}

/* --------------------------------------------------------------------------
   FORMULÁRIOS ESTILO iPHONE SETTINGS
   -------------------------------------------------------------------------- */
.form-label {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: var(--ios-tertiary-label) !important;
    margin-bottom: 5px !important;
}

.form-control,
.form-select {
    font-family: var(--ios-font) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 11px !important;
    padding: 9px 14px !important;
    font-size: 15px !important;
    color: #000000 !important;
    outline: none !important;
    height: auto !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ios-blue) !important;
    box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.2) !important;
}

/* --------------------------------------------------------------------------
   TABELAS ESTILO iPHONE INSET GROUPED
   -------------------------------------------------------------------------- */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.table th {
    background: #FAFAFC !important;
    color: var(--ios-tertiary-label) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--ios-separator) !important;
}

.table td {
    padding: 14px 16px !important;
    border-bottom: 0.5px solid var(--ios-separator) !important;
    color: #1C1C1E !important;
    font-size: 0.92rem !important;
    vertical-align: middle !important;
}

.table tr:last-child td {
    border-bottom: none !important;
}

.table tr:hover td {
    background: rgba(0, 0, 0, 0.015) !important;
}

/* --------------------------------------------------------------------------
   ALERTAS E BADGES ESTILO iPHONE NOTIFICAÇÃO
   -------------------------------------------------------------------------- */
.alert {
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-weight: 500 !important;
    font-size: 0.92rem !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.alert-success {
    background: rgba(52, 199, 89, 0.12) !important;
    color: #1B6E2C !important;
}

.alert-danger {
    background: rgba(255, 59, 48, 0.12) !important;
    color: #C0140A !important;
}

.alert-info {
    background: rgba(0, 122, 255, 0.12) !important;
    color: #0056B3 !important;
}

.alert-warning {
    background: rgba(255, 149, 0, 0.12) !important;
    color: #A35C00 !important;
}

.badge {
    font-family: var(--ios-font) !important;
    border-radius: var(--ios-radius-pill) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 4px 11px !important;
    letter-spacing: 0.1px !important;
}

/* Navbar mobile do iOS */
.navbar {
    background: var(--ios-sidebar-bg) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-bottom: 1px solid var(--ios-separator) !important;
}

.navbar .navbar-brand {
    color: #000000 !important;
    font-weight: 700 !important;
}