/* ============================================
   INVOICE PRO - iOS-Style Premium Design
   ============================================ */

:root {
  --blue: #007AFF;
  --green: #34C759;
  --orange: #FF9500;
  --red: #FF3B30;
  --purple: #AF52DE;
  --teal: #5AC8FA;
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --text: #1C1C1E;
  --text2: #8E8E93;
  --separator: #E5E5EA;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --primary-color: #d32f2f; /* Red from the logo */
}

.sheet-action {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 16px;
    padding: 10px;
    margin-right: -10px;
    min-width: 60px;
    text-align: right;
}

/* Specific overrides to avoid breaking everything but implement the new design */
body.premium-ui {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ---- NAV BAR ---- */
.nav-bar-premium {
  position: fixed; top: 0; left:0; right:0; z-index:998;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: var(--card);
  border-bottom: 0.5px solid var(--separator);
}
.nav-bar-premium .nav-title {
  font-size: 18px; font-weight: 700;
  position: absolute; left:50%; transform: translateX(-50%);
  margin: 0;
}
.nav-bar-premium .avatar.menu-trigger-btn { 
  width:38px; height:38px; 
  border: 2.5px solid var(--blue);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 16px; color: var(--blue);
  cursor:pointer; 
  transition: all 0.2s ease;
}
.nav-bar-premium .avatar.menu-trigger-btn:hover {
  background: var(--blue);
  color: #fff;
}
.nav-bar-premium .avatar.menu-trigger-btn i { font-size: 16px; }
.nav-bar-premium .nav-icon-btn {
  background: none; border: none; font-size: 18px; color: var(--blue);
  cursor: pointer; padding: 8px;
}
.search-overlay-premium {
  position: absolute; top:0; left:0; right:0; bottom:0;
  background: var(--card); z-index: 1000;
  display: flex; align-items: center; padding: 0 16px;
  animation: fadeIn 0.2s ease;
}
.search-overlay-premium input {
  flex: 1; border: none; background: none;
  font-size: 17px; font-weight: 500; outline: none;
}
.close-search {
  background: none; border: none; font-size: 18px; color: var(--text2);
  padding: 8px; cursor: pointer;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ---- SUMMARY CARDS ---- */
.summary-row {
  display: flex; gap: 12px;
  padding: 72px 20px 4px;
}
.summary-card {
  flex: 1;
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow);
}
.summary-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
}
.summary-card.blue .summary-icon { background: var(--blue); }
.summary-card.orange .summary-icon { background: var(--orange); }
.summary-card.green .summary-icon { background: var(--green); }
.summary-label { font-size:12px; color:var(--text2); display:block; }
.summary-value { font-size:20px; font-weight:800; display:block; margin-top:2px; }

/* ---- SEGMENT CONTROL ---- */
.segment-control {
  display: flex; margin: 16px 20px; padding: 3px;
  background: rgba(118,118,128,0.12); border-radius: 10px;
}
.segment {
  flex:1; border:none; background:none;
  padding: 8px 0; font-size: 13px; font-weight: 600;
  border-radius: 8px; cursor: pointer;
  color: var(--text); transition: all 0.25s;
  font-family: inherit;
}
.segment.active {
  background: var(--card);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ---- SECTION DATE ---- */
.section-date {
  font-size: 13px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 16px 20px 8px;
}

/* ---- INVOICE CARDS (Premium) ---- */
.invoice-list-premium { padding-bottom: 100px; }

.invoice-card-premium {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card);
  margin: 0 20px 1px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  text-decoration: none !important;
  color: inherit !important;
}
.invoice-card-premium:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.invoice-card-premium:last-of-type { border-radius: 0 0 var(--radius) var(--radius); margin-bottom: 8px; }
.invoice-card-premium:only-of-type { border-radius: var(--radius); }
.invoice-card-premium:not(:last-of-type)::after {
  content:''; position:absolute; bottom:0; left:72px; right:16px;
  height:0.5px; background:var(--separator);
}
.invoice-card-premium:active { background: #F2F2F7; }

.invoice-left { display: flex; align-items: center; gap: 14px; flex:1; min-width:0; }

.client-avatar-premium {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0;
  letter-spacing: 0.5px;
}
.client-avatar-premium.green { background: var(--green); }
.client-avatar-premium.blue { background: var(--blue); }
.client-avatar-premium.purple { background: var(--purple); }
.client-avatar-premium.orange { background: var(--orange); }
.client-avatar-premium.teal { background: var(--teal); }
.client-avatar-premium.red { background: var(--red); }

.invoice-info { display:flex; flex-direction:column; min-width:0; }
.client-name {
  font-size: 16px; font-weight: 600; color: var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.invoice-id { font-size: 13px; color: var(--text2); margin-top: 2px; }

.invoice-right { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; margin-left:12px; }
.invoice-amount { font-size: 17px; font-weight: 700; color: var(--green); }
.invoice-amount.pending-amount { color: var(--orange); }

.badge-premium {
  font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 6px; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-premium.paid { background: rgba(52,199,89,0.12); color: var(--green); }
.badge-premium.pending { background: rgba(255,149,0,0.12); color: var(--orange); }
.badge-premium i { font-size: 9px; }

/* ---- FAB ---- */
.fab-premium {
  position: fixed; bottom: 100px; right: 24px; z-index: 900;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--blue); color: #fff; border: none;
  font-size: 22px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,122,255,0.35);
  display:flex; align-items:center; justify-content:center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fab-premium:active { transform: scale(0.9); box-shadow: 0 3px 10px rgba(0,122,255,0.25); }

/* ---- TAB BAR ---- */
.tab-bar-premium {
  position: fixed; bottom: 0; left:0; right:0; z-index: 999;
  height: 84px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--separator);
  display: flex; align-items: flex-start; justify-content: space-around;
  padding-top: 8px;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}
.tab-item-premium {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none !important; color:var(--text2) !important; font-size:10px; font-weight:500;
  transition: color 0.2s;
  flex: 1;
}
.tab-item-premium i { font-size: 22px; }
.tab-item-premium.active, .tab-item-premium.active i { color: var(--blue) !important; }

/* ---- SIDEBAR PREMIUM ---- */
.sidebar-premium {
  background: var(--card) !important;
  border-radius: 0 20px 20px 0 !important;
}
.sidebar-header-premium {
  background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
  padding: 90px 24px 24px; color:#fff;
  display:flex; align-items:center; gap:16px;
  position: relative;
  overflow: hidden;
}
.sidebar-header-premium::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
  animation: rotateSidebar 20s linear infinite;
}
@keyframes rotateSidebar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.sidebar-avatar-premium { 
  width:58px; height:58px; border-radius:18px; 
  border:2px solid rgba(255,255,255,0.4); 
  object-fit: cover; z-index: 1;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.sidebar-user-premium { z-index: 1; }
.sidebar-user-premium h3 { font-size:19px; font-weight:800; margin:0; color:#fff; letter-spacing: -0.5px; }
.sidebar-user-premium p { font-size:13px; opacity:0.85; margin-top:2px; color:#fff; font-weight: 500; }

.sidebar-menu-premium {
  flex:1; overflow-y:auto; padding: 16px 0;
}
.sidebar-section-premium {
  font-size:11px; font-weight:700; color:var(--text2);
  letter-spacing:1px; padding: 16px 24px 6px;
  text-transform: uppercase;
}
.sidebar-item-premium {
  display:flex; align-items:center; gap:14px;
  padding: 12px 24px; text-decoration:none !important;
  color:var(--text) !important; font-size:15px; font-weight:500;
  transition: background 0.15s;
  margin: 0 8px; border-radius: 10px;
}
.sidebar-item-premium:active { background: rgba(0,122,255,0.08); }
.sidebar-item-premium.active-item { background: rgba(0,122,255,0.1); color: var(--blue) !important; }
.sidebar-item-premium.active-item i { color: var(--blue) !important; }
.sidebar-item-premium i { width:22px; text-align:center; color:var(--text2); font-size:16px; }
.sidebar-item-premium.danger { color:var(--red) !important; }
.sidebar-item-premium.danger i { color:var(--red) !important; }
.sidebar-divider-premium { height:0.5px; background:var(--separator); margin: 8px 24px; }

/* ---- WEATHER WIDGET ---- */
.sidebar-weather-premium {
  margin: 20px; padding: 20px;
  background: linear-gradient(135deg, #62A1FF 0%, #3483FF 100%);
  border-radius: 20px; color: #fff;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 12px 24px rgba(52, 131, 255, 0.25);
  position: relative; overflow: hidden;
}
.weather-main-premium { display: flex; align-items: center; justify-content: space-between; }
.weather-temp-premium { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.weather-icon-premium { font-size: 36px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); color: #FFD93D !important; }
.weather-info-premium { display: flex; flex-direction: column; }
.weather-city-premium { font-size: 15px; font-weight: 700; opacity: 1; margin-bottom: 2px; }
.weather-desc-premium { font-size: 12px; font-weight: 500; opacity: 0.8; text-transform: capitalize; }
.weather-details-premium {
  display: flex; gap: 12px; font-size: 10px; opacity: 0.9; margin-top: 8px;
}
.weather-details-premium i { margin-right: 4px; }

/* ---- ANIMATIONS ---- */
@keyframes slideUpPremium {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
.invoice-card-premium { animation: slideUpPremium 0.4s ease both; }

/* AppKit Compatibility Resets */
#page { 
    background-color: var(--bg) !important; 
    min-height: 100vh !important;
}
.page-content {
    background: transparent !important;
    z-index: 1 !important;
}
.header-fixed, .footer-bar { display: none !important; }

/* Mapping Bootstrap Offcanvas to Premium Sheets */
.offcanvas-bottom {
  height: 92vh !important;
  max-height: 92vh !important;
  border-radius: 20px 20px 0 0 !important;
  background: var(--card) !important;
  border: none !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  z-index: 5001 !important;
}
.offcanvas-backdrop {
  z-index: 5000 !important;
}
.modal {
  z-index: 6001 !important;
}
.modal-backdrop {
  z-index: 6000 !important;
}
.sheet-handle {
  width: 36px; height: 5px; border-radius: 3px;
  background: #D1D1D6; margin: 8px auto 0;
}
.offcanvas-header {
  padding: 12px 20px !important;
  border-bottom: 0.5px solid var(--separator) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.offcanvas-header .offcanvas-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.sheet-close {
  background: rgba(118,118,128,0.12) !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  color: var(--text2) !important;
  cursor: pointer !important;
}
.sheet-action {
  background: none !important;
  border: none !important;
  color: var(--blue) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.offcanvas-body {
  padding: 24px 20px 140px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  touch-action: pan-y !important;
}
.offcanvas-body form {
  display: block !important;
  height: auto !important;
}
/* Neutralizar bloqueos de AppKit */
body.offcanvas-open #page, 
body.offcanvas-open .page-content {
  overflow: visible !important;
  pointer-events: none !important;
}
body.offcanvas-open .offcanvas {
  pointer-events: auto !important;
}
/* Forzar que el scroll funcione en móviles */
.offcanvas-body > * {
  -webkit-transform: translate3d(0,0,0);
}

/* Form Styles inside Sheets/Modals */
.input-style, .form-group {
  margin-bottom: 20px !important;
}
.input-style input, .input-style select, .input-style textarea, .form-control {
  background: var(--bg) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
}
.input-style label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text2) !important;
  margin-bottom: 6px !important;
  display: block !important;
  text-transform: uppercase !important;
}

/* Buttons */
.btn-danger {
  background-color: var(--red) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
.btn-primary, .bg-red-dark {
  background-color: var(--blue) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

.btn-add-article {
  width:100% !important; padding:14px !important; border:2px dashed var(--separator) !important;
  border-radius:12px !important; background:none !important; font-size:15px !important;
  font-weight:600 !important; color:var(--blue) !important; cursor:pointer !important;
  font-family:inherit !important; margin-bottom:16px !important;
  transition: background 0.15s !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
}
.btn-add-article:active { background:rgba(0,122,255,0.05) !important; }

.detail-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 10px 0;
}
.detail-actions-grid .action-btn {
  background: var(--bg) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: transform 0.15s !important;
}
.detail-actions-grid .action-btn:active { transform: scale(0.95) !important; }
.detail-actions-grid .action-btn i { font-size: 18px !important; }

.action-btn.share i, .action-btn.link i, .action-btn.view i { color: var(--blue) !important; }
.action-btn.paid i { color: var(--green) !important; }
.action-btn.delete i { color: var(--red) !important; }
.action-btn.print i { color: #666 !important; }
.action-btn.email i { color: #5856D6 !important; }

.premium-options-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 0 !important;
}
.option-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  background: var(--bg) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}
.option-item:active {
  background: rgba(0,0,0,0.05) !important;
}
.option-item i {
  font-size: 20px !important;
  width: 24px !important;
  text-align: center !important;
}
.text-purple { color: #5856D6 !important; }