/* ======================================== */ /* VITAPI - VETERİNER KLİNİK YÖNETİM SİSTEMİ */ /* CSS STİL DOSYASI - TÜM SAYFALAR */ /* ======================================== */ /* ===== RESPONSIVE BREAKPOINT DEĞİŞKENLERİ ===== */ :root { /* Responsive breakpoints */ --breakpoint-xs: 480px; /* Extra small devices (phones) */ --breakpoint-sm: 640px; /* Small devices (large phones) */ --breakpoint-md: 768px; /* Medium devices (tablets) */ --breakpoint-lg: 1024px; /* Large devices (small laptops) */ --breakpoint-xl: 1280px; /* Extra large devices (laptops) */ --breakpoint-2xl: 1536px; /* 2X large devices (desktops) */ /* Mobile-first spacing adjustments */ --mobile-spacing-xs: 4px; --mobile-spacing-sm: 8px; --mobile-spacing-md: 12px; --mobile-spacing-lg: 16px; --mobile-spacing-xl: 20px; --mobile-spacing-2xl: 24px; /* Mobile font sizes */ --mobile-text-xs: 12px; --mobile-text-sm: 14px; --mobile-text-base: 15px; --mobile-text-lg: 16px; --mobile-text-xl: 18px; --mobile-text-2xl: 20px; /* Page header height - JavaScript ile dinamik olarak set edilecek */ --page-header-height: 100px; /* Fallback değer */ } /* ======================================== PET ICONS SVG - Hayvan İkonları ======================================== */ /* Genel SVG img stilleri */ .patient-avatar img, .patient-info-mini img, .schedule-patient img, .image-patient img, .customer-avatar img, .consent-patient-info img, .pending-patient-info img, .overdue-patient-info img { display: block; flex-shrink: 0; } /* ======================================== PET ICONS FONT - Hayvan İkonları (Eski - Kullanılmıyor) ======================================== */ @font-face { font-family: 'pet-icons-font'; src: url('../fonts/fontello-057c1800/fontello-057c1800/font/pet-icons-font.eot?39288672'); src: url('../fonts/fontello-057c1800/fontello-057c1800/font/pet-icons-font.eot?39288672#iefix') format('embedded-opentype'), url('../fonts/fontello-057c1800/fontello-057c1800/font/pet-icons-font.woff2?39288672') format('woff2'), url('../fonts/fontello-057c1800/fontello-057c1800/font/pet-icons-font.woff?39288672') format('woff'), url('../fonts/fontello-057c1800/fontello-057c1800/font/pet-icons-font.ttf?39288672') format('truetype'), url('../fonts/fontello-057c1800/fontello-057c1800/font/pet-icons-font.svg?39288672#pet-icons-font') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "pet-icons-font"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; width: 1em; /* margin-right: .2em; */ /* margin-left: .2em; */ text-align: center; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-bird:before { content: '\e800'; } .icon-bird-1:before { content: '\e801'; } .icon-cat:before { content: '\e802'; } .icon-cat-1:before { content: '\e803'; } .icon-chicken:before { content: '\e804'; } .icon-dog-1:before { content: '\e805'; } .icon-dog:before { content: '\e806'; } .icon-frog:before { content: '\e807'; } .icon-mouse:before { content: '\e808'; } .icon-hamster:before { content: '\e809'; } .icon-rabbit:before { content: '\e80a'; } .icon-tortoise:before { content: '\e80b'; } /* ======================================== VITAPI RENK SİSTEMİ - LIGHT TEMA ======================================== */ :root { /* ======================================== 1. ANA RENKLER (Primary Colors) ======================================== */ --ana-mavi: #3b82f6; --ana-mavi-koyu: #2563eb; --ana-mavi-daha-koyu: #1d4ed8; --ana-mavi-acik: #60a5fa; --ana-mavi-cok-acik: #93c5fd; --ana-mavi-cok-acik-v2: #d7eaff; --ana-yesil: #10b981; --ana-yesil-koyu: #059669; --ana-yesil-acik: #34d399; --ana-yesil-cok-acik: #6ee7b7; --ana-kirmizi: #ef4444; --ana-kirmizi-koyu: #dc2626; --ana-kirmizi-daha-koyu: #b91c1c; --ana-kirmizi-acik: #f87171; --ana-kirmizi-cok-acik: #fca5a5; /* Notification unread item colors */ --notification-unread-item-bg: #fff0f2; --notification-unread-item-border: #ff3a54; --notification-unread-item-bg-hover: #fde6e9; --notification-item-bg: #ffffff; --notification-item-bg-hover: #f8fafc; --ana-sari: #fb9624; --ana-sari-koyu: #d97706; --ana-sari-acik: #fbbf24; --ana-sari-cok-acik: #fde68a; --ana-mor: #8b5cf6; --ana-mor-koyu: #7c3aed; --ana-mor-acik: #a78bfa; --ana-mor-cok-acik: #e3d9ff; --ana-cyan: #06b6d4; --ana-cyan-koyu: #0891b2; --ana-cyan-acik: #22d3ee; --ana-cyan-cok-acik: #67e8f9; --ana-pembe: #f472b6; --ana-pembe-koyu: #ec4899; --ana-pembe-acik: #f9a8d4; --ana-pembe-cok-acik: #fbcfe8; --form-bg-light-gray:#f8f9fa; /* ======================================== 2. DURUM RENKLERİ (Status Colors) ======================================== */ --durum-basarili: #10b981; --durum-basarili-koyu: #059669; --durum-basarili-acik: #dcfce7; --durum-basarili-metin: #166534; --durum-basarili-kenarlik: #bbf7d0; --durum-hata: #ef4444; --durum-hata-koyu: #dc2626; --durum-hata-acik: #fecaca; --durum-hata-acik-light: #fff1f1; --durum-hata-metin: #991b1b; --durum-hata-kenarlik: #fca5a5; --durum-uyari: #f59e0b; --durum-uyari-koyu: #d97706; --durum-uyari-acik: #fef3c7; --durum-uyari-metin: #92400e; --durum-uyari-kenarlik: #fde68a; --durum-bilgi: #3b82f6; --durum-bilgi-koyu: #2563eb; --durum-bilgi-acik: #dbeafe; --durum-bilgi-metin: #1e40af; --durum-bilgi-kenarlik: #bfdbfe; --durum-bekleme: #8b5cf6; --durum-bekleme-koyu: #7c3aed; --durum-bekleme-acik: #ede9fe; --durum-bekleme-metin: #6b21a8; --durum-bekleme-kenarlik: #c4b5fd; --tablo-hover: #eff1f3; /* ======================================== 3. ARKA PLAN RENKLERİ (Background Colors) ======================================== */ --arka-plan-ana: #f8fafc; --arka-plan-ikincil: #f8fafc; --arka-plan-ucuncu: #e3e6e9; --arka-plan-dorduncu: #e2e8f0; --arka-plan-besinci: #cbd5e1; --arka-plan-altinci: #f1f5f9; --arka-plan-yedinci: #d3d3d3; --kart-arka-plan: #ffffff; --kart-arka-plan-hover: #f8fafc; --kart-arka-plan-secili: #f3f4f6; --kart-arka-plan-vurgu: #f0f9ff; --kart-arka-plan-hizli-islemler: #d7e8fa; --modal-arka-plan: #ffffff; --modal-overlay: rgba(0, 0, 0, 0.6); --modal-overlay-acik: rgba(0, 0, 0, 0.3); --sidebar-arka-plan: #f8fafc; --header-arka-plan: #ffffff; --footer-arka-plan: #f1f5f9; /* ======================================== 4. METİN RENKLERİ (Text Colors) ======================================== */ --metin-ana: #1d2027; --metin-ikincil: #374151; --metin-ucuncu: #434959; --metin-dorduncu: #9ca3af; --metin-beyaz: #ffffff; --metin-siyah: #1d293b; --baslik-ana: #1d293b; --baslik-ikincil: #1d2027; --baslik-ucuncu: #374151; --baslik-dorduncu: #434959; --link-ana: #3b82f6; --link-hover: #3b82f6; --link-ziyaret: #7c3aed; --link-aktif: #1d4ed8; --placeholder: #9ca3af; --disabled: #d1d5db; --duzenleyen-kisi-bg:#efefef; --temizle-buton-bg:#efefef; /* ======================================== 5. KENARLIK RENKLERİ (Border Colors) ======================================== */ --kenarlik-ana: #e2e8f0; --kenarlik-ikincil: #d1d5db; --kenarlik-ucuncu: #cbd5e1; --kenarlik-dorduncu: #9ca3af; --kenarlik-besinci: #6b7280; --kenarlik-odak: #3b82f6; --kenarlik-basarili: #10b981; --kenarlik-hata: #ef4444; --kenarlik-uyari: #f59e0b; --kenarlik-bilgi: #06b6d4; --kenarlik-seffaf: rgba(0, 0, 0, 0.1); --kenarlik-seffaf-koyu: rgba(0, 0, 0, 0.2); --kenarlik-seffaf-mavi: rgba(59, 130, 246, 0.1); /* ======================================== 6. GÖLGE RENKLERİ (Shadow Colors) ======================================== */ --golge-ana: rgba(0, 0, 0, 0.1); --golge-ikincil: rgba(0, 0, 0, 0.15); --golge-ucuncu: rgba(0, 0, 0, 0.2); --golge-dorduncu: rgba(0, 0, 0, 0.3); --golge-besinci: rgba(0, 0, 0, 0.4); --golge-mavi: rgba(59, 130, 246, 0.3); --golge-yesil: rgba(16, 185, 129, 0.3); --golge-kirmizi: rgba(239, 68, 68, 0.3); --golge-sari: rgba(245, 158, 11, 0.3); --golge-mor: rgba(139, 92, 246, 0.3); --golge-hover: rgba(0, 0, 0, 0.05); --golge-odak: rgba(59, 130, 246, 0.1); /* ======================================== 7. GRADİENT RENKLERİ (Gradient Colors) ======================================== */ --gradient-mavi: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); --gradient-mavi-acik: linear-gradient(135deg, var(--ana-mavi-acik) 0%, var(--ana-mavi) 100%); --gradient-mavi-koyu: linear-gradient(135deg, var(--ana-mavi-daha-koyu) 0%, var(--ana-mavi-daha-koyu) 100%); --gradient-yesil: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); --gradient-yesil-acik: linear-gradient(135deg, var(--ana-yesil-acik) 0%, var(--ana-yesil) 100%); --gradient-kirmizi: linear-gradient(135deg, var(--ana-kirmizi) 0%, var(--ana-kirmizi-koyu) 100%); --gradient-kirmizi-acik: linear-gradient(135deg, var(--ana-kirmizi-acik) 0%, var(--ana-kirmizi) 100%); --gradient-sari: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%); --gradient-sari-acik: linear-gradient(135deg, var(--ana-sari-acik) 0%, var(--ana-sari) 100%); --gradient-mor: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%); --gradient-mor-acik: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor) 100%); --gradient-pembe: linear-gradient(135deg, var(--ana-pembe) 0%, var(--ana-pembe-koyu) 100%); --gradient-pembe-acik: linear-gradient(135deg, var(--ana-pembe-acik) 0%, var(--ana-pembe) 100%); --gradient-cyan: linear-gradient(135deg, var(--ana-cyan) 0%, var(--ana-cyan-koyu) 100%); --gradient-cyan-acik: linear-gradient(135deg, var(--ana-cyan-acik) 0%, var(--ana-cyan) 100%); --gradient-gri: linear-gradient(135deg, var(--kenarlik-besinci) 0%, var(--metin-ikincil) 100%); --gradient-beyaz: linear-gradient(135deg, var(--sistem-beyaz) 0%, var(--arka-plan-ana) 100%); /* ======================================== 8. ÖZEL RENKLER (Special Colors) ======================================== */ --seffaf-beyaz: rgba(255, 255, 255, 0.5); --seffaf-siyah: rgba(0, 0, 0, 0.1); --seffaf-mavi: rgba(59, 130, 246, 0.1); --seffaf-yesil: rgba(16, 185, 129, 0.1); --seffaf-kirmizi: rgba(239, 68, 68, 0.1); --seffaf-sari: rgba(245, 158, 11, 0.1); --vurgu-altin: #fbbf24; --vurgu-gumus: #94a3b8; --vurgu-bronz: #d97706; --vurgu-platin: #e5e7eb; --sistem-beyaz: #dadada; --sistem-siyah: #000000; --sistem-seffaf: transparent; --sistem-inherit: inherit; --sistem-current: currentColor; /* ======================================== 9. SPACING SYSTEM (Boşluk Sistemi) ======================================== */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --spacing-2xl: 24px; --spacing-3xl: 32px; --spacing-4xl: 40px; --spacing-5xl: 48px; /* ======================================== 10. BORDER RADIUS SYSTEM (Köşe Yuvarlaklığı) ======================================== */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-full: 50%; /* ======================================== 11. FONT SIZE SYSTEM (Yazı Boyutu) ======================================== */ --text-xs: 10px; --text-xsplus: 11px; --text-sm: 12px; --text-base: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 28px; --text-5xl: 32px; /* ======================================== 12. FONT WEIGHT SYSTEM (Yazı Kalınlığı) ======================================== */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* ======================================== 13. SHADOW SYSTEM (Gölge Sistemi) ======================================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); /* ======================================== 14. TRANSITION SYSTEM (Geçiş Sistemi) ======================================== */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; --transition-slower: 0.5s ease; /* ======================================== 15. STAT CARD ICON COLORS (İstatistik Kartı İkon Renkleri) ======================================== */ --stat-card-icon-bg: #dde9ff; --stat-card-icon-text: #4d67a3; /* ======================================== 15. PET HAYVAN BG VE ICON COLORS (Tüm Proje Geneli) ======================================== */ /* --pet-avatar-bg: #dde9ff; */ --pet-avatar-bg: #f0f0f0; /* --pet-avatar-icon: #4d67a3; */ --pet-avatar-icon: #0e3895; } /* ======================================== VITAPI RENK SİSTEMİ - DARK TEMA ======================================== */ [data-theme="dark"] { /* ======================================== 1. ANA RENKLER - DARK (Primary Colors) ======================================== */ --ana-mavi: #60a5fa; --ana-mavi-koyu: #2563eb; --ana-mavi-daha-koyu: #2563eb; --ana-mavi-acik: #93c5fd; --ana-mavi-cok-acik: #bfdbfe; --ana-mavi-cok-acik-v2: #d7eaff; --ana-yesil: #34d399; --ana-yesil-koyu: #10b981; --ana-yesil-acik: #6ee7b7; --ana-yesil-cok-acik: #a7f3d0; --ana-kirmizi: #f87171; --ana-kirmizi-koyu: #ef4444; --ana-kirmizi-daha-koyu: #dc2626; --ana-kirmizi-acik: #fca5a5; --ana-kirmizi-cok-acik: #fecaca; /* Notification unread item colors - Dark theme */ --notification-unread-item-bg: #2d1b1e; --notification-unread-item-border: #ff3a54; --notification-unread-item-bg-hover: #3d2b2e; --notification-item-bg: #1f2937; --notification-item-bg-hover: #374151; --ana-sari: #fb9624; --ana-sari-koyu: #f59e0b; --ana-sari-acik: #fde68a; --ana-sari-cok-acik: #fef3c7; --ana-mor: #a78bfa; --ana-mor-koyu: #8b5cf6; --ana-mor-acik: #c4b5fd; --ana-mor-cok-acik: #ddd6fe; --ana-cyan: #22d3ee; --ana-cyan-koyu: #06b6d4; --ana-cyan-acik: #67e8f9; --ana-cyan-cok-acik: #a7f3d0; --ana-pembe: #f9a8d4; --ana-pembe-koyu: #f472b6; --ana-pembe-acik: #fbcfe8; --ana-pembe-cok-acik: #fce7f3; --form-bg-light-gray:#2a2e39; /* ======================================== 2. DURUM RENKLERİ - DARK (Status Colors) ======================================== */ --durum-basarili: #34d399; --durum-basarili-koyu: #10b981; --durum-basarili-acik: #064e3b; --durum-basarili-metin: #a7f3d0; --durum-basarili-kenarlik: #065f46; --durum-hata: #f87171; --durum-hata-koyu: #ef4444; --durum-hata-acik: #7f1d1d; --durum-hata-acik-light: #2f1919; --durum-hata-metin: #fecaca; --durum-hata-kenarlik: #991b1b; --durum-uyari: #fbbf24; --durum-uyari-koyu: #f59e0b; --durum-uyari-acik: #cf5b183d; --durum-uyari-metin: #fef3c7; --durum-uyari-kenarlik: #92400e; --durum-bilgi: #60a5fa; --durum-bilgi-koyu: #60a5fa; --durum-bilgi-acik: #1e3a8a; --durum-bilgi-metin: #dbeafe; --durum-bilgi-kenarlik: #1e40af; --durum-bekleme: #a78bfa; --durum-bekleme-koyu: #8b5cf6; --durum-bekleme-acik: #4c1d95; --durum-bekleme-metin: #c4b5fd; --durum-bekleme-kenarlik: #6b21a8; --tablo-hover: #14161b; /* ======================================== 3. ARKA PLAN RENKLERİ - DARK (Background Colors) ======================================== */ --arka-plan-ana: #1d2027; --arka-plan-ikincil: #191d25; --arka-plan-ucuncu: #334155; --arka-plan-dorduncu: #475569; --arka-plan-besinci: #434959; --arka-plan-altinci: #101216; --arka-plan-yedinci: #0f1419; --kart-arka-plan: #1d2027; --kart-arka-plan-hover: #334155; --kart-arka-plan-secili: #475569; --kart-arka-plan-vurgu: #151922; --kart-arka-plan-hizli-islemler: #0c1825; --modal-arka-plan: #1d2027; --modal-overlay: rgba(0, 0, 0, 0.8); --modal-overlay-acik: rgba(0, 0, 0, 0.6); --sidebar-arka-plan: #1d2027; --header-arka-plan: #0f172a; --footer-arka-plan: #334155; /* ======================================== 4. METİN RENKLERİ - DARK (Text Colors) ======================================== */ --metin-ana: #f8fafc; --metin-ikincil: #e2e8f0; --metin-ucuncu: #cbd5e1; --metin-dorduncu: #94a3b8; --metin-beyaz: #ffffff; --metin-siyah: #1d293b; --baslik-ana: #f1f5f9; --baslik-ikincil: #e2e8f0; --baslik-ucuncu: #cbd5e1; --baslik-dorduncu: #94a3b8; --link-ana: #60a5fa; --link-hover: #93c5fd; --link-ziyaret: #a78bfa; --link-aktif: #60a5fa; --placeholder: #434959; --disabled: #434959; --duzenleyen-kisi-bg:#2f2f34; --temizle-buton-bg:#2f2f34; /* ======================================== 5. KENARLIK RENKLERİ - DARK (Border Colors) ======================================== */ --kenarlik-ana: #434959; --kenarlik-ikincil: #434959; --kenarlik-ucuncu: #94a3b8; --kenarlik-dorduncu: #cbd5e1; --kenarlik-besinci: #e2e8f0; --kenarlik-odak: #60a5fa; --kenarlik-basarili: #34d399; --kenarlik-hata: #f87171; --kenarlik-uyari: #fbbf24; --kenarlik-bilgi: #22d3ee; --kenarlik-seffaf: rgba(255, 255, 255, 0.1); --kenarlik-seffaf-koyu: rgba(255, 255, 255, 0.2); --kenarlik-seffaf-mavi: rgba(96, 165, 250, 0.1); /* ======================================== 6. GÖLGE RENKLERİ - DARK (Shadow Colors) ======================================== */ --golge-ana: transparent; --golge-ikincil: transparent; --golge-ucuncu: transparent; --golge-dorduncu: transparent; --golge-besinci: transparent; --golge-mavi: transparent; --golge-yesil: transparent; --golge-kirmizi: transparent; --golge-sari: transparent; --golge-mor: transparent; --golge-hover: transparent; --golge-odak: transparent; /* ======================================== 7. GRADİENT RENKLERİ - DARK (Gradient Colors) ======================================== */ --gradient-mavi: linear-gradient(135deg, #60a5fa 0%, var(--ana-mavi) 100%); --gradient-mavi-acik: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%); --gradient-mavi-koyu: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi) 100%); --gradient-yesil: linear-gradient(135deg, #34d399 0%, var(--ana-yesil) 100%); --gradient-yesil-acik: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%); --gradient-kirmizi: linear-gradient(135deg, #f87171 0%, var(--ana-kirmizi) 100%); --gradient-kirmizi-acik: linear-gradient(135deg, #fca5a5 0%, #f87171 100%); --gradient-sari: linear-gradient(135deg, #fbbf24 0%, var(--ana-sari) 100%); --gradient-sari-acik: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%); --gradient-mor: linear-gradient(135deg, #a78bfa 0%, var(--ana-mor) 100%); --gradient-mor-acik: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%); --gradient-pembe: linear-gradient(135deg, #f9a8d4 0%, var(--ana-pembe) 100%); --gradient-pembe-acik: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%); --gradient-cyan: linear-gradient(135deg, #22d3ee 0%, var(--ana-cyan) 100%); --gradient-cyan-acik: linear-gradient(135deg, #67e8f9 0%, #22d3ee 100%); --gradient-gri: linear-gradient(135deg, #94a3b8 0%, #434959 100%); --gradient-beyaz: linear-gradient(135deg, #1d2027 0%, var(--metin-ana) 100%); /* ======================================== 8. ÖZEL RENKLER - DARK (Special Colors) ======================================== */ --seffaf-beyaz: rgba(255, 255, 255, 0.1); --seffaf-siyah: rgba(0, 0, 0, 0.3); --seffaf-mavi: rgba(96, 165, 250, 0.1); --seffaf-yesil: rgba(52, 211, 153, 0.1); --seffaf-kirmizi: rgba(248, 113, 113, 0.1); --seffaf-sari: rgba(251, 191, 36, 0.1); --vurgu-altin: #fbbf24; --vurgu-gumus: #94a3b8; --vurgu-bronz: #d97706; --vurgu-platin: #e2e8f0; --sistem-beyaz: #ffffff; --sistem-siyah: #000000; --sistem-seffaf: transparent; --sistem-inherit: inherit; --sistem-current: currentColor; /* ======================================== 9. SPACING SYSTEM - DARK (Boşluk Sistemi) ======================================== */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --spacing-2xl: 24px; --spacing-3xl: 32px; --spacing-4xl: 40px; --spacing-5xl: 48px; /* ======================================== 10. BORDER RADIUS SYSTEM - DARK (Köşe Yuvarlaklığı) ======================================== */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-full: 50%; /* ======================================== 11. FONT SIZE SYSTEM - DARK (Yazı Boyutu) ======================================== */ --text-xs: 10px; --text-sm: 12px; --text-base: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 28px; --text-5xl: 32px; /* ======================================== 12. FONT WEIGHT SYSTEM - DARK (Yazı Kalınlığı) ======================================== */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* ======================================== 13. SHADOW SYSTEM - DARK (Gölge Sistemi) ======================================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.3); /* ======================================== 14. TRANSITION SYSTEM - DARK (Geçiş Sistemi) ======================================== */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; --transition-slower: 0.5s ease; /* ======================================== 15. STAT CARD ICON COLORS - DARK (İstatistik Kartı İkon Renkleri) ======================================== */ --stat-card-icon-bg: #1e3a5f; --stat-card-icon-text: #93c5fd; } /* Dark temada logo'ları light versiyonuna çevir (JavaScript ile de güncelleniyor) */ [data-theme="dark"] .logo img[src*="logo-vitapi-dark.svg"], [data-theme="dark"] .mobile-logo img[src*="logo-vitapi-dark.svg"] { content: url('assets/logo-vitapi-light.svg'); } /* Dark tema için tedaviler sayfası current schedule item */ [data-theme="dark"] .tedaviler-page .schedule-item.current { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.25) 100%); border-left-color: var(--ana-mavi); box-shadow: 0 2px 8px var(--golge-mavi); } /* ===== RESPONSIVE UTILITY CLASSES ===== */ .d-none-desktop { display: none !important; } /* ===== RESPONSIVE GRID CLASSES ===== */ .grid-responsive { display: grid; gap: var(--spacing-lg); } .grid-responsive-1 { grid-template-columns: 1fr; } .grid-responsive-2 { grid-template-columns: repeat(2, 1fr); } .grid-responsive-3 { grid-template-columns: repeat(3, 1fr); } .grid-responsive-4 { grid-template-columns: repeat(4, 1fr); } /* ===== RESPONSIVE FLEX CLASSES ===== */ .flex-responsive { display: flex; gap: var(--spacing-md); } .flex-responsive-row { flex-direction: row; } .flex-responsive-column { flex-direction: column; } /* ===== GLOBAL FORM ELEMENT STİLLERİ ===== */ /* #region Ortak Search Box Stilleri - Öncelikli */ .search-box { position: relative; display: flex; /* Searchbox aktif edildi */ align-items: center; width: 400px; } /* Teknik Destek Butonu */ .technical-support-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-koyu) 100%); color: var(--metin-beyaz); border: none; border-radius: var(--radius-xl); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px var(--golge-mavi); white-space: nowrap; height: 44px; } .technical-support-btn i { font-size: 16px; } .technical-support-btn:hover { background: linear-gradient(135deg, var(--ana-mavi-koyu) 0%, var(--ana-mavi-daha-koyu) 100%); box-shadow: 0 4px 12px var(--golge-mavi); } .technical-support-btn:active { transform: translateY(0); box-shadow: 0 2px 6px var(--golge-mavi); } /* Hızlı Destek Paneli */ .quick-support-panel { position: fixed; top: 0; right: -450px; width: 450px; height: 100vh; max-height: 100vh; background: var(--kart-arka-plan); box-shadow: -4px 0 24px var(--golge-ikincil); z-index: 10000; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; visibility: hidden; opacity: 0; overflow: hidden; /* Panel kendisi scroll etmemeli, sadece body scroll edecek */ } .quick-support-panel.open { right: 0; visibility: visible; opacity: 1; } /* Mobil görünümde teknik destek paneli - TAM SAYFA açılmalı */ @media (max-width: 1023px) { .quick-support-panel { top: 0 !important; bottom: 0 !important; left: 0 !important; right: -100% !important; width: 100% !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; box-shadow: -4px 0 24px var(--golge-ikincil) !important; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s, opacity 0.3s !important; visibility: hidden !important; opacity: 0 !important; } .quick-support-panel.open { right: 0 !important; bottom: auto !important; left: auto !important; visibility: visible !important; opacity: 1 !important; } .quick-support-panel:not(.open) { right: -100% !important; visibility: hidden !important; opacity: 0 !important; } } .quick-support-panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--golge-dorduncu); z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .quick-support-panel-overlay.active { opacity: 1; visibility: visible; } /* Panel Header */ .quick-support-header { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid var(--kenarlik-ana); background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-koyu) 100%); color: var(--metin-beyaz); flex-shrink: 0; /* Header sabit kalmalı, scroll etmemeli */ } .quick-support-header h3 { font-size: 20px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; } .quick-support-header h3 i { font-size: 22px; } .quick-support-close { background: rgba(255, 255, 255, 0.2); border: none; width: 36px; height: 36px; border-radius: 50%; color: var(--metin-beyaz); font-size: 18px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .quick-support-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); } /* Panel Body */ .quick-support-body { flex: 1 1 0; /* Flex item olarak genişleyebilmeli - 0 önemli! */ padding: 24px; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; /* Flex item'ın scroll edebilmesi için - KRİTİK! */ height: 0 !important; /* Flex item scroll için height: 0 gerekli! */ -webkit-overflow-scrolling: touch !important; /* iOS için smooth scrolling */ } .quick-support-info { background: var(--durum-bilgi-acik); border-left: 4px solid var(--durum-bilgi); padding: 16px; border-radius: 8px; margin-bottom: 24px; } .quick-support-info p { margin: 0; font-size: 14px; color: var(--durum-bilgi-metin); line-height: 1.5; } /* Kullanıcı Bilgi Kartı */ .support-user-card { background: linear-gradient(135deg, var(--arka-plan-ana) 0%, var(--arka-plan-altinci) 100%); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; margin-bottom: 24px; display: flex; align-items: center; gap: 16px; } .support-user-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ana-mavi); flex-shrink: 0; } .support-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .support-user-info { flex: 1; } .support-user-info h4 { font-size: 16px; font-weight: 600; color: var(--metin-ana); margin: 0 0 4px 0; } .support-user-info p { font-size: 13px; color: var(--metin-ikincil); margin: 0; display: flex; align-items: center; gap: 6px; } .support-user-info p i { font-size: 12px; color: var(--metin-dorduncu); } /* Support Form */ .quick-support-form .form-group { margin-bottom: 20px; } .quick-support-form label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--metin-ana); font-size: 14px; } .quick-support-form input, .quick-support-form select, .quick-support-form textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--kenarlik-ana); border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; transition: all 0.2s ease; box-sizing: border-box; } .quick-support-form input:focus, .quick-support-form select:focus, .quick-support-form textarea:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); } .quick-support-form textarea { min-height: 120px; resize: vertical; } .quick-support-form select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* Panel Footer */ .quick-support-footer { padding: 20px 24px; border-top: 1px solid var(--kenarlik-ana); display: flex; gap: 12px; } .quick-support-footer .btn-primary { flex: 1; padding: 12px 24px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-koyu) 100%); color: var(--metin-beyaz); border: none; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .quick-support-footer .btn-primary:hover { background: linear-gradient(135deg, var(--ana-mavi-koyu) 0%, var(--ana-mavi-daha-koyu) 100%); box-shadow: 0 4px 12px var(--golge-mavi); transform: translateY(-1px); } .quick-support-footer .btn-secondary { padding: 12px 24px; background: var(--arka-plan-ikincil); color: var(--metin-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .quick-support-footer .btn-secondary:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ikincil); } /* Success Message */ .support-success-message { display: none; text-align: center; padding: 40px 20px; } .support-success-message.active { display: block; } .support-success-icon { width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--ana-yesil-koyu) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--metin-beyaz); font-size: 40px; } .support-success-message h4 { font-size: 20px; font-weight: 600; color: var(--metin-ana); margin: 0 0 12px 0; } .support-success-message p { font-size: 14px; color: var(--metin-ikincil); margin: 0 0 24px 0; line-height: 1.5; } .search-box > i { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--metin-dorduncu) !important; font-size: 16px !important; z-index: 2; pointer-events: none !important; } .search-box input { width: 100%; height: 44px; padding: 0 40px 0 40px !important; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--arka-plan-ikincil); font-size: var(--text-base); color: var(--baslik-ikincil); transition: all 0.2s ease; box-sizing: border-box; } .search-box input::placeholder { color: var(--metin-ucuncu); font-size: var(--text-base); } .search-box .search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--metin-ucuncu); cursor: pointer; padding: 4px; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; transition: all 0.2s ease; z-index: 3; } .search-box .search-clear:hover { background: var(--arka-plan-ikincil); color: var(--metin-ikincil); } .search-box .search-clear i { font-size: 12px; } .search-box input:focus { outline: none; border-color: var(--ana-mavi); background: var(--kart-arka-plan); box-shadow: 0 0 0 2px var(--golge-odak); } .search-box input:focus + i { color: var(--ana-mavi); } /* Search ikon rengi - input odaklanınca tutarlı hale getir */ .search-box:focus-within > i { color: var(--ana-mavi); } /* Arama temizleme butonu - global */ .search-box .search-clear-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--metin-ucuncu); cursor: pointer; padding: 0; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; transition: all 0.2s ease; z-index: 3; } .search-box .search-clear-btn:hover { background: var(--arka-plan-ikincil); color: var(--metin-ikincil); } .search-box .search-clear-btn .clear-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Tüm form elemanları için tek birleşik stil */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { width: 100%; padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); background: var(--kart-arka-plan) !important; color: var(--metin-ana); font-size: var(--text-base); font-family: inherit; transition: all 0.2s ease; box-sizing: border-box; height: 44px; /* Tutarlı yükseklik için */ } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, select:focus { border-color: var(--kenarlik-odak); /* box-shadow: 0 0 0 3px var(--golge-odak); */ outline: none; background-color: var(--kart-arka-plan); } /* ======================================== SELECT OK İKONU - TÜM PROJE GENELİ ======================================== */ /* Tüm select elementleri için tutarlı ok ikonu */ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; padding-right: 40px !important; cursor: pointer; transition: all 0.2s ease; } /* Select hover durumu - ok ikonu mavi */ select:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; } /* Select focus durumu - ok ikonu mavi */ select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; } /* Select elementleri için wrapper yaklaşımı (opsiyonel) */ .select-wrapper { position: relative; display: inline-block; width: 100%; } .select-wrapper::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--metin-ucuncu); font-size: 14px; z-index: 1; } /* Textarea için ayrı stil */ textarea { width: 100%; padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); background: var(--kart-arka-plan); color: var(--metin-ana); font-size: var(--text-base); font-family: inherit; transition: all 0.2s ease; box-sizing: border-box; min-height: 80px; /* Textarea için minimum yükseklik */ resize: vertical; } /* Focus durumu - Temiz Stil */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, textarea:focus, select:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); background-color: var(--kart-arka-plan); } /* Select hover ve focus durumlarında ikon rengini değiştir */ select:hover, select:focus, .filter-select:hover, .filter-select:focus, .modal-content select:hover, .modal-content select:focus, .confirmation-dialog select:hover, .confirmation-dialog select:focus { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-color: var(--kart-arka-plan); } .medication-row select:hover, .medication-row select:focus { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); } /* Disabled durumu */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):disabled, textarea:disabled, select:disabled { background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); cursor: not-allowed; } /* Placeholder stilleri */ input::placeholder, textarea::placeholder { color: var(--metin-dorduncu); } /* Textarea özel ayarları - Temiz Stil */ textarea { resize: vertical; min-height: 80px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.4; padding: 12px; border: 2px solid var(--arka-plan-dorduncu); border-radius: 8px; background: var(--metin-beyaz); color: var(--baslik-ana); } /* Date/Time picker iconları için - Light tema */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: none; opacity: 0.8; cursor: pointer; } /* ======================================================================== ORTAK İŞLEM BUTON SİSTEMİ - TÜM DİĞER TANIMLARI EZER ======================================================================== */ /* GENEL ACTION BUTTON TANIM - EN GÜÇLÜ */ .action-btn { width: 32px !important; height: 32px !important; border: none !important; border-radius: var(--radius-lg) !important; cursor: pointer !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: var(--text-base) !important; padding: 0 !important; min-width: 32px !important; max-width: 32px !important; flex-shrink: 0 !important; } /* EDIT - Düzenle */ .action-btn.edit { background: var(--durum-basarili-acik) !important; color: var(--durum-basarili-metin) !important; } .action-btn.edit:hover { background: var(--durum-basarili) !important; color: var(--arka-plan-ana) !important; } /* VIEW - Görüntüle */ .action-btn.view { background: var(--arka-plan-ucuncu) !important; color: var(--metin-ucuncu) !important; } .action-btn.view:hover { background: var(--ana-mavi) !important; color: var(--arka-plan-ana) !important; } /* PRINT - Yazdır */ .action-btn.print { background: var(--ana-mavi-cok-acik-v2) !important; color: var(--ana-mavi-daha-koyu) !important; } .action-btn.print:hover { background: var(--ana-mavi-daha-koyu) !important; color: var(--arka-plan-ana) !important; } /* EMAIL - E-posta */ .action-btn.email { background: var(--durum-bilgi-acik) !important; color: var(--durum-bilgi-metin) !important; } .action-btn.email:hover { background: var(--ana-mavi) !important; color: var(--arka-plan-ana) !important; } /* DELETE - Sil */ .action-btn.delete { background: var(--durum-hata-acik) !important; color: var(--durum-hata-metin) !important; } .action-btn.delete:hover { background: var(--durum-hata) !important; color: var(--arka-plan-ana) !important; } /* MORE - Daha Fazla */ .action-btn.more { background: var(--arka-plan-ucuncu) !important; color: var(--metin-ucuncu) !important; } .action-btn.more:hover { background: var(--arka-plan-dorduncu) !important; color: var(--metin-ana) !important; } /* CHECK - Onayla/Kontrol */ .action-btn.check { background: var(--durum-bilgi-acik) !important; color: var(--durum-bilgi-metin) !important; } .action-btn.check:hover { background: var(--ana-mavi) !important; color: var(--arka-plan-ana) !important; } /* BELL - Bildirim */ .action-btn.bell { background: var(--durum-uyari-acik) !important; color: var(--durum-uyari-metin) !important; } .action-btn.bell:hover { background: var(--durum-uyari) !important; color: var(--arka-plan-ana) !important; } /* SHARE - Paylaş */ .action-btn.share { background: var(--durum-bilgi-acik) !important; color: var(--durum-bilgi-metin) !important; } .action-btn.share:hover { background: var(--ana-mavi) !important; color: var(--arka-plan-ana) !important; } /* CHART - Grafik/İstatistik */ .action-btn.chart { background: var(--durum-basarili-acik) !important; color: var(--durum-basarili-metin) !important; } .action-btn.chart:hover { background: var(--durum-basarili) !important; color: var(--arka-plan-ana) !important; } /* DOWNLOAD - İndir */ .action-btn.download { background: var(--durum-basarili-acik) !important; color: var(--durum-basarili-metin) !important; } .action-btn.download:hover { background: var(--durum-basarili) !important; color: var(--arka-plan-ana) !important; } /* STOCK-IN - Stok Girişi */ .action-btn.stock-in { background: var(--durum-bilgi-acik) !important; color: var(--durum-bilgi-metin) !important; } .action-btn.stock-in:hover { background: var(--ana-mavi) !important; color: var(--arka-plan-ana) !important; } /* STOCK-OUT - Stok Çıkışı */ .action-btn.stock-out { background: var(--durum-hata-acik) !important; color: var(--durum-hata-metin) !important; } .action-btn.stock-out:hover { background: var(--durum-hata) !important; color: var(--arka-plan-ana) !important; } /* PAYMENT - Ödeme */ .action-btn.payment { background: var(--durum-basarili-acik) !important; color: var(--durum-basarili-metin) !important; } .action-btn.payment:hover { background: var(--durum-basarili) !important; color: var(--arka-plan-ana) !important; } /* REMIND - Hatırlatma */ .action-btn.remind { background: var(--durum-uyari-acik) !important; color: var(--durum-uyari-metin) !important; } .action-btn.remind:hover { background: var(--durum-uyari) !important; color: var(--arka-plan-ana) !important; } /* MEDICATION - İlaç */ .action-btn.medication { background: var(--durum-bilgi-acik) !important; color: var(--durum-bilgi-metin) !important; } .action-btn.medication:hover { background: var(--ana-mavi) !important; color: var(--arka-plan-ana) !important; } /* DISCHARGE - Taburcu */ .action-btn.discharge { background: var(--durum-basarili-acik) !important; color: var(--durum-basarili-metin) !important; } .action-btn.discharge:hover { background: var(--durum-basarili) !important; color: var(--arka-plan-ana) !important; } /* UNDO - Geri Al */ .action-btn.undo { background: var(--durum-uyari-acik) !important; color: var(--durum-uyari-metin) !important; } .action-btn.undo:hover { background: var(--durum-uyari) !important; color: var(--arka-plan-ana) !important; } /* SELECT-ALL - Tümünü Seç/Tamamla */ .action-btn.select-all { background: var(--durum-basarili-acik) !important; color: var(--durum-basarili-metin) !important; } .action-btn.select-all:hover { background: var(--durum-basarili) !important; color: var(--arka-plan-ana) !important; } /* ADD - Ekle */ .action-btn.add { background: var(--durum-basarili-acik) !important; color: var(--durum-basarili-metin) !important; } .action-btn.add:hover { background: var(--durum-basarili) !important; color: var(--arka-plan-ana) !important; } /* VITAL - Vital Gir */ .action-btn.vital { background: var(--durum-hata-acik) !important; color: var(--durum-hata-metin) !important; } .action-btn.vital:hover { background: var(--durum-hata) !important; color: var(--arka-plan-ana) !important; } /* PASSWORD - Şifre Sıfırla */ .action-btn.password { background: var(--durum-bilgi-acik) !important; color: var(--durum-bilgi-metin) !important; } .action-btn.password:hover { background: var(--ana-mavi) !important; color: var(--arka-plan-ana) !important; } /* ACTION BUTTONS CONTAINER */ .action-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; } /* action-buttons içeren td'leri daralt */ td:has(.action-buttons), th:has(.action-buttons) { width: fit-content !important; white-space: nowrap; padding: 8px !important; text-align: center !important; } /* Faturalama sayfası için özel */ .faturalama-page .invoice-table td:has(.action-buttons), .faturalama-page .invoice-table th:has(.action-buttons), .invoice-table td:last-child, .invoice-table th:last-child { width: fit-content !important; min-width: fit-content !important; white-space: nowrap !important; text-align: center !important; } /* İŞLEM KOLONLARI - FIT CONTENT */ .action-col, .actions-col, .table th:has(.action-buttons), .table td:has(.action-buttons), .table th:has(.table-actions), .table td:has(.table-actions) { width: fit-content !important; min-width: fit-content !important; max-width: fit-content !important; white-space: nowrap !important; text-align: center !important; } /* Eski tarayıcılar için fallback */ th[data-action="true"], td[data-action="true"], .table th:has(.table-actions), .table td:has(.table-actions) { width: fit-content !important; min-width: fit-content !important; max-width: fit-content !important; white-space: nowrap !important; text-align: center !important; } /* Genel tanımlar sayfasında data-action="true" için özel kural */ .genel-tanimlar-page td[data-action="true"] { width: 100% !important; min-width: 100% !important; max-width: 100% !important; } /* Hasta sahipleri sayfasında data-action="true" için özel kural - %100 genişlik */ /* .hasta-sahipler-page .owners-table td[data-action="true"], .hasta-sahipler-page .patients-table td[data-action="true"] { width: 100% !important; min-width: 100% !important; max-width: 100% !important; } */ .hasta-sahipler-page .owners-table td[data-action="true"] .table-actions, .hasta-sahipler-page .patients-table td[data-action="true"] .table-actions { width: 100% !important; justify-content: center !important; } /* ÖZEL DURUMLAR */ .faturalama-page .action-btn.more { z-index: 15 !important; } /* #region Global Reset ve Base Styles - Genel Sıfırlama ve Temel Stiller */ /* CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-y: hidden !important; /* Sayfa seviyesinde scroll yok, sadece content-wrapper içinde */ overflow-x: hidden !important; height: 100vh !important; max-height: 100vh !important; scrollbar-width: thin; /* Firefox için ince scrollbar */ scrollbar-color: var(--kenarlik-vurgulu) transparent; /* Firefox için renk */ } /* Webkit tarayıcılar (Chrome, Safari, Edge) için custom scrollbar */ html::-webkit-scrollbar { width: 8px; } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background-color: var(--kenarlik-vurgulu); border-radius: 4px; } html::-webkit-scrollbar-thumb:hover { background-color: var(--kenarlik-guclu); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--arka-plan-ikincil); color: var(--metin-ana); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: hidden !important; /* Sayfa seviyesinde scroll yok, sadece content-wrapper içinde */ overflow-x: hidden !important; height: 100vh !important; /* Body yüksekliği viewport ile sınırlı */ max-height: 100vh !important; -webkit-tap-highlight-color: transparent !important; /* Mobil cihazlarda tıklama sonrası mavi zemin rengini kaldır */ -webkit-touch-callout: none; } /* Tema değişikliği için body background-color - JavaScript inline style yerine */ [data-theme="light"] body { background-color: #f8fafc; } [data-theme="dark"] body { background-color: #191d25; } .page-wrapper { flex: 1; overflow-y: hidden !important; overflow-x: hidden !important; height: 100% !important; max-height: 100vh !important; } /* Mobile menu button */ .mobile-menu-btn { display: none; background: none; border: none; font-size: 20px; color: var(--metin-ana); cursor: pointer; padding: var(--spacing-sm); margin-right: var(--spacing-md); } /* Sidebar overlay */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--golge-dorduncu); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; cursor: pointer; } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* Scrollbar Stilleri */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--arka-plan-ucuncu); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--arka-plan-besinci); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--metin-dorduncu); } /* #endregion */ /* #region File Upload Stilleri */ .file-preview { margin: 10px 0; padding: 10px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); background: var(--arka-plan-ikincil); display: flex; align-items: center; gap: 10px; } .file-preview img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; } .file-preview .file-info { flex: 1; } .file-preview .file-name { font-weight: 600; color: var(--metin-ana); } .file-preview .file-size { font-size: var(--text-sm); color: var(--metin-ucuncu); } .file-preview .remove-btn { background: var(--durum-hata); color: var(--arka-plan-ana); border: none; border-radius: 4px; width: 24px; height: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; } .file-preview .remove-btn:hover { background: var(--durum-hata-koyu); } .upload-area.drag-over { border-color: var(--kenarlik-ana) !important; background-color: var(--durum-basarili-acik) !important; } .btn-small.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .status-badge.verified { background: var(--durum-basarili); color: var(--arka-plan-ana); padding: 4px 8px; border-radius: 4px; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; } .status-badge.editing { background: var(--durum-uyari); color: var(--arka-plan-ana); padding: 4px 8px; border-radius: 4px; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; } .status-badge.sent { background: var(--ana-mavi); color: var(--arka-plan-ana); padding: 4px 8px; border-radius: 4px; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; } /* #endregion */ /* #region Tablo Satır Hover Stilleri - GENEL */ /* Tüm tablolar için ortak hover stili */ table tbody tr:hover { background: var(--tablo-hover) !important; transition: background-color 0.2s ease !important; } /* Özel sayfa tabloları için hover stilleri */ /* .tedaviler-page .treatments-table tbody tr:hover, .reports-table tbody tr:hover, .consent-table tbody tr:hover { background: var(--arka-plan-ikincil) !important; } */ /* .stok-page .stock-table tbody tr:hover, .faturalama-page .invoice-table tbody tr:hover { background: var(--arka-plan-ucuncu) !important; } */ /* #endregion */ /* #region Dropdown Menü Stilleri - GENEL */ .dropdown-menu { position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; background: var(--arka-plan-ana) !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 8px !important; box-shadow: var(--golge-ana) 0 4px 12px !important; z-index: 999999999 !important; min-width: 180px !important; width: 180px !important; opacity: 0 !important; visibility: hidden !important; transform: none !important; transition: none !important; margin-top: 5px !important; overflow: visible !important; } /* Faturalama sayfası için dropdown menü - JavaScript ile position: fixed kullanılıyor */ .faturalama-page .invoice-table .dropdown-menu { position: fixed !important; transition: none !important; } .faturalama-page .invoice-table .dropdown-menu.show { display: block !important; opacity: 1 !important; visibility: visible !important; top: var(--dropdown-top, 100%) !important; right: var(--dropdown-right, 0) !important; left: auto !important; width: var(--dropdown-width, 180px) !important; transition: none !important; } .dropdown-menu.show { opacity: 1 !important; visibility: visible !important; transform: none !important; display: block !important; } .dropdown-item { display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; padding: 8px 12px; border: none; background: none; text-align: left; font-size: var(--text-base); color: var(--metin-ana); cursor: pointer; transition: background-color 0.2s; } .dropdown-item:hover { background-color: var(--arka-plan-ucuncu); } .dropdown-item i { width: 16px; text-align: center; } .dropdown-item:first-child { border-radius: 8px 8px 0 0; } .dropdown-item:last-child { border-radius: 0 0 8px 8px; } .dropdown-item:only-child { border-radius: var(--radius-lg); } /* Action buttons container için relative positioning - GENEL */ .invoice-actions, .action-buttons, .stock-actions { position: relative !important; z-index: 1000; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; /* width: fit-content !important; */ } /* #endregion */ /* #region Form Stilleri - Form Styles */ /* ===== ORTAK FORM BASE STİLLERİ ===== */ /* .form-group { margin-bottom: var(--spacing-lg); } */ /* .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); } */ .form-group label { display: flex; font-weight: var(--font-semibold); font-size: var(--text-base); line-height: 1.4; color: var(--metin-ana); margin-bottom: 8px; } /* ===== FORM ELEMENT BOYUTLARI ===== */ .form-sm .form-group { margin-bottom: var(--spacing-md); } .form-sm .form-group label { font-size: var(--text-sm); margin-bottom: var(--spacing-xs); } .form-lg .form-group { margin-bottom: var(--spacing-xl); } .form-lg .form-group label { font-size: var(--text-lg); margin-bottom: var(--spacing-md); } /* Form-group stilleri global input stillerini kullanıyor */ .form-group input[type="datetime-local"] { font-family: inherit; } /* #endregion */ /* #region Buton Stilleri - Button Styles */ /* ===== ORTAK BUTON BASE STİLLERİ ===== */ .btn-base { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-2xl); border: none; border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer; transition: var(--transition-normal); text-decoration: none; position: relative; overflow: hidden; min-height: 44px; box-sizing: border-box; } .btn-base:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .btn-base i { font-size: var(--text-lg); } /* ===== BUTON BOYUTLARI ===== */ .btn-sm { padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--text-sm); min-height: calc(var(--spacing-3xl) + var(--spacing-sm)); } .btn-lg { padding: var(--spacing-lg) var(--spacing-3xl); font-size: var(--text-lg); min-height: calc(var(--spacing-4xl) + var(--spacing-lg)); } .btn-xl { padding: var(--spacing-xl) var(--spacing-4xl); font-size: var(--text-xl); min-height: calc(var(--spacing-5xl) + var(--spacing-md)); } /* ===== BUTON VARYANTLARI ===== */ /* Ortak buton stilleri */ .btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-ai { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 500; cursor: pointer; /* transition: all 0.2s ease; */ text-decoration: none; border: none; } /* Primary Button */ .btn-primary { background: var(--ana-mavi-koyu); color: var(--metin-beyaz); /* box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); */ } .btn-primary i { color: var(--metin-beyaz) !important; } .btn-primary:hover { background: var(--ana-mavi); /* box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); */ /* transform: translateY(-1px); */ } .btn-primary:disabled { background: var(--arka-plan-ucuncu); color: var(--metin-dorduncu); cursor: not-allowed; box-shadow: none; transform: none; } /* Secondary Button */ .btn-secondary { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); color: var(--arka-plan-ana); } .btn-secondary:hover { background: linear-gradient(135deg, var(--durum-basarili-koyu) 0%, var(--ana-yesil-koyu) 100%); /* box-shadow: var(--shadow-sm); */ /* transform: translateY(-1px); */ } /* Outline Button */ .btn-outline { /* background: transparent; */ background-color: var(--temizle-buton-bg); color: var(--metin-ana); border: 1px solid var(--kenarlik-ana); font-weight: 600; /* color: var(--ana-mavi); font-weight: 600; border: 1px solid var(--ana-mavi); */ } .btn-outline:hover { background: var(--ana-mavi-cok-acik-v2); border-color: var(--ana-mavi-cok-acik); color: var(--ana-mavi-daha-koyu); /* box-shadow: var(--shadow-sm); */ /* transform: translateY(-1px); */ } /* Danger Button */ .btn-danger { background: var(--gradient-kirmizi); color: var(--metin-beyaz); border: 1px solid var(--ana-kirmizi-koyu); /* box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); */ } .btn-danger:hover { background: var(--ana-kirmizi-koyu); /* transform: translateY(-1px); */ /* box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4); */ } /* Success Button */ .btn-success { background: var(--ana-yesil); color: var(--metin-beyaz); /* box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); */ } .btn-success:hover { background: var(--durum-basarili-koyu); /* box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4); */ /* transform: translateY(-1px); */ } /* Warning Button */ .btn-warning { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%); color: var(--arka-plan-ana); /* box-shadow: var(--shadow-sm); */ } /* Info Button */ .btn-info { background: linear-gradient(135deg, var(--ana-cyan) 0%, var(--ana-cyan-koyu) 100%); color: var(--arka-plan-ana); /* box-shadow: var(--shadow-sm); */ } /* #endregion */ /* #region Ortak Kart Stilleri - Common Card Styles */ /* ===== ORTAK KART BASE STİLLERİ ===== */ .card-base { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); transition: var(--transition-normal); overflow: hidden; } .card-base:hover { box-shadow: var(--shadow-md); /* transform: translateY(-1px); */ } /* .card-header { padding: var(--spacing-lg) var(--spacing-xl); border-bottom: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ikincil); border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: space-between; } */ .card-body { padding: var(--spacing-lg); border-radius: 0 0 12px 12px; } .card-footer { padding: var(--spacing-xl); border-top: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ikincil); } /* ===== KART BOYUTLARI ===== */ .card-sm .card-header, .card-sm .card-body, .card-sm .card-footer { padding: var(--spacing-lg); } .card-lg .card-header, .card-lg .card-body, .card-lg .card-footer { padding: var(--spacing-2xl); } /* ===== KART VARYANTLARI ===== */ .card-primary { border-left: 4px solid var(--ana-mavi); } .card-success { border-left: 4px solid var(--ana-yesil); } .card-warning { border-left: 4px solid var(--ana-sari); } .card-danger { border-left: 4px solid var(--ana-kirmizi); } .card-info { border-left: 4px solid var(--ana-cyan); } /* #endregion */ /* #region Patient Detail Modal Styles - Hasta Detay Modal Stilleri */ .patient-detail-container { max-width: 100%; margin: 0 auto; } .patient-detail-container .patient-avatar i { color: var(--metin-ana); } #patientDetailModal .detail-section h4 { margin: 0; } /* Hospitalizasyon Modal Stilleri */ #staticPatientDetailModal .modal-header, #dynamicPatientDetailModal .modal-header { background: var(--arka-plan-ikincil); border-bottom: 2px solid var(--kenarlik-ikincil); } #staticPatientDetailModal .modal-header-content, #dynamicPatientDetailModal .modal-header-content { display: flex; align-items: center; gap: 16px; flex: 1; } #staticPatientDetailModal .patient-avatar, #dynamicPatientDetailModal .patient-avatar { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--arka-plan-ucuncu); border: 2px solid var(--kenarlik-ikincil); flex-shrink: 0; padding: 8px; } #staticPatientDetailModal .patient-avatar img, #dynamicPatientDetailModal .patient-avatar img { width: 100%; height: 100%; object-fit: contain; } #staticPatientDetailModal .patient-header-info h3, #dynamicPatientDetailModal .patient-header-info h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--metin-ana); line-height: 1.3; } #staticPatientDetailModal .patient-header-info p, #dynamicPatientDetailModal .patient-header-info p { margin: 4px 0 0 0; font-size: 14px; color: var(--metin-ikincil); font-weight: 500; } /* Admission Info Section - Grid Layout */ #staticPatientDetailModal .admission-info-section, #dynamicPatientDetailModal .admission-info-section { padding: 0; margin-bottom: 24px; background: transparent; border-radius: 0; } /* #dynamicPatientDetailModal - Admission Info Section Güzel Stiller */ #dynamicPatientDetailModal .admission-info-section { display: flex; align-items: center; gap: 24px; padding: 24px; background: linear-gradient(135deg, var(--arka-plan-ana) 0%, var(--arka-plan-altinci) 100%); border: 1px solid var(--kenarlik-ikincil); border-radius: 16px; margin-bottom: 0; box-shadow: 0 2px 8px var(--golge-hover); transition: all 0.3s ease; } /* #dynamicPatientDetailModal .admission-info-section:hover { box-shadow: 0 4px 12px var(--golge-ana); border-color: var(--ana-mavi); } */ #dynamicPatientDetailModal .admission-info-section .patient-avatar { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; /* background: #ffffff; */ border: 3px solid var(--kenarlik-ikincil); box-shadow: 0 4px 12px var(--golge-ana); flex-shrink: 0; padding: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* #dynamicPatientDetailModal .admission-info-section .patient-avatar:hover { transform: scale(1.05); border-color: var(--ana-mavi); box-shadow: 0 6px 16px var(--golge-mavi); } */ #dynamicPatientDetailModal .admission-info-section .patient-avatar i { font-size: 36px; color: var(--metin-beyaz); } #dynamicPatientDetailModal .admission-info-section .patient-avatar img { width: 100%; height: 100%; object-fit: contain; } #dynamicPatientDetailModal .admission-info-section .admission-basic-info { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; } #dynamicPatientDetailModal .admission-info-section .admission-basic-info h2 { margin: 0; font-size: 28px; font-weight: 700; color: var(--metin-ana); line-height: 1.2; } #dynamicPatientDetailModal .admission-info-section .admission-basic-info .owner-info { margin: 0; font-size: 15px; color: var(--metin-ikincil); font-weight: 500; display: flex; align-items: center; justify-content: flex-start; gap: 8px; } #dynamicPatientDetailModal .admission-info-section .admission-basic-info .owner-info i { font-size: 14px; color: var(--ana-mavi); } #dynamicPatientDetailModal .admission-info-section .admission-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; } #dynamicPatientDetailModal .admission-info-section .admission-stats .stat-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ikincil); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--metin-ana); transition: all 0.2s ease; box-shadow: 0 1px 3px var(--golge-ana); cursor: default; } /* #dynamicPatientDetailModal .admission-info-section .admission-stats .stat-item:hover { border-color: var(--ana-mavi); background: var(--ana-mavi-acik); transform: translateY(-1px); box-shadow: 0 2px 6px var(--golge-mavi); } */ #dynamicPatientDetailModal .admission-info-section .admission-stats .stat-item i { font-size: 16px; color: var(--ana-mavi); } #dynamicPatientDetailModal .admission-info-section .admission-stats .stat-item span { color: var(--metin-ana); } /* Bakım türü özel renkleri */ #dynamicPatientDetailModal .admission-info-section .admission-stats .stat-item[class*="care-type-yoğun"] { background: linear-gradient(135deg, var(--durum-uyari-acik) 0%, var(--durum-uyari-kenarlik) 100%); border-color: var(--ana-sari-acik); color: var(--durum-uyari-metin); } #dynamicPatientDetailModal .admission-info-section .admission-stats .stat-item[class*="care-type-yoğun"] i { color: var(--durum-uyari); } #dynamicPatientDetailModal .admission-info-section .admission-stats .stat-item[class*="care-type-normal"] { background: linear-gradient(135deg, var(--durum-bilgi-acik) 0%, var(--durum-bilgi-kenarlik) 100%); border-color: var(--ana-mavi-acik); color: var(--durum-bilgi-metin); } #dynamicPatientDetailModal .admission-info-section .admission-stats .stat-item[class*="care-type-normal"] i { color: var(--ana-mavi); } #staticPatientDetailModal .admission-info-grid, #dynamicPatientDetailModal .admission-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } #staticPatientDetailModal .info-card, #dynamicPatientDetailModal .info-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ikincil); border-radius: 12px; transition: all 0.2s ease; } #staticPatientDetailModal .info-card:hover, #dynamicPatientDetailModal .info-card:hover { border-color: var(--ana-mavi); box-shadow: 0 2px 8px var(--golge-mavi); } #staticPatientDetailModal .info-icon, #dynamicPatientDetailModal .info-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ana-mavi-acik); color: var(--ana-mavi); border-radius: 10px; flex-shrink: 0; } #staticPatientDetailModal .info-icon i, #dynamicPatientDetailModal .info-icon i { font-size: 18px; } #staticPatientDetailModal .info-content, #dynamicPatientDetailModal .info-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #staticPatientDetailModal .info-label, #dynamicPatientDetailModal .info-label { font-size: 12px; color: var(--metin-ikincil); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } #staticPatientDetailModal .info-value, #dynamicPatientDetailModal .info-value { font-size: 15px; color: var(--metin-ana); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #staticPatientDetailModal .admission-timeline, #dynamicPatientDetailModal .admission-timeline { padding: 0; background: transparent; border-radius: 0; border: none; box-shadow: none; } /* #region Static Patient Detail Modal - Scoped timeline/badge/button styles */ #staticPatientDetailModal .detail-section, #dynamicPatientDetailModal .detail-section { margin-bottom: 20px; } #staticPatientDetailModal .admission-timeline, #dynamicPatientDetailModal .admission-timeline { position: relative; padding: 0; background: transparent; border: 0; box-shadow: none; } #staticPatientDetailModal .admission-timeline-item, #dynamicPatientDetailModal .admission-timeline-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } #staticPatientDetailModal .admission-timeline-item:last-child, #dynamicPatientDetailModal .admission-timeline-item:last-child { margin-bottom: 0; } #staticPatientDetailModal .admission-timeline-item i, #dynamicPatientDetailModal .admission-timeline-item i { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); flex-shrink: 0; } #staticPatientDetailModal .admission-timeline-content, #dynamicPatientDetailModal .admission-timeline-content { flex: 1; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ikincil); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } #staticPatientDetailModal .admission-timeline-content span, #dynamicPatientDetailModal .admission-timeline-content span { font-size: 14px; font-weight: 600; color: var(--metin-ana); } #staticPatientDetailModal .admission-timeline-content p, #dynamicPatientDetailModal .admission-timeline-content p { margin: 0; font-size: 13px; color: var(--metin-ikincil); } #staticPatientDetailModal .admission-timeline-content time, #dynamicPatientDetailModal .admission-timeline-content time { font-size: 12px; color: var(--metin-ikincil); background: var(--arka-plan-ucuncu); border: 1px solid var(--kenarlik-ikincil); padding: 4px 10px; border-radius: 12px; width: fit-content; } #staticPatientDetailModal .status-badge, #dynamicPatientDetailModal .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--kenarlik-ikincil); background: var(--arka-plan-ana); color: var(--metin-ana); font-size: 12px; font-weight: 600; } #staticPatientDetailModal .status-badge.active, #dynamicPatientDetailModal .status-badge.active { border-color: var(--ana-mavi); color: var(--ana-mavi); } #staticPatientDetailModal .modal-footer .btn-outline, #staticPatientDetailModal .modal-footer .btn-info, #staticPatientDetailModal .modal-footer .btn-warning, #staticPatientDetailModal .modal-footer .btn-primary, #dynamicPatientDetailModal .modal-footer .btn-outline, #dynamicPatientDetailModal .modal-footer .btn-info, #dynamicPatientDetailModal .modal-footer .btn-warning, #dynamicPatientDetailModal .modal-footer .btn-primary { white-space: nowrap; } /* #endregion */ /* Force modal-body typography to be scoped to the patient detail modals */ #staticPatientDetailModal .modal-body p { margin: 0; padding: 0; color: var(--metin-ana); line-height: 1.6; } #staticPatientDetailModal .modal-body span { margin: 0; padding: 0; color: var(--metin-ana); } #staticPatientDetailModal .modal-body label { margin: 0; padding: 0; color: var(--metin-ikincil); font-weight: 600; } #dynamicPatientDetailModal .modal-body p { margin: 0; /* padding: 0; */ color: var(--metin-ana); line-height: 1.6; font-size: 14px; } #dynamicPatientDetailModal .modal-body span { margin: 0; padding: 0; color: var(--metin-ana); width: fit-content; } #dynamicPatientDetailModal .modal-body label { margin: 0; padding: 0; color: var(--metin-ikincil); font-weight: 600; } .admission-stats { display: flex; gap: var(--spacing-xl); margin-top: var(--spacing-md); flex-wrap: wrap; } .stat-item { display: flex; align-items: center; gap: var(--spacing-sm); background: rgba(255, 255, 255, 0.15); padding: 8px 12px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; } .stat-item i { font-size: 16px; } .care-type-yoğun-bakım { background: var(--seffaf-kirmizi) !important; border: 1px solid var(--durum-hata-kenarlik) !important; color: var(--ana-kirmizi-koyu); } .care-type-normal-yatış { background: var(--seffaf-yesil); border: 1px solid var(--durum-basarili-kenarlik); } .vital-actions, .treatment-actions { margin-top: 12px; text-align: center; } /* Small Button - Küçük Buton */ .btn-small { padding: 8px 12px; font-size: var(--text-sm); border-radius: var(--radius-md); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; /* transition: all 0.2s ease; */ min-width: auto; } .btn-small.primary { background: var(--ana-mavi); color: var(--arka-plan-ana); border: 1px solid var(--ana-mavi); /* transition: all 0.2s ease; */ } .btn-small.primary:hover { background: var(--ana-mavi-daha-koyu); border-color: var(--ana-mavi-daha-koyu); /* transform: translateY(-1px); */ /* box-shadow: 0 2px 8px var(--golge-mavi); */ } .btn-small.secondary { background: var(--durum-basarili); color: var(--arka-plan-ana); border: 1px solid var(--durum-basarili); /* transition: all 0.2s ease; */ } .btn-small.secondary:hover { background: var(--ana-yesil-koyu); border-color: var(--ana-yesil-koyu); /* transform: translateY(-1px); */ /* box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); */ } /* Icon Button - İkon Butonu */ .btn-icon { width: 32px; height: 32px; border: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ana); border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; color: var(--metin-ucuncu); cursor: pointer; /* transition: all 0.2s ease; */ padding: 0; min-width: 32px; } .btn-icon:hover { background: var(--arka-plan-ikincil); color: var(--ana-mavi); border-color: var(--ana-mavi); } .btn-small.outline { background: var(--arka-plan-ana); color: var(--metin-ucuncu); border: 1px solid var(--kenarlik-ana); /* transition: all 0.2s ease; */ } .btn-small.outline:hover { background: var(--arka-plan-ikincil); border-color: var(--ana-mavi); color: var(--ana-mavi); /* transform: translateY(-1px); */ /* box-shadow: 0 2px 8px var(--golge-ana); */ } .btn-small.danger { background: var(--durum-hata); color: var(--arka-plan-ana); border: 1px solid var(--durum-hata); /* transition: all 0.2s ease; */ justify-content: center; } .btn-small.danger:hover { background: var(--durum-hata-koyu); border-color: var(--durum-hata-koyu); /* transform: translateY(-1px); */ /* box-shadow: 0 2px 8px var(--golge-kirmizi); */ color: var(--metin-beyaz); } .btn-small.warning { background: var(--durum-uyari); color: var(--arka-plan-ana); border: 1px solid var(--durum-uyari); /* transition: all 0.2s ease; */ } .btn-small.warning:hover { background: var(--ana-sari-koyu); border-color: var(--ana-sari-koyu); /* transform: translateY(-1px); */ /* box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); */ } .btn-small.success { background: var(--durum-basarili); color: var(--arka-plan-ana); border: 1px solid var(--durum-basarili); /* transition: all 0.2s ease; */ } .btn-small.success:hover { background: var(--ana-yesil-koyu); border-color: var(--ana-yesil-koyu); /* transform: translateY(-1px); */ /* box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); */ } .todo-actions { display: flex; gap: 6px; align-items: center; } .todo-actions .btn-small { padding: 6px 8px; min-width: 30px; } /* Randevu Detay Modal Stilleri */ .appointment-detail { display: flex; flex-direction: column; gap: var(--spacing-lg); } .detail-row { display: flex; align-items: center; gap: var(--spacing-md); padding: 8px 0; border-bottom: 1px solid var(--arka-plan-ucuncu); } .detail-row:last-child { border-bottom: none; } .detail-row label { font-weight: 600; color: var(--metin-ana); min-width: 120px; font-size: var(--text-base); } .detail-row span { color: var(--metin-ucuncu); font-size: var(--text-base); } /* Takvim Navigasyon Butonları */ .calendar-nav { background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 8px 12px; cursor: pointer; /* transition: all 0.2s ease; */ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .calendar-nav:hover { background: var(--arka-plan-dorduncu); border-color: var(--kenarlik-ana); } .calendar-nav i { font-size: 16px; color: var(--metin-ucuncu); } .today-btn { background: var(--ana-mavi); color: var(--arka-plan-ana); border-color: var(--kenarlik-ana); } .today-btn:hover { background: var(--ana-mavi); border-color: var(--kenarlik-ana); } /* .today-btn i { color: var(--arka-plan-ana); } */ /* Modal Footer Button Styles - Modal Alt Buton Stilleri */ /* .modal-footer { display: flex; gap: var(--spacing-md); justify-content: flex-end; align-items: center; padding: 20px; background: var(--arka-plan-ikincil); border-top: 1px solid var(--kenarlik-ana); border-radius: 0 0 12px 12px; position: relative; z-index: 1002; } */ /* Modal Buton Stilleri - Yeniden Tasarlanmış */ .modal-footer .btn { padding: 12px 24px; border-radius: 10px; font-weight: 500; font-size: var(--text-base); cursor: pointer; /* transition: all 0.2s ease; */ display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); border: none; min-width: 100px; position: relative; overflow: hidden; } .modal-footer .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s ease; } .modal-footer .btn:hover::before { left: 100%; } .modal-footer .btn-primary:hover { background: var(--ana-mavi-daha-koyu); /* box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); */ /* transform: translateY(-1px); */ } /* Warning Button */ .modal-footer .btn-warning { background: var(--ana-sari); color: var(--metin-beyaz); box-shadow: 0 4px 12px var(--golge-sari); } .modal-footer .btn-warning:hover { background: var(--ana-sari-koyu); /* box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4); */ /* transform: translateY(-1px); */ } /* Consent Actions Layout */ .consent-actions { display: flex; justify-content: space-between; align-items: center; } .consent-actions-left { display: flex; align-items: center; gap: 10px; } .consent-actions-right { display: flex; gap: 12px; align-items: center; } /* Action Buttons Layout */ /* Artık genel .action-buttons kullanılıyor */ .action-buttons-left { display: flex; align-items: center; } .action-buttons-right { display: flex; gap: 12px; align-items: center; } .modal-footer-left { display: flex; align-items: center; position: relative; z-index: 1003; } .modal-footer-right { display: flex; gap: 12px; align-items: center; position: relative; z-index: 1003; } /* Modifier Info Styling */ .stat-item.modifier-info { display: flex; align-items: center; background: var(--duzenleyen-kisi-bg); border: none; border-radius: 200px; padding: 1px 10px 1px 1px; gap: 3px; width: fit-content; cursor: pointer; } .modifier-avatar-small { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; border: 2px solid var(--kenarlik-ana); } .modifier-avatar-small img { width: 100%; height: 100%; object-fit: cover; } .modifier-text { font-size: 12px; color: var(--metin-ikincil); font-weight: 500; margin-top: 1px; } /* Info Button */ .modal-footer .btn-info { background: var(--ana-cyan); color: var(--metin-beyaz); box-shadow: 0 4px 12px var(--golge-ana); } .modal-footer .btn-info:hover { background: var(--ana-cyan-koyu); /* box-shadow: 0 6px 16px rgba(34, 211, 238, 0.4); */ /* transform: translateY(-1px); */ } /* Faturalama - yeşil ikincil buton */ .faturalama-page .action-bar .btn-secondary { background: var(--ana-yesil); color: var(--metin-beyaz); } .faturalama-page .action-bar .btn-secondary:hover { background: var(--ana-yesil-koyu); } /* E-Fatura badge */ .faturalama-page .invoice-number .einvoice-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); border: 1px solid var(--durum-bilgi-kenarlik); margin-top: 6px; } /* Outline Button */ .modal-footer .btn-outline { background: transparent; color: var(--metin-ikincil); border: 2px solid var(--kenarlik-ana); box-shadow: none; } .modal-footer .btn-outline:hover { background: var(--arka-plan-ikincil); color: var(--metin-ana); border-color: var(--kenarlik-ana); /* transform: translateY(-1px); */ /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */ } /* .modal-footer .btn-secondary:hover { background: var(--arka-plan-dorduncu); box-shadow: 0 6px 16px var(--golge-ikincil); transform: translateY(-1px); } */ .admission-timeline { position: relative; padding-left: 20px; } /* .admission-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--arka-plan-dorduncu); } */ .timeline-item { position: relative; margin-bottom: 20px; } .timeline-marker { position: absolute; left: -16px; top: 4px; width: 12px; height: 12px; background: var(--ana-mavi); border-radius: 50%; border: 3px solid var(--arka-plan-ana); box-shadow: 0 0 0 2px var(--arka-plan-dorduncu); } .timeline-content { background: var(--arka-plan-ikincil); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .timeline-time { font-size: var(--text-sm); font-weight: 600; color: var(--ana-mavi); margin-bottom: 4px; display: block; } .timeline-text { color: var(--metin-ana); font-size: var(--text-base); line-height: 1.5; margin: 0; } /* Ana Patient Avatar Stili - Tüm sayfalar için geçerli */ /* .patient-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } */ .patient-avatar { /* width: 60px; */ /* height: 60px; */ /* border-radius: 50%; */ display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } /* Patient Avatar İkonları - Güçlendirme */ .patient-avatar i { /* color: var(--metin-beyaz); */ color: var(--pet-avatar-icon); font-size: 32px; display: block !important; visibility: visible !important; opacity: 1 !important; margin: 0 !important; padding: 0 !important; } .patient-avatar img { width: 48px; height: 48px; object-fit: contain; } .critical-patient-item .patient-avatar i { font-size: 14px; } .critical-patient-item .patient-avatar img { width: 32px; height: 32px; object-fit: contain; } /* Normal Yatış Hasta Stili */ .normal-patient-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); margin-bottom: 8px; border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .normal-patient-item:hover { background: var(--arka-plan-ucuncu); transform: translateX(2px); } .normal-patient-item .patient-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .normal-patient-item .patient-info-compact { flex: 1; } .normal-patient-item .patient-info-compact h4 { font-size: 14px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 4px 0; } .normal-patient-item .patient-info-compact p { font-size: 12px; color: var(--metin-ikincil); margin: 0; } .normal-patient-item .vital-indicator { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .normal-patient-item .vital-indicator.stable { background: var(--ana-yesil); color: white; } .normal-header { margin-bottom: 8px; } .normal-label { font-size: 12px; font-weight: 600; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; } /* Modal türleri için ek renkler */ /* .patient-avatar.köpek { background: linear-gradient(135deg, var(--ana-sari-acik) 0%, var(--ana-sari) 100%) !important; } .patient-avatar.kedi { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%) !important; } .patient-avatar.bird { background: linear-gradient(135deg, var(--ana-cyan) 0%, var(--ana-cyan-koyu) 100%) !important; } .patient-avatar.rabbit { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--ana-sari-koyu) 100%) !important; } .patient-avatar.other { background: linear-gradient(135deg, var(--metin-ikincil) 0%, var(--baslik-ucuncu) 100%) !important; } */ .patient-basic-info h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; color: var(--arka-plan-ana); } .patient-basic-info p { margin: 4px 0; font-size: 16px; opacity: 0.9; } /* Genel Detail Section Stili */ .detail-section { /* background: var(--arka-plan-ikincil); */ border-radius: var(--radius-xl); padding: 20px; /* margin-bottom: 20px; */ border: 1px solid var(--kenarlik-ana); box-shadow: 0 2px 4px var(--golge-ana); } .detail-section:last-child { margin-bottom: 0; } /* Özel Durumlar */ .legal-modal .detail-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--kenarlik-ana); background: transparent; box-shadow: none; border-radius: 0; padding: 0; border: none; } .legal-modal .detail-section:last-child { border-bottom: none; margin-bottom: 0; } /* Treatment Detail Modal */ #treatmentDetailModal .detail-section { margin-bottom: 24px; padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border-left: 4px solid var(--ana-mavi); } .detail-section h4 { font-size: 18px; font-weight: 600; color: var(--metin-ana); margin-bottom: 16px; display: flex; align-items: center; gap: var(--spacing-sm); } .detail-section h4 i { color: var(--ana-mavi); } .diagnosis-text { font-size: 16px; color: var(--metin-ucuncu); line-height: 1.6; padding: 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border-left: 4px solid var(--ana-mavi); } .vital-detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); } /* .vital-detail-item { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: 12px; background: var(--kart-arka-plan); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } */ .vital-detail-item i { font-size: 18px; color: var(--ana-mavi); width: 20px; text-align: center; } .vital-detail-label { font-weight: 500; color: var(--metin-ana); min-width: 80px; } .vital-detail-value { font-weight: 600; color: var(--metin-ana); font-size: 16px; } .vital-detail-status { padding: 4px 8px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; } .status-normal { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .status-warning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .status-good { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .status-neutral { background: var(--arka-plan-ucuncu); color: var(--metin-ana); } .treatment-detail-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .treatment-detail-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .treatment-detail-item i { font-size: 18px; color: var(--ana-yesil); width: 20px; text-align: center; } .treatment-text { flex: 1; font-weight: 500; color: var(--metin-ana); } .treatment-next { font-size: var(--text-sm); color: var(--metin-ucuncu); background: var(--arka-plan-dorduncu); padding: 4px 8px; border-radius: 4px; } .notes-container { display: flex; flex-direction: column; gap: var(--spacing-md); } .note-item { padding: 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border-left: 4px solid var(--ana-mavi); } .note-time { font-size: var(--text-sm); color: var(--metin-ucuncu); font-weight: 500; margin-bottom: 4px; } .note-text { color: var(--metin-ana); line-height: 1.5; } .notification-form { display: flex; flex-direction: column; gap: var(--spacing-lg); } .contact-methods { display: flex; gap: var(--spacing-lg); margin-top: 8px; } .contact-methods label { display: flex; align-items: center; gap: 6px; font-size: var(--text-base); color: var(--metin-ana); cursor: pointer; } .contact-methods input[type="checkbox"] { margin: 0; } .discharge-form { display: flex; flex-direction: column; gap: var(--spacing-lg); } .patient-info-card { background: var(--arka-plan-ikincil); padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); text-align: center; } .patient-info-card h4 { font-size: 20px; font-weight: 600; color: var(--metin-ana); margin-bottom: 8px; } .patient-info-card p { margin: 4px 0; color: var(--metin-ucuncu); font-size: var(--text-base); } /* #endregion */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--arka-plan-ikincil); color: var(--metin-ana); line-height: 1.5; display: flex; min-height: 100vh; } */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* Genel - Ortak Sayfa Stilleri */ /* ------------------------------------ */ /* #region Tab System - Tab Sistemi */ .inpatient-tabs { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); overflow: hidden; border: 1px solid var(--kenarlik-ana); margin-bottom: 0; } /* .tab-buttons { display: flex; background: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); } */ .tab-btn { flex: 1; padding: 20px 24px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); font-size: 16px; font-weight: 600; color: var(--metin-ucuncu); cursor: pointer; /* transition: all 0.3s ease; */ position: relative; } .tab-btn:hover { background: rgba(59, 130, 246, 0.05); color: var(--ana-mavi); } .tab-btn.active { background: var(--arka-plan-ana); color: var(--ana-mavi); /* box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); */ } .tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .tab-btn i { font-size: 18px; } .tab-content { display: none; padding: 32px; min-height: 470px; } .tab-content.active { display: block !important; animation: tabFadeIn 0.3s ease; } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tab-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--kenarlik-ana); } .tab-header .tab-title { display: flex; flex-direction: column; gap: 4px; } .tab-header .tab-title h3 { margin: 0; } .tab-header .tab-title p { margin: 0; color: var(--metin-ikincil); font-size: 14px; } .tab-header .action-right, .tab-header .tab-actions { display: flex; align-items: center; gap: 15px; } .tab-header .filter-group { display: flex; align-items: center; gap: var(--spacing-md); } .tab-header .search-group { display: flex; align-items: center; gap: var(--spacing-sm); } /* Tab header filter-select özel stilleri */ .tab-header .filter-select { padding: var(--spacing-sm) 40px var(--spacing-sm) var(--spacing-md); min-width: 120px; height: 40px; box-sizing: border-box; } .tab-header .search-input { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); background-color: var(--arka-plan-ana); font-size: var(--text-base); color: var(--metin-ana); width: 200px; height: 40px; box-sizing: border-box; } .tab-header .search-btn { padding: var(--spacing-sm) var(--spacing-md); background-color: var(--ana-mavi); color: var(--arka-plan-ana); border: none; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; height: 40px; box-sizing: border-box; } .tab-header .search-btn:hover { background-color: var(--ana-mavi); } .tab-header h3 { font-size: 24px; font-weight: 700; color: var(--baslik-ana); margin: 0; } /* ======================================== STANDART ARAMA KUTUSU (Tüm Sayfalar İçin) ======================================== */ /* Arama kutusu container */ .standard-search-box { position: relative; display: flex; align-items: center; min-width: 280px; } /* Arama ikonu */ .standard-search-box > i { position: absolute; left: 14px; color: var(--metin-dorduncu); pointer-events: none; font-size: 14px; z-index: 1; } /* Arama input */ .standard-search-box input[type="text"] { width: 100% !important; padding: 10px 40px 10px 40px !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: var(--radius-lg) !important; background-color: var(--arka-plan-ikincil) !important; font-size: 14px !important; color: var(--metin-ana) !important; transition: all 0.2s ease !important; height: 40px !important; box-sizing: border-box !important; } /* Focus durumu */ .standard-search-box input[type="text"]:focus { outline: none !important; border-color: var(--ana-mavi) !important; background-color: var(--arka-plan-ana) !important; box-shadow: 0 0 0 3px var(--golge-odak) !important; } /* Placeholder */ .standard-search-box input[type="text"]::placeholder { color: var(--metin-dorduncu); } /* Standard search box clear button */ .standard-search-box .search-clear-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--metin-ikincil) !important; cursor: pointer; padding: 0; display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; transition: all 0.2s ease; z-index: 10; line-height: 1; } .standard-search-box .search-clear-btn .clear-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; } .standard-search-box .search-clear-btn .clear-icon i { font-size: 11px; line-height: 1; margin: 0; padding: 0; } .standard-search-box .search-clear-btn:hover { background: rgba(148, 163, 184, 0.15); color: var(--baslik-ucuncu) !important; } .standard-search-box .search-clear-btn i { font-size: 11px; } .standard-search-box input:not(:placeholder-shown) ~ .search-clear-btn { display: flex; } /* ======================================== STANDART SONUÇ BULUNAMADI MESAJI (Tüm Sayfalar İçin) ======================================== */ .no-result-message { display: none; text-align: center; padding: 60px 24px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); margin: 24px 0; } .no-result-message i { font-size: 48px; color: var(--metin-dorduncu); margin-bottom: 16px; opacity: 0.5; } .no-result-message h4 { font-size: 20px; font-weight: 600; color: var(--metin-ikinci); margin: 0 0 8px 0; } .no-result-message p { font-size: 14px; color: var(--metin-ucuncu); margin: 0; } .status-badge { padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .status-badge.critical { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .status-badge.stable { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } /* Grid layout for tab content */ .tab-content .inpatient-card { margin-bottom: 24px; } /* Empty state for tabs */ .tab-empty { text-align: center; padding: 60px 20px; color: var(--metin-ucuncu); } .tab-empty i { font-size: 48px; color: var(--metin-ucuncu); margin-bottom: 16px; } .tab-empty h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--metin-ana); } .tab-empty p { font-size: var(--text-base); max-width: 300px; margin: 0 auto; line-height: 1.5; } /* #endregion */ /* #region Modern App Layout - CSS Grid */ .app-layout { margin: 0; padding: 0; overflow-x: hidden !important; overflow-y: hidden !important; /* Sayfa seviyesinde scroll yok */ height: 100% !important; /* Parent container'ın yüksekliğini kullan */ max-height: 100vh !important; } .app-container { display: grid; grid-template-columns: 280px 1fr; gap: 0; min-height: 100vh; max-height: 100vh !important; /* Container yüksekliği viewport ile sınırlı */ height: 100vh !important; transition: grid-template-columns 0.3s ease; overflow-x: hidden !important; /* Hover dropdown'lar için overflow-x: visible yerine hidden */ overflow-y: hidden !important; /* Sayfa seviyesinde scroll yok */ } /* #region Sidebar Navigation - Yan Menü */ .sidebar { position: static; /* Fixed yerine static */ width: auto; /* Grid column genişliği kullanır */ min-width: 280px; /* Sabit genişlik için */ max-width: 280px; /* Sabit genişlik için */ background-color: var(--kart-arka-plan); border-right: 1px solid var(--kenarlik-ana); display: flex; flex-direction: column; height: 100vh; overflow-y: auto; overflow-x: visible; /* Hover dropdown'lar için */ box-sizing: border-box; /* Padding dahil genişlik hesaplaması */ } .sidebar-header { padding: 24px; border-bottom: 1px solid var(--kenarlik-ana); user-select: none; height: 72px; display: flex; /* flex-direction: column; */ justify-content: center; align-items: center; gap: var(--spacing-sm); user-select: none; } .logo { display: flex; align-items: center; gap: var(--spacing-md); /* margin-bottom: 8px; */ } .logo img { height: 28px; } .clinic-name { color: var(--metin-ucuncu); font-size: var(--text-sm); line-height: 15px; font-weight: 400; } .sidebar-nav { flex: 1; padding: 16px; overflow-y: auto; overflow-x: visible; /* Hover dropdown'lar için */ min-width: 100%; /* Sabit genişlik için */ width: 100%; /* Sabit genişlik için */ box-sizing: border-box; /* Padding dahil genişlik hesaplaması */ } .sidebar-nav ul { list-style: none; } .sidebar-nav li { margin-bottom: 2px; } .sidebar-nav a { display: flex; align-items: center; gap: var(--spacing-md); /* padding: 10px 16px; */ padding: 6px 8px; color: var(--metin-ucuncu); text-decoration: none; border-radius: var(--radius-xl); font-weight: 500; font-size: var(--text-base); transition: all 0.2s ease; width: 100%; /* Sabit genişlik için */ box-sizing: border-box; /* Padding dahil genişlik hesaplaması */ } .sidebar-nav a:hover { background-color: var(--arka-plan-ucuncu); color: var(--metin-ana); } .sidebar-nav a.active { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); color: var(--arka-plan-ana); box-shadow: 0 2px 6px var(--golge-mavi); } .sidebar-nav a.active i{ color: var(--ana-mavi-daha-koyu); background-color: var(--metin-beyaz); } .sidebar-nav a:hover i { background-color: var(--metin-beyaz); color: var(--ana-mavi-daha-koyu); } .sidebar-nav i { width: 20px; text-align: center; font-size: 16px; background: var(--kart-arka-plan); padding: 16px; height: 24px; width: 24px; display: flex ; align-items: center; justify-content: center; border-radius: 10px; } .sidebar-footer { padding: 24px; border-top: 1px solid var(--kenarlik-ana); } .user-profile { display: flex; align-items: center; gap: var(--spacing-md); } .user-avatar { width: 44px; height: 44px; background: linear-gradient(135deg, var(--ana-pembe) 0%, var(--ana-pembe-koyu) 100%); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--arka-plan-ana); font-size: 18px; } .user-avatar img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } .user-info { display: flex; flex-direction: column; } .user-name { font-weight: 600; color: var(--baslik-ana); font-size: var(--text-base); } .user-role { color: var(--metin-ucuncu); font-size: var(--text-sm); } /* #endregion */ /* #region Main Content - Ana İçerik */ .main-content { /* margin-left KALDIRILDI - Grid ile otomatik */ display: flex; flex-direction: column; height: 100vh !important; /* min-height yerine height */ max-height: 100vh !important; overflow-y: hidden !important; /* Ana container scroll olmasın */ overflow-x: hidden !important; background-color: var(--arka-plan-ikincil); transition: background-color 0.2s ease; } /* Responsive kurallar aşağıda app-container ile birlikte tanımlanacak */ .page-header { background-color: var(--kart-arka-plan); border-bottom: 1px solid var(--kenarlik-ana); padding: 0 32px; display: flex; flex-shrink: 0; /* Header sabit kalır */ align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 90; height: 72px; } .mobile-header-top, .mobile-header-bottom { display: contents; } .mobile-logo { display: none; } .header-left { display: flex; align-items: center; gap: var(--spacing-md); flex: 0 0 auto; min-width: 0; order: 0; } .page-header .header-text { display: flex; flex-direction: column; min-width: 0; order: 1; flex: 1; } .page-header .header-text h1 { font-size: 20px; font-weight: 700; color: var(--baslik-ana); /* margin-bottom: 4px; */ } .page-header .header-text p { color: var(--metin-ucuncu); font-size: 14px; } .header-right { display: flex; align-items: center; gap: var(--spacing-lg); flex-shrink: 0; order: 2; } .header-actions { display: flex; align-items: center; gap: 0.75rem; } .header-right .search-box { width: 380px; max-width: 380px; display: none; /* Header searchbox pasif - sekmelerde searchbox var */ } /* Bu bölüm kaldırıldı - search box stilleri dosyanın başına taşındı */ .notification-container { display: flex; align-items: center; flex-shrink: 0; } .toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; max-width: 400px; pointer-events: none; } .notification-btn { position: relative; width: 44px; height: 44px; background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--metin-ucuncu); cursor: pointer; /* transition: all 0.2s ease; */ z-index: 20; /* box-shadow: var(--shadow-sm); */ } .notification-btn:hover { background: var(--arka-plan-ikincil); color: var(--metin-ana); border-color: var(--kenarlik-ana); /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); */ } .notification-badge { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; background: var(--durum-hata); color: var(--arka-plan-ana); border-radius: 10px; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; z-index: 25; } .user-menu { display: flex; align-items: center; flex-shrink: 0; } .user-menu .user-avatar-small { width: 44px; height: 44px; /* background: linear-gradient(135deg, var(--ana-pembe) 0%, var(--ana-pembe-koyu) 100%); */ background-color: var(--kart-arka-plan); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--arka-plan-ana); font-size: 16px; cursor: pointer; } .user-menu .user-avatar-small img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } /* Profile Menu Dropdown */ .profile-menu { position: fixed; top: 80px; right: 20px; background: var(--arka-plan-ana); border-radius: var(--radius-xl); box-shadow: 0 8px 25px var(--golge-ikincil); border: 1px solid var(--kenarlik-ana); min-width: 280px; z-index: 999999; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; } .profile-menu:hover { box-shadow: 0 12px 35px var(--golge-ucuncu); transform: translateY(-5px); } .profile-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .profile-menu-header { padding: 20px; border-bottom: 1px solid var(--arka-plan-ucuncu); } .profile-info { display: flex; align-items: center; gap: var(--spacing-md); } .profile-info img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .profile-info h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana) !important; } .profile-info p { margin: 0; font-size: var(--text-base); color: var(--metin-ikincil) !important; } .profile-menu-items { padding: 8px 0; } .profile-menu-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 12px 20px; color: var(--metin-ana) !important; text-decoration: none; font-size: var(--text-base); font-weight: 500; transition: all 0.2s ease; } .profile-menu-item:hover { background: var(--arka-plan-ucuncu); color: var(--metin-ana) !important; } .profile-menu-item i { width: 20px; text-align: center; color: var(--metin-ikincil) !important; } .profile-menu-item:hover i { color: var(--metin-ana) !important; } .content-wrapper { padding: 24px; flex: 1; overflow-y: auto; /* Sadece content scroll olur */ transition: background-color 0.2s ease; /* background-color: yellow; */ /* background: var(--arka-plan-ana); */ background-color: var(--kart-arka-plan) !important; } /* #endregion */ /* #region Stats Section - İstatistik Kartları */ .stats-section { margin-bottom: 24px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-2xl); } .stat-card { background: var(--kart-arka-plan); border-radius: 16px; padding: 14px 24px; display: flex ; align-items: center; gap: var(--spacing-xl); border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; user-select: none; max-height: 152px; align-items: flex-start; gap: 12px; } .stat-card .stat-progress { display: flex ; flex-direction: column; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } .stat-icon { display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; font-size: 14px; border-radius: 12px; padding: 16px; margin-top: 2px; background: var(--stat-card-icon-bg); color: var(--stat-card-icon-text); } /* .stat-icon.primary { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .stat-icon.success { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); } .stat-icon.warning { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%); } .stat-icon.danger { background: linear-gradient(135deg, var(--ana-kirmizi) 0%, var(--ana-kirmizi-koyu) 100%); } /* Bilgi/oran kartı için mavi ton (başarı oranı vb.) */ .stat-content { flex: 1 !important; min-width: 0; width: 100% !important; } .stat-content {width: 100%;} .stat-content h3 { font-size: 32px; font-weight: 700; color: var(--baslik-ana); margin-bottom: 4px; line-height: 1.2; } .stat-content p { color: var(--metin-ucuncu); font-size: 15px; font-weight: 500; margin-bottom: 6px; line-height: 1.3; } .stat-change { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 12px; font-weight: 500; margin-top: 4px; } .stat-change.positive { color: var(--ana-yesil); } .stat-change.negative { color: var(--ana-kirmizi); } .stat-change.neutral { color: var(--metin-ucuncu); } /* #endregion */ /* #region Action Bar - Eylem Çubuğu */ .action-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: var(--spacing-lg); /* background: #e1e1e1; */ padding: 10px 12px; border-radius: 16px; /* border: 1px solid #e5e5e5; */ background-color: var(--arka-plan-ikincil); } .action-left { display: flex; align-items: center; gap: var(--spacing-md); } .action-right { display: flex; align-items: center; gap: var(--spacing-md); } .filter-group { display: flex; align-items: center; gap: var(--spacing-md); } /* #region Filter Select - Ana Ortak Stil */ .filter-select { /* Temel stil özellikleri */ padding: 8px 40px 8px 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); background: var(--arka-plan-ana); color: var(--metin-ana); font-size: var(--text-base); min-width: 150px; /* Select görünümü */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Dropdown ikonu */ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; /* Etkileşim */ cursor: pointer; transition: all 0.2s ease; } /* Hover durumu */ .filter-select:hover { border-color: var(--ana-mavi); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); } /* Focus durumu */ .filter-select:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-color: var(--kart-arka-plan); } /* #endregion */ /* Ortak buton stilleri satır 1358'de tanımlı - eski tekrar tanımlar silindi */ /* #endregion */ /* #region Todo Sidebar - Görev Yan Paneli */ .todo-sidebar { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); padding: 24px; border: 1px solid var(--kenarlik-ana); height: fit-content; position: sticky; top: 0; } .todo-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--kenarlik-ana); } .todo-header h3 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; } .todo-filters { margin-bottom: 20px; } .filter-tabs { display: flex; background: var(--arka-plan-ucuncu); border-radius: 10px; padding: 4px; gap: 2px; } .filter-tab { flex: 1; padding: 8px 12px; background: transparent; border: none; border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); cursor: pointer; transition: all 0.2s ease; text-align: center; } .filter-tab.active { background: var(--arka-plan-ana); color: var(--baslik-ana); box-shadow: var(--shadow-sm); } .filter-tab:hover:not(.active) { background: rgba(255, 255, 255, 0.5); color: var(--metin-ana); } .todo-list { display: flex; flex-direction: column; gap: var(--spacing-md); max-height: 600px; overflow-y: auto; } .todo-item { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .todo-item:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ana); } .todo-item.urgent { border-left: 3px solid var(--ana-kirmizi); background: var(--durum-hata-acik); } .todo-item.normal { border-left: 3px solid var(--ana-mavi); } .todo-item.completed { opacity: 0.6; border-left: 3px solid var(--ana-yesil); background: var(--durum-basarili-acik); } .todo-item.selected { background: var(--golge-odak); border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-mavi); position: relative; } .todo-item.selected::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; /* background: #3b82f6; */ } /* .todo-item .action-btn.check { background: var(--durum-basarili-acik) !important; color: var(--durum-basarili-metin) !important; } */ .todo-checkbox { position: relative; margin-top: 2px; display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .todo-checkbox input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; width: 0; height: 0; } .todo-checkbox .checkmark { display: block; width: 20px; height: 20px; border: 2px solid var(--kenarlik-ikincil); border-radius: var(--radius-sm); background: var(--arka-plan-ana); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .todo-checkbox:hover .checkmark { border-color: var(--durum-basarili); box-shadow: 0 0 0 2px var(--golge-odak); } .todo-checkbox input:checked + .checkmark { background: var(--durum-basarili); border-color: var(--durum-basarili); } .todo-checkbox input:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 1; transform: scale(1); transition: all 0.2s ease; } .todo-checkbox .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } .todo-content { flex: 1; } .todo-content h4 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin-bottom: 4px; } .todo-content p { font-size: 13px; color: var(--metin-ucuncu); margin-bottom: 8px; line-height: 1.4; } .todo-meta { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; } .todo-time { font-size: 11px; /* color: var(--metin-ucuncu); background: var(--arka-plan-dorduncu); */ padding: 2px 6px; border-radius: var(--radius-md); font-weight: 500; background: var(--ana-kirmizi); color: var(--arka-plan-ana); } .todo-assignee { font-size: 11px; color: var(--ana-mavi); font-weight: 500; } .todo-actions { display: flex; align-items: center; } /* Artık action-btn kullanılıyor */ /* #endregion */ /* #region Modal Styles - Modal Pencere Stilleri */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--modal-overlay); z-index: 1000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); opacity: 0; transition: all 0.3s ease; overflow: hidden; } .modal.show { display: flex; opacity: 1; } /* JavaScript ile açılan modaller için */ .modal[style*="display: flex"] { display: flex !important; opacity: 1; } /* ======================================== MODAL BOYUT SİSTEMİ - TUTARLI VE TEMİZ ======================================== */ .modal-content { /*Genel Modal Stili*/ background: var(--modal-arka-plan); border-radius: 16px; box-shadow: var(--shadow-2xl); position: relative; z-index: 15001; max-height: 90vh; overflow-y: auto; margin: auto; animation: modalSlideIn 0.3s ease-out; } /* Modal Boyut Sınıfları */ .modal-content.small { max-width: 400px; width: 90%; } .modal-content.medium { max-width: 600px; width: 90%; } .modal-content.large { max-width: 800px; width: 90%; } .modal-content.xlarge { max-width: 1000px; width: 95%; } .modal-content.fullscreen { max-width: 95vw; width: 95vw; max-height: 90vh; } /* Varsayılan boyut (sınıf belirtilmemişse) */ .modal-content:not(.small):not(.medium):not(.large):not(.xlarge):not(.fullscreen) { max-width: 600px; width: 90%; } /* ======================================== LAB VE X-RAY İSTEK DETAY MODALLARI ======================================== */ /* Lab Request View Modal ve X-Ray Request View Modal için güzel stiller */ #labRequestViewModal .modal-content, #xrayRequestViewModal .modal-content { background: linear-gradient(135deg, var(--kart-arka-plan) 0%, var(--arka-plan-ana) 100%); border: 1px solid var(--kenarlik-ikincil); box-shadow: 0 20px 60px var(--golge-ikincil); } /* #labRequestViewModal .modal-header, #xrayRequestViewModal .modal-header { background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); padding: 28px 32px; border-radius: 16px 16px 0 0; border-bottom: none; } */ /* #labRequestViewModal .modal-header h3, #xrayRequestViewModal .modal-header h3 { color: var(--metin-beyaz) !important; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 12px; margin: 0; } */ /* #labRequestViewModal .modal-header h3 i, #xrayRequestViewModal .modal-header h3 i { font-size: 24px; opacity: 0.95; } #labRequestViewModal .modal-close, #xrayRequestViewModal .modal-close { background: rgba(255, 255, 255, 0.2); color: var(--metin-beyaz) !important; border: 1px solid rgba(255, 255, 255, 0.3); width: 38px; height: 38px; border-radius: 10px; font-size: 24px; font-weight: 400; transition: all 0.2s ease; } #labRequestViewModal .modal-close:hover, #xrayRequestViewModal .modal-close:hover { background: rgba(255, 255, 255, 0.35); transform: rotate(90deg); border-color: rgba(255, 255, 255, 0.5); } */ #labRequestViewModal .modal-body, #xrayRequestViewModal .modal-body { padding: 36px; background: var(--kart-arka-plan); } /* Detail List Stilleri */ #labRequestViewModal .detail-list, #xrayRequestViewModal .detail-list { display: flex; flex-direction: column; gap: 20px; } #labRequestViewModal .detail-list p, #xrayRequestViewModal .detail-list p { display: flex; align-items: flex-start; padding: 16px 20px; margin: 0; background: linear-gradient(135deg, var(--arka-plan-ana) 0%, var(--kart-arka-plan) 100%); border-left: 4px solid var(--ana-mavi-koyu); border-radius: 10px; font-size: 15px; line-height: 1.6; transition: all 0.2s ease; box-shadow: 0 2px 8px var(--golge-hover); } #labRequestViewModal .detail-list p:hover, #xrayRequestViewModal .detail-list p:hover { /* background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); */ border-left-color: var(--ana-mavi-cok-acik); /* box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); */ /* transform: translateX(4px); */ } #labRequestViewModal .detail-list p strong, #xrayRequestViewModal .detail-list p strong { min-width: 120px; color: var(--ana-mavi-koyu); font-weight: 700; margin-right: 16px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.3px; } #labRequestViewModal .modal-footer, #xrayRequestViewModal .modal-footer { padding: 24px 36px; background: var(--arka-plan-ana); border-top: 1px solid var(--kenarlik-ana); border-radius: 0 0 16px 16px; } #labRequestViewModal .btn-outline, #xrayRequestViewModal .btn-outline { background: var(--kart-arka-plan); color: var(--ana-mavi-acik); border: 2px solid var(--ana-mavi-acik); padding: 12px 32px; font-weight: 600; border-radius: 10px; transition: all 0.2s ease; } #labRequestViewModal .btn-outline:hover, #xrayRequestViewModal .btn-outline:hover { background: var(--ana-mavi-acik); color: var(--metin-beyaz); /* transform: translateY(-2px); */ /* box-shadow: 0 6px 20px var(--golge-mor); */ } /* Bu stiller yeni modal sistemi ile değiştirildi */ /* .modal.show .modal-content { transform: scale(1) translateY(0); } */ /* Modal Header - Ana Stil */ .modal-header { padding: 24px; border-bottom: 1px solid var(--kenarlik-ana); border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: space-between; position: relative; } .modal-header h2, .modal-header h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--metin-ana); display: flex; align-items: center; gap: var(--spacing-md); } .modal-header h2::before { content: ''; width: 4px; height: 24px; background: var(--ana-mavi); border-radius: 2px; } .modal-close { width: 40px; height: 40px; border: none; background: var(--arka-plan-ucuncu); color: var(--metin-ikincil); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; font-size: 24px; } .modal-close:hover { background: var(--durum-hata); color: var(--metin-beyaz); transform: scale(1.05); } /* Modal Body */ .modal-body { padding: 32px; max-height: 60vh; overflow-y: auto; background: var(--modal-arka-plan); } .modal-body::-webkit-scrollbar { width: 6px; } .modal-body::-webkit-scrollbar-track { background: var(--arka-plan-ikincil); border-radius: 3px; } .modal-body::-webkit-scrollbar-thumb { background: var(--arka-plan-ucuncu); border-radius: 3px; } .modal-body::-webkit-scrollbar-thumb:hover { background: var(--arka-plan-dorduncu); } .modal-content input[type="checkbox"] { width: fit-content; margin-right: 5px; } /* Modal Input Stilleri - Global stilleri kullanıyor, sadece modal için özel farklılıklar */ .modal-content input:not([type="checkbox"]):not([type="radio"]), .modal-content textarea, .modal-content select { /* Global stilleri kullanıyor, sadece modal için özel ayarlar */ border: 2px solid var(--kenarlik-ana); /* Modal için daha kalın kenarlık */ background-color: var(--kart-arka-plan); } /* Modal select elementleri için FontAwesome ikon stili */ .modal-content select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; cursor: pointer; } .modal-content input:focus, .modal-content textarea:focus, .modal-content select:focus { border-color: var(--kenarlik-ana); box-shadow: var(--golge-odak); background-color: var(--kart-arka-plan); } /* Dark tema için input renk düzeltmeleri */ [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="time"], [data-theme="dark"] select { color: var(--metin-ana) !important; background-color: var(--kart-arka-plan) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; } /* Dark tema select hover durumu */ [data-theme="dark"] select:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; } /* Dark tema select focus durumu */ [data-theme="dark"] select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; } /* Dark tema için date input ikonları */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.8; } /* Select option renkleri */ select option { background-color: var(--kart-arka-plan); color: var(--metin-ana); } /* Placeholder renkleri */ input::placeholder, textarea::placeholder { color: var(--metin-ucuncu) !important; opacity: 0.8; } .modal-content select { cursor: pointer; } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Disabled Button Styles */ .bulk-actions .btn-outline.disabled, .bulk-actions .btn-outline:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--arka-plan-ucuncu); color: var(--metin-dorduncu); border-color: var(--kenarlik-ana); } .bulk-actions .btn-outline.disabled:hover, .bulk-actions .btn-outline:disabled:hover { background-color: var(--arka-plan-ucuncu); color: var(--metin-dorduncu); border-color: var(--kenarlik-ana); } .modal-close:hover { background: var(--arka-plan-dorduncu); color: var(--metin-ana); } .modal-body { padding: 32px; background: var(--modal-arka-plan) !important; } .modal-footer { padding: 24px 32px; border-top: 1px solid var(--kenarlik-ana); display: flex; gap: var(--spacing-md); justify-content: flex-end; border-radius: 0 0 20px 20px; } .modal-header h3 { color: var(--metin-ana) !important; } /* .modal-close { background: var(--arka-plan-ucuncu) !important; color: var(--metin-ucuncu) !important; } .modal-close:hover { background: var(--arka-plan-dorduncu) !important; color: var(--metin-ana) !important; } */ /* Bu form-group stilleri yukarıda genel bölümde tanımlandı */ /* #endregion */ /* #region Abonelik İptal Modal Stilleri */ .cancel-subscription-content { text-align: center; } .cancel-subscription-content .warning-icon { font-size: 48px; color: var(--ana-kirmizi); margin-bottom: 16px; } .cancel-subscription-content h4 { color: var(--baslik-ana); margin-bottom: 12px; font-size: 18px; } .cancel-subscription-content p { color: var(--metin-ikincil); margin-bottom: 20px; line-height: 1.5; } .cancellation-consequences { text-align: left; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); padding: 16px; margin: 20px 0; border-left: 4px solid var(--ana-kirmizi); } .cancellation-consequences li { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: 8px; color: var(--metin-ana); font-size: var(--text-base); } .cancellation-consequences li:last-child { margin-bottom: 0; } .cancellation-consequences i { color: var(--ana-kirmizi); font-size: var(--text-sm); width: 16px; text-align: center; } .cancellation-info { background: var(--arka-plan-ucuncu); border-radius: var(--radius-lg); padding: 16px; margin-top: 20px; border: 1px solid var(--kenarlik-ana); } .cancellation-info p { margin: 0 0 8px 0; font-size: var(--text-base); color: var(--metin-ana); } .cancellation-info p:last-child { margin-bottom: 0; } .cancellation-info strong { color: var(--baslik-ana); } /* #endregion */ /* #region Notification System - Bildirim Sistemi */ /* .notification-container { position: fixed; top: 20px; right: 20px; z-index: 9999 !important; max-width: 400px; pointer-events: none; } */ .notification { position: relative; pointer-events: auto; background: var(--arka-plan-ana); border-radius: var(--radius-xl); padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 8px 25px var(--golge-ikincil); border: 1px solid; display: flex; align-items: center; gap: var(--spacing-md); z-index: 10001; font-family: 'Inter', sans-serif; font-size: var(--text-base); font-weight: 500; transform: translateX(100%); transition: transform 0.3s ease; z-index: 10000 !important; } .notification-success { border-color: var(--kenarlik-ana); color: var(--durum-basarili-metin); } .notification-error { border-color: var(--kenarlik-ana); color: var(--durum-hata-metin); } .notification-warning { border-color: var(--kenarlik-ana); color: var(--durum-uyari-metin); } .notification-info { border-color: var(--kenarlik-ana); color: var(--durum-bilgi-metin); } /* #endregion */ /* #region Loading States - Yükleme Durumları */ .loading { opacity: 0.6; pointer-events: none; position: relative; } .loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2px solid var(--kenarlik-ana); border-top: 2px solid var(--ana-mavi); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* FontAwesome spin animasyonu */ .fa-spin { animation: fa-spin 1s infinite linear; } @keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Skeleton Text - Kart içindeki metinler için (overlay olarak) */ .skeleton-text { position: relative; color: transparent !important; user-select: none; } .skeleton-text::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, var(--arka-plan-ucuncu) 25%, var(--arka-plan-dorduncu) 50%, var(--arka-plan-ucuncu) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: 4px; z-index: 1; } .skeleton-text::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); animation: skeleton-shimmer 1.5s infinite; z-index: 2; border-radius: 4px; } .hastalar-page .patient-card .skeleton-text::after { background: linear-gradient(90deg, var(--arka-plan-ucuncu) 25%, var(--arka-plan-dorduncu) 50%, var(--arka-plan-ucuncu) 75%); background-size: 200% 100%; } /* Dark tema için skeleton stilleri */ [data-theme="dark"] .skeleton-text::after { background: linear-gradient(90deg, var(--arka-plan-ucuncu) 25%, var(--arka-plan-dorduncu) 50%, var(--arka-plan-ucuncu) 75%); background-size: 200% 100%; } [data-theme="dark"] .skeleton-text::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); } [data-theme="dark"] .hastalar-page .patient-card .skeleton-text::after { background: linear-gradient(90deg, var(--arka-plan-ucuncu) 25%, var(--arka-plan-dorduncu) 50%, var(--arka-plan-ucuncu) 75%); background-size: 200% 100%; } @keyframes skeleton-shimmer { 0% { left: -100%; } 100% { left: 100%; } } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* #endregion */ /* #region Z-Index Düzeltmeleri - Mevcut Modal stillerine ekle */ /* Secondary modals - modal üstünde açılanlar */ /* Notification container düzeltmesi - Mevcut .notification-container'ı güncelle */ /* .notification-container { position: fixed !important; top: 20px !important; right: 20px !important; z-index: 9999 !important; max-width: 400px !important; pointer-events: none !important; } */ /* .notification { pointer-events: auto !important; z-index: 10000 !important; position: relative !important; } */ /* Bu stil yeni modal sistemi ile değiştirildi */ /* #endregion */ /* #region Bildirim Modal Stilleri */ .owner-info-section { background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 20px; border-left: 4px solid var(--ana-mavi); } .owner-info-section p { margin-bottom: 4px; font-size: var(--text-base); color: var(--metin-ana); } .notification-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } /* Ayarlar sayfası modal checkbox stilleri */ .ayarlar-page .modal .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--metin-ana); padding: 0; background: none; border: none; } .ayarlar-page .modal .checkbox-label:hover { background: none; border: none; } .ayarlar-page .modal .checkbox-label input[type="checkbox"] { display: none; } .ayarlar-page .modal .checkbox-label .checkmark { width: 16px; height: 16px; border: 2px solid var(--kenarlik-ana); border-radius: 3px; background: var(--kart-arka-plan); position: relative; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; } .ayarlar-page .modal .checkbox-label:hover .checkmark { border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } .ayarlar-page .modal .checkbox-label input[type="checkbox"]:checked + .checkmark { background: var(--ana-mavi); border-color: var(--ana-mavi); } .ayarlar-page .modal .checkbox-label input[type="checkbox"]:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: 10px; font-weight: bold; opacity: 1; /* transform: scale(1); */ transition: all 0.2s ease; /* top:0; */ /* left: 1px; */ } .ayarlar-page .settings-section.active { padding: 20px !important; } .ayarlar-page .modal .checkbox-label .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: 10px; font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } /* Ayarlar sayfası izin tablosu ikon stilleri */ .ayarlar-page .permissions-table .text-success { color: var(--ana-yesil) !important; } .ayarlar-page .permissions-table .text-danger { color: var(--ana-kirmizi) !important; } /* İzin tablosu hizalama - ilk kolon hariç diğerleri ortala */ .ayarlar-page .permissions-table th:not(:first-child), .ayarlar-page .permissions-table td:not(:first-child) { text-align: center; } /* #endregion */ /* ------------------------------------ */ /* Genel - Ortak Sayfa Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* #region Hastalar Sayfası Stilleri - Patients Page Styles */ /* ------------------------------------ */ /* #region Patient Cards - Hasta Kartları */ /* Bu stil yeni modal sistemi ile değiştirildi */ /* Bu stiller yeni modal sistemi ile değiştirildi */ #bulkImportModal .checkbox-wrapper { display: flex ; align-items: center; gap: var(--spacing-sm); cursor: pointer; padding: 0; background: none; border: none; border-radius: none; transition: all 0.2s ease; } /* Bu stil yeni modal sistemi ile değiştirildi */ /* Bu stiller ana .patient-avatar stilinde birleştirildi */ /* #region Hastalar - Detay Modal (Yüksek Özgüllükle Stil) */ /* Hastalar sayfasında yatış bilgilerini gizle */ .hastalar-page #dynamicPatientDetailModal .admission-info-section .admission-stats { display: none !important; } .hastalar-page #dynamicPatientDetailModal .modal-content.large { max-width: 980px; } .hastalar-page #dynamicPatientDetailModal .modal-header { background: var(--arka-plan-ikincil); border-bottom: 2px solid var(--kenarlik-ikincil); padding: 16px 20px; } /* .hastalar-page #dynamicPatientDetailModal .modal-header .modal-close { width: 32px; height: 32px; display: grid; place-items: center; } */ .hastalar-page #dynamicPatientDetailModal .modal-header .modal-close i { font-size: 16px; /* Diğer modallarla aynı ölçü */ } .hastalar-page #dynamicPatientDetailModal .modal-header .modal-header-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .hastalar-page #dynamicPatientDetailModal .patient-modal-title { display: flex; align-items: center; gap: 14px; } .hastalar-page #dynamicPatientDetailModal .patient-modal-avatar { width: 64px; height: 64px; /* border-radius: 12px; */ display: grid; place-items: center; background: transparent; border: none; overflow: hidden; } .hastalar-page #dynamicPatientDetailModal .patient-modal-avatar img { width: 100%; height: 100%; object-fit: cover; } .hastalar-page #dynamicPatientDetailModal .patient-modal-info h3 { margin: 0; font-size: 20px; } .hastalar-page #dynamicPatientDetailModal .patient-modal-info p { margin: 4px 0 0 0; font-size: 14px; color: var(--metin-ikincil); } .hastalar-page #dynamicPatientDetailModal .status-badge { border: 1px solid var(--kenarlik-ikincil); padding: 6px 10px; border-radius: 999px; font-size: 12px; } .hastalar-page #dynamicPatientDetailModal .modal-body { padding: 20px; } /* Üst bilgi kartları (sahip, telefon, son ziyaret) */ .hastalar-page #dynamicPatientDetailModal .patient-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; /* margin-bottom: 0; */ } .hastalar-page #dynamicPatientDetailModal .patient-info-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ana); border-radius: 12px; padding: 12px; transition: box-shadow .2s ease, border-color .2s ease; margin: 0; } .hastalar-page #dynamicPatientDetailModal .patient-info-card:hover { /* box-shadow: 0 4px 12px var(--golge-ana); */ border-color: var(--ana-mavi); } .hastalar-page #dynamicPatientDetailModal .info-card-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--arka-plan-ikincil); color: var(--ana-mavi); } .hastalar-page #dynamicPatientDetailModal .info-card-content .info-card-label { font-size: 12px; color: var(--metin-ikincil); } .hastalar-page #dynamicPatientDetailModal .info-card-content h4 { margin: 2px 0 0 0; font-size: 15px; } /* Bölüm başlıkları */ .hastalar-page #dynamicPatientDetailModal .patient-detail-section .section-header { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0; margin-bottom: 10px; } .hastalar-page #dynamicPatientDetailModal .patient-detail-section .section-header i { color: var(--ana-mavi); } .hastalar-page #dynamicPatientDetailModal .patient-detail-section .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .hastalar-page #dynamicPatientDetailModal .patient-detail-section .contact-item { padding: 0; } .hastalar-page #dynamicPatientDetailModal .patient-detail-section .detail-item { border: 1px solid var(--kenarlik-ana); border-radius: 10px; padding: 10px 12px; background: var(--arka-plan-ana); align-items: flex-start; } .hastalar-page #dynamicPatientDetailModal .patient-detail-section .detail-label { font-size: 11px; color: var(--metin-ikincil); } .hastalar-page #dynamicPatientDetailModal .patient-detail-section .detail-value { font-size: 14px; } /* Modal alt butonları */ .hastalar-page #dynamicPatientDetailModal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--kenarlik-ana); } .hastalar-page #dynamicPatientDetailModal .modal-footer .btn-primary, .hastalar-page #dynamicPatientDetailModal .modal-footer .btn-secondary, .hastalar-page #dynamicPatientDetailModal .modal-footer .btn-outline { white-space: nowrap; } /* #endregion */ /* Stok Çıkış - Stok Giriş Kayıtları Tablosu */ /* Stok Giriş Kayıtları Tablosu */ .stock-entries-table { width: 100%; border-collapse: collapse; font-size: 14px; } .stock-entries-table thead tr { background: var(--arka-plan-ana); border-bottom: 2px solid var(--kenarlik-ikincil); } .stock-entries-table th { padding: 10px; text-align: left; } .stock-entries-table th:first-child { width: 40px; } .stock-entries-label { margin-bottom: 10px; display: block; font-weight: 600; } .stock-entries-wrapper { overflow-x: auto; } .required-asterisk { color: var(--durum-hata-koyu); } .legend-color.legend-blue { background: var(--ana-mavi); } .legend-color.legend-green { background: var(--ana-yesil); } .legend-color.legend-yellow { background: var(--ana-sari); } .contact-section-divider { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--kenarlik-ana); } .contact-section-divider h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; } .consent-reject-icon { background: var(--gradient-kirmizi); } .consent-reject-title { color: var(--durum-hata-metin); } /* Pet Icon Stilleri - Radyoloji Sayfası */ .radyoloji-page .patient-info img[src*="pet-icons"] { width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; } /* Stok Sayfası Inline Stil Düzeltmeleri */ #stockEntriesTableSection { margin-top: 20px; } .bulk-stock-modal .info-note { margin-bottom: 12px; } .bulk-stock-modal .form-row { gap: 12px; margin-bottom: 12px; } .bulk-stock-modal .form-group-min-160 { min-width: 160px; } .bulk-stock-modal .form-group-min-180 { min-width: 180px; } .bulk-stock-modal .form-group-min-220 { min-width: 220px; } .bulk-stock-modal .form-group-flex-center { display: flex; align-items: center; gap: 8px; } .bulk-stock-modal .form-group-flex-end { display: flex; align-items: flex-end; } .bulk-stock-modal .label-no-margin { margin: 0; } .bulk-stock-modal .action-right { margin-bottom: 12px; display: flex; gap: 12px; align-items: center; } .bulk-stock-modal .search-box-max-320 { max-width: 320px; } /* Lot Table Wrapper - Stok Sayfası */ .lot-table-wrapper { margin-top: 8px; overflow-x: auto; } .lot-table-wrapper .lot-table { width: 100%; border-collapse: collapse; font-size: 13px; } .lot-table-wrapper .lot-table thead tr { background: var(--kart-arka-plan-vurgu); border-bottom: 2px solid var(--kenarlik-ikincil); } .lot-table-wrapper .lot-table th { padding: 8px; text-align: left; font-weight: 600; color: var(--metin-ana); } .lot-table-wrapper .lot-table td { padding: 8px; } .lot-table-wrapper .lot-table .lot-expiry-date { font-weight: 700; } /* Hasta Detay Modalı - Hayvan Giriş Türü Bölümü */ .hastalar-page #dynamicPatientDetailModal .patient-detail-section.admission-type-section { background: var(--kart-arka-plan-vurgu); /* border: 2px solid var(--durum-bilgi-kenarlik); */ border-radius: var(--radius-xl); padding: 24px; margin-bottom: 24px; /* box-shadow: 0 2px 8px var(--golge-ana); */ display: flex; align-items: center; justify-content: space-between; } .hastalar-page #dynamicPatientDetailModal .admission-type-section .section-header { /* margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--durum-bilgi-kenarlik); */ margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .hastalar-page #dynamicPatientDetailModal .admission-type-section .section-content { display: flex; justify-content: center; align-items: center; } .hastalar-page #dynamicPatientDetailModal .admission-type-badge { display: inline-flex; align-items: center; justify-content: center; padding: 12px 32px; border-radius: 10px; font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; /* box-shadow: 0 2px 6px var(--golge-ana); */ transition: all 0.3s ease; } /* .hastalar-page #dynamicPatientDetailModal .admission-type-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-ikincil); } */ .hastalar-page #dynamicPatientDetailModal .admission-type-badge.rutin { background: linear-gradient(135deg, var(--durum-bilgi-acik) 0%, var(--durum-bilgi-kenarlik) 100%); color: var(--durum-bilgi-metin); /* border: 2px solid var(--durum-bilgi-koyu); */ } .hastalar-page #dynamicPatientDetailModal .admission-type-badge.acil { background: linear-gradient(135deg, var(--durum-hata-acik) 0%, var(--durum-hata-kenarlik) 100%); color: var(--durum-hata-metin); /* border: 2px solid var(--durum-hata-koyu); */ } .hastalar-page #dynamicPatientDetailModal .admission-type-badge.misafir { background: linear-gradient(135deg, var(--durum-uyari-acik) 0%, var(--durum-uyari-kenarlik) 100%); color: var(--durum-uyari-metin); /* border: 2px solid var(--durum-uyari-koyu); */ } /* Hasta kartı üst başlıkta badge kapsayıcısı */ .hastalar-page .patient-card .patient-header .badge-wrapper { display: flex; align-items: center; gap: 10px; } /* Hasta kartı üst başlıkta küçük giriş türü rozeti */ .hastalar-page .patient-card .patient-header .admission-badge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .hastalar-page .patient-card .patient-header .admission-badge.rutin { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); /* border: 1px solid var(--durum-bilgi-kenarlik); */ } .hastalar-page .patient-card .patient-header .admission-badge.acil { background: var(--durum-hata-acik); color: var(--durum-hata-metin); /* border: 1px solid var(--durum-hata-kenarlik); */ } .hastalar-page .patient-card .patient-header .admission-badge.misafir { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); /* border: 1px solid var(--durum-uyari-kenarlik); */ } /* Randevu Detay Modalı - Başlık Stilleri */ .randevular-page #appointmentModalTitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .randevular-page #appointmentModalTitle .appointment-patient-name { font-size: 20px; font-weight: 600; color: var(--baslik-ana); } .randevular-page #appointmentModalTitle .appointment-type-badge { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: var(--radius-3xl); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); border: 1px solid var(--durum-bilgi-kenarlik); } .task-type-color.task-type-blue, .color-preview.color-preview-blue { background-color: var(--ana-mavi); } .task-type-color.task-type-green, .color-preview.color-preview-green { background-color: var(--ana-yesil); } .task-type-color.task-type-yellow, .color-preview.color-preview-yellow { background-color: var(--durum-uyari); } .stock-entries-table th, .stock-entries-table td { text-align: center; vertical-align: middle; } .stock-entries-table td:nth-child(4) { font-weight: 700; } .stock-entries-table tbody tr.selected { background: var(--durum-basarili-acik); } /* Bulk modal input fixes */ #bulkStockInModal .form-group input, #bulkStockInModal .form-group select, #bulkStockInModal .form-group textarea, #bulkStockOutModal .form-group input, #bulkStockOutModal .form-group select, #bulkStockOutModal .form-group textarea { width: 100%; } #bulkStockInModal .info-note, #bulkStockOutModal .info-note { background: var(--durum-bilgi-acik); border: 1px solid var(--durum-bilgi-kenarlik); color: var(--durum-bilgi-metin); padding: 10px 12px; border-radius: 8px; } #bulkStockInModal .form-row, #bulkStockOutModal .form-row { display: flex; flex-wrap: wrap; gap: 12px; } #bulkStockInModal .form-row .form-group, #bulkStockOutModal .form-row .form-group { flex: 1 1 220px; } /* Permissions table interactions */ .permissions-table-container .permissions-hint { margin-top: 6px; } .permissions-table td[data-role] { cursor: pointer; } .permissions-table td[data-role] i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; transition: background-color .15s ease; } .permissions-table td[data-role] i:hover { background: var(--durum-bilgi-acik); } .permissions-table tr.permissions-row-hover td { background: transparent; } /* Hukuki Destek - İletişim linkleri buton gibi değil, metin gibi görünsün */ .hukuki-destek-page .law-firm-info .firm-contact .contact-item a { color: inherit; text-decoration: none; font: inherit; } .hukuki-destek-page .law-firm-info .firm-contact .contact-item:hover a { color: var(--ana-mavi); text-decoration: none; } /* İkon ve metin hizası */ .hukuki-destek-page .law-firm-info .firm-contact .contact-item { display: flex; align-items: flex-start; gap: 10px; } .hukuki-destek-page .law-firm-info .firm-contact .contact-item i { margin-top: 3px; } /* Adres blokları */ .hukuki-destek-page .law-firm-info .firm-contact .addresses { display: grid; grid-template-columns: 1fr; gap: 10px; } .hukuki-destek-page .law-firm-info .firm-contact .address-block { /* background: var(--arka-plan-ucuncu); */ border: 1px solid var(--kenarlik-ana); /* border-left: 4px solid var(--primary); */ border-radius: 8px; padding: 10px 12px; } .hukuki-destek-page .law-firm-info .firm-contact .address-block strong { display: block; color: var(--metin-ana); margin-bottom: 4px; } .hukuki-destek-page .law-firm-info .firm-contact .address-text { color: var(--metin-ikincil); line-height: 1.4; font-size: 13px; } .hastalar-page .patient-status.active { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .hastalar-page .patient-status.warning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .hastalar-page .patient-status.danger { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .hastalar-page .patient-status.completed { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .hastalar-page .patient-status i { font-size: 8px; } .hastalar-page .patient-info { margin-bottom: 20px; } .hastalar-page .patient-info h3 { font-size: 22px; font-weight: 700; color: var(--baslik-ana); margin-bottom: 4px; } .hastalar-page .patient-info .breed { color: var(--metin-ucuncu); font-size: 15px; margin-bottom: 16px; font-weight: 500; } .hastalar-page .owner-info, .hastalar-page .contact-info { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .hastalar-page .owner-info i, .hastalar-page .contact-info i { width: 16px; color: var(--metin-dorduncu); font-size: var(--text-base); } .hastalar-page .owner-info span, .hastalar-page .contact-info span { color: var(--metin-ana); font-size: var(--text-base); font-weight: 500; } .hastalar-page .patient-stats { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-top: 1px solid var(--arka-plan-ucuncu); border-bottom: 1px solid var(--arka-plan-ucuncu); margin-bottom: 20px; } /* .hastalar-page .stat-item { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); transition: all 0.2s ease; } */ .hastalar-page .stat-item i { color: var(--metin-dorduncu); font-size: 13px; } .hastalar-page .stat-item span { color: var(--metin-ucuncu); font-size: 11px; font-weight: 500; margin-top: 1px; } /* Modifier info için özel stil - normal stat-item'dan farklı */ .stat-item.modifier-info { background: var(--duzenleyen-kisi-bg); border: none; border-radius: 200px; padding: 1px 10px 1px 1px; gap: 3px; width: fit-content; } /* Hover efekti kaldırıldı */ .hastalar-page .patient-actions { display: flex; gap: var(--spacing-sm); } /* Buton stilleri ortak alanda tanımlı */ /* #endregion */ /* #region Pagination - Sayfalama */ .hastalar-page .pagination { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); margin-top: 32px; } .hastalar-page .pagination-btn { width: 44px; height: 44px; border: 1px solid var(--kenarlik-ana); background: var(--kart-arka-plan); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--metin-ana); cursor: pointer; transition: all 0.2s ease; } .hastalar-page .pagination-btn:hover:not(.disabled) { background: var(--arka-plan-ucuncu); color: var(--metin-ana); border-color: var(--kenarlik-odak); } .hastalar-page .pagination-btn.disabled { opacity: 0.4; cursor: not-allowed; } .hastalar-page .pagination-info { color: var(--metin-ucuncu); font-size: var(--text-base); font-weight: 500; } /* #endregion */ /* #region CSS - Modal ve Buton Stilleri */ /* Hasta kartları için ek stiller */ .patient-card { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); padding: 24px; border: 1px solid var(--kenarlik-ana); box-shadow: 0 4px 12px var(--golge-hover); transition: all 0.3s ease; position: relative; min-width: 0; box-sizing: border-box; width: 100%; max-width: 100%; } .patient-card:hover { transform: translateY(-4px); /* box-shadow: 0 12px 35px var(--golge-ana); */ border-color: var(--kenarlik-ana); } /* Buton stilleri - Removed duplicate .btn-small class */ /* cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } */ .btn-small.secondary { background: var(--durum-basarili); color: var(--arka-plan-ana); } .btn-small.secondary:hover { background: var(--ana-yesil-koyu); /* transform: translateY(-1px); */ } /* Modal content stilleri */ .modal-content.patient-detail-modal { max-width: 800px; width: 90%; } .patient-detail-container { display: grid; gap: var(--spacing-xl); } .patient-info-card { background: var(--arka-plan-ikincil); padding: 20px; border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } /* Ana Patient Avatar Large Stili - Büyük avatar'lar için */ .patient-avatar-large { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--arka-plan-ana); flex-shrink: 0; } /* Patient Avatar Large Tür Renkleri - Kartlardakiyle aynı */ .patient-avatar-large.dog { background: linear-gradient(135deg, var(--ana-sari-acik) 0%, var(--ana-sari) 100%) !important; } .patient-avatar-large.cat { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%) !important; } .patient-avatar-large.other { background: linear-gradient(135deg, var(--metin-ikincil) 0%, var(--baslik-ucuncu) 100%) !important; } .patient-avatar-large.kuş { background: linear-gradient(135deg, var(--ana-cyan) 0%, var(--ana-cyan-koyu) 100%) !important; } /* Form stilleri */ /* .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); } */ /* Media query kaldırıldı */ /* Bu form-group stilleri yukarıda genel bölümde tanımlandı */ /* Pagination stilleri */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); margin-top: 24px; } .pagination-btn { padding: 8px 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); background: var(--kart-arka-plan); color: var(--metin-ana); cursor: pointer; transition: all 0.2s ease; } .pagination-btn:hover:not(.disabled) { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-odak); color: var(--metin-ana); } .pagination-btn.disabled { opacity: 0.5; cursor: not-allowed; } .pagination-info { font-size: var(--text-base); color: var(--metin-ucuncu); } /* Dark tema için pagination butonları */ [data-theme="dark"] .pagination-btn { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ikincil); color: var(--metin-ana); } [data-theme="dark"] .pagination-btn:hover:not(.disabled) { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-odak); color: var(--metin-ana); } [data-theme="dark"] .hastalar-page .pagination-btn { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ikincil); color: var(--metin-ana); } [data-theme="dark"] .hastalar-page .pagination-btn:hover:not(.disabled) { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-odak); color: var(--metin-ana); } /* Media query kaldırıldı */ /* #endregion */ /* ------------------------------------ */ /* #region Hastalar Sayfası Stilleri - Patients Page Styles */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* #region Yatan Hastalar Sayfası Stilleri - Inpatients Page Styles */ /* ------------------------------------ */ /* #region Inpatients - Yatan Hastalar Özel Stiller */ .yatan-hastalar-page .inpatients-layout { display: grid; grid-template-columns: 1fr 400px; gap: 32px; margin-bottom: 32px; } /* Bu stil yeni modal sistemi ile değiştirildi */ .yatan-hastalar-page .patient-group { margin-bottom: 32px; } .yatan-hastalar-page .group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 16px 20px; background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, var(--arka-plan-dorduncu) 100%); border-radius: var(--radius-xl); border-left: 4px solid var(--ana-mavi); } .yatan-hastalar-page .group-header h3 { font-size: 18px; font-weight: 600; color: var(--baslik-ana); display: flex; align-items: center; gap: 10px; } .yatan-hastalar-page .group-badge { padding: 4px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .yatan-hastalar-page .group-badge.critical { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .yatan-hastalar-page .group-badge.stable { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .yatan-hastalar-page .inpatient-card { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); padding: 24px; margin-bottom: 20px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; position: relative; } .yatan-hastalar-page .inpatient-card:hover { transform: translateY(-2px); box-shadow: 0 12px 35px var(--golge-ana); } .yatan-hastalar-page .inpatient-card.critical { border-left: 4px solid var(--ana-kirmizi); background: linear-gradient(135deg, var(--metin-beyaz)fff 0%, var(--durum-hata-acik) 100%); } .yatan-hastalar-page .inpatient-card.normal { border-left: 4px solid var(--ana-yesil); /* background: linear-gradient(135deg, var(--metin-beyaz) 0%, var(--durum-basarili-acik) 100%); */ } .yatan-hastalar-page .patient-basic-info { display: flex; flex-direction: row; align-items: center; gap: var(--spacing-lg); } .yatan-hastalar-page .patient-details h4 { font-size: 20px; font-weight: 700; color: var(--baslik-ana); margin-bottom: 4px; } .yatan-hastalar-page .patient-details p { color: var(--metin-ucuncu); font-size: var(--text-base); margin-bottom: 4px; } .yatan-hastalar-page .owner-name { color: var(--metin-ana); font-size: 13px; font-weight: 500; } .yatan-hastalar-page .admission-info { display: flex; justify-content: flex-end; /* flex-direction: column; */ gap: var(--spacing-sm); margin-bottom: 10px; } .yatan-hastalar-page .admission-date { font-size: var(--text-base); font-weight: 600; color: var(--metin-ucuncu); border: 1px solid var(--metin-ucuncu); padding: 0 10px; border-radius: 10px; } .yatan-hastalar-page .care-type { padding: 4px 12px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; } .yatan-hastalar-page .care-type.intensive { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .yatan-hastalar-page .care-type.normal { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .yatan-hastalar-page .vital-summary { margin-bottom: 20px; padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } .yatan-hastalar-page .vital-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--spacing-lg); margin-bottom: 16px; } .yatan-hastalar-page .vital-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px; background: var(--arka-plan-ana); border-radius: 10px; border: 1px solid var(--kenarlik-ana); } .yatan-hastalar-page .vital-item i { font-size: 18px; color: var(--metin-ucuncu); margin-bottom: 6px; } .yatan-hastalar-page .vital-value { font-size: 16px; font-weight: 700; color: var(--baslik-ana); margin-bottom: 2px; } .yatan-hastalar-page .vital-label { font-size: 11px; color: var(--metin-ucuncu); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .yatan-hastalar-page .vital-status { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; } .yatan-hastalar-page .vital-status.normal { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .yatan-hastalar-page .vital-status.warning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .yatan-hastalar-page .vital-status.critical { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .yatan-hastalar-page .vital-status.stable { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .yatan-hastalar-page .vital-status.good { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .yatan-hastalar-page .last-update { font-size: var(--text-sm); color: var(--metin-ucuncu); text-align: center; } .yatan-hastalar-page .treatment-summary { margin-bottom: 20px; padding: 16px; background: var(--arka-plan-ucuncu); border-radius: 10px; } .yatan-hastalar-page .treatment-summary h5 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin-bottom: 12px; display: flex; align-items: center; gap: var(--spacing-sm); } .yatan-hastalar-page .medication-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .yatan-hastalar-page .medication-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--arka-plan-ana); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .yatan-hastalar-page .medication-item i { color: var(--metin-ucuncu); margin-right: 8px; } .yatan-hastalar-page .medication-item span:first-of-type { font-size: 13px; color: var(--metin-ana); flex: 1; } .yatan-hastalar-page .next-dose { font-size: 11px; padding: 2px 8px; background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); border-radius: 10px; font-weight: 600; } .yatan-hastalar-page .status-active { font-size: 11px; padding: 2px 8px; background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); border-radius: 10px; font-weight: 600; } /* #endregion */ /* #region Hasta Detay Modal Stilleri */ .patient-detail-content { display: flex; flex-direction: column; gap: var(--spacing-2xl); } /* Bu stil genel .detail-section ile birleştirildi */ .detail-section h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); /* margin-bottom: 16px; */ display: flex; align-items: center; gap: var(--spacing-sm); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); } /* ===== DETAIL ITEM STİLLERİ - MERKEZİ TANIM ===== */ .detail-item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-base); color: var(--metin-ucuncu); /* margin-bottom: 8px; */ padding: 10px; cursor: default; background: var(--kart-arka-plan); border-radius: var(--radius-lg); border-left: 3px solid var(--kenarlik-ana); transition: all 0.2s ease; } .detail-item:hover { /* background: var(--ana-mavi-cok-acik); */ border-left-color: var(--ana-mavi); } .detail-item i { color: var(--metin-dorduncu); width: 16px; text-align: center; flex-shrink: 0; font-size: var(--text-sm); } .detail-item img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; } .detail-item span { font-size: var(--text-b); font-weight: 500; color: var(--baslik-ana); /* flex: 1; */ } .detail-item .label { font-weight: 700; } .detail-item .value { font-weight: 400; } .patient-basic-info { display: flex; flex-direction: column; align-items: flex-start; } .detail-item label { font-size: var(--text-sm); font-weight: 600; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } /* Detail item varyantları */ .detail-item.vertical { flex-direction: column; align-items: flex-start; gap: 4px; } .detail-item.card { padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-sm); } .detail-item.bordered { justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--arka-plan-ucuncu); background: transparent; border-left: none; border-radius: 0; } .detail-item.bordered:last-child { border-bottom: none; } .detail-item.bordered .label { font-weight: 600; color: var(--metin-ucuncu); font-size: 0.875rem; } .detail-item.bordered .value { color: var(--baslik-ana); font-weight: 500; } .vital-detail-grid { display: flex; flex-direction: column; gap: var(--spacing-md); } .vital-detail-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); background: var(--kart-arka-plan); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .vital-detail-item i { color: var(--metin-ucuncu); width: 20px; } .vital-detail-label { font-size: var(--text-base); color: var(--metin-ucuncu); min-width: 80px; } .vital-detail-value { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); min-width: 80px; } .vital-detail-status { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .status-normal { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .status-warning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .status-good { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .status-neutral { background: var(--arka-plan-dorduncu); color: var(--metin-ucuncu); } .treatment-detail-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .treatment-detail-item { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); background: var(--arka-plan-ana); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .treatment-text { font-size: var(--text-base); color: var(--metin-ana); flex: 1; margin-left: 8px; } .treatment-next { font-size: var(--text-sm); padding: 4px 8px; background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); border-radius: 10px; font-weight: 600; } /* #endregion */ /* ------------------------------------ */ /* #region Yatan Hastalar Sayfası Stilleri - Inpatients Page Styles */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* Anasayfa Dashboard Sayfası Stilleri */ /* ------------------------------------ */ /* #region Dashboard Styles - Dashboard Sayfası Stilleri */ /* Revenue Chart Stilleri */ .revenue-chart { height: 340px; min-height: 340px; width: 100%; margin-bottom: 20px; position: relative; } .revenue-chart #revenueChart { height: 100% !important; width: 100% !important; } .period-selector { display: flex; gap: var(--spacing-sm); } .period-btn { padding: 6px 12px; border: 1px solid var(--kenarlik-ana); background: var(--kart-arka-plan); color: var(--metin-ucuncu); border-radius: var(--radius-md); font-size: var(--text-sm); cursor: pointer; transition: all 0.2s ease; } .period-btn:hover { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ana); } .period-btn.active { background: var(--ana-mavi); color: var(--metin-beyaz); border-color: var(--kenarlik-ana); } .chart-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); margin-top: 16px; } .legend-item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-sm); color: var(--metin-ucuncu); } .legend-color { width: 12px; height: 12px; border-radius: 2px; } .legend-value { font-weight: 600; color: var(--metin-ana); } /* Date Display */ .date-display { display: flex; align-items: center; gap: var(--spacing-sm); padding: 10px 16px; /* background: var(--arka-plan-ikincil); */ /* border-radius: var(--radius-xl); */ /* border: 1px solid var(--kenarlik-ana); */ color: var(--metin-ucuncu); font-size: 16px; font-weight: 500; user-select: none; } .date-display i { color: var(--metin-dorduncu); } /* Tarih bölümleri için stiller */ .date-display .date-part { display: inline-block; } .date-display .time-part { display: inline-block; } /* "|" karakterini CSS ile ekle ve stillendir */ .date-display .time-part::before { content: "•"; display: inline-block; margin: 0 5px; /* "|" karakterinin sağ ve sol boşluğu */ color: var(--kenarlik-ikinci); /* Renk - daha soluk */ opacity: 0.5; /* Şeffaflık */ font-weight: 300; /* İnce çizgi */ } /* Summary Cards with Progress */ .summary-cards .stat-progress { margin-top: 12px; } .progress-bar { width: 100%; height: 8px; background: var(--arka-plan-dorduncu); border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .progress-fill { height: 100%; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); border-radius: 4px; transition: width 0.3s ease; } .progress-text { font-size: var(--text-sm); color: var(--metin-ucuncu); } /* Stat Breakdown */ .stat-breakdown { display: flex; justify-content: flex-end; gap: var(--spacing-sm); margin-top: 8px; } .breakdown-item { padding: 4px 8px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 600; } .breakdown-item.critical { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .breakdown-item.normal { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } /* 3 Kolon Dashboard Grid */ .dashboard-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-md); max-width: 100%; overflow: hidden; } .dashboard-left, .dashboard-middle, .dashboard-right { display: flex; flex-direction: column; gap: var(--spacing-md); min-width: 0; overflow: hidden; } /* Sağ kolon kartları için kompakt stiller */ /* .dashboard-right .dashboard-card { max-height: 350px; } */ .dashboard-right .card-body { padding: 12px; } .dashboard-right .room-stat-info h4 { font-size: 20px; } .dashboard-right .room-stat-info p { font-size: 11px; } .dashboard-right .room-name { font-size: 12px; } .dashboard-right .room-patient { font-size: 11px; } .dashboard-right .stock-name { font-size: 12px; } .dashboard-right .stock-quantity { font-size: 10px; } .dashboard-right .activity-content-minimal p { font-size: 12px; } .dashboard-right .activity-time-minimal { font-size: 10px; } /* Yatay Dashboard Grid */ .dashboard-horizontal { display: flex; flex-direction: column; gap: var(--spacing-xl); } .dashboard-row { display: grid; gap: var(--spacing-lg); } /* 1+1+1 Kolon */ .row-1-1-1 { grid-template-columns: 1fr 1fr 1fr; } /* 2+1 Kolon */ .row-2-1 { grid-template-columns: 2fr 1fr; } /* 1+1 Kolon */ /* .row-1-1 { grid-template-columns: 1fr 1fr; } */ /* Dashboard Cards */ .dashboard-card { background: var(--kart-arka-plan); border-radius: 16px; /* border: 1px solid var(--kenarlik-ana); */ box-shadow: 0 0px 50px rgb(60 97 165 / 10%); overflow: hidden; margin-bottom: 0; } /* .hizli-islemler { background-color: var(--kart-arka-plan-hizli-islemler); } .hizli-islemler .card-header { border-bottom: 1px solid var(--kart-arka-plan); } .hizli-islemler .card-header h3, .hizli-islemler .card-header h3 i { color: var(--ana-mavi-daha-koyu); } */ .card-header { padding: 12px 24px; border-bottom: 1px solid var(--kenarlik-ana); display: flex; align-items: center; justify-content: space-between; } .card-header h3 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); display: flex; align-items: center; gap: 10px; margin: 0; } .card-header h3 i { color: var(--metin-ucuncu); font-size: 18px; } .card-body { padding: 24px; } .btn-text { background: none; border: none; color: var(--ana-mavi); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .btn-text:hover { color: var(--ana-mavi-daha-koyu); gap: 10px; } /* Modern Appointments Table - Dashboard Specific */ /* Dashboard Randevular Tablosu - Yeni Yapı */ .dashboard-card .appointments-table { background: var(--arka-plan-ana); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px var(--golge-hover); border: 1px solid var(--kenarlik-ana); } .dashboard-card .appointments-table .table-header { display: grid; grid-template-columns: 80px 1fr 120px 140px 140px; gap: var(--spacing-lg); padding: 20px 24px; border-bottom: 2px solid var(--kenarlik-ana); background: var(--arka-plan-ikincil); } .dashboard-card .appointments-table .header-cell { font-size: 11px; font-weight: 700; color: var(--metin-ana); text-transform: uppercase; letter-spacing: 0.5px; } .dashboard-card .appointments-table .table-body { max-height: 400px; overflow-y: auto; } .dashboard-card .appointments-table .appointment-row { display: grid; grid-template-columns: 80px 1fr 120px 140px 140px; gap: var(--spacing-lg); padding: 16px 24px; border-bottom: 1px solid var(--arka-plan-ucuncu); align-items: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; } .dashboard-card .appointments-table .appointment-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; transition: all 0.3s ease; } .dashboard-card .appointments-table .appointment-row:hover { background: var(--arka-plan-altinci); } .dashboard-card .appointments-table .appointment-row:hover::before { background: var(--ana-mavi); } .dashboard-card .appointments-table .appointment-row:last-child { border-bottom: none; } /* Hücre Stilleri */ .dashboard-card .appointments-table .cell { display: flex; align-items: center; } .dashboard-card .appointments-table .time-cell { justify-content: center; } .dashboard-card .appointments-table .patient-cell { flex-direction: column; align-items: flex-start; } .dashboard-card .appointments-table .patient-info { display: flex; align-items: center; gap: 12px; } .dashboard-card .appointments-table .patient-info img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .dashboard-card .appointments-table .patient-info h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--baslik-ana); } .dashboard-card .appointments-table .patient-info p { margin: 0; font-size: 12px; color: var(--metin-ikincil); } .dashboard-card .appointments-table .owner-cell { font-weight: 500; color: var(--metin-ikincil); } .dashboard-card .appointments-table .procedure-cell { justify-content: center; } .dashboard-card .appointments-table .doctor-cell { justify-content: flex-start; font-size: 13px; font-weight: 500; color: var(--ana-mavi); } /* Hasta Bilgileri */ .dashboard-card .appointments-table .patient-info h4 { font-size: 14px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 2px 0; } .dashboard-card .appointments-table .patient-info p { font-size: 12px; color: var(--metin-ucuncu); margin: 0; } /* Zaman Badge */ .dashboard-card .appointments-table .time-badge { padding: 6px 12px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-md); font-size: 12px; font-weight: 600; color: var(--metin-ikincil); } /* İşlem Badge */ .dashboard-card .appointments-table .procedure-badge { padding: 4px 8px; background: var(--durum-bilgi-acik); color: var(--ana-mavi); border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Personel Durumu Kartı */ .staff-status { display: flex; flex-direction: column; gap: 12px; } .staff-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ikincil); transition: all 0.2s ease; } .staff-item:hover { background: var(--kart-arka-plan); border-color: var(--ana-mavi); } .staff-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .staff-avatar img { width: 100%; height: 100%; object-fit: cover; } .staff-info { flex: 1; } .staff-info h4 { font-size: 14px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 2px 0; } .staff-info p { font-size: 12px; color: var(--metin-ucuncu); margin: 0 0 4px 0; } .status-badge { padding: 4px 8px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .status-badge.online { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .status-badge.busy { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .status-badge.offline { background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); } /* Action Column - Dashboard Specific */ .dashboard-card .action-col { justify-content: center; } /* Artık genel .action-buttons kullanılıyor */ /* Artık action-btn kullanılıyor */ /* Modern Appointment Timeline - Eski stil (artık kullanılmıyor) */ .appointment-timeline { position: relative; padding: 8px 0; } .timeline-item { display: flex; gap: var(--spacing-xl); position: relative; margin-bottom: 20px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Eski timeline before stilleri - Kaldırıldı */ .timeline-time { min-width: 60px; font-size: var(--text-base); font-weight: 700; color: var(--metin-ana); padding-top: 12px; text-align: center; /* background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, var(--arka-plan-ucuncu) 100%); */ border-radius: var(--radius-lg); padding: 8px 12px; border: 1px solid var(--kenarlik-ana); box-shadow: var(--shadow-sm); } .timeline-item.current .timeline-time { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); color: var(--arka-plan-ana); border-color: var(--kenarlik-ana); box-shadow: 0 2px 6px var(--golge-mavi); } .timeline-content { flex: 1; } .appointment-card { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px 24px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .appointment-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--arka-plan-dorduncu) 0%, var(--arka-plan-besinci) 100%); transition: all 0.3s ease; } .appointment-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 40px var(--golge-ikincil); border-color: var(--kenarlik-ana); } .appointment-card:hover::before { background: linear-gradient(90deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .appointment-card.active { background: linear-gradient(135deg, var(--durum-bilgi-acik) 0%, var(--durum-bilgi-kenarlik) 100%); border-color: var(--kenarlik-ana); box-shadow: 0 8px 25px var(--golge-mavi); transform: translateY(-2px); } .appointment-card.active::before { background: linear-gradient(90deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .appointment-avatar { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--arka-plan-ana); position: relative; box-shadow: 0 2px 6px var(--golge-hover); transition: all 0.3s ease; } .appointment-card:hover .appointment-avatar { transform: scale(1.1) rotate(5deg); box-shadow: 0 8px 20px var(--golge-ucuncu); } .appointment-avatar.dog { background: linear-gradient(135deg, var(--ana-sari-acik) 0%, var(--ana-sari) 100%); } .appointment-avatar.cat { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%); } .appointment-avatar.bird { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); } .appointment-avatar.other { background: linear-gradient(135deg, var(--metin-ucuncu) 0%, var(--baslik-ucuncu) 100%); } .appointment-info { flex: 1; min-width: 0; } .appointment-info h4 { font-size: 16px; font-weight: 700; color: var(--metin-ana); margin-bottom: 6px; line-height: 1.3; transition: color 0.3s ease; } .appointment-card:hover .appointment-info h4 { color: var(--ana-mavi); } .appointment-info p { font-size: 13px; color: var(--metin-ucuncu); margin: 0; font-weight: 500; line-height: 1.4; } .appointment-info .appointment-type { font-size: var(--text-sm); color: var(--metin-dorduncu); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .appointment-status { padding: var(--spacing-sm) var(--spacing-lg); border-radius: 25px; font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; gap: var(--spacing-sm); text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; position: relative; overflow: hidden; } .appointment-status::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s ease; } .appointment-card:hover .appointment-status::before { left: 100%; } /* .appointment-status.in-progress { background: linear-gradient(135deg, var(--durum-basarili-acik) 0%, var(--durum-basarili-kenarlik) 100%); color: var(--durum-basarili-metin); border: 1px solid var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-yesil); } */ .appointment-status.waiting { /* background: linear-gradient(135deg, var(--durum-uyari-acik) 0%, #fde68a 100%); */ color: var(--durum-uyari-metin); border: 1px solid var(--kenarlik-ana); /* box-shadow: 0 2px 8px var(--golge-sari); */ } .appointment-status.completed { background: linear-gradient(135deg, var(--durum-bilgi-acik) 0%, var(--durum-bilgi-kenarlik) 100%); color: var(--durum-bilgi-metin); border: 1px solid var(--kenarlik-ana); /* box-shadow: 0 2px 8px var(--golge-mavi); */ } .appointment-status.cancelled { background: linear-gradient(135deg, var(--durum-hata-acik) 0%, var(--durum-hata-kenarlik) 100%); color: var(--durum-hata-koyu); border: 1px solid var(--durum-hata-acik); /* box-shadow: 0 2px 8px var(--golge-kirmizi); */ } /* Appointment Card Animations */ @keyframes appointmentPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .appointment-card.active { animation: appointmentPulse 2s infinite; } /* Quick Actions Grid */ .quick-actions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .quick-action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: 20px; /* background: var(--arka-plan-ikincil); */ background-color: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); /* border: transparent; */ border-radius: var(--radius-xl); cursor: pointer; transition: all 0.2s ease; } .quick-action-btn:hover { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); border-color: var(--kenarlik-ana); color: var(--arka-plan-ana); transform: translateY(-2px); box-shadow: 0 2px 6px var(--golge-mavi); } .quick-action-btn i { font-size: 20px; color: var(--metin-ana); } .quick-action-btn:hover i { color: var(--arka-plan-ana); } .quick-action-btn span { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ana); } .quick-action-btn:hover span { color: var(--arka-plan-ana); } /* Period Selector */ .period-selector { display: flex; gap: 4px; padding: 4px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-lg); } .period-btn { padding: 6px 12px; background: transparent; border: none; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); cursor: pointer; transition: all 0.2s ease; } .period-btn.active { background: var(--arka-plan-ana); color: var(--baslik-ana); box-shadow: var(--shadow-sm); } .period-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.5); } /* Chart Date Range */ .chart-date-range { padding: 12px 24px 8px; background: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); text-align: center; } .current-week-dates { font-size: var(--text-base); font-weight: 500; color: var(--metin-ikincil); background: var(--arka-plan-ucuncu); padding: 6px 16px; border-radius: var(--radius-3xl); display: inline-block; border: 1px solid var(--kenarlik-ana); } /* Revenue Chart - Duplicate removed, using the main definition above */ /* .chart-placeholder { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); } */ #revenueChart, .revenue-chart > div { width: 100% !important; height: 100% !important; max-height: 280px; } .chart-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .legend-item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-sm); } .legend-color { width: 12px; height: 12px; border-radius: 3px; } .legend-item span:nth-child(2) { flex: 1; color: var(--metin-ucuncu); } .legend-value { font-weight: 600; color: var(--baslik-ana); } /* Alert Card */ .alert-card { border-left: 4px solid var(--ana-kirmizi); } .alert-list { display: flex; flex-direction: column; gap: var(--spacing-lg); } .alert-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); } .alert-item.critical { background: var(--durum-hata-acik); /* border-color: var(--kenarlik-ana); */ } .alert-item.warning { background: var(--durum-uyari-acik); /* border-color: var(--kenarlik-ana); */ } .alert-item.info { background: var(--durum-bilgi-acik); border-color: var(--kenarlik-ana); } .alert-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .alert-item.critical .alert-icon { background: var(--durum-hata); color: var(--arka-plan-ana); } .alert-item.warning .alert-icon { background: var(--durum-uyari); color: var(--arka-plan-ana); } .alert-item.info .alert-icon { background: var(--ana-mavi); color: var(--arka-plan-ana); } .alert-content { flex: 1; } .alert-content h4 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin-bottom: 2px; } .alert-content p { font-size: var(--text-sm); color: var(--metin-ucuncu); margin: 0 0 4px 0; } .alert-time { font-size: 11px; color: var(--metin-dorduncu); } .alert-action { width: 32px; height: 32px; border: none; background: var(--arka-plan-ana); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--metin-ucuncu); cursor: pointer; transition: all 0.2s ease; } .alert-action:hover { background: var(--ana-mavi); color: var(--metin-beyaz); /* transform: translateY(-1px); */ box-shadow: 0 2px 8px var(--golge-mavi); } /* Staff List */ .staff-list { display: flex; flex-direction: column; gap: var(--spacing-lg); } .staff-item { display: flex; align-items: center; gap: var(--spacing-md); border-bottom: 1px solid var(--kenarlik-ikincil); padding-bottom: 10px; cursor: default; } .staff-avatar { position: relative; width: 40px; height: 40px; } .staff-avatar img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } .staff-avatar .status-dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--arka-plan-ana); } .staff-avatar.online .status-dot { background: var(--durum-basarili); } .staff-avatar.offline .status-dot { background: var(--metin-ucuncu); } .staff-info { flex: 1; } .staff-info h4 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin-bottom: 2px; } .staff-info p { font-size: var(--text-sm); color: var(--metin-ucuncu); margin: 0; } .workload-badge { padding: 4px 10px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; } .workload-badge.busy { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .workload-badge.available { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .workload-badge.offline { background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); } /* Task List */ .task-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .task-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 12px; background: var(--arka-plan-ikincil); border-radius: 10px; border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .task-item:hover { background: var(--arka-plan-ucuncu); } .task-item.urgent { border-left: 3px solid var(--ana-kirmizi); background: var(--durum-hata-acik); } .task-checkbox { position: relative; display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; padding: 4px; margin: -4px; } .task-checkbox input[type="checkbox"] { opacity: 0; width: 18px; height: 18px; position: absolute; cursor: pointer; z-index: 1; } .task-checkbox .checkmark { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; } .task-checkbox:hover .checkmark { border-color: var(--durum-basarili); box-shadow: 0 0 0 2px var(--golge-odak); } .task-checkbox input:checked + .checkmark { background: var(--ana-yesil) !important; border-color: var(--ana-yesil) !important; } .task-checkbox input:checked + .checkmark::after { content: '✓' !important; color: var(--metin-beyaz) !important; font-size: 12px !important; font-weight: bold !important; opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; transition: all 0.2s ease !important; } .task-checkbox .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } /* Tamamlanan görev stilleri */ .task-item.completed { opacity: 0.6; background: var(--durum-basarili-arka-plan); border-left: 4px solid var(--durum-basarili); } .task-item.completed .task-content h4 { text-decoration: line-through; color: var(--metin-ikincil); } .task-item.completed .task-content p { color: var(--metin-ikincil); } .task-item.completed .task-time .time-badge { background: var(--durum-basarili); color: var(--metin-beyaz); } .task-content { flex: 1; } .task-content h4 { font-size: 13px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 2px; } .task-content p { font-size: var(--text-sm); color: var(--metin-ucuncu); margin: 0; } /* .time-badge { padding: 4px 8px; background: var(--arka-plan-dorduncu); border-radius: var(--radius-lg); font-size: 11px; font-weight: 500; color: var(--metin-ucuncu); } */ .date-badge { padding: 4px 8px; background: var(--durum-bilgi-acik); border-radius: var(--radius-lg); font-size: 11px; font-weight: 500; color: var(--durum-bilgi-metin); } .time-badge.urgent { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } /* Activity Timeline */ .activity-timeline { display: flex; flex-direction: column; gap: var(--spacing-lg); } .activity-item { display: flex; align-items: flex-start; gap: var(--spacing-md); position: relative; } .activity-item::before { content: ''; position: absolute; left: 18px; top: 36px; bottom: -16px; width: 2px; background: var(--arka-plan-dorduncu); } .activity-item:last-child::before { display: none; } .activity-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: var(--text-base); color: var(--arka-plan-ana); flex-shrink: 0; } .activity-icon.success { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); } .activity-icon.info { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .activity-icon.warning { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%); } .activity-icon.primary { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%); } .activity-content { flex: 1; padding-top: 6px; } .activity-content p { font-size: 13px; color: var(--metin-ana); margin: 0 0 4px 0; } .activity-content strong { color: var(--baslik-ana); font-weight: 600; } .activity-time { font-size: 11px; color: var(--metin-dorduncu); } /* Activity Timeline - Minimal Version */ .activity-timeline-minimal { display: flex; flex-direction: column; gap: 12px; } .activity-item-minimal { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md); transition: background 0.2s ease; } .activity-item-minimal:hover { background: var(--arka-plan-ikincil); } .activity-icon-minimal { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--arka-plan-ana); flex-shrink: 0; } .activity-icon-minimal.success { background: var(--ana-yesil); } .activity-icon-minimal.info { background: var(--ana-mavi); } .activity-icon-minimal.warning { background: var(--ana-sari); } .activity-icon-minimal.primary { background: var(--ana-mor); } .activity-content-minimal { flex: 1; } .activity-content-minimal p { font-size: 13px; color: var(--metin-ana); margin: 0 0 2px 0; line-height: 1.4; } .activity-content-minimal strong { color: var(--baslik-ana); font-weight: 600; } .activity-time-minimal { font-size: 11px; color: var(--metin-dorduncu); } /* Activity Timeline - Enhanced Version */ .activity-timeline-enhanced { display: flex; flex-direction: column; gap: 5px; position: relative; } .activity-timeline-enhanced::before { content: ''; position: absolute; left: 32px; top: 30px; bottom: 30px; width: 2px; background: var(--kenarlik-ikincil); } .activity-item-enhanced { display: flex; align-items: center; gap: 16px; position: relative; padding: 12px; border-radius: var(--radius-lg); border: 1px solid transparent; transition: all 0.3s ease; } .activity-item-enhanced:hover { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ana); transform: translateX(4px); } .activity-icon-wrapper { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--metin-beyaz); flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 4px 12px var(--golge-ikincil); } .activity-icon-wrapper.success { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--ana-yesil-koyu) 100%); } .activity-icon-wrapper.info { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-koyu) 100%); } .activity-icon-wrapper.warning { background: linear-gradient(135deg, var(--durum-uyari) 0%, var(--durum-uyari-koyu) 100%); } .activity-icon-wrapper.primary { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%); } .activity-icon-wrapper.danger { background: linear-gradient(135deg, var(--durum-hata) 0%, var(--durum-hata-koyu) 100%); } .activity-content-enhanced { flex: 1; padding-top: 4px; } .activity-content-enhanced .activity-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .activity-content-enhanced h4 { font-size: 14px; font-weight: 600; color: var(--baslik-ana); margin: 0; } .activity-content-enhanced .activity-time { font-size: 11px; color: var(--metin-ucuncu); font-weight: 500; } .activity-content-enhanced p { font-size: 13px; color: var(--metin-ikincil); margin: 0 0 6px 0; line-height: 1.5; } .activity-content-enhanced strong { color: var(--metin-ana); font-weight: 600; } .activity-content-enhanced .activity-user { font-size: 11px; color: var(--metin-ucuncu); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-sm); } .activity-content-enhanced .activity-user::before { content: '\f2bb'; /* fa-address-card icon */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; margin-right: 4px; } /* Muayene Odaları Durumu Kartı */ .room-status-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } .room-stat-item { display: flex; flex-direction: column; align-items: center; padding: 16px 12px; border-radius: var(--radius-lg); /* border: 2px solid var(--kenarlik-ana); */ border: 2px solid transparent; text-align: center; border: 1px solid var(--kenarlik-ana); cursor: default; } .room-stat-item.available { /* background: var(--durum-basarili-acik); */ background: var(--arka-plan-ikincil); /* border-color: var(--durum-basarili); */ } .room-stat-item.occupied { /* background: var(--durum-hata-acik-light); */ background: var(--arka-plan-ikincil); /* border-color: var(--ana-kirmizi-acik); */ } .room-stat-item.maintenance { /* background: var(--durum-uyari-acik); */ background: var(--arka-plan-ikincil); /* border-color: var(--durum-uyari); */ } .room-stat-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 8px; font-size: 14px; } .room-stat-item.available .room-stat-icon { background: var(--durum-basarili); color: var(--metin-beyaz); } .room-stat-item.occupied .room-stat-icon { background: var(--ana-kirmizi); color: var(--metin-beyaz); } .room-stat-item.maintenance .room-stat-icon { background: var(--ana-sari); color: var(--metin-beyaz); } .room-stat-info h4 { font-size: 24px; font-weight: 700; margin: 0 0 2px 0; color: var(--baslik-ana); } .room-stat-info p { font-size: 12px; margin: 0; color: var(--metin-ucuncu); font-weight: 500; } .room-current-activity { padding: 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .room-current-activity:hover { background-color: var(--arka-plan-altinci); } .activity-header { margin-bottom: 8px; } .activity-label { font-size: 11px; color: var(--metin-ucuncu); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .room-activity-item { display: flex; justify-content: space-between; align-items: center; } .room-name { font-size: 13px; font-weight: 600; color: var(--ana-mavi); } .room-patient { font-size: 12px; color: var(--metin-ikincil); } /* Stok Uyarıları Kartı */ .stock-alerts { display: flex; flex-direction: column; gap: 16px; } .stock-alert-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .alert-stat { display: flex; flex-direction: column; align-items: center; padding: 12px 8px; border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); text-align: center; cursor: default; } .alert-stat.critical { /* background: var(--durum-hata-acik-light); */ background-color: var(--arka-plan-ikincil); /* border: 1px solid var(--durum-hata-kenarlik); */ /* border: 1px solid transparent; */ } .alert-stat.warning { /* background: var(--durum-uyari-acik); */ background-color: var(--arka-plan-ikincil); /* border: 1px solid var(--durum-uyari-kenarlik); */ /* border: 1px solid transparent; */ } .alert-stat.expired { /* background: var(--arka-plan-ikincil); */ background-color: var(--arka-plan-ikincil); /* border: 1px solid var(--kenarlik-ana); */ border: 1px solid transparent; } .alert-count { font-size: 20px; font-weight: 700; margin-bottom: 2px; } .alert-stat.critical .alert-count { color: var(--ana-kirmizi); } .alert-stat.warning .alert-count { color: var(--ana-sari-koyu); } .alert-stat.expired .alert-count { color: var(--metin-ikincil); } .alert-label { font-size: 11px; color: var(--metin-ucuncu); font-weight: 500; } .stock-alert-list { display: flex; flex-direction: column; gap: 8px; } .stock-alert-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); background: var(--kart-arka-plan); transition: all 0.2s ease; } .stock-alert-item i { font-size: 14px; flex-shrink: 0; } .stock-alert-item.critical { border-color: var(--durum-hata-kenarlik); background: var(--durum-hata-acik-light); } .stock-alert-item.critical:hover { border-color: var(--ana-kirmizi-koyu); } .stock-alert-item.critical i { color: var(--ana-kirmizi); } .stock-alert-item.warning { border-color: var(--durum-uyari-kenarlik); background: var(--durum-uyari-acik); } .stock-alert-item.warning:hover { border-color: var(--durum-uyari-koyu); } .stock-alert-item.warning i { color: var(--ana-sari-koyu); } .stock-alert-info { flex: 1; display: flex; flex-direction: column; gap: 2px; } .stock-name { font-size: 13px; font-weight: 600; color: var(--metin-ana); } .stock-quantity { font-size: 11px; color: var(--metin-ucuncu); } /* Bugünkü Tedaviler - Kompakt Liste */ .treatment-list-compact { display: flex; flex-direction: column; gap: 8px; } .treatment-item-compact { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); cursor: pointer; transition: all 0.2s ease; } .treatment-item-compact:hover { background: var(--arka-plan-altinci); border-color: var(--ana-mavi); } .treatment-item-compact.active { background: var(--durum-bilgi-acik); border-color: var(--ana-mavi); } .treatment-time { flex-shrink: 0; } .treatment-time .time-badge { padding: 4px 8px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-md); font-size: 11px; font-weight: 600; color: var(--metin-ikincil); } .treatment-time .time-badge.current { background: var(--ana-mavi); color: var(--metin-beyaz); } .treatment-info { flex: 1; } .treatment-info h4 { font-size: 13px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 2px 0; } .treatment-info p { font-size: 12px; color: var(--metin-ucuncu); margin: 0; } .treatment-status { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .treatment-status i { font-size: 12px; } /* .treatment-status.pending i { color: var(--metin-ucuncu); } */ .treatment-status.active i { color: var(--ana-mavi); } /* Yatan Hastalar Özeti */ .inpatient-summary { display: flex; flex-direction: column; gap: 16px; } .inpatient-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .inpatient-stat { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-lg); /* border: 2px solid var(--kenarlik-ana); */ /* border: 2px solid transparent; */ border: 1px solid var(--kenarlik-ana); cursor: default; } .inpatient-stat.critical { /* background: var(--durum-hata-acik-light); */ background: var(--arka-plan-ikincil); /* border-color: var(--durum-hata-kenarlik); */ } .inpatient-stat.normal { /* background: var(--durum-basarili-acik); */ background: var(--arka-plan-ikincil); /* border-color: var(--durum-basarili-kenarlik); */ } .inpatient-stat .stat-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .inpatient-stat.critical .stat-icon { background: var(--ana-kirmizi); color: var(--metin-beyaz); } .inpatient-stat.normal .stat-icon { background: var(--ana-yesil); color: var(--metin-beyaz); } .inpatient-stat .stat-info h4 { font-size: 24px; font-weight: 700; margin: 0 0 2px 0; color: var(--baslik-ana); } .inpatient-stat .stat-info p { font-size: 11px; margin: 0; color: var(--metin-ucuncu); font-weight: 500; } .critical-patients { padding: 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .critical-header { margin-bottom: 10px; } .critical-label { font-size: 11px; color: var(--metin-ucuncu); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .critical-patient-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md); margin-bottom: 6px; transition: background 0.2s ease; } .critical-patient-item:last-child { margin-bottom: 0; } .critical-patient-item:hover { background: var(--kart-arka-plan); } .critical-patient-item .patient-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } /* .critical-patient-item .patient-avatar.dog { background: var(--seffaf-mavi); color: var(--ana-mavi); } .critical-patient-item .patient-avatar.cat { background: var(--seffaf-yesil); color: var(--ana-yesil); } */ .patient-info-compact { flex: 1; } .patient-info-compact h4 { font-size: 13px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 2px 0; } .patient-info-compact p { font-size: 11px; color: var(--metin-ucuncu); margin: 0; } .vital-indicator { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .vital-indicator i { font-size: 10px; } .vital-indicator.critical { background: var(--ana-kirmizi); color: var(--metin-beyaz); animation: pulse 2s ease-in-out infinite; } .vital-indicator.stable { background: var(--ana-yesil); color: var(--metin-beyaz); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* #endregion */ /* ------------------------------------ */ /* Anasayfa Dashboard Sayfası Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* Randevu Sayfası Stilleri */ /* ------------------------------------ */ /* #region Appointment Page Styles - Randevu Sayfası Stilleri */ /* View Toggle */ .randevular-page .view-toggle { display: flex; gap: 4px; padding: 4px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-xl); } .randevular-page .view-btn { padding: 10px 16px; background: transparent; border: none; border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 500; color: var(--metin-ucuncu); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: var(--spacing-sm); } .randevular-page .view-btn.active { background: var(--arka-plan-ana); color: var(--ana-mavi); font-weight: 600; box-shadow: var(--shadow-sm); } .randevular-page .view-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.5); color: var(--metin-ana); } /* Date Picker */ .randevular-page .date-picker { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--arka-plan-ana); font-size: var(--text-base); color: var(--metin-ana); cursor: pointer; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 145px; min-width: 145px; } .randevular-page .date-picker:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } /* Calendar Container */ .randevular-page .appointment-section { margin-top: 24px; } .randevular-page .view-content { display: none; } .randevular-page .view-content.active { display: block; } .randevular-page .calendar-container { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); overflow: hidden; } /* Calendar Header */ .randevular-page .calendar-header { padding: 20px 24px; display: flex; align-items: center; gap: var(--spacing-lg); /* background: var(--arka-plan-ana); */ /* border-radius: 12px 12px 0 0; */ /* border: 1px solid #e2e8f0; */ } .randevular-page .calendar-nav { width: 36px; height: 36px; border: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ana); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--metin-ucuncu); cursor: pointer; transition: all 0.2s ease; } .randevular-page .calendar-nav:hover { background: var(--arka-plan-ikincil); color: var(--metin-ana); } .randevular-page .calendar-title { flex: 1; font-size: 18px; font-weight: 600; color: var(--baslik-ana); margin: 0; } .randevular-page .today-btn { margin-left: auto; color: var(--metin-beyaz); } .randevular-page .today-btn:hover { color: var(--metin-beyaz); background-color: var(--ana-mavi-koyu); } /* Calendar Grid */ .randevular-page .calendar-grid { display: flex; height: 600px; overflow: auto; } .randevular-page .time-column { /* width: 80px; */ border-right: 1px solid var(--kenarlik-ana); flex-shrink: 0; } .randevular-page .time-header { height: 60px; background: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); display: flex; align-items: center; justify-content: center; padding: 4px 8px; font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); } .randevular-page .time-slot { height: 30px; padding: 4px 8px; border-bottom: 1px solid var(--arka-plan-ucuncu); font-size: var(--text-sm); color: var(--metin-ucuncu); font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: var(--spacing-sm); position: relative; margin: 0; } .randevular-page .time-slot:hover { background-color: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); border-color: var(--kenarlik-ana); box-shadow: 0 1px 3px var(--golge-odak); } .randevular-page .time-slot-hover { background-color: var(--durum-bilgi-acik) !important; color: var(--durum-bilgi-metin) !important; border-color: var(--kenarlik-ana) !important; box-shadow: 0 1px 3px rgba(14, 165, 233, 0.1) !important; } .randevular-page .day-column { flex: 1; min-width: 150px; border-right: 1px solid var(--kenarlik-ana); position: relative; } .randevular-page .day-column:last-child { border-right: none; } .randevular-page .day-column.today { background: rgba(59, 130, 246, 0.02); } .randevular-page .day-header { height: 60px; padding: 12px; border-bottom: 1px solid var(--kenarlik-ana); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .randevular-page .day-name { font-size: 13px; color: var(--metin-ucuncu); font-weight: 500; } .randevular-page .day-date { font-size: 18px; font-weight: 600; color: var(--baslik-ana); } .randevular-page .today-badge { position: absolute; top: 4px; right: 4px; padding: 2px 6px; background: var(--ana-mavi); color: var(--arka-plan-ana); border-radius: 4px; font-size: 10px; font-weight: 600; } .randevular-page .day-appointments { position: relative; height: calc(100% - 60px); display: flex; flex-direction: column; overflow-y: auto; } /* Appointment Blocks */ /* .appointment-block { position: absolute; left: 4px; right: 4px; padding: 4px 6px; background: linear-gradient(135deg, var(--durum-bilgi-acik) 0%, var(--durum-bilgi-kenarlik) 100%); border: 1px solid var(--ana-mavi); border-left: 3px solid var(--ana-mavi); border-radius: 4px; font-size: 11px; cursor: pointer; transition: all 0.2s ease; overflow: hidden; margin: 1px 0; min-height: 20px; } */ /* Randevu blokları için sabit stiller */ /* .appointment-block { position: relative; width: 100%; height: 30px; margin: 1px 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } */ .randevular-page .appointment-block:hover { /* transform: scale(1.02); */ box-shadow: 0 2px 6px var(--golge-odak); z-index: 10; } .randevular-page .appointment-block.type-surgery { background: var(--durum-uyari-acik); border-color: var(--kenarlik-ana); border-left-color: var(--ana-sari); border-left-width: 4px; } .randevular-page .appointment-block.type-checkup { background: var(--durum-basarili-acik); border-color: var(--kenarlik-ana); border-left-color: var(--ana-yesil); border-left-width: 4px; } .randevular-page .appointment-block.type-vaccination { background: var(--durum-bilgi-acik); border-color: var(--kenarlik-ana); border-left-color: var(--ana-mavi); border-left-width: 4px; } /* .appointment-block.current { animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--golge-mavi); } 50% { box-shadow: 0 0 0 8px transparent; } } */ .randevular-page .appointment-time { font-weight: 600; color: var(--baslik-ana); margin-bottom: 2px; font-size: 10px; line-height: 1.2; } .randevular-page .appointment-title { font-weight: 600; color: var(--metin-ana); margin-bottom: 1px; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .randevular-page .appointment-owner { color: var(--metin-ucuncu); font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* List View */ .randevular-page .appointments-list { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); overflow: hidden; width: 100%; min-width: 100%; } .randevular-page .list-header { display: flex; padding: 16px 24px; background: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); font-size: 13px; font-weight: 600; color: var(--metin-ucuncu); } .randevular-page .list-col { flex: 1; padding: 0 12px; } .randevular-page .list-col:first-child { flex: 0 0 100px; } .randevular-page .list-col:nth-child(2) { flex: 0 0 80px; } .randevular-page .list-col:nth-child(3) { flex: 0 0 180px; } .randevular-page .list-col:last-child { flex: 0 0 120px; } .randevular-page .list-body { /* max-height: 470px; */ overflow-y: auto; } .randevular-page .list-row { display: flex; padding: 20px 24px; border-bottom: 1px solid var(--arka-plan-ucuncu); align-items: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; cursor: pointer; } .randevular-page .list-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; transition: all 0.3s ease; } .randevular-page .list-row:hover { background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, var(--arka-plan-ucuncu) 100%); /* transform: translateX(4px); */ box-shadow: 0 2px 6px var(--golge-hover); } .randevular-page .list-row:hover::before { background: linear-gradient(180deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .randevular-page .list-row:last-child { border-bottom: none; } /* .time-badge { padding: 8px 12px; background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, var(--arka-plan-ucuncu) 100%); border: 1px solid var(--kenarlik-ana); border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--metin-ana); box-shadow: 0 2px 4px var(--golge-ana); transition: all 0.3s ease; } */ .randevular-page .list-row:hover .time-badge { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); color: var(--arka-plan-ana); border-color: var(--kenarlik-ana); transform: scale(1.05); } .randevular-page .patient-info-mini { display: flex; align-items: center; gap: var(--spacing-md); transition: all 0.3s ease; } .randevular-page .patient-info-mini i { color: var(--metin-ucuncu); font-size: 16px; transition: all 0.3s ease; } .randevular-page .patient-info-mini img { width: 20px; height: 20px; object-fit: contain; } .randevular-page .list-row:hover .patient-info-mini i { color: var(--ana-mavi); /* transform: scale(1.1); */ } .randevular-page .patient-info-mini span { font-weight: 600; color: var(--metin-ana); transition: color 0.3s ease; } .randevular-page .list-row:hover .patient-info-mini span { color: var(--ana-mavi); } .randevular-page .service-badge { padding: 4px 10px; /* background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); */ /* border: 1px solid var(--ana-mavi); */ border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--durum-bilgi-metin); } .randevular-page .service-badge.vaccination { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: var(--kenarlik-ana); color: var(--durum-basarili-metin); } .randevular-page .service-badge.surgery { background: linear-gradient(135deg, var(--durum-hata-acik) 0%, var(--durum-hata-kenarlik) 100%); border-color: var(--ana-kirmizi); color: var(--ana-kirmizi-koyu); } .randevular-page .service-badge.checkup { background: linear-gradient(135deg, var(--durum-bilgi-acik) 0%, var(--durum-bilgi-kenarlik) 100%); border-color: var(--kenarlik-ana); color: var(--durum-bilgi-metin); } .randevular-page .service-badge.dental { background: linear-gradient(135deg, var(--durum-uyari-acik) 0%, var(--durum-uyari-kenarlik) 100%); border-color: var(--ana-sari); color: var(--ana-sari-koyu); } .randevular-page .status-badge { padding: 4px 10px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; } .randevular-page .status-badge.completed { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .randevular-page .status-badge.waiting { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .randevular-page .status-badge.cancelled { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } /* Artık genel .action-buttons kullanılıyor */ /* .randevular-page .btn-icon ortak stillerden miras alınır */ .randevular-page .btn-icon:hover { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); border-color: var(--kenarlik-ana); color: var(--arka-plan-ana); /* transform: translateY(-2px) scale(1.05); */ /* box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); */ } /* Patient Search */ /* Searchable Select Styles */ .randevular-page .searchable-select { position: relative; margin-bottom: 12px; } .randevular-page .searchable-select input[type="text"] { width: 100%; padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: var(--text-base); background-color: var(--arka-plan-ana); transition: border-color 0.2s ease; } .randevular-page .searchable-select input[type="text"]:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .randevular-page .select-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-top: none; border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; } .randevular-page .select-dropdown.show { display: block; } .randevular-page .select-options { padding: 0; } .randevular-page .select-option { padding: var(--spacing-md) var(--spacing-lg); cursor: pointer; border-bottom: 1px solid var(--arka-plan-ucuncu); transition: background-color 0.2s ease; font-size: var(--text-base); } .randevular-page .select-option:hover { background-color: var(--arka-plan-ucuncu); transform: none; box-shadow: none; } .randevular-page .select-option.selected { background-color: var(--ana-mavi); color: var(--arka-plan-ana); } .randevular-page .select-option:last-child { border-bottom: none; } /* Custom Time Picker */ .randevular-page .custom-time-picker { position: relative; } .randevular-page .custom-time-picker input[type="text"] { width: 100%; padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: var(--text-base); background-color: var(--arka-plan-ana); cursor: pointer; transition: border-color 0.2s ease; } .randevular-page .custom-time-picker input[type="text"]:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .randevular-page .time-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-top: none; border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; } .randevular-page .time-dropdown.show { display: block; } .randevular-page .time-options { padding: 0; } .randevular-page .time-option { padding: var(--spacing-md) var(--spacing-lg); cursor: pointer; border-bottom: 1px solid var(--arka-plan-ucuncu); transition: background-color 0.2s ease; font-size: var(--text-base); text-align: center; } .randevular-page .time-option:hover { background-color: var(--arka-plan-ikincil); } .randevular-page .time-option.selected { background-color: var(--ana-mavi); color: var(--arka-plan-ana); } .randevular-page .time-option:last-child { border-bottom: none; } /* Appointment Detail */ .randevular-page .appointment-detail { display: flex; flex-direction: column; gap: var(--spacing-lg); } .randevular-page .detail-row { display: flex; align-items: flex-start; gap: var(--spacing-lg); } .randevular-page .detail-row label { min-width: 120px; font-weight: 600; color: var(--metin-ucuncu); font-size: var(--text-base); } .randevular-page .detail-row span, .randevular-page .detail-row p { /* flex: 1; */ color: var(--baslik-ana); font-size: var(--text-base); margin: 0; } .randevular-page .appointment-detail-info .status-badge { width: fit-content; } .randevular-page #appointmentDetailModal .modal-footer { flex-direction: column; } .randevular-page #appointmentDetailModal .modal-header-content { justify-content: flex-start; } /* #endregion */ /* ------------------------------------ */ /* Randevu Sayfası Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* Tedavi Sayfası Stilleri */ /* ------------------------------------ */ /* #region Treatment Page Styles - Tedavi Sayfası Stilleri */ /* Treatments Section */ .tedaviler-page .treatments-section { margin-top: 24px; } /* Treatment Tabs */ .tedaviler-page .treatments-tabs { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); border: 1px solid var(--kenarlik-ana); overflow: hidden; box-shadow: var(--shadow-sm); } /* Treatments Grid */ .tedaviler-page .treatments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--spacing-2xl); /* padding: 32px; */ } /* Treatment Card */ .tedaviler-page .treatment-card { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); padding: 20px; transition: all 0.3s ease; } .tedaviler-page .treatment-card:hover { transform: translateY(-4px); box-shadow: 0 12px 35px var(--golge-ana); } .tedaviler-page .treatment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .tedaviler-page .treatment-badge { padding: 6px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: 6px; } .tedaviler-page .treatment-badge.ongoing { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .tedaviler-page .treatment-badge.scheduled { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .tedaviler-page .treatment-badge.completed { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .tedaviler-page .treatment-actions { display: flex; gap: var(--spacing-sm); } /* Treatment Patient Info */ .tedaviler-page .treatment-patient { display: flex; align-items: center; gap: var(--spacing-lg); padding: 5px 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); margin-bottom: 16px; } /* Bu stiller ana .patient-avatar stilinde birleştirildi */ .tedaviler-page .patient-info h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 2px; } .tedaviler-page .patient-info p { font-size: 13px; color: var(--metin-ucuncu); /* margin: 0 0 4px 0; */ margin: 0; } .tedaviler-page .owner-name { font-size: var(--text-sm); color: var(--metin-dorduncu); } /* Treatment Details */ .tedaviler-page .treatment-details { margin-bottom: 16px; display: flex ; flex-direction: column; gap: 5px; } /* Tedaviler sayfası özel detail-item stili */ .tedaviler-page .treatment-details .detail-item { flex-direction: row; padding: 10px 0 10px 10px; gap: 7px; } /* Treatment Medications */ .tedaviler-page .treatment-medications { margin-bottom: 16px; padding: 12px; background: var(--arka-plan-ikincil); border-radius: 10px; } .tedaviler-page .treatment-medications h5 { font-size: 13px; font-weight: 600; color: var(--metin-ana); margin-bottom: 10px; } .tedaviler-page .medication-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .tedaviler-page .med-tag { padding: 4px 10px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-3xl); font-size: var(--text-sm); color: var(--metin-ana); } /* Procedure List */ .tedaviler-page .procedure-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .tedaviler-page .procedure-item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 13px; color: var(--metin-ana); } .tedaviler-page .procedure-item i { color: var(--ana-yesil); font-size: var(--text-sm); } /* Treatment Progress */ .tedaviler-page .treatment-progress { margin-bottom: 16px; } .tedaviler-page .progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--metin-ucuncu); } .tedaviler-page .progress-bar { height: 8px; background: var(--arka-plan-dorduncu); border-radius: 4px; overflow: hidden; } .tedaviler-page .progress-fill { height: 100%; background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); border-radius: 4px; transition: width 0.3s ease; } /* Treatment Footer */ .tedaviler-page .treatment-notes { margin: 16px 0; padding-top: 16px; border-top: 1px solid var(--kenarlik-ana); } .tedaviler-page .treatment-notes h5 { margin: 0 0 12px 0; font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); } .tedaviler-page .notes-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } /* Not ikon tasarımı */ .tedaviler-page .notes-summary { display: flex; flex-direction: column; gap: var(--spacing-sm); } .tedaviler-page .notes-icons { display: flex; flex-wrap: wrap; gap: 6px; } .tedaviler-page .note-icon { position: relative; width: 32px; height: 32px; background: linear-gradient(135deg, var(--ana-mavi-cok-acik) 0%, var(--ana-mavi-acik) 100%); border: 1px solid var(--ana-mavi); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px var(--golge-odak); } .tedaviler-page .note-icon:hover { transform: translateY(-2px); box-shadow: 0 4px 8px var(--golge-mavi); background: linear-gradient(135deg, var(--ana-mavi-acik) 0%, var(--ana-mavi) 100%); } .tedaviler-page .note-icon i { color: var(--ana-mavi-daha-koyu); font-size: var(--text-base); } .tedaviler-page .note-icon .note-number { position: absolute; top: -4px; right: -4px; background: var(--ana-mavi-daha-koyu); color: var(--metin-beyaz); border-radius: 50%; width: 16px; height: 16px; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--arka-plan-ana); } .tedaviler-page .no-notes { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--metin-dorduncu); font-style: italic; } .tedaviler-page .no-notes i { color: var(--metin-dorduncu); } /* Not detay modalı */ .tedaviler-page .note-detail { padding: 16px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .tedaviler-page .note-detail-text { font-size: var(--text-base); line-height: 1.5; color: var(--metin-ana); margin-bottom: 12px; white-space: pre-wrap; } .tedaviler-page .note-detail-time { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--metin-dorduncu); } .tedaviler-page .note-detail-time i { color: var(--metin-dorduncu); } .tedaviler-page .treatment-footer { display: flex; gap: var(--spacing-sm); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kenarlik-ana); } /* .tedaviler-page .treatment-footer .btn-small { flex: 1; } */ /* Today Schedule */ /* .today-schedule { padding: 24px; } */ .tedaviler-page .schedule-timeline { display: flex; flex-direction: column; gap: 10px; } .tedaviler-page .schedule-hour { display: flex; /* border-bottom: 1px solid #f1f5f9; */ min-height: 80px; } .tedaviler-page .hour-label { width: 80px; padding: 16px; font-size: var(--text-base); font-weight: 600; color: var(--metin-ucuncu); } /* .hour-treatments { flex: 1; padding: 12px; } */ .tedaviler-page .schedule-item { display: flex; align-items: center; gap: var(--spacing-lg); padding: 12px; background: var(--arka-plan-ikincil); border-radius: 10px; border-left: 3px solid var(--ana-mavi); } /* .tedaviler-page .schedule-item.current { background: linear-gradient(135deg, var(--ana-mavi-cok-acik) 0%, var(--ana-mavi-acik) 100%); border-left-color: var(--ana-mavi-daha-koyu); box-shadow: 0 2px 8px var(--golge-mavi); } */ /* .tedaviler-page .schedule-actions { display: flex; gap: var(--spacing-sm); margin-top: 8px; justify-content: flex-end; } */ .tedaviler-page .schedule-actions { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex-wrap: nowrap !important; } .tedaviler-page .schedule-actions .btn-icon { width: 32px; height: 32px; font-size: 12px; flex-grow: 0 !important; margin: 0 !important; } .tedaviler-page .schedule-actions .btn-icon:hover { /* transform: translateY(-1px) !important; */ /* box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; */ background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%) !important; color: var(--arka-plan-ana) !important; } .tedaviler-page .schedule-time { font-size: var(--text-sm); font-weight: 600; color: var(--metin-ucuncu); min-width: 80px; } .tedaviler-page .schedule-content { flex: 1; } .tedaviler-page .schedule-patient { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-base); color: var(--baslik-ana); margin-bottom: 4px; } .tedaviler-page .schedule-patient i { color: var(--metin-ucuncu); } .tedaviler-page .schedule-patient img { width: 18px; height: 18px; object-fit: contain; } .tedaviler-page .schedule-patient strong { font-weight: 600; } .tedaviler-page .schedule-doctor { font-size: var(--text-sm); color: var(--metin-ucuncu); } .tedaviler-page .schedule-status { padding: 6px 12px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .tedaviler-page .schedule-status.completed { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .tedaviler-page .schedule-status.in-progress { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } /* Treatments Table */ /* .completed-treatments { padding: 24px; } */ .tedaviler-page .treatments-table { width: 100%; border-collapse: collapse; } .tedaviler-page .treatments-table thead { background: var(--arka-plan-ikincil); } .tedaviler-page .treatments-table th { padding: var(--spacing-md) var(--spacing-lg); text-align: left; font-size: 13px; font-weight: 600; color: var(--metin-ucuncu); border-bottom: 1px solid var(--kenarlik-ana); } .tedaviler-page .treatments-table td { padding: 16px; border-bottom: 1px solid var(--arka-plan-ucuncu); font-size: var(--text-base); color: var(--metin-ana); vertical-align: middle; } /* İşlemler sütunu için özel düzenleme */ .tedaviler-page .treatments-table td:last-child { text-align: center; width: 120px; min-width: 120px; } /* Tedaviler tablosu için action-buttons düzenlemesi - GÜÇLENDİRİLMİŞ */ .tedaviler-page .treatments-table .action-buttons { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex-wrap: nowrap !important; white-space: nowrap !important; width: auto !important; height: auto !important; min-width: fit-content !important; } .tedaviler-page .treatments-table .btn-icon { width: 32px; height: 32px; transition: all 0.2s ease !important; font-size: 14px !important; flex-shrink: 0 !important; flex-grow: 0 !important; margin: 0 !important; padding: 0 !important; } .tedaviler-page .treatments-table .btn-icon:hover { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%) !important; border-color: var(--kenarlik-ana) !important; color: var(--arka-plan-ana) !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px var(--golge-mavi) !important; } /* .tedaviler-page .treatments-table tbody tr:hover { background: var(--arka-plan-ikincil); } */ .tedaviler-page .patient-info-mini { display: flex; align-items: center; gap: 10px; } .tedaviler-page .patient-info-mini i { color: var(--metin-ucuncu); font-size: 16px; } .tedaviler-page .patient-info-mini strong { display: block; font-weight: 600; color: var(--baslik-ana); } .tedaviler-page .patient-info-mini small { display: block; font-size: var(--text-sm); color: var(--metin-ucuncu); } .tedaviler-page .result-badge { padding: 4px 10px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; } .tedaviler-page .result-badge.success { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .tedaviler-page .result-badge.partial { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } /* Form Sections - ortak alanda tanımlı */ /* Medication Row */ .medication-row { display: flex; gap: var(--spacing-sm); margin-bottom: 12px; align-items: center; padding: 12px; background-color: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); width: 100%; box-sizing: border-box; overflow: hidden; } .medication-row input, .medication-row select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: 13px; background-color: var(--kart-arka-plan); transition: border-color 0.2s ease; box-sizing: border-box; } /* Medication row select elementleri için FontAwesome ikon stili */ .medication-row select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; padding-right: 30px; cursor: pointer; } .medication-row input:focus, .medication-row select:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .medication-row input:first-child { flex: 2; min-width: 120px; } .medication-row input:nth-child(2), .medication-row select:nth-child(3), .medication-row input:nth-child(4) { flex: 1; /* min-width: 80px; max-width: 100px; */ } .medication-row .btn-icon { flex: 0 0 32px; width: 32px; height: 32px; background-color: var(--ana-kirmizi); color: var(--metin-beyaz); border: none; cursor: pointer; transition: all 0.2s ease; margin-left: 4px; } .medication-row .btn-icon:hover { background-color: var(--ana-kirmizi-acik); color: var(--metin-beyaz); } #medicationsList { margin-bottom: 16px; } /* Prescription Medicines */ .prescription-medicines { margin-bottom: 20px; } .prescription-medicines h4 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin-bottom: 12px; } .medicine-item { margin-bottom: 12px; padding: 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); } .medicine-item .form-group { margin-bottom: 0; } .medicine-item .form-row { grid-template-columns: 5fr 5fr 1fr; align-items: center; } /* #endregion */ /* Tedavi Raporu Modal - Standart Stil */ #treatmentReportModal .form-section { margin-bottom: 20px; padding: 16px; background: var(--kart-arka-plan); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } #treatmentReportModal .form-section h4 { margin: 0 0 12px 0; font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); } #treatmentReportModal .form-group label { font-size: var(--text-sm); margin-bottom: 4px; } #treatmentReportModal .form-group span { font-size: var(--text-base); color: var(--metin-ana); font-weight: 500; } #treatmentReportModal .form-group p { margin: 0; font-size: var(--text-base); color: var(--metin-ana); line-height: 1.5; } .result-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: var(--text-sm); font-weight: 500; background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } /* ------------------------------------ */ /* Tedavi Sayfası Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* Radyoloji Sayfası Stilleri */ /* ------------------------------------ */ /* #region Radiology Page Styles - Radyoloji Sayfası Stilleri */ /* Radyoloji Tab System */ /* .radyoloji-page .radiology-tabs { margin-top: 24px; } .radyoloji-page .radiology-tabs .tab-buttons { display: flex; background: var(--arka-plan-ana); border-radius: 12px 12px 0 0; padding: 4px; margin-bottom: 0; box-shadow: 0 2px 8px var(--golge-ana); border: 1px solid var(--kenarlik-ana); } .radyoloji-page .radiology-tabs .tab-btn { flex: 1; padding: 20px 24px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); font-size: 16px; font-weight: 600; color: var(--metin-ucuncu); cursor: pointer; transition: all 0.3s ease; position: relative; } .radyoloji-page .radiology-tabs .tab-btn:hover { background: rgba(59, 130, 246, 0.05); color: var(--ana-mavi); } .radyoloji-page .radiology-tabs .tab-btn.active { background: var(--arka-plan-ana); color: var(--ana-mavi); /* box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); }*/ .radyoloji-page .radiology-tabs .tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .radyoloji-page .radiology-tabs .tab-btn i { font-size: 18px; } */ .radyoloji-page .image-actions { margin-bottom: 20px; } .radyoloji-page .patient-name { font-weight: 600; margin-bottom: 0; background: green; padding: 5px; border-radius: 5px; background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .radyoloji-page .lab-request-item .request-date, .radyoloji-page .lab-request-item .request-doctor { border: 1px solid var(--kenarlik-ana); padding: 5px 10px; border-radius: 5px; } .radyoloji-page .patient-breed { font-weight: 500; } .radyoloji-page #labRequestsTab .request-details, .radyoloji-page #xrayRequestsTab .request-details { display: flex !important; gap: 5px !important; align-items: center; } .radyoloji-page .radiology-tabs .tab-content { display: none; padding: 32px; min-height: auto; background: var(--arka-plan-ana); border-radius: 0 0 12px 12px; box-shadow: 0 2px 8px var(--golge-ana); border: 1px solid var(--kenarlik-ana); border-top: none; margin-top: -1px; } .radyoloji-page .radiology-tabs .tab-content.active { display: block; animation: tabFadeIn 0.3s ease; } .radyoloji-page .radiology-tabs .tab-content .pending-list, .radyoloji-page .radiology-tabs .tab-content .reports-table { padding: 0; } .radyoloji-page .radiology-tabs .tab-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--kenarlik-ana); } .radyoloji-page .radiology-tabs .tab-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--metin-ana); display: flex; align-items: center; gap: var(--spacing-sm); } .radyoloji-page .radiology-tabs .tab-header h3 i { color: var(--ana-mavi); } /* Bu stiller yeni modal sistemi ile değiştirildi */ /* Rapor Modal Stilleri */ .radyoloji-page .report-content { max-height: 70vh; overflow-y: auto; } .radyoloji-page .report-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--kenarlik-ana); } .radyoloji-page .report-header .patient-info h4 { margin: 0 0 4px 0; font-size: 24px; font-weight: 600; color: var(--metin-ana); } .radyoloji-page .report-header .patient-info p { margin: 0; color: var(--metin-ucuncu); font-size: 16px; } .radyoloji-page .report-meta { display: flex; flex-direction: column; gap: var(--spacing-sm); } .radyoloji-page .meta-item { display: flex; align-items: center; gap: var(--spacing-sm); color: var(--metin-ucuncu); font-size: var(--text-base); } .radyoloji-page .meta-item i { color: var(--ana-mavi); width: 16px; } .radyoloji-page .report-body { margin-bottom: 24px; } .radyoloji-page .report-section { margin-bottom: 20px; } .radyoloji-page .report-section h5 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); border-left: 3px solid var(--ana-mavi); padding-left: 12px; } .radyoloji-page .report-section p { margin: 0; line-height: 1.6; color: var(--metin-ana); text-align: justify; } .radyoloji-page .report-footer { padding-top: 16px; border-top: 1px solid var(--kenarlik-ana); } .radyoloji-page .report-signature { text-align: right; } .radyoloji-page .report-signature p { margin: 4px 0; font-size: var(--text-base); color: var(--metin-ucuncu); } /* Radiology Section */ .radyoloji-page .radiology-section { margin-top: 24px; } .radyoloji-page .patient-detail-modal .section-header { justify-content: flex-start; } /* Section Headers */ .radyoloji-page .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .radyoloji-page .section-header h3 { font-size: 18px; font-weight: 600; color: var(--baslik-ana); display: flex; align-items: center; gap: 10px; } .radyoloji-page .section-header h3 i { color: var(--metin-ucuncu); } /* Pending Scans */ .radyoloji-page .pending-scans { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); padding: 24px; margin-bottom: 24px; } .radyoloji-page .pending-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .radyoloji-page .pending-item { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .radyoloji-page .pending-item:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ana); } .radyoloji-page .pending-item.urgent { border-left: 3px solid var(--ana-kirmizi); background: var(--durum-hata-acik); } .radyoloji-page .pending-priority { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .radyoloji-page .pending-item.urgent .pending-priority { background: var(--durum-hata); color: var(--arka-plan-ana); } .radyoloji-page .pending-priority.normal { background: var(--ana-mavi); color: var(--arka-plan-ana); } .radyoloji-page .pending-info { flex: 1; } .radyoloji-page .patient-info { margin-bottom: 8px; } .radyoloji-page .patient-info strong { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); } .radyoloji-page .patient-info .owner { font-size: var(--text-sm); color: var(--metin-ucuncu); margin-left: 8px; } .radyoloji-page .scan-type { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--metin-ana); } .radyoloji-page .scan-type i { color: var(--metin-ana); } .radyoloji-page .pending-doctor { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .radyoloji-page .pending-doctor span { font-size: 13px; color: var(--metin-ucuncu); } .radyoloji-page .pending-doctor .time { font-weight: 600; color: var(--metin-ana); } .radyoloji-page .pending-actions { display: flex; gap: var(--spacing-sm); } /* Gallery Controls */ .radyoloji-page .gallery-controls { display: flex; gap: var(--spacing-sm); } .radyoloji-page .gallery-btn { padding: var(--spacing-sm) var(--spacing-lg); background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: 13px; font-weight: 500; color: var(--metin-ucuncu); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .radyoloji-page .gallery-btn:hover { background: var(--arka-plan-ikincil); color: var(--metin-ana); border-color: var(--kenarlik-ana); } /* Images Gallery */ .radyoloji-page .images-gallery { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); padding: 24px; margin: 24px 0 0 0; } .radyoloji-page .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-2xl); padding: 0; margin: 0; } /* Image Card */ .radyoloji-page .image-card { background: var(--arka-plan-ana); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); overflow: hidden; transition: all 0.3s ease; } .radyoloji-page .image-card:hover { transform: translateY(-4px); box-shadow: 0 12px 35px var(--golge-ana); } .radyoloji-page .image-preview { position: relative; height: 200px; background: var(--arka-plan-ikincil); overflow: hidden; } .radyoloji-page .image-preview img { width: 100%; height: 100%; object-fit: cover; } .radyoloji-page .image-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: var(--golge-dorduncu); opacity: 0; transition: opacity 0.3s ease; width: 100%; } .radyoloji-page .image-card:hover .image-overlay { opacity: 1; } .radyoloji-page .image-actions { margin-bottom: 12px; } .radyoloji-page .overlay-actions { display: flex; gap: var(--spacing-md); } .radyoloji-page .overlay-btn { width: 44px; height: 44px; background: var(--arka-plan-ana); border: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--metin-ana); cursor: pointer; transition: all 0.2s ease; } .radyoloji-page .overlay-btn:hover { background: var(--ana-mavi); color: var(--arka-plan-ana); /* transform: scale(1.1); */ } /* Pending Status Stilleri */ .radyoloji-page .pending-status { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--ana-sari); color: var(--metin-beyaz); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; cursor: default; } .radyoloji-page .pending-status i { font-size: 10px; } /* Image Modal Stilleri */ .radyoloji-page .image-modal-content { max-width: 900px; width: 90%; } .radyoloji-page .image-container { text-align: center; margin-bottom: 20px; } .radyoloji-page .image-card .image-info { /* background: var(--arka-plan-ikincil); */ padding: 16px; display: flex; flex-direction: column; border-radius: var(--radius-lg); /* margin-bottom: 20px; */ gap: 0; } .radyoloji-page .image-info p { margin: 8px 0; color: var(--metin-ana); } .radyoloji-page .image-info strong { color: var(--metin-ana); } /* Stok More Button Dropdown Stilleri - GENEL DROPDOWN STİLLERİ KULLANILIYOR */ .dropdown-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: 10px 16px; color: var(--metin-ana); text-decoration: none; font-size: var(--text-base); transition: background-color 0.2s ease; border: none; background: none; width: 100%; text-align: left; cursor: pointer; } .dropdown-item:hover { background: var(--arka-plan-ucuncu); color: var(--metin-ana); } .dropdown-item i { width: 16px; text-align: center; } .dropdown-item.warning { color: var(--durum-hata-koyu); } .dropdown-item.warning:hover { background: var(--durum-hata-acik); color: var(--durum-hata-daha-koyu); } .dropdown-divider { height: 1px; background: var(--arka-plan-dorduncu); margin: 4px 0; } /* Stok Tablosu Z-Index Düzeltmesi */ .stock-table tbody tr { position: relative; /* z-index: 1; */ } /* .stock-table tbody tr:hover { z-index: 1; } */ .action-btn.more { position: relative; z-index: 10; } .image-type-badge { position: absolute; top: 12px; right: 12px; padding: 6px 12px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; background: var(--arka-plan-ana); cursor: default; color: var(--metin-beyaz); } .image-type-badge.xray { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); /* color: var(--arka-plan-ana); */ } .image-type-badge.ultrasound { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%); /* color: var(--arka-plan-ana); */ } .image-info { padding: 16px; } .image-patient { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: 12px; } .image-patient i { font-size: 20px; color: var(--metin-ucuncu); } .image-patient img { width: 36px; height: 36px; object-fit: contain; } .image-patient strong { display: block; font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); } .image-patient small { display: block; font-size: var(--text-sm); color: var(--metin-ucuncu); } .image-details { display: flex; gap: var(--spacing-lg); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--arka-plan-ucuncu); } .image-date, .image-doctor { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--metin-ucuncu); } .image-date i, .image-doctor i { font-size: 10px; } .image-description { font-size: 13px; color: var(--metin-ana); margin-bottom: 12px; } .image-report-status { padding: 6px 12px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-lg); font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .image-report-status.has-report { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .image-actions { display: flex; gap: var(--spacing-sm); } /* Reports Table */ .pending-reports { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); padding: 24px; } .reports-table { overflow-x: auto; } .reports-table table { width: 100%; border-collapse: collapse; } .reports-table thead { background: var(--arka-plan-ikincil); } .reports-table th { padding: var(--spacing-md) var(--spacing-lg); text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--metin-ucuncu); border-bottom: 1px solid var(--kenarlik-ana); } .reports-table td { padding: 16px; border-bottom: 1px solid var(--arka-plan-ucuncu); font-size: var(--text-base); color: var(--metin-ana); } /* .reports-table tbody tr:hover { background: var(--arka-plan-ikincil); } */ .scan-badge { padding: 4px 10px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .scan-badge.xray { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); border: 1px solid var(--ana-mavi); } .scan-badge.ultrasound { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); border: 1px solid var(--ana-mor); } .priority-badge { padding: 4px 10px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; } .priority-badge.urgent { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .priority-badge.normal { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } /* Upload Area */ .upload-area { border: 2px dashed var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 48px; text-align: center; background: var(--arka-plan-ikincil); margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; } .upload-area i { font-size: 16px; color: var(--metin-beyaz); } .upload-area h4 { font-size: 16px; font-weight: 600; color: var(--metin-ana); margin-bottom: 8px; } .upload-area p { color: var(--metin-ucuncu); margin: 12px 0; } .upload-info { font-size: var(--text-sm); color: var(--metin-dorduncu); margin-top: 16px; } .upload-list { margin-bottom: 24px; } .upload-list h4 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin-bottom: 12px; } .file-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } /* Image Viewer */ .image-viewer { display: flex; flex-direction: column; height: 600px; } .viewer-toolbar { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: 16px; background: var(--arka-plan-ikincil); border-radius: 12px 12px 0 0; } .viewer-btn { width: 40px; height: 40px; background: var(--metin-ana); border: none; border-radius: var(--radius-lg); color: var(--arka-plan-ana); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .viewer-btn:hover { background: var(--metin-ikincil); } .viewer-btn-reset { margin-left: 12px; background: var(--ana-mavi); /* border: 2px solid var(--ana-mavi-koyu); */ color: var(--metin-beyaz) !important; } .viewer-btn-reset:hover { background: var(--ana-mavi-koyu); /* border-color: var(--ana-mavi); */ color: var(--metin-beyaz) !important; } .viewer-canvas { flex: 1; background: var(--arka-plan-ana); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .viewer-canvas img { max-width: 100%; max-height: 100%; object-fit: contain; will-change: transform; cursor: grab; } .viewer-canvas img:active { cursor: grabbing; } .viewer-info { padding: 16px; background: var(--arka-plan-ikincil); border-radius: 0 0 12px 12px; display: flex; justify-content: space-between; gap: var(--spacing-2xl); } .info-item { display: flex; align-items: center; gap: var(--spacing-sm); } .info-item label { font-size: 13px; font-weight: 600; color: var(--metin-ucuncu); } .info-item span { font-size: 13px; color: var(--baslik-ana); } /* Checkbox Group */ .checkbox-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .checkbox-group label { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-base); background-color: var(--arka-plan-ikincil); color: var(--metin-ana); cursor: pointer; } .checkbox-group .checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .checkbox-group .checkbox-wrapper input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } .checkbox-group .checkbox-wrapper .checkmark { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; } .checkbox-group .checkbox-wrapper:hover .checkmark { border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } .checkbox-group .checkbox-wrapper input[type="checkbox"]:checked + .checkmark { background: var(--ana-mavi); border-color: var(--ana-mavi); } .checkbox-group .checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 1; transform: scale(1); transition: all 0.2s ease; } .checkbox-group .checkbox-wrapper .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } /* Liste Görünümü - Eksik Stiller */ .images-list { display: flex; flex-direction: column; gap: var(--spacing-lg); padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); margin-top: 20px; } .image-list-item { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 20px; display: flex; align-items: center; gap: var(--spacing-xl); transition: all 0.2s ease; box-shadow: var(--shadow-sm); margin-bottom: 12px; } .image-list-item:hover { box-shadow: 0 2px 6px var(--golge-ana); transform: translateY(-2px); border-color: var(--kenarlik-ana); } .list-image-preview { width: 80px; height: 80px; border-radius: var(--radius-lg); overflow: hidden; background: var(--arka-plan-ucuncu); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } .list-image-preview img { width: 100%; height: 100%; object-fit: cover; } .list-image-preview .image-type-badge { position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; color: var(--arka-plan-ana); } .list-image-preview .image-type-badge.xray { background-color: var(--ana-mavi); } .list-image-preview .image-type-badge.ultrasound { background-color: var(--ana-yesil); } .list-image-info { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-md); min-width: 0; } .list-patient-info { display: flex; align-items: center; gap: var(--spacing-md); } /* Bu stiller ana .patient-avatar stilinde birleştirildi */ .patient-details h4 { font-size: 16px; font-weight: 600; color: var(--metin-ana); margin: 0 0 4px 0; line-height: 1.4; } .patient-details p { font-size: var(--text-base); color: var(--metin-ucuncu); margin: 0; line-height: 1.4; } .list-image-details { display: flex; flex-direction: column; gap: var(--spacing-sm); } .list-image-status { margin-top: 8px; } /* Bu stil yukarıda genel bölümde tanımlandı */ .status-badge.pending { background-color: var(--durum-uyari-acik); color: var(--durum-uyari-koyu); } .status-badge.success { background-color: var(--durum-basarili-acik); color: var(--durum-basarili-koyu); } .status-badge.urgent { background-color: var(--durum-hata-acik); color: var(--durum-hata-koyu); } .list-image-actions { display: flex; gap: var(--spacing-sm); flex-shrink: 0; } /* .btn-icon ortak tanımda (satır 1671) - bu tekrar tanım silindi */ .radyoloji-page .btn-icon { /* transition: all 0.2s ease; */ font-size: var(--text-base); } .btn-icon:hover { background-color: var(--arka-plan-ikincil); border-color: var(--kenarlik-ana); /* color: #374151; */ } .btn-icon.primary { background-color: var(--ana-mavi); color: var(--arka-plan-ana); border-color: var(--kenarlik-ana); } .btn-icon.primary:hover { background-color: var(--ana-mavi); border-color: var(--kenarlik-ana); } .btn-icon.success { background-color: var(--ana-yesil); color: var(--arka-plan-ana); border-color: var(--kenarlik-ana); } .btn-icon.success:hover { background-color: var(--durum-basarili-koyu); border-color: var(--durum-basarili-koyu); } /* Media query kaldırıldı */ /* Media query kaldırıldı */ /* #endregion */ /* ------------------------------------ */ /* Radyoloji Sayfası Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* Stok Sayfası Stilleri */ /* ------------------------------------ */ /* #region Stok Sayfası Özel Stilleri */ /* #region Stock Layout - Stok Düzeni */ .stok-page .stock-layout { display: flex; flex-direction: column; gap: 0; margin-bottom: 32px; } @media (max-width: 480px) { .stok-page .stock-layout { margin-bottom: 0 !important; } .stok-page .stock-layout > *:last-child { margin-bottom: 0 !important; } } /* Bu stiller yeni modal sistemi ile değiştirildi */ .stok-page .stock-tabs { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); overflow: visible !important; border: 1px solid var(--kenarlik-ana); box-shadow: 0 4px 15px var(--golge-hover); } .stok-page .tab-actions { display: flex; align-items: center; gap: var(--spacing-md); } /* #endregion */ /* Stok sayfası tab header filter-select özel stilleri */ .stok-page .tab-header .filter-select { min-width: 200px; max-width: 200px; width: 200px; } /* Stok sayfası filter-group içindeki butonlar */ .stok-page .filter-group .btn-outline { height: 40px; padding: 10px 16px; white-space: nowrap; display: flex; align-items: center; gap: 8px; } /* #region Stock Table - Stok Tablosu */ .stok-page .stock-table-container, .stok-page .table-container { overflow: visible !important; border-radius: 0 0 20px 20px; background: var(--arka-plan-ana); margin-bottom: 0 !important; padding-bottom: 0 !important; } .stok-page .stock-table-container tbody:last-child, .stok-page .stock-table-container table tbody:last-child, .stok-page .table-container tbody:last-child, .stok-page .table-container table tbody:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } .stok-page .stock-table-container .stock-table tbody tr:last-child, .stok-page .stock-table-container table tbody tr:last-child, .stok-page .table-container .stock-table tbody tr:last-child, .stok-page .table-container table tbody tr:last-child { margin-bottom: 0 !important; } .stok-page .checkbox-group { grid-template-columns: repeat(2, 1fr); } .stok-page .stock-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); display: table !important; } .stok-page .stock-table thead { background: var(--arka-plan-ikincil); border-bottom: 2px solid var(--kenarlik-ana); } .stok-page .stock-table th { padding: 16px 20px; text-align: left; font-weight: 600; color: var(--metin-ana); text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.5px; border-bottom: 1px solid var(--kenarlik-ana); } .stok-page .stock-table tbody tr { border-bottom: 1px solid var(--arka-plan-ucuncu); transition: all 0.2s ease; } .stok-page .stock-table tbody tr { position: relative; z-index: 0; } /* Stok sayfası - Menü açıkken hover efektlerini devre dışı bırak */ .stok-page .stock-table tbody tr:hover .dropdown-menu.show ~ * { pointer-events: none; } .stok-page .stock-table tbody tr:has(.dropdown-menu.show) { z-index: 999999999 !important; } .stok-page .stock-table tbody tr:has(.dropdown-menu.show) ~ tr { pointer-events: none; } .stok-page .stock-table td { padding: 16px 20px; vertical-align: middle; border-bottom: 1px solid var(--arka-plan-ucuncu); } /* Checkbox Styling */ .stok-page .stock-table .checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; pointer-events: auto; position: relative; } .stok-page .stock-table .checkbox-wrapper input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; pointer-events: auto; z-index: 2; margin: 0; cursor: pointer; } .stok-page .stock-table .checkbox-wrapper .checkmark { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; position: relative; z-index: 1; } .stok-page .stock-table .checkbox-wrapper:hover .checkmark { border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } .stok-page .stock-table .checkbox-wrapper input[type="checkbox"]:checked + .checkmark { background: var(--ana-mavi); border-color: var(--ana-mavi); } .stok-page .stock-table .checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 1; transform: scale(1); transition: all 0.2s ease; } .stok-page .stock-table .checkbox-wrapper .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } /* #endregion */ /* Hastalar ve Faturalama tabloları - Checkbox stilleri (Stok ile uyumlu) */ .hastalar-page table .checkbox-wrapper, .faturalama-page .invoice-table .checkbox-wrapper { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); cursor: pointer; pointer-events: auto; position: relative; } .hastalar-page table .checkbox-wrapper input[type="checkbox"], .faturalama-page .invoice-table .checkbox-wrapper input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; pointer-events: auto; z-index: 2; margin: 0; cursor: pointer; } .hastalar-page table .checkbox-wrapper .checkmark, .faturalama-page .invoice-table .checkbox-wrapper .checkmark { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; position: relative; z-index: 1; } .hastalar-page table .checkbox-wrapper:hover .checkmark, .faturalama-page .invoice-table .checkbox-wrapper:hover .checkmark { border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } .hastalar-page table .checkbox-wrapper input[type="checkbox"]:checked + .checkmark, .faturalama-page .invoice-table .checkbox-wrapper input[type="checkbox"]:checked + .checkmark { background: var(--ana-mavi); border-color: var(--ana-mavi); } .hastalar-page table .checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after, .faturalama-page .invoice-table .checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 1; transform: scale(1); transition: all 0.2s ease; } .hastalar-page table .checkbox-wrapper .checkmark::after, .faturalama-page .invoice-table .checkbox-wrapper .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } /* #region Product Info Cells - Ürün Bilgi Hücreleri */ .stok-page .product-info { display: flex ; /* flex-direction: column; */ align-items: center; gap: 16px; } .stok-page .product-icon { width: 48px; height: 48px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--arka-plan-ana); flex-shrink: 0; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .stok-page .product-icon.medicine, .stok-page .product-icon.medicines { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .stok-page .product-icon.vaccine, .stok-page .product-icon.vaccines { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); } .stok-page .product-icon.supplies { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%); } .stok-page .product-icon.cleaning { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%); } .stok-page .product-icon.food, .stok-page .product-icon.foods { background: linear-gradient(135deg, var(--ana-kirmizi) 0%, var(--ana-kirmizi-koyu) 100%); } .stok-page .product-icon.accessories, .stok-page .product-icon.accessory { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%); } .stok-page .product-details h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 4px; } .stok-page .product-details p { font-size: var(--text-sm); color: var(--metin-ucuncu); margin-bottom: 4px; } .stok-page .product-code { font-size: 11px; background: var(--arka-plan-dorduncu); color: var(--metin-ana); padding: 2px 8px; border-radius: var(--radius-md); font-weight: 500; /* font-family: 'Monaco', 'Consolas', monospace; */ font-family: 'Inter', sans-serif; } /* #endregion */ /* #region Category Badges - Kategori Rozetleri */ .stok-page .category-badge { padding: 6px 12px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .stok-page .category-badge.medicine, .stok-page .category-badge.medicines { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); /* border: 1px solid var(--kenarlik-ana); */ } .stok-page .category-badge.vaccine, .stok-page .category-badge.vaccines { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); /* border: 1px solid var(--kenarlik-ana); */ } .stok-page .category-badge.supplies { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); /* border: 1px solid var(--kenarlik-ana); */ } .stok-page .category-badge.cleaning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); /* border: 1px solid var(--kenarlik-ana); */ } .stok-page .category-badge.food { background: var(--durum-hata-acik); color: var(--durum-hata-metin); /* border: 1px solid var(--kenarlik-ana); */ } .stok-page .category-badge.accessories, .stok-page .category-badge.accessory { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); /* border: 1px solid var(--kenarlik-ana); */ } /* #endregion */ /* #region Stock Quantity - Stok Miktarı */ .stok-page .stock-quantity { display: flex; align-items: baseline; gap: 6px; /* margin-bottom: 8px; */ } .stok-page .stock-quantity .quantity { font-size: 18px; font-weight: 700; color: var(--baslik-ana); } .stok-page .stock-quantity .unit { font-size: var(--text-sm); color: var(--metin-ucuncu); font-weight: 500; } .stok-page .stock-alert { /* display: flex; */ align-items: center; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .stok-page .stock-alert.normal { color: var(--durum-basarili-metin); } .stok-page .stock-alert.warning { color: var(--durum-uyari-metin); } .stok-page .stock-alert.critical { color: var(--durum-hata-metin); } .stok-page .stock-alert i { font-size: 10px; } /* #endregion */ /* #region Price and Date Cells - Fiyat ve Tarih Hücreleri */ .stok-page .price { font-size: 16px; font-weight: 600; color: var(--durum-basarili-koyu); } .stok-page .expiry-date { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); display: block; margin-bottom: 4px; } .stok-page .days-left { font-size: 11px; color: var(--metin-ucuncu); background: var(--arka-plan-ucuncu); padding: 2px 6px; border-radius: var(--radius-md); font-weight: 500; } /* #endregion */ /* #region Status Badges - Durum Rozetleri */ .stok-page .status-badge { padding: 6px 12px; border-radius: var(--radius-3xl); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .stok-page .status-badge.active { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); /* border: 1px solid var(--kenarlik-ana); */ } .stok-page .status-badge.inactive { background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); /* border: 1px solid var(--kenarlik-ana); */ } .stok-page .status-badge.discontinued { background: var(--durum-hata-acik); color: var(--durum-hata-metin); /* border: 1px solid var(--kenarlik-ana); */ } /* #endregion */ /* #region Action Buttons - Aksiyon Butonları */ /* Artık genel .action-buttons kullanılıyor */ /* Artık genel .action-btn kullanılıyor */ /* Artık genel .action-btn.edit kullanılıyor */ /* Artık genel .action-btn.stock-in kullanılıyor */ /* Artık genel .action-btn.stock-out kullanılıyor */ /* Artık genel .action-btn.more kullanılıyor */ /* #endregion */ /* #region Critical Stock Cards - Kritik Stok Kartları */ .stok-page .critical-stock-list { display: flex; flex-direction: column; gap: var(--spacing-xl); } .stok-page .critical-stock-card { background: var(--arka-plan-ana); border-radius: 16px; padding: 24px; border: 1px solid var(--kenarlik-ana); border-left: 4px solid var(--ana-kirmizi); transition: all 0.3s ease; } .stok-page .critical-stock-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } .stok-page .critical-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .stok-page .critical-alert { display: flex; align-items: center; gap: 6px; padding: var(--spacing-sm) var(--spacing-lg); background: linear-gradient(135deg, var(--durum-hata-acik) 0%, var(--durum-hata-acik) 100%); color: var(--durum-hata-metin); border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; /* border: 1px solid var(--kenarlik-ana); */ } .stok-page .critical-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-lg); margin-bottom: 20px; padding: 16px; background: var(--durum-hata-acik-light); border-radius: var(--radius-xl); /* border: 1px solid var(--durum-hata-acik); */ } .stok-page .stat-item { display: flex; /* flex-direction: column; */ gap: 4px; } .stok-page .stat-item .label { font-size: var(--text-sm); color: var(--metin-ucuncu); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .stok-page .stat-item .value { font-size: 16px; font-weight: 600; color: var(--baslik-ana); } .stok-page .stat-item .value.critical { color: var(--durum-hata-koyu); font-weight: 700; } .stok-page .critical-actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } /* #endregion */ /* #region Expiring Stock Cards - Son Kullanım Kartları */ .stok-page .expiring-stock-list { display: flex; flex-direction: column; gap: var(--spacing-xl); } .stok-page .expiring-stock-card { background: var(--arka-plan-ana); border-radius: 16px; padding: 24px; border: 1px solid var(--kenarlik-ana); border-left: 4px solid var(--ana-sari); transition: all 0.3s ease; } .stok-page .expiring-stock-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } .stok-page .expiring-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .stok-page .expiry-countdown { display: flex; flex-direction: column; align-items: center; padding: 12px 20px; background: var(--durum-uyari-acik); border-radius: 16px; border: 1px solid var(--durum-uyari-kenarlik); } .stok-page .expiry-countdown .days { font-size: 24px; font-weight: 700; color: var(--durum-uyari-metin); line-height: 1; } .stok-page .expiry-countdown .label { font-size: 11px; color: var(--durum-uyari-metin); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .stok-page .expiring-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-lg); margin-bottom: 20px; padding: 16px; background: var(--kart-arka-plan); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } .stok-page .expiring-stats .value.warning { color: var(--durum-uyari-koyu); } .stok-page .expiring-stats .value.critical { color: var(--durum-hata-koyu); font-weight: 700; } .stok-page .expiring-actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } /* #endregion */ /* #region Product Info Display - Ürün Bilgi Görüntüsü */ .stok-page .product-info-display { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); margin-bottom: 20px; } .stok-page .info-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .stok-page .info-item .label { font-size: var(--text-sm); color: var(--metin-ucuncu); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .stok-page .info-item .value { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); } /* #endregion */ /* #region View Mode Toggle - Görünüm Modu */ .stok-page .view-mode-grid .stock-table-container { display: none; } .stok-page .stock-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-xl); padding: 20px 0; } .stok-page .view-mode-grid .stock-grid { display: grid; } .stok-page .stock-card { background: var(--arka-plan-ana); border-radius: 16px; padding: 20px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; } .stok-page .stock-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } .stok-page .stock-card-header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: 16px; } .stok-page .stock-card-content { display: flex; flex-direction: column; gap: var(--spacing-md); } .stok-page .stock-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); padding: 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); } .stok-page .stock-card-actions { display: flex; gap: var(--spacing-sm); margin-top: 16px; } /* #endregion */ /* Media query kaldırıldı */ /* Media query kaldırıldı */ /* Media query kaldırıldı */ /* #endregion */ /* #region Loading States - Yükleme Durumları */ .stok-page .stock-loading { opacity: 0.6; pointer-events: none; position: relative; } .stok-page .stock-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 3px solid var(--kenarlik-ana); border-top: 3px solid var(--ana-mavi); border-radius: 50%; animation: stockSpin 1s linear infinite; } @keyframes stockSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* #endregion */ /* #region Stock Alerts - Stok Uyarıları */ .stok-page .stock-alert-banner { background: linear-gradient(135deg, var(--durum-hata-acik) 0%, var(--durum-hata-acik) 100%); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 16px 20px; margin-bottom: 24px; display: flex; align-items: center; gap: var(--spacing-md); color: var(--durum-hata-metin); } .stock-alert-banner.warning { background: linear-gradient(135deg, var(--metin-beyaz)beb 0%, var(--durum-uyari-acik) 100%); border-color: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .stock-alert-banner i { font-size: 20px; flex-shrink: 0; } .stock-alert-content h4 { font-size: var(--text-base); font-weight: 600; margin-bottom: 4px; } .stock-alert-content p { font-size: 13px; opacity: 0.9; } /* #endregion */ /* #region Hukuki Destek Modal Stilleri */ .legal-modal .request-detail-info { max-height: 70vh; overflow-y: auto; } /* Bu stil genel .legal-modal .detail-section ile birleştirildi */ .legal-modal .detail-section h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: var(--spacing-sm); } /* .legal-modal .detail-section h4::before { content: ''; width: 4px; height: 16px; background: var(--ana-mavi); border-radius: 2px; } */ .legal-modal .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); } .legal-modal .detail-label { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; } .legal-modal .detail-value { font-size: var(--text-base); font-weight: 500; color: var(--metin-ana); } .legal-modal .lawyer-detail-card { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .legal-modal .lawyer-detail-card .lawyer-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .legal-modal .lawyer-detail-card .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .legal-modal .lawyer-detail-card .lawyer-info h5 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .legal-modal .lawyer-detail-card .lawyer-info p { margin: 0 0 8px 0; font-size: var(--text-base); color: var(--metin-ucuncu); } .legal-modal .lawyer-contact-info { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); margin-bottom: 24px; } .legal-modal .lawyer-contact-info .lawyer-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .legal-modal .lawyer-contact-info .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .legal-modal .lawyer-contact-info .lawyer-details h4 { margin: 0 0 4px 0; font-size: 18px; font-weight: 600; color: var(--metin-ana); } .legal-modal .contact-options { display: flex; flex-direction: column; gap: var(--spacing-lg); } .legal-modal .contact-option { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); transition: all 0.2s ease; } .legal-modal .contact-option:hover { border-color: var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-mavi); } .legal-modal .contact-option i { font-size: 24px; color: var(--ana-mavi); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--durum-bilgi-acik); border-radius: var(--radius-lg); flex-shrink: 0; } .legal-modal .contact-option .contact-info { flex: 1; } .legal-modal .contact-option .contact-info h5 { /* margin: 0 0 6px 0; */ font-size: 16px; font-weight: 600; color: var(--metin-ana); } .legal-modal .contact-option .contact-info p { margin: 0; font-size: var(--text-base); color: var(--metin-ucuncu); line-height: 1.4; } .legal-modal .contact-option button { padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--text-base); font-weight: 500; border-radius: var(--radius-md); border: none; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } /* Avukat ile İletişim Modal - Spesifik Buton Stilleri */ .legal-modal .contact-options .contact-option .btn-primary, .legal-modal .contact-options .contact-option .btn-secondary, .legal-modal .contact-options .contact-option .btn-outline { background: var(--ana-mavi) !important; color: var(--metin-beyaz) !important; border: none !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 6px !important; cursor: pointer !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .legal-modal .contact-options .contact-option .btn-primary:hover, .legal-modal .contact-options .contact-option .btn-secondary:hover, .legal-modal .contact-options .contact-option .btn-outline:hover { background: var(--ana-mavi) !important; transform: none !important; box-shadow: none !important; } /* Request Status Styles */ .request-status.archived { background: var(--metin-ucuncu); color: var(--arka-plan-ana); } .request-status.appealed { background: var(--durum-uyari); color: var(--arka-plan-ana); } /* Appeal Form Styles */ .legal-modal .appeal-form { padding: 20px 0; } .legal-modal .appeal-form .form-group { margin-bottom: 20px; } .legal-modal .appeal-form .form-group label { margin-bottom: 8px; } .legal-modal .appeal-form .form-group .form-control { width: 100%; padding: 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: var(--text-base); transition: border-color 0.2s ease; } .legal-modal .appeal-form .form-group .form-control:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .legal-modal .appeal-form .form-group textarea.form-control { resize: vertical; min-height: 100px; } .legal-modal .appeal-form .form-group .form-text { font-size: var(--text-sm); color: var(--metin-ucuncu); margin-top: 4px; } .legal-modal .appeal-form .form-group input[readonly] { background-color: var(--arka-plan-ikincil); color: var(--metin-ucuncu); } .legal-modal .upload-form { display: flex; flex-direction: column; gap: var(--spacing-xl); } .legal-modal .upload-form .form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .legal-modal .upload-form .form-group label { font-size: var(--text-base); } /* Bu stiller global input stillerini kullanıyor */ .legal-modal .file-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); margin-bottom: 8px; } .legal-modal .file-item .file-info { display: flex; align-items: center; gap: var(--spacing-sm); flex: 1; } .legal-modal .file-item .file-info i { color: var(--ana-mavi); } .legal-modal .file-item .file-size { color: var(--metin-ucuncu); font-size: var(--text-sm); } .legal-modal .note-form { display: flex; flex-direction: column; gap: var(--spacing-xl); } .legal-modal .note-form .form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .legal-modal .note-form .form-group label { font-size: var(--text-base); } /* Bu stiller global input stillerini kullanıyor */ /* #endregion */ /* #endregion */ /* ------------------------------------ */ /* Stok Sayfası Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* Faturalandırma Sayfası Stilleri */ /* ------------------------------------ */ /* #region Faturalandırma Sayfası Özel Stilleri */ /* #region Billing Layout - Faturalandırma Düzeni */ .faturalama-page .billing-layout { display: flex; flex-direction: column; gap: 0; margin-bottom: 32px; } .faturalama-page .billing-tabs { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); overflow: hidden; border: 1px solid var(--kenarlik-ana); box-shadow: 0 4px 15px var(--golge-hover); } .faturalama-page .billing-tabs .tab-buttons { display: flex; background: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); overflow-x: auto; } .faturalama-page .billing-tabs .tab-btn { flex: 1; padding: 20px 24px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); font-size: 16px; font-weight: 600; color: var(--metin-ucuncu); cursor: pointer; position: relative; white-space: nowrap; } .faturalama-page .billing-tabs .tab-btn:hover { background: rgba(59, 130, 246, 0.05); color: var(--ana-mavi); } .faturalama-page .billing-tabs .tab-btn.active { background: var(--arka-plan-ana); color: var(--ana-mavi); } .faturalama-page .billing-tabs .tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .faturalama-page .billing-tabs .tab-btn i { font-size: 18px; } /* #endregion */ /* #region Invoice Table - Fatura Tablosu */ .faturalama-page .invoice-table-container { /* overflow-x: auto; */ border-radius: 0 0 20px 20px; background: var(--arka-plan-ana); } /* Faturalama: Görünüm toggle (masaüstünde de kart görünüme geçebilmek için) */ .faturalama-page .invoice-table-container.table-view .invoice-table { display: table !important; } .faturalama-page .invoice-table-container.table-view .table-mobile-cards { display: none !important; } .faturalama-page .invoice-table-container.cards-view .invoice-table { display: none !important; } .faturalama-page .invoice-table-container.cards-view .table-mobile-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--spacing-lg); padding: var(--spacing-lg); } /* Modern kart görünümü */ .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .table-card { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; position: relative; overflow: hidden; } .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .table-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--success)); } .faturalama-page .invoice-table-container.cards-view .table-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px var(--golge-ikincil); border-color: var(--primary-light); } /* Kart başlığı - daha kompakt */ .faturalama-page .invoice-table-container.cards-view .table-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0; padding-bottom: 16px; border-bottom: 1px solid var(--kenarlik-ana); } .faturalama-page .invoice-table-container.cards-view .table-card-title { font-weight: 700; color: var(--baslik-ana); } .faturalama-page .invoice-table-container.cards-view .table-card-actions { display: flex; gap: var(--spacing-sm); } /* Kart içeriği - 2 sütunlu düzen */ .faturalama-page .invoice-table-container.cards-view .table-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; flex: 1; } .faturalama-page .invoice-table-container.cards-view .table-card-row { display: flex; flex-direction: column; gap: 6px; } .faturalama-page .invoice-table-container.cards-view .table-card-label { color: var(--metin-ikincil); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .faturalama-page .invoice-table-container.cards-view .table-card-value { color: var(--metin-ana); font-weight: 600; font-size: 14px; line-height: 1.4; } /* Hasta bilgileri - daha kompakt */ .faturalama-page .invoice-table-container.cards-view .patient-billing-info { display: flex; align-items: center; gap: 12px; } .faturalama-page .invoice-table-container.cards-view .patient-avatar { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .faturalama-page .invoice-table-container.cards-view .patient-avatar img { width: 32px; height: 32px; object-fit: contain; } .faturalama-page .invoice-table-container.cards-view .patient-avatar.dog { background: linear-gradient(135deg, #10b981, #059669); color: var(--kart-arka-plan); } .faturalama-page .invoice-table-container.cards-view .patient-avatar.cat { background: linear-gradient(135deg, #f59e0b, #d97706); color: var(--kart-arka-plan); } .faturalama-page .invoice-table-container.cards-view .patient-details { display: flex; flex-direction: column; gap: 4px; } .faturalama-page .invoice-table-container.cards-view .patient-name { font-weight: 700; color: var(--metin-ana); font-size: 15px; } .faturalama-page .invoice-table-container.cards-view .owner-name { color: var(--metin-ikincil); font-size: 13px; font-weight: 500; } /* Hizmetler - daha düzenli */ .faturalama-page .invoice-table-container.cards-view .services-summary { display: flex; flex-direction: column; gap: 8px; } .faturalama-page .invoice-table-container.cards-view .service-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 10px; background: var(--arka-plan-ikincil); border-radius: 8px; border-left: 3px solid var(--primary); } .faturalama-page .invoice-table-container.cards-view .service-item i { color: var(--primary); width: 14px; font-size: 12px; } /* Tutar bilgisi - daha belirgin */ .faturalama-page .invoice-table-container.cards-view .invoice-amount { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: linear-gradient(135deg, var(--success-light), var(--success-lighter)); border-radius: 12px; border: 1px solid var(--success-border); } .faturalama-page .invoice-table-container.cards-view .amount { font-weight: 800; color: var(--success-dark); font-size: 20px; line-height: 1; } .faturalama-page .invoice-table-container.cards-view .amount-detail { color: var(--success); font-size: 12px; font-weight: 600; background: var(--success); color: var(--kart-arka-plan); padding: 2px 8px; border-radius: 12px; display: inline-block; width: fit-content; } /* Ödeme bilgisi - daha düzenli */ .faturalama-page .invoice-table-container.cards-view .payment-info { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--arka-plan-ikincil); border-radius: 8px; border-left: 3px solid var(--info); } .faturalama-page .invoice-table-container.cards-view .payment-method { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .faturalama-page .invoice-table-container.cards-view .payment-method i { color: var(--info); font-size: 14px; } .faturalama-page .invoice-table-container.cards-view .payment-method.pending { border-left-color: var(--warning); } .faturalama-page .invoice-table-container.cards-view .payment-method.pending i { color: var(--warning); } .faturalama-page .invoice-table-container.cards-view .payment-method.overdue { border-left-color: var(--danger); } .faturalama-page .invoice-table-container.cards-view .payment-method.overdue i { color: var(--danger); } /* İşlem butonları - daha modern */ .faturalama-page .invoice-table-container.cards-view .action-buttons { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kenarlik-ana); } /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ .faturalama-page .invoice-table-container.cards-view .action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-ikincil); } /* Artık genel action-btn.view kullanılıyor */ /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ /* Artık genel .action-btn.print kullanılıyor */ .faturalama-page .invoice-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); } .faturalama-page .invoice-table thead { background: var(--arka-plan-ikincil); border-bottom: 2px solid var(--kenarlik-ana); } .faturalama-page .invoice-table th { padding: 16px 20px; text-align: left; font-weight: 600; color: var(--metin-ana); text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.5px; border-bottom: 1px solid var(--kenarlik-ana); } .faturalama-page .invoice-table tbody tr { border-bottom: 1px solid var(--arka-plan-ucuncu); transition: all 0.2s ease; } /* .faturalama-page .invoice-table tbody tr:hover { background: var(--arka-plan-ucuncu); box-shadow: 0 2px 8px var(--golge-hover); z-index: 1; } */ .faturalama-page .invoice-table tbody tr { position: relative; z-index: 0; } /* Dropdown menü her zaman en üstte görünsün */ .faturalama-page .invoice-table .action-buttons { position: relative; z-index: 10; } .faturalama-page .invoice-table .dropdown-menu { z-index: 999999999 !important; } .faturalama-page .invoice-table .dropdown-menu.show { z-index: 999999999 !important; } /* Tablo ve wrapper overflow ayarları - dropdown menünün görünmesi için */ .faturalama-page .invoice-table, .faturalama-page .tab-content, .faturalama-page .billing-layout { overflow: visible !important; } /* Menü açıkken hover efektlerini devre dışı bırak */ .faturalama-page .invoice-table tbody tr:hover .dropdown-menu.show ~ * { pointer-events: none; } .faturalama-page .invoice-table tbody tr:has(.dropdown-menu.show) { z-index: 999999999 !important; } .faturalama-page .invoice-table tbody tr:has(.dropdown-menu.show) ~ tr { pointer-events: none; } .faturalama-page .invoice-table td { padding: 16px 20px; vertical-align: middle; border-bottom: 1px solid var(--arka-plan-ucuncu); } /* #endregion */ /* #region Invoice Number - Fatura Numarası */ .faturalama-page .invoice-number { display: flex; flex-direction: column; gap: 4px; } .faturalama-page .invoice-code { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); font-family: 'Monaco', 'Consolas', monospace !important; font-family: 'Inter', sans-serif; } .faturalama-page .invoice-date-short { font-size: var(--text-sm); color: var(--metin-ucuncu); } /* #endregion */ /* #region Patient Billing Info - Hasta Faturalandırma Bilgisi */ .faturalama-page .patient-billing-info { display: flex; align-items: center; gap: var(--spacing-md); } .faturalama-page .patient-billing-info .patient-avatar img { width: 40px; height: 40px; object-fit: contain; } .faturalama-page .billing-details h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); /* margin-bottom: 4px; */ } .faturalama-page .billing-details p { font-size: 13px; color: var(--metin-ucuncu); /* margin-bottom: 4px; */ } .faturalama-page .billing-details .phone { font-size: var(--text-sm); color: var(--metin-ucuncu); /* font-family: 'Monaco', 'Consolas', monospace; */ font-family: 'Inter', sans-serif; } /* #endregion */ /* #region Invoice Date - Fatura Tarihi */ .faturalama-page .invoice-date { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); display: block; margin-bottom: 4px; } .faturalama-page .invoice-time { font-size: var(--text-sm); color: var(--metin-ucuncu); background: var(--arka-plan-ucuncu); padding: 2px 6px; border-radius: var(--radius-md); } /* #endregion */ /* #region Services Summary - Hizmet Özeti */ .faturalama-page .services-summary { display: flex; flex-direction: column; gap: var(--spacing-sm); } .faturalama-page .service-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--metin-ana); } .faturalama-page .service-item i { width: 16px; color: var(--metin-ucuncu); font-size: var(--text-sm); } .faturalama-page .service-count { font-size: 11px; color: var(--metin-ucuncu); background: var(--arka-plan-dorduncu); padding: 2px 6px; border-radius: var(--radius-md); font-weight: 500; width: fit-content; } /* #endregion */ /* #region Invoice Amount - Fatura Tutarı */ .faturalama-page .invoice-amount { display: flex; align-items: flex-start; flex-direction: column; gap: 4px; } .faturalama-page .amount { font-size: 18px; font-weight: 700; color: var(--durum-basarili-koyu); } .faturalama-page .amount-detail { font-size: var(--text-sm); color: var(--metin-ucuncu); background: var(--durum-basarili-acik); padding: 2px 8px; border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); } /* #endregion */ /* #region Invoice Status Badges - Fatura Durum Rozetleri */ .faturalama-page .status-badge.paid { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); /* border: 1px solid var(--kenarlik-ana); */ } .faturalama-page .status-badge.pending { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); /* border: 1px solid var(--kenarlik-ana); */ } .faturalama-page .status-badge.overdue { background: var(--durum-hata-acik); color: var(--durum-hata-metin); /* border: 1px solid var(--kenarlik-ana); */ } .faturalama-page .status-badge.cancelled { background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); /* border: 1px solid var(--kenarlik-ana); */ } /* #endregion */ /* #region Payment Info - Ödeme Bilgisi */ .faturalama-page .payment-info { display: flex; flex-direction: column; gap: 6px; } .faturalama-page .payment-method { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--metin-ana); } .faturalama-page .payment-method i { color: var(--metin-ucuncu); font-size: var(--text-sm); } .faturalama-page .payment-method.pending { color: var(--durum-uyari-metin); } .faturalama-page .payment-method.overdue { color: var(--durum-hata-metin); } .faturalama-page .payment-date { font-size: var(--text-sm); color: var(--metin-ucuncu); } .faturalama-page .due-date { font-size: var(--text-sm); color: var(--metin-ucuncu); } .faturalama-page .due-date.overdue { color: var(--durum-hata-metin); font-weight: 600; } /* #endregion */ /* #region Invoice Actions - Fatura İşlemleri */ .faturalama-page .invoice-actions { display: flex; align-items: center; gap: var(--spacing-sm); position: relative; z-index: 1000; } /* TÜM SAYFALAR İÇİN DROPDOWN MENÜ DÜZELTMELERİ - GENEL STİLLER KULLANILIYOR */ /* Artık genel .action-btn.view kullanılıyor */ /* Artık genel .action-btn.print kullanılıyor */ /* Artık genel .action-btn.email kullanılıyor */ /* Faturalama Action Butonları - Genel stil artık ortak tanımda */ /* Artık genel .action-btn.more kullanılıyor, z-index korundu */ .faturalama-page .action-btn.more { z-index: 15; } /* remind ve payment artık delete ve bell ile aynı renklerde */ /* #endregion */ /* #region Pending Invoices - Bekleyen Faturalar */ .pending-invoices-list { display: flex; flex-direction: column; gap: var(--spacing-xl); padding: 24px; } .pending-invoice-card { background: var(--arka-plan-ana); border-radius: 16px; padding: 24px; border: 1px solid var(--kenarlik-ana); border-left: 4px solid var(--ana-sari); transition: all 0.3s ease; } .pending-invoice-card .invoice-number, .overdue-invoice-card .invoice-number { display: flex; flex-direction: row; width: fit-content; } .pending-invoice-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } .pending-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .invoice-info { flex: 1; display: flex; align-items: flex-start; flex-direction: column; gap: 4px; } .invoice-number { font-size: 16px; font-weight: 600; color: var(--baslik-ana); font-family: 'Inter', sans-serif; } .pending-alert { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--kenarlik-ana); } .pending-alert.warning { background: var(--durum-hata-acik); color: var(--durum-hata-metin); border-color: var(--durum-hata-acik); } .pending-patient-info { display: flex; align-items: center; gap: var(--spacing-lg); margin-bottom: 16px; } .pending-patient-info .patient-avatar img { width: 56px; height: 56px; object-fit: contain; } .pending-amount { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .pending-amount .amount { font-size: 24px; font-weight: 700; color: var(--durum-basarili-koyu); } .due-date { font-size: 13px; color: var(--metin-ucuncu); } .pending-services { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: 20px; } .service-tag { padding: 4px 10px; background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); border-radius: var(--radius-xl); font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--kenarlik-ana); } .pending-actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } /* #endregion */ /* #region Overdue Invoices - Geciken Faturalar */ .overdue-invoices-list { display: flex; flex-direction: column; gap: var(--spacing-xl); padding: 24px; } .overdue-invoice-card { background: var(--arka-plan-ana); border-radius: 16px; padding: 24px; border: 1px solid var(--kenarlik-ana); border-left: 4px solid var(--ana-kirmizi); transition: all 0.3s ease; } .overdue-invoice-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } .overdue-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .overdue-alert { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--durum-hata-acik); color: var(--durum-hata-metin); border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--kenarlik-ana); } .overdue-alert.critical { background: linear-gradient(135deg, var(--durum-hata-acik) 0%, var(--durum-hata-acik) 100%); animation: criticalPulse 2s infinite; } @keyframes criticalPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .overdue-patient-info { display: flex; align-items: center; gap: var(--spacing-lg); margin-bottom: 16px; } .overdue-patient-info .patient-avatar img { width: 56px; height: 56px; object-fit: contain; } .overdue-amount { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; padding: 16px; background: var(--durum-hata-acik); border-radius: var(--radius-xl); border: 1px solid var(--durum-hata-acik); } .overdue-amount .amount { font-size: 24px; font-weight: 700; color: var(--durum-hata-koyu); } .overdue-date { font-size: 13px; color: var(--durum-hata-metin); font-weight: 600; } .late-fee { font-size: var(--text-sm); color: var(--durum-hata-koyu); background: var(--durum-hata-acik); padding: 4px 8px; border-radius: var(--radius-md); font-weight: 600; border: 1px solid var(--durum-hata-koyu); } .overdue-services { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: 20px; } .overdue-actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } /* #endregion */ /* #region Paid Invoices Summary - Ödenen Faturalar Özeti */ .paid-invoices-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl); margin-bottom: 32px; padding: 24px; } .summary-card { background: var(--arka-plan-ana); border-radius: 16px; padding: 24px; border: 1px solid var(--kenarlik-ana); display: flex; align-items: center; gap: var(--spacing-lg); transition: all 0.3s ease; } /* .summary-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } */ .summary-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--arka-plan-ana); background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); } .summary-content { display: flex; flex-direction: column; gap: 4px; } .summary-content h4 { font-size: var(--text-base); font-weight: 600; color: var(--metin-ucuncu); margin: 0; } .summary-amount { font-size: 20px; font-weight: 700; color: var(--baslik-ana); } .summary-count { font-size: var(--text-sm); color: var(--metin-ucuncu); } .paid-invoices-table { padding: 0 24px 24px; } .simple-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); } .simple-table th { padding: var(--spacing-md) var(--spacing-lg); text-align: left; font-weight: 600; color: var(--metin-ana); background: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); } .simple-table td { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--arka-plan-ucuncu); vertical-align: middle; } /* .simple-table tr:hover { background: var(--arka-plan-ikincil); } */ /* #endregion */ /* #region Invoice Form Modals - Fatura Form Modalları */ .form-section { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--kenarlik-ana); } .form-section:last-child { border-bottom: none; margin-bottom: 0; } .form-section h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 16px; display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; } .invoice-items { margin-bottom: 16px; } .invoice-item { padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); margin-bottom: 12px; } /* Invoice item form row - 5 sütunlu yapı */ .invoice-item .form-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: var(--spacing-md); /* align-items: end; */ } /* Sil butonu için özel stil */ .invoice-item .form-group:last-child { margin-bottom: 0; display: flex; } .invoice-summary { background: var(--arka-plan-ucuncu); border-radius: var(--radius-xl); padding: 20px; border: 1px solid var(--kenarlik-ana); } .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--kenarlik-ana); } .summary-row:last-child { border-bottom: none; } .summary-row.total { font-size: 18px; font-weight: 700; color: var(--baslik-ana); padding-top: 16px; margin-top: 8px; /* border-top: 2px solid var(--kenarlik-ana); */ } /* #endregion */ /* #region Animation and Effects - Animasyon ve Efektler */ .invoice-row { transition: all 0.2s ease; } .invoice-row:hover .amount { color: var(--durum-basarili-metin); transform: scale(1.05); } .pending-invoice-card, .overdue-invoice-card { transition: all 0.3s ease; } .summary-card:hover .summary-icon { /* transform: rotate(10deg) scale(1.1); */ scale: 1.1; } .service-tag { transition: all 0.2s ease; } .service-tag:hover { /* transform: translateY(-1px); */ box-shadow: var(--shadow-sm); } /* #endregion */ /* #region Hukuki Destek Modal Stilleri */ .legal-modal .request-detail-info { max-height: 70vh; overflow-y: auto; } /* Bu stil genel .legal-modal .detail-section ile birleştirildi */ .legal-modal .detail-section h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: var(--spacing-sm); } /* .legal-modal .detail-section h4::before { content: ''; width: 4px; height: 16px; background: var(--ana-mavi); border-radius: 2px; } */ .legal-modal .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); } .legal-modal .detail-label { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; } .legal-modal .detail-value { font-size: var(--text-base); font-weight: 500; color: var(--metin-ana); } .legal-modal .lawyer-detail-card { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .legal-modal .lawyer-detail-card .lawyer-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .legal-modal .lawyer-detail-card .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .legal-modal .lawyer-detail-card .lawyer-info h5 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .legal-modal .lawyer-detail-card .lawyer-info p { margin: 0 0 8px 0; font-size: var(--text-base); color: var(--metin-ucuncu); } .legal-modal .lawyer-contact-info { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); margin-bottom: 24px; } .legal-modal .lawyer-contact-info .lawyer-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .legal-modal .lawyer-contact-info .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .legal-modal .lawyer-contact-info .lawyer-details h4 { margin: 0 0 4px 0; font-size: 18px; font-weight: 600; color: var(--metin-ana); } .legal-modal .contact-options { display: flex; flex-direction: column; gap: var(--spacing-lg); } .legal-modal .contact-option { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); transition: all 0.2s ease; } .legal-modal .contact-option:hover { border-color: var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-mavi); } .legal-modal .contact-option i { font-size: 24px; color: var(--ana-mavi); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--durum-bilgi-acik); border-radius: var(--radius-lg); flex-shrink: 0; } .legal-modal .contact-option .contact-info { flex: 1; } .legal-modal .contact-option .contact-info h5 { /* margin: 0 0 6px 0; */ font-size: 16px; font-weight: 600; color: var(--metin-ana); } .legal-modal .contact-option .contact-info p { margin: 0; font-size: var(--text-base); color: var(--metin-ucuncu); line-height: 1.4; } .legal-modal .contact-option button { padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--text-base); font-weight: 500; border-radius: var(--radius-md); border: none; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } /* Avukat ile İletişim Modal - Spesifik Buton Stilleri */ .legal-modal .contact-options .contact-option .btn-primary, .legal-modal .contact-options .contact-option .btn-secondary, .legal-modal .contact-options .contact-option .btn-outline { background: var(--ana-mavi) !important; color: var(--metin-beyaz) !important; border: none !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 6px !important; cursor: pointer !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .legal-modal .contact-options .contact-option .btn-primary:hover, .legal-modal .contact-options .contact-option .btn-secondary:hover, .legal-modal .contact-options .contact-option .btn-outline:hover { background: var(--ana-mavi) !important; transform: none !important; box-shadow: none !important; } /* Request Status Styles */ .request-status.archived { background: var(--metin-ucuncu); color: var(--arka-plan-ana); } .request-status.appealed { background: var(--durum-uyari); color: var(--arka-plan-ana); } /* Appeal Form Styles */ .legal-modal .appeal-form { padding: 20px 0; } .legal-modal .appeal-form .form-group { margin-bottom: 20px; } .legal-modal .appeal-form .form-group label { margin-bottom: 8px; } .legal-modal .appeal-form .form-group .form-control { width: 100%; padding: 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: var(--text-base); transition: border-color 0.2s ease; } .legal-modal .appeal-form .form-group .form-control:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .legal-modal .appeal-form .form-group textarea.form-control { resize: vertical; min-height: 100px; } .legal-modal .appeal-form .form-group .form-text { font-size: var(--text-sm); color: var(--metin-ucuncu); margin-top: 4px; } .legal-modal .appeal-form .form-group input[readonly] { background-color: var(--arka-plan-ikincil); color: var(--metin-ucuncu); } .legal-modal .upload-form { display: flex; flex-direction: column; gap: var(--spacing-xl); } .legal-modal .upload-form .form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .legal-modal .upload-form .form-group label { font-size: var(--text-base); } /* Bu stiller global input stillerini kullanıyor */ .legal-modal .file-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); margin-bottom: 8px; } .legal-modal .file-item .file-info { display: flex; align-items: center; gap: var(--spacing-sm); flex: 1; } .legal-modal .file-item .file-info i { color: var(--ana-mavi); } .legal-modal .file-item .file-size { color: var(--metin-ucuncu); font-size: var(--text-sm); } .legal-modal .note-form { display: flex; flex-direction: column; gap: var(--spacing-xl); } .legal-modal .note-form .form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .legal-modal .note-form .form-group label { font-size: var(--text-base); } /* Bu stiller global input stillerini kullanıyor */ /* #endregion */ /* #endregion */ /* ------------------------------------ */ /* Faturalandırma Sayfası Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* Onam Sistemi Sayfası Stilleri */ /* ------------------------------------ */ /* #region Onam Sistemi Sayfası Özel Stilleri */ /* #region Consent Layout - Onam Düzeni */ .onam-sistemi-page .consent-layout { display: flex; flex-direction: column; gap: 0; margin-bottom: 32px; } .onam-sistemi-page .consent-tabs { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); overflow: hidden; border: 1px solid var(--kenarlik-ana); box-shadow: 0 4px 15px var(--golge-hover); } /* #endregion */ /* #region Rejected Consents - Reddedilen Onamlar */ .onam-sistemi-page .rejected-consents-list { display: flex; flex-direction: column; gap: var(--spacing-xl); padding: 24px; } .onam-sistemi-page .rejected-consent-card { background: var(--arka-plan-ana); border-radius: 16px; padding: 24px; border: 1px solid var(--kenarlik-ana); border-left: 4px solid var(--ana-kirmizi); transition: all 0.3s ease; } .onam-sistemi-page .rejected-consent-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } .onam-sistemi-page .rejected-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .onam-sistemi-page .rejection-indicator { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--durum-hata-acik); color: var(--durum-hata-metin); border-radius: var(--radius-xl); font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--kenarlik-ana); } .onam-sistemi-page .rejected-patient-info { display: flex; align-items: center; gap: var(--spacing-lg); margin-bottom: 16px; } .onam-sistemi-page .rejected-procedure { margin-bottom: 20px; padding: 16px; background: var(--durum-hata-acik); border-radius: var(--radius-xl); border: 1px solid var(--durum-hata-acik); } .onam-sistemi-page .rejection-details { margin-bottom: 20px; padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } .onam-sistemi-page .rejection-details h5 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin-bottom: 12px; display: flex; align-items: center; gap: var(--spacing-sm); } .onam-sistemi-page .rejection-reason { font-size: var(--text-base); color: var(--durum-hata); /* font-style: italic; */ line-height: 1.5; margin-bottom: 8px; padding: 12px; background: var(--durum-hata-acik); border-left: 4px solid var(--durum-hata); border-radius: var(--radius-lg); } .onam-sistemi-page .rejection-time { font-size: var(--text-sm); color: var(--metin-ucuncu); font-weight: 500; } .onam-sistemi-page .follow-up-actions { margin-bottom: 20px; padding: 16px; background: var(--durum-basarili-acik); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } .onam-sistemi-page .follow-up-actions h5 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin-bottom: 12px; display: flex; align-items: center; gap: var(--spacing-sm); } .onam-sistemi-page .action-timeline { display: flex; flex-direction: column; gap: var(--spacing-sm); } .onam-sistemi-page .action-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 8px 0; } .onam-sistemi-page .action-item.completed { color: var(--durum-basarili-metin); } .onam-sistemi-page .action-item i { width: 16px; color: currentColor; } .onam-sistemi-page .action-item time { margin-left: auto; font-size: var(--text-sm); color: var(--metin-ucuncu); } .onam-sistemi-page .rejected-actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } /* #endregion */ /* #region Modal Styles - Modal Stilleri */ .onam-sistemi-page .form-section { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--kenarlik-ana); } .onam-sistemi-page .form-section:last-child { border-bottom: none; margin-bottom: 0; } .onam-sistemi-page .form-section h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 16px; display: flex; align-items: center; gap: var(--spacing-sm); } .onam-sistemi-page .checkbox-group { display: flex; gap: var(--spacing-lg); flex-wrap: wrap; } .onam-sistemi-page .checkbox-group label { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-base); color: var(--metin-ana); cursor: pointer; } .onam-sistemi-page .checkbox-group .checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .onam-sistemi-page .checkbox-group .checkbox-wrapper input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } .onam-sistemi-page .checkbox-group .checkbox-wrapper .checkmark { width: 16px; height: 16px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; } .onam-sistemi-page .checkbox-group .checkbox-wrapper:hover .checkmark { border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } .onam-sistemi-page .checkbox-group .checkbox-wrapper input[type="checkbox"]:checked + .checkmark { background: var(--ana-mavi); border-color: var(--ana-mavi); } .onam-sistemi-page .checkbox-group .checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: 10px; font-weight: bold; opacity: 1; transform: scale(1); transition: all 0.2s ease; } .onam-sistemi-page .checkbox-group .checkbox-wrapper .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: 10px; font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } /* #endregion */ /* #region Signature Pad - İmza Alanı */ .signature-section { display: flex; flex-direction: column; gap: var(--spacing-2xl); } .consent-summary { background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); padding: 20px; border: 1px solid var(--kenarlik-ana); } .consent-summary h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 16px; } .summary-item { padding: 8px 0; border-bottom: 1px solid var(--kenarlik-ana); display: flex; gap: var(--spacing-md); } .summary-item:last-child { border-bottom: none; } .summary-item strong { min-width: 120px; color: var(--metin-ucuncu); font-size: var(--text-base); } .summary-item span { color: var(--baslik-ana); font-size: var(--text-base); font-weight: 500; } .signature-pad-container { background: var(--arka-plan-ana); border-radius: var(--radius-xl); padding: 20px; border: 2px dashed var(--kenarlik-ana); text-align: center; } .signature-pad-container h4 { font-size: 16px; font-weight: 600; color: var(--metin-ana); margin-bottom: 16px; } #signaturePad { border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-lg); cursor: crosshair; display: block; margin: 0 auto 16px; } .signature-controls { display: flex; gap: var(--spacing-md); justify-content: center; } .signatory-info { background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); padding: 20px; border: 1px solid var(--kenarlik-ana); } .signatory-info label { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-base); color: var(--metin-ana); cursor: pointer; } /* #endregion */ /* #region Template Manager - Şablon Yöneticisi */ .template-manager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); min-height: 500px; } .template-list h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 16px; } .template-items { display: flex; flex-direction: column; gap: var(--spacing-md); max-height: 400px; overflow-y: auto; } .template-item { background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); padding: 16px; border: 1px solid var(--kenarlik-ana); cursor: pointer; transition: all 0.2s ease; } .template-item:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ana); } .template-item.active { background: var(--durum-bilgi-acik); border-color: var(--kenarlik-ana); } .template-info h5 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin-bottom: 4px; } .template-info p { font-size: 13px; color: var(--metin-ucuncu); margin-bottom: 8px; } .template-usage { font-size: var(--text-sm); color: var(--durum-basarili-koyu); font-weight: 500; } .template-actions { display: flex; gap: var(--spacing-sm); margin-top: 12px; } .template-editor h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 16px; } .editor-toolbar { display: flex; gap: var(--spacing-sm); margin-bottom: 16px; flex-wrap: wrap; } .editor-toolbar .btn-small { padding: 6px 10px; } #templateEditor { width: 100%; min-height: 300px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 12px; /* font-family: 'Monaco', 'Consolas', monospace; */ font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; resize: vertical; } #templateEditor:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } /* #endregion */ /* #region Consent Preview - Onam Önizlemesi */ .consent-preview { background: var(--arka-plan-ana); max-width: 800px; margin: 0 auto; padding: 40px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: var(--text-base); line-height: 1.6; } .preview-header { margin-bottom: 32px; padding-bottom: 20px; border-bottom: 2px solid var(--kenarlik-ana); } .clinic-letterhead { display: flex; align-items: center; gap: var(--spacing-xl); } .clinic-logo { height: 60px; } .clinic-info h3 { font-size: 20px; font-weight: 700; color: var(--baslik-ana); margin-bottom: 8px; } .clinic-info p { font-size: var(--text-sm); color: var(--metin-ucuncu); margin-bottom: 4px; } .preview-content h2 { text-align: center; font-size: 24px; font-weight: 700; color: var(--baslik-ana); margin-bottom: 32px; text-transform: uppercase; letter-spacing: 1px; } .document-info { /* margin-bottom: 24px; */ padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); } .info-row { display: flex; justify-content: space-between; align-items: center; } .patient-owner-info, .procedure-info { margin-bottom: 24px; padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); } .patient-owner-info h4, .procedure-info h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .info-item { display: flex; gap: 2px; } .info-item strong { min-width: 100px; color: var(--metin-ucuncu); } .procedure-details p { margin-bottom: 8px; } .consent-text { margin-bottom: 32px; line-height: 1.8; } .consent-text p { margin-bottom: 16px; } .consent-text ul { margin: 16px 0 16px 24px; } .consent-text li { margin-bottom: 8px; } .signature-area { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; } .signature-box, .witness-box { text-align: center; } .signature-box p, .witness-box p { font-weight: 600; margin-bottom: 20px; color: var(--baslik-ana); } .signature-line { width: 100%; height: 2px; background: var(--metin-siyah); margin-bottom: 20px; } .signature-box p:not(:first-child), .witness-box p:not(:first-child) { font-weight: normal; margin-bottom: 8px; color: var(--metin-ucuncu); } /* #endregion */ /* #region Animation and Effects - Animasyon ve Efektler */ .consent-row { transition: all 0.2s ease; } .consent-row:hover .consent-code { color: var(--ana-mavi); transform: scale(1.05); } .pending-consent-card, .rejected-consent-card { transition: all 0.3s ease; } .stat-item:hover .stat-icon { transform: rotate(10deg) scale(1.1); } .template-item { transition: all 0.2s ease; } .type-badge { transition: all 0.2s ease; } .signature-pad-container:hover { border-color: var(--kenarlik-ana); } #signaturePad:hover { border-color: var(--kenarlik-ana); } /* #endregion */ /* #region Hukuki Destek Modal Stilleri */ .legal-modal .request-detail-info { max-height: 70vh; overflow-y: auto; } /* Bu stil genel .legal-modal .detail-section ile birleştirildi */ .legal-modal .detail-section h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: var(--spacing-sm); } /* .legal-modal .detail-section h4::before { content: ''; width: 4px; height: 16px; background: var(--ana-mavi); border-radius: 2px; } */ .legal-modal .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); } .legal-modal .detail-label { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; } .legal-modal .detail-value { font-size: var(--text-base); font-weight: 500; color: var(--metin-ana); } .legal-modal .lawyer-detail-card { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .legal-modal .lawyer-detail-card .lawyer-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .legal-modal .lawyer-detail-card .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .legal-modal .lawyer-detail-card .lawyer-info h5 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .legal-modal .lawyer-detail-card .lawyer-info p { margin: 0 0 8px 0; font-size: var(--text-base); color: var(--metin-ucuncu); } .legal-modal .lawyer-contact-info { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); margin-bottom: 24px; } .legal-modal .lawyer-contact-info .lawyer-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .legal-modal .lawyer-contact-info .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .legal-modal .lawyer-contact-info .lawyer-details h4 { margin: 0 0 4px 0; font-size: 18px; font-weight: 600; color: var(--metin-ana); } .legal-modal .contact-options { display: flex; flex-direction: column; gap: var(--spacing-lg); } .legal-modal .contact-option { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); transition: all 0.2s ease; } .legal-modal .contact-option:hover { border-color: var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-mavi); } .legal-modal .contact-option i { font-size: 24px; color: var(--ana-mavi); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--durum-bilgi-acik); border-radius: var(--radius-lg); flex-shrink: 0; } .legal-modal .contact-option .contact-info { flex: 1; } .legal-modal .contact-option .contact-info h5 { /* margin: 0 0 6px 0; */ font-size: 16px; font-weight: 600; color: var(--metin-ana); } .legal-modal .contact-option .contact-info p { margin: 0; font-size: var(--text-base); color: var(--metin-ucuncu); line-height: 1.4; } .legal-modal .contact-option button { padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--text-base); font-weight: 500; border-radius: var(--radius-md); border: none; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } /* Avukat ile İletişim Modal - Spesifik Buton Stilleri */ .legal-modal .contact-options .contact-option .btn-primary, .legal-modal .contact-options .contact-option .btn-secondary, .legal-modal .contact-options .contact-option .btn-outline { background: var(--ana-mavi) !important; color: var(--metin-beyaz) !important; border: none !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 6px !important; cursor: pointer !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .legal-modal .contact-options .contact-option .btn-primary:hover, .legal-modal .contact-options .contact-option .btn-secondary:hover, .legal-modal .contact-options .contact-option .btn-outline:hover { background: var(--ana-mavi) !important; /* transform: translateY(-1px) !important; */ box-shadow: none !important; } /* Request Status Styles */ .request-status.archived { background: var(--metin-ucuncu); color: var(--arka-plan-ana); } .request-status.appealed { background: var(--durum-uyari); color: var(--arka-plan-ana); } /* Appeal Form Styles */ .legal-modal .appeal-form { padding: 20px 0; } .legal-modal .appeal-form .form-group { margin-bottom: 20px; } .legal-modal .appeal-form .form-group label { margin-bottom: 8px; } .legal-modal .appeal-form .form-group .form-control { width: 100%; padding: 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: var(--text-base); transition: border-color 0.2s ease; } .legal-modal .appeal-form .form-group .form-control:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .legal-modal .appeal-form .form-group textarea.form-control { resize: vertical; min-height: 100px; } .legal-modal .appeal-form .form-group .form-text { font-size: var(--text-sm); color: var(--metin-ucuncu); margin-top: 4px; } .legal-modal .appeal-form .form-group input[readonly] { background-color: var(--arka-plan-ikincil); color: var(--metin-ucuncu); } .legal-modal .upload-form { display: flex; flex-direction: column; gap: var(--spacing-xl); } .legal-modal .upload-form .form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .legal-modal .upload-form .form-group label { font-size: var(--text-base); } /* Bu stiller global input stillerini kullanıyor */ .legal-modal .file-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); margin-bottom: 8px; } .legal-modal .file-item .file-info { display: flex; align-items: center; gap: var(--spacing-sm); flex: 1; } .legal-modal .file-item .file-info i { color: var(--ana-mavi); } .legal-modal .file-item .file-size { color: var(--metin-ucuncu); font-size: var(--text-sm); } .legal-modal .note-form { display: flex; flex-direction: column; gap: var(--spacing-xl); } .legal-modal .note-form .form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .legal-modal .note-form .form-group label { font-size: var(--text-base); } /* Bu stiller global input stillerini kullanıyor */ /* #endregion */ /* #endregion */ */ /* #region Consent Table - Onam Tablosu */ .consent-table-container { overflow-x: auto; border-radius: 0 0 20px 20px; background: var(--arka-plan-ana); } .consent-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); } .consent-table thead { background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, var(--arka-plan-dorduncu) 100%); border-bottom: 2px solid var(--kenarlik-ana); } .consent-table th { padding: 16px 20px; text-align: left; font-weight: 600; color: var(--metin-ana); text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.5px; border-bottom: 1px solid var(--kenarlik-ana); } .consent-table tbody tr { border-bottom: 1px solid var(--arka-plan-ucuncu); transition: all 0.2s ease; } .consent-table td { padding: 16px 20px; vertical-align: middle; border-bottom: 1px solid var(--arka-plan-ucuncu); } /* #endregion */ /* #region Consent Number - Onam Numarası */ .consent-number { display: flex; flex-direction: column; gap: 4px; } .consent-code { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); /* font-family: 'Monaco', 'Consolas', monospace; */ font-family: 'Inter', sans-serif; } .consent-date-short { font-size: var(--text-sm); color: var(--metin-ucuncu); } /* #endregion */ /* #region Patient Consent Info - Hasta Onam Bilgisi */ .patient-consent-info { display: flex; align-items: center; gap: var(--spacing-md); } .consent-details h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 4px; } .consent-details p { font-size: 13px; color: var(--metin-ucuncu); margin-bottom: 4px; } .consent-details .phone { font-size: var(--text-sm); color: var(--metin-ucuncu); /* font-family: 'Monaco', 'Consolas', monospace; */ font-family: 'Inter', sans-serif; } /* #endregion */ /* #region Consent Type - Onam Türü */ .consent-type { display: flex; flex-direction: column; gap: 6px; } .type-badge { display: flex; align-items: center; gap: var(--spacing-sm); padding: 8px 12px; border-radius: var(--radius-xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .type-badge.surgery { background: var(--durum-hata-acik); color: var(--durum-hata-metin); /* border: 1px solid var(--kenarlik-ana); */ } .type-badge.anesthesia { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); /* border: 1px solid var(--kenarlik-ana); */ } .type-badge.treatment { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); /* border: 1px solid var(--kenarlik-ana); */ } .type-badge.radiology { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); /* border: 1px solid var(--kenarlik-ana); */ } .type-badge.euthanasia { background: var(--arka-plan-ucuncu); color: var(--metin-ana); /* border: 1px solid var(--kenarlik-ana); */ } .procedure-name { font-size: 13px; color: var(--metin-ucuncu); font-style: italic; } /* #endregion */ /* #region Consent Date - Onam Tarihi */ .consent-date { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); display: block; margin-bottom: 4px; } .consent-time { font-size: var(--text-sm); color: var(--metin-ucuncu); background: var(--arka-plan-ucuncu); padding: 2px 6px; border-radius: var(--radius-md); } /* #endregion */ /* #region Consent Status Badges - Onam Durum Rozetleri */ .status-badge.signed { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); /* border: 1px solid var(--kenarlik-ana); */ } .status-badge.pending { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); /* border: 1px solid var(--kenarlik-ana); */ } .status-badge.rejected { background: var(--durum-hata-acik); color: var(--durum-hata-metin); /* border: 1px solid var(--kenarlik-ana); */ } .status-badge.expired { background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); /* border: 1px solid var(--kenarlik-ana); */ } /* #endregion */ /* #region Signature Info - İmza Bilgisi */ .signature-info { display: flex; flex-direction: column; gap: 6px; } .signature-status { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; } .signature-status.verified { color: var(--durum-basarili-metin); } .signature-status.pending { color: var(--durum-uyari-metin); } .signature-status.rejected { color: var(--durum-hata-metin); } .signature-date { font-size: var(--text-sm); color: var(--metin-ucuncu); } /* #endregion */ /* #region Last Action - Son İşlem */ .last-action { font-size: 13px; font-weight: 500; color: var(--baslik-ana); display: block; margin-bottom: 4px; } .action-time { font-size: var(--text-sm); color: var(--metin-ucuncu); } /* #endregion */ /* #region Consent Actions - Onam İşlemleri */ .consent-actions { display: flex; align-items: center; gap: var(--spacing-sm); } /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ .action-btn.verify { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .action-btn.verify:hover { background: var(--ana-mavi); color: var(--arka-plan-ana); /* transform: scale(1.1); */ } .action-btn.remind { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .action-btn.remind:hover { background: var(--durum-uyari); color: var(--arka-plan-ana); /* transform: scale(1.1); */ } .action-btn.resend { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .action-btn.resend:hover { background: var(--ana-cyan); color: var(--arka-plan-ana); /* transform: scale(1.1); */ } .action-btn.renew { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .action-btn.renew:hover { background: var(--ana-yesil); color: var(--arka-plan-ana); /* transform: scale(1.1); */ } .action-btn.alternative { background: var(--ana-mor-cok-acik); color: var(--ana-mor-koyu); } .action-btn.alternative:hover { background: var(--ana-mor-acik); color: var(--arka-plan-ana); /* transform: scale(1.1); */ } /* #endregion */ /* #region Signed Consents Summary - İmzalanmış Onamlar Özeti */ .signed-consents-summary { padding: 24px; margin-bottom: 32px; } .signature-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-xl); } .stat-item { background: var(--arka-plan-ana); border-radius: 10px; padding: 10px; /* border: 1px solid var(--kenarlik-ana); */ display: flex; align-items: center; gap: 5px; transition: all 0.3s ease; } /* .stat-item:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } */ .stat-item .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--arka-plan-ana); background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); } .stat-item .stat-content { display: flex; flex-direction: column; gap: 4px; flex: 1; width: 100%; } .stat-item h4 { font-size: var(--text-base); font-weight: 600; color: var(--metin-ucuncu); margin: 0; } .stat-number { font-size: 24px; font-weight: 700; color: var(--baslik-ana); } .stat-percentage { font-size: var(--text-sm); color: var(--metin-ucuncu); } /* .signed-consents-table { padding: 0 24px 24px; } */ .validity-badge { padding: 4px 8px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 600; text-transform: uppercase; } .validity-badge.valid { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); border: 1px solid var(--kenarlik-ana); } .validity-badge.expired { background: var(--durum-hata-acik); color: var(--durum-hata-metin); border: 1px solid var(--kenarlik-ana); } /* #endregion /* #region Reports System Styles - Raporlar Sistemi Stilleri */ /* ------------------------------------ */ /* Onam Sistemi Sayfası Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* Raporlar Sayfası Stilleri */ /* ------------------------------------ */ /* #region Raporlar */ /* Reports Layout */ .raporlar-page .reports-layout { display: grid; grid-template-columns: 340px 1fr; gap: 32px; margin-bottom: 32px; } /* Reports Sidebar */ .raporlar-page .reports-sidebar { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); padding: 24px; border: 1px solid var(--kenarlik-ana); height: fit-content; position: sticky; top: 100px; } .raporlar-page .reports-sidebar-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--kenarlik-ana); } .raporlar-page .reports-sidebar-header h3 { font-size: 18px; font-weight: 600; color: var(--baslik-ana); margin: 0; } .raporlar-page .category-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .raporlar-page .category-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-lg); padding: 16px; border-radius: var(--radius-xl); cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .raporlar-page .category-item:hover { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ana); } .raporlar-page .category-item.active { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); color: var(--arka-plan-ana); box-shadow: 0 2px 6px var(--golge-mavi); justify-content: flex-start !important; } .raporlar-page .category-icon { width: 44px; height: 44px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); } .raporlar-page .category-item.active .category-icon { background: rgba(255, 255, 255, 0.2); color: var(--metin-beyaz); } .raporlar-page .category-info h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 4px 0; } .raporlar-page .category-item.active .category-info h4 { color: var(--metin-beyaz); } .raporlar-page .category-count { font-size: var(--text-base); color: var(--metin-ucuncu); } .raporlar-page .category-item.active .category-count { color: rgba(255, 255, 255, 0.8); } /* Reports Main */ .raporlar-page .reports-main { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); border: 1px solid var(--kenarlik-ana); overflow: hidden; } .raporlar-page .reports-main-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px; border-bottom: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ikincil); } .raporlar-page .view-controls { display: flex; gap: var(--spacing-sm); } .raporlar-page .view-btn { display: flex; align-items: center; gap: var(--spacing-sm); padding: 10px 16px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 500; color: var(--metin-ucuncu); cursor: pointer; transition: all 0.2s ease; } .raporlar-page .view-btn:hover { color: var(--ana-mavi); border-color: var(--kenarlik-ana); } .raporlar-page .view-btn.active { background: var(--ana-mavi); color: var(--arka-plan-ana); border-color: var(--kenarlik-ana); } .raporlar-page .sort-controls { display: flex; align-items: center; } /* Reports Grid */ .raporlar-page .reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--spacing-2xl); padding: 32px; } .raporlar-page .reports-list { display: none; padding: 32px; } .raporlar-page .reports-grid.active { display: grid; } .raporlar-page .reports-list.active { display: block; } .raporlar-page .report-card { background: var(--arka-plan-ana); border-radius: 16px; padding: 24px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; position: relative; overflow: hidden; } .raporlar-page .report-card:hover { transform: translateY(-4px); box-shadow: 0 12px 35px var(--golge-ana); border-color: var(--kenarlik-ana); } .raporlar-page .report-card.financial { border-left: 4px solid var(--ana-yesil); } .raporlar-page .report-card.patients { border-left: 4px solid var(--ana-mavi); } .raporlar-page .report-card.inventory { border-left: 4px solid var(--ana-sari); } .raporlar-page .report-card.performance { border-left: 4px solid var(--ana-mor); } .raporlar-page .report-card.treatments { border-left: 4px solid var(--ana-kirmizi); } .raporlar-page .report-card.appointments { border-left: 4px solid var(--ana-cyan); } .raporlar-page .report-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .raporlar-page .report-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--arka-plan-ana); background: linear-gradient(135deg, var(--metin-ucuncu) 0%, var(--metin-ikincil) 100%); } .raporlar-page .report-card.financial .report-icon { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); } .raporlar-page .report-card.patients .report-icon { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .raporlar-page .report-card.inventory .report-icon { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%); } .raporlar-page .report-card.performance .report-icon { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%); } .raporlar-page .report-card.treatments .report-icon { background: linear-gradient(135deg, var(--ana-kirmizi) 0%, var(--ana-kirmizi-koyu) 100%); } .raporlar-page .report-card.appointments .report-icon { background: linear-gradient(135deg, var(--ana-cyan) 0%, var(--ana-cyan-koyu) 100%); } .raporlar-page .report-badge { padding: 4px 8px; border-radius: var(--radius-xl); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px; } .raporlar-page .report-badge.popular { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .raporlar-page .report-badge.new { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .raporlar-page .report-badge.urgent { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .raporlar-page .report-content h3 { font-size: 20px; font-weight: 700; color: var(--baslik-ana); margin: 0 0 8px 0; } .raporlar-page .report-description { color: var(--metin-ucuncu); line-height: 1.5; margin: 0 0 16px 0; } .raporlar-page .report-meta { display: flex; flex-direction: row; gap: var(--spacing-xl); align-items: center; margin: 0; } .meta-item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-base); color: var(--metin-ucuncu); } .meta-item i { width: 16px; color: var(--metin-dorduncu); } .report-actions { display: flex; gap: var(--spacing-sm); } /* Reports Table */ .reports-table-container { background: var(--arka-plan-ana); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); overflow: hidden; } .reports-table { width: 100%; border-collapse: collapse; } .reports-table th { background: var(--arka-plan-ikincil); padding: 16px; text-align: left; font-weight: 600; color: var(--metin-ana); border-bottom: 1px solid var(--kenarlik-ana); font-size: var(--text-sm); } .reports-table td { padding: 16px; border-bottom: 1px solid var(--arka-plan-ucuncu); vertical-align: middle; } .reports-table tr:hover { background: var(--arka-plan-ikincil); } .report-list-info { display: flex; align-items: center; gap: var(--spacing-lg); } .report-list-icon { width: 44px; height: 44px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--arka-plan-ana); } .report-list-icon.financial { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); } .report-list-icon.patients { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .report-list-icon.inventory { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%); } .report-list-details h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 4px 0; } .report-list-details p { font-size: var(--text-base); color: var(--metin-ucuncu); margin: 0; } .category-tag { padding: 4px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .category-tag.financial { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .category-tag.patients { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .category-tag.inventory { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .table-actions { display: flex; gap: var(--spacing-sm); align-items: center; justify-content: center; } /* İşlemler sütunu başlığını ortala ve daralt (genellikle son sütun) */ table thead th:last-child, .data-table thead th:last-child, .invoice-table thead th:last-child, .patients-table thead th:last-child, .stock-table thead th:last-child, .treatments-table thead th:last-child, .settings-table thead th:last-child, .users-table thead th:last-child, .permissions-table thead th:last-child, .notifications-table thead th:last-child, .simple-table thead th:last-child, .reports-table thead th:last-child, .invoice-items-table thead th:last-child, .history-table thead th:last-child { text-align: center !important; width: fit-content; white-space: nowrap; } /* İşlemler hücrelerini de daralt */ table tbody td:last-child, .data-table tbody td:last-child, .invoice-table tbody td:last-child, .patients-table tbody td:last-child, .stock-table tbody td:last-child, .treatments-table tbody td:last-child, .settings-table tbody td:last-child, .users-table tbody td:last-child, .permissions-table tbody td:last-child, .notifications-table tbody td:last-child, .simple-table tbody td:last-child, .reports-table tbody td:last-child, .invoice-items-table tbody td:last-child, .history-table tbody td:last-child { width: fit-content; white-space: nowrap; } .action-btn.share { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .action-btn.share:hover { background: var(--durum-uyari); color: var(--arka-plan-ana); } /* #endregion */ /* #region Raporlar Sayfası Liste Görünümü Düzeltmeleri */ /* Görünüm kontrolü düzeltmesi */ #gridView, #listView { display: none; } #gridView.active, #listView.active { display: block; } /* Liste görünümü tablo stilleri - mevcut stilleri düzeltelim */ .reports-table { width: 100%; border-collapse: collapse; background: var(--arka-plan-ana); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 4px 15px var(--golge-ana); } .reports-table thead { background: linear-gradient(135deg, var(--ana-mavi-acik) 0%, var(--ana-mor) 100%); color: var(--arka-plan-ana); } .reports-table th { padding: 16px 20px; text-align: left; font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.5px; } .reports-table tbody tr { border-bottom: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; } /* .reports-table tbody tr:hover { background-color: var(--kart-arka-plan-vurgu); transform: translateX(2px); } */ .reports-table tbody tr:last-child { border-bottom: none; } .reports-table td { padding: 16px 20px; vertical-align: middle; } /* #region Raporlar Sayfası - Birleştirilmiş Stiller */ /* Liste görünümü rapor bilgisi stilleri */ .report-list-info { display: flex; align-items: center; gap: var(--spacing-md); } .report-list-icon { width: 40px; height: 40px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--arka-plan-ana); } /* Rapor ikonları - Tüm kategoriler */ .report-list-icon.financial, .report-card-icon.financial { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); } .report-list-icon.patients, .report-card-icon.patients { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); } .report-list-icon.inventory, .report-card-icon.inventory { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%); } .report-list-icon.performance, .report-card-icon.performance { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%); } .report-list-icon.treatments, .report-card-icon.treatments { background: linear-gradient(135deg, var(--ana-kirmizi) 0%, #dc2626 100%); } .report-list-icon.appointments, .report-card-icon.appointments { background: linear-gradient(135deg, var(--ana-cyan) 0%, #0891b2 100%); } .report-list-details h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .report-list-details p { margin: 0; font-size: 13px; color: var(--metin-ucuncu); } /* Kategori tag stilleri - Tüm kategoriler */ .category-tag { padding: 6px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .category-tag.financial { background: rgba(16, 185, 129, 0.1); color: var(--ana-yesil); } .category-tag.patients { background: rgba(59, 130, 246, 0.1); color: var(--ana-mavi); } .category-tag.inventory { background: rgba(245, 158, 11, 0.1); color: var(--ana-sari); } .category-tag.performance { background: rgba(139, 92, 246, 0.1); color: var(--ana-mor); } .category-tag.treatments { background: rgba(239, 68, 68, 0.1); color: var(--ana-kirmizi); } .category-tag.appointments { background: rgba(6, 182, 212, 0.1); color: var(--ana-cyan); } /* Status badge stilleri - Tüm durumlar */ .status-badge { padding: 4px 8px; border-radius: var(--radius-xl); font-size: 11px; font-weight: 600; text-transform: uppercase; } .status-badge.active, .status-badge.completed { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .status-badge.inactive, .status-badge.pending { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .status-badge.error { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } /* Tablo aksiyonları - Birleştirilmiş */ /* .table-actions genel tanımı satır 14061'de yapıldı */ /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ /* Ortak Action Button Renk Sistemi - Faturalandırma Renklerine Göre */ /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ .action-btn.share { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .action-btn.share:hover { background: var(--ana-mavi); color: var(--arka-plan-ana); } /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ .action-btn.email { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .action-btn.email:hover { background: var(--ana-mavi); color: var(--arka-plan-ana); } /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ .action-btn.check { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .action-btn.check:hover { background: var(--durum-basarili); color: var(--arka-plan-ana); } .action-btn.bell { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .action-btn.bell:hover { background: var(--durum-uyari); color: var(--arka-plan-ana); } /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ .action-btn.stock-out { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .action-btn.stock-out:hover { background: var(--durum-hata); color: var(--arka-plan-ana); } /* Artık genel .action-btn.payment kullanılıyor */ /* Eski action-btn tanımları dosyanın başına taşındı (satır 365-611) */ .reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-2xl); padding: 0; } .report-card { background: var(--arka-plan-ana); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); overflow: hidden; transition: all 0.3s ease; box-shadow: var(--shadow-sm); } .report-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ikincil); border-color: var(--kenarlik-ana); } .report-card-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px; border-bottom: 1px solid var(--arka-plan-ucincu); } .report-card-icon { width: 48px; height: 48px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--arka-plan-ana); } .report-card-status { display: flex; align-items: center; } .report-card-status .status-badge { color: var(--baslik-ana) !important; } .report-card-content { padding: 0 20px 20px; } .report-card-content h4 { font-size: 18px; font-weight: 600; color: var(--metin-ana); margin: 0 0 8px 0; line-height: 1.4; } .report-description { color: var(--metin-ucincu); font-size: var(--text-base); line-height: 1.5; margin: 0 0 16px 0; } .report-meta { display: flex; gap: var(--spacing-sm); } .meta-item { display: flex; align-items: center; gap: var(--spacing-sm); color: var(--metin-ucincu); font-size: 13px; } .meta-item i { width: 16px; text-align: center; color: var(--metin-dorduncu); } .report-card-actions { display: flex; gap: var(--spacing-sm); padding: 16px 20px 20px; border-top: 1px solid var(--arka-plan-ucincu); background: var(--arka-plan-ikincil); } .report-card-actions .action-btn:hover { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ana); /* transform: translateY(-1px); */ } /* #endregion */ /* View kontrol butonları düzeltmesi */ .view-controls .view-btn { position: relative; overflow: hidden; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); color: var(--metin-ana); transition: all 0.3s ease; } .view-controls .view-btn.active { background: linear-gradient(135deg, var(--ana-mavi-acik) 0%, var(--ana-mor) 100%); color: var(--arka-plan-ana); border-color: transparent; } .view-controls .view-btn:not(.active):hover { background: var(--arka-plan-ana); border-color: var(--kenarlik-ana); } /* #endregion */ /* #region Raporlar Sayfası - Yeni Tasarım */ /* Ana panel başlık alanı */ .category-title { display: flex; flex-direction: column; gap: 4px; } .category-title h3 { margin: 0; font-size: 24px; font-weight: 700; color: var(--metin-ana); } .category-title span { font-size: var(--text-base); color: var(--metin-ucuncu); font-weight: 500; } /* Tablo konteyner düzeltmeleri */ .reports-table-container { background: var(--arka-plan-ana); border-radius: var(--radius-xl); box-shadow: 0 4px 15px var(--golge-ana); overflow: hidden; margin: 0 24px; margin-top: 24px; } .reports-table { width: 100%; border-collapse: collapse; background: var(--arka-plan-ana); } .reports-table thead { background: linear-gradient(135deg, var(--ana-mavi-acik) 0%, var(--ana-mor) 100%); color: var(--arka-plan-ana); } .reports-table th { padding: 16px 20px; text-align: left; font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.5px; } .reports-table tbody tr { border-bottom: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; } /* .reports-table tbody tr:hover { background-color: var(--kart-arka-plan-vurgu); transform: translateX(2px); } */ .reports-table tbody tr:last-child { border-bottom: none; } .reports-table td { padding: 16px 20px; vertical-align: middle; } /* Bu bölüm kaldırıldı - tekrar eden stiller temizlendi */ /* Bu stil yeni modal sistemi ile değiştirildi */ .report-viewer { display: flex; flex-direction: column; gap: var(--spacing-xl); } .report-info-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .report-meta { display: flex; gap: var(--spacing-lg); align-items: center; } .report-category { padding: 4px 8px; background: var(--ana-mavi); color: var(--arka-plan-ana); border-radius: var(--radius-xl); font-size: var(--text-sm); font-weight: 600; } .report-date, .report-downloads { font-size: var(--text-base); color: var(--metin-ucuncu); } .report-actions-modal { display: flex; gap: var(--spacing-sm); } .report-content-area { display: flex; flex-direction: column; gap: var(--spacing-xl); } .report-chart-container { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 400px; } /* Light tema için chart container arka planı */ /* [data-theme="light"] .report-chart-container { background: #ffffff !important; } */ /* Dark tema için chart container arka planı */ /* [data-theme="dark"] .report-chart-container { background: #1d2027 !important; } */ .report-summary { background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); padding: 20px; } .report-summary h4 { margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: var(--metin-ana); } .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); } .summary-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--arka-plan-ana); border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); } .summary-label { font-size: var(--text-base); color: var(--metin-ucuncu); font-weight: 500; } .summary-value { font-size: 16px; color: var(--metin-ana); font-weight: 700; } /* #endregion */ /* #region Raporlar CSS Düzeltmeleri */ /* Tedavi ve Randevu kategori renkleri */ .report-list-icon.treatments { background: linear-gradient(135deg, var(--ana-kirmizi) 0%, var(--ana-kirmizi-koyu) 100%); } .report-list-icon.appointments { background: linear-gradient(135deg, var(--ana-cyan) 0%, var(--ana-cyan-koyu) 100%); } .category-tag.treatments { background: rgba(239, 68, 68, 0.1); color: var(--ana-kirmizi); } .category-tag.appointments { background: rgba(6, 182, 212, 0.1); color: var(--ana-cyan); } /* Bu stil yeni modal sistemi ile değiştirildi */ .modal-body { max-height: calc(85vh - 140px); overflow-y: auto; padding: 24px; } /* Rapor viewer düzeni */ .report-viewer { display: flex; flex-direction: column; gap: var(--spacing-2xl); height: 100%; } .report-content-area { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-2xl); flex: 1; min-height: 500px; } .report-chart-container { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 500px; } #reportChart { max-width: 90%; height: auto; background: transparent !important; } .report-summary { background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); padding: 24px; border: 1px solid var(--kenarlik-ana); } .report-summary h4 { margin: 0 0 20px 0; font-size: 20px; font-weight: 700; color: var(--metin-ana); border-bottom: 2px solid var(--kenarlik-ana); padding-bottom: 12px; } .summary-grid { display: flex; flex-direction: column; gap: var(--spacing-lg); } .summary-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--arka-plan-ana); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .summary-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* transform: translateY(-1px); */ } .summary-label { font-size: 15px; color: var(--metin-ucuncu); font-weight: 600; } .summary-value { font-size: 18px; color: var(--metin-ana); font-weight: 800; } /* Info bar düzeltmesi */ .report-info-bar { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; /* background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, #e2e8f0 100%); */ border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } .report-meta { display: flex; gap: var(--spacing-xl); align-items: center; } .report-category { padding: var(--spacing-sm) var(--spacing-lg); background: var(--ana-mavi); color: var(--arka-plan-ana); border-radius: var(--radius-3xl); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .report-date, .report-downloads { font-size: 15px; color: var(--metin-ana); font-weight: 600; } .report-actions-modal { display: flex; gap: var(--spacing-md); } /* #endregion */ /* ------------------------------------ */ /* Raporlar Sayfası Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* ------------------------------------ */ /* #region Hukuki Destek Sayfası Stilleri - Legal Support Page Styles */ /* ------------------------------------ */ /* #region Legal Support System Styles - Hukuki Destek Sistemi Stilleri */ /* Legal Layout */ .hukuki-destek-page .legal-layout { display: grid; grid-template-columns: 350px 1fr; gap: 32px; margin-bottom: 32px; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Legal Sidebar */ .hukuki-destek-page .legal-sidebar { display: flex; flex-direction: column; gap: var(--spacing-2xl); } /* Law Firm Info */ .hukuki-destek-page .law-firm-info { background: var(--arka-plan-ana); border-radius: 16px; padding: 24px; border: 1px solid var(--kenarlik-ana); } .hukuki-destek-page .firm-header { display: flex; align-items: center; gap: var(--spacing-lg); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--arka-plan-ucuncu); } .hukuki-destek-page .firm-logo { width: 56px; height: 56px; background: linear-gradient(135deg, #1d293b 0%, #374151 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--metin-beyaz); font-size: 24px; } .hukuki-destek-page .firm-details h3 { font-size: 18px; font-weight: 700; color: var(--baslik-ana); /* margin: 0 0 4px 0; */ } .hukuki-destek-page .firm-details p { font-size: var(--text-base); color: var(--metin-ucuncu); margin: 0; } /* Hukuki destek sayfası özel detail-item stili */ .hukuki-destek-page .detail-item { display: flex !important; flex-direction: row; align-items: center !important; gap: 6px !important; margin: 0; padding: 10px; } .hukuki-destek-page .firm-contact { display: flex; flex-direction: column; gap: var(--spacing-md); } .hukuki-destek-page .contact-item { display: flex; align-items: center; gap: var(--spacing-md); font-size: var(--text-base); color: var(--metin-ucuncu); padding: 0; } .hukuki-destek-page .contact-item i { width: 16px; color: var(--metin-dorduncu); } /* Assigned Lawyers */ .hukuki-destek-page .assigned-lawyers { background: var(--arka-plan-ana); border-radius: 16px; padding: 20px; border: 1px solid var(--kenarlik-ana); } .hukuki-destek-page .assigned-lawyers h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 16px 0; } .hukuki-destek-page .lawyer-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .hukuki-destek-page .lawyer-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 12px; background: var(--kart-arka-plan); border-radius: var(--radius-lg); border: 1px solid var(--arka-plan-ucuncu); transition: all 0.2s ease; cursor: default; } .hukuki-destek-page .lawyer-item:hover { border-color: var(--ana-mavi); } .hukuki-destek-page .lawyer-actions { display: flex; gap: var(--spacing-sm); margin-left: auto; } .hukuki-destek-page .lawyer-action-btn { width: 32px; height: 32px; border-radius: var(--radius-md); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; font-size: var(--text-sm); } .hukuki-destek-page .lawyer-action-btn.search { background-color: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .hukuki-destek-page .lawyer-action-btn.search:hover { background-color: var(--durum-bilgi-acik); color: var(--ana-mavi-daha-koyu); } .hukuki-destek-page .lawyer-action-btn.mail { background-color: var(--durum-basarili-acik); color: var(--durum-basarili-koyu); } .hukuki-destek-page .lawyer-action-btn.mail:hover { background-color: var(--durum-basarili-acik); color: var(--ana-yesil); } .hukuki-destek-page .lawyer-action-btn.phone { background-color: var(--durum-uyari-acik); color: var(--durum-uyari-koyu); } .hukuki-destek-page .lawyer-action-btn.phone:hover { background-color: var(--durum-uyari-acik); color: var(--ana-sari-koyu); } .hukuki-destek-page .lawyer-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--arka-plan-ucuncu); display: flex; align-items: center; justify-content: center; } .hukuki-destek-page .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .hukuki-destek-page .lawyer-info { flex: 1; } .hukuki-destek-page .lawyer-info h5 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin: 0 0 2px 0; } .hukuki-destek-page .lawyer-info p { font-size: var(--text-sm); color: var(--metin-ucuncu); margin: 0 0 4px 0; line-height: normal; } .hukuki-destek-page .lawyer-status { font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: var(--radius-lg); } .hukuki-destek-page .lawyer-status.online { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .hukuki-destek-page .lawyer-status.offline { background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); } .hukuki-destek-page .lawyer-status.busy { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .hukuki-destek-page .contact-lawyer-btn { width: 32px; height: 32px; border: none; border-radius: var(--radius-lg); background: var(--arka-plan-dorduncu); color: var(--metin-ucuncu); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .hukuki-destek-page .contact-lawyer-btn:hover { background: var(--ana-mavi); color: var(--arka-plan-ana); } /* Quick Actions */ .hukuki-destek-page .quick-actions { background: var(--arka-plan-ana); border-radius: 16px; padding: 20px; border: 1px solid var(--kenarlik-ana); } .hukuki-destek-page .quick-actions h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 16px 0; } .hukuki-destek-page .quick-action-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 12px; border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; background: var(--kart-arka-plan); border: 1px solid var(--arka-plan-ucuncu); margin-bottom: 8px; } .hukuki-destek-page .quick-action-item:hover { border-color: var(--ana-mavi); /* transform: translateY(-1px); */ } .hukuki-destek-page .quick-action-item.urgent { border-left: 3px solid var(--ana-kirmizi); } .hukuki-destek-page .quick-action-item.urgent:hover { border-color: var(--ana-kirmizi); } .hukuki-destek-page .quick-action-icon { width: 36px; height: 36px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); } .hukuki-destek-page .quick-action-item.urgent .quick-action-icon { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .hukuki-destek-page .quick-action-info h5 { font-size: var(--text-base); font-weight: 600; color: var(--baslik-ana); margin: 0 0 2px 0; } .hukuki-destek-page .quick-action-info p { font-size: var(--text-sm); color: var(--metin-ucuncu); margin: 0; } /* Legal Main */ .hukuki-destek-page .legal-main { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); border: 1px solid var(--kenarlik-ana); overflow: hidden; height: fit-content; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } .hukuki-destek-page .legal-main-header { display: flex; justify-content: space-between; align-items: center; /* padding: 24px 32px; */ padding-right: 16px; border-bottom: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ikincil); } .hukuki-destek-page .legal-main-header h3 { font-size: 20px; font-weight: 600; color: var(--baslik-ana); margin: 0; } .hukuki-destek-page .header-actions { display: flex; gap: var(--spacing-md); } /* Legal Requests */ .hukuki-destek-page .legal-requests-list { padding: 32px; display: flex; flex-direction: column; gap: var(--spacing-2xl); width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } .hukuki-destek-page .legal-request-card { background: var(--arka-plan-ana); border-radius: 16px; padding: 24px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; } .hukuki-destek-page .legal-request-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } .hukuki-destek-page .legal-request-card.urgent { border-left: 4px solid var(--ana-kirmizi); background: linear-gradient(135deg, var(--metin-beyaz)fff 0%, var(--durum-hata-acik) 100%); } .hukuki-destek-page .legal-request-card.normal { border-left: 4px solid var(--ana-mavi); background: linear-gradient(135deg, var(--metin-beyaz)fff 0%, var(--arka-plan-ikincil) 100%); } .hukuki-destek-page .legal-request-card.completed { border-left: 4px solid var(--ana-yesil); background: linear-gradient(135deg, var(--metin-beyaz)fff 0%, #f0fdf4 100%); } .hukuki-destek-page .request-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; cursor: pointer; padding: 8px; border-radius: var(--radius-lg); transition: background-color 0.2s ease; } .hukuki-destek-page .request-header:hover { background-color: rgba(0, 0, 0, 0.02); } .hukuki-destek-page .accordion-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background-color: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); transition: all 0.2s ease; cursor: pointer; min-width: 120px; } .request-header:hover .accordion-toggle { background-color: var(--arka-plan-besinci); color: var(--metin-ana); } .accordion-toggle p { margin: 0; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; } .accordion-toggle i { font-size: var(--text-sm); transition: transform 0.2s ease; margin-left: 8px; } .request-header.expanded .accordion-toggle i { transform: rotate(180deg); } .request-summary { margin-bottom: 16px; } .request-summary h4 { font-size: 18px; font-weight: 600; color: var(--metin-ana); margin: 0 0 8px 0; } .request-summary .request-description { font-size: var(--text-base); color: var(--metin-ucuncu); line-height: 1.5; margin: 0; } .request-details { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--arka-plan-ucuncu); } .request-info { display: flex; flex-direction: column; gap: var(--spacing-sm); } .request-number { font-size: 16px; font-weight: 700; color: var(--baslik-ana); } .request-type { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: 6px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; } .request-type.malpractice { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .request-type.insurance { background: var(--metin-beyaz); color: var(--durum-bilgi-metin); } .request-type.consultation { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .request-status { text-align: right; display: flex; align-items: flex-end; flex-direction: column; gap: var(--spacing-sm); } .status-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; } .status-indicator.urgent { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .status-indicator.normal { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .status-indicator.success { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .request-date { font-size: var(--text-sm); color: var(--metin-ucuncu); } .request-content h4 { font-size: 18px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 12px 0; } .request-description { color: var(--metin-ucuncu); line-height: 1.6; margin: 0 0 20px 0; } /* Case Details - Grid Layout */ .case-details { background: var(--arka-plan-ana); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 20px; border: 1px solid var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-hover); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); } .detail-item i { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--ana-mavi); color: var(--arka-plan-ana); border-radius: var(--radius-md); font-size: var(--text-sm); flex-shrink: 0; } /* .detail-item span { flex: 1; font-size: var(--text-base); color: var(--metin-ana); } */ .detail-item strong { color: var(--baslik-ana); font-weight: 600; } /* #region Request Timeline - Düzeltilmiş CSS */ /* Ana timeline konteyner */ .request-timeline { background: var(--arka-plan-ana); border-radius: var(--radius-xl); padding: 24px; margin-bottom: 24px; border: 1px solid var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-hover); position: relative; } /* Timeline çizgisi - DÜZELTİLDİ */ /* Timeline Container - Yeniden Tasarlanmış */ .request-timeline { background: var(--arka-plan-ana); border-radius: 16px; padding: 32px; margin-bottom: 24px; border: 1px solid var(--kenarlik-ana); box-shadow: 0 4px 20px var(--golge-hover); position: relative; overflow: hidden; } /* Request Timeline item spacing and radius */ .request-timeline .timeline-item { padding-left: 24px; border-radius: var(--radius-lg); } /* .request-timeline::before { content: ''; position: absolute; left: 32px; top: 40px; bottom: 40px; width: 2px; background: var(--kenarlik-ana); border-radius: 1px; opacity: 0.8; z-index: 1; } */ /* Timeline Items - Düzenli Tasarım */ .timeline-item { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px 0; position: relative; margin-left: 16px; min-height: 60px; transition: all 0.2s ease; border-left: 4px solid transparent; padding-left: 16px; margin-left: 0; } /* Yatan Hastalar Admission Timeline - Yeniden Tasarlandı */ .yatan-hastalar-page .admission-timeline { position: relative; padding: 24px; background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); box-shadow: 0 4px 20px var(--golge-hover); } /* Timeline çizgisi kaldırıldı */ .yatan-hastalar-page .admission-timeline-item { position: relative; display: flex; align-items: center; margin-bottom: 24px; padding-left: 0; min-height: 60px; } .yatan-hastalar-page .admission-timeline-item:last-child { margin-bottom: 0; } /* Timeline marker'ları kaldırıldı */ /* Yatan Hastalar Admission Timeline İçerik Kartları */ .yatan-hastalar-page .admission-timeline-content { flex: 1; background: var(--arka-plan-ana); border-radius: 12px; padding: 20px; border: 1px solid var(--kenarlik-ana); /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); */ transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; } .yatan-hastalar-page .admission-timeline-content:hover::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--ana-mavi); border-radius: 0 3px 3px 0; transition: all 0.3s ease; } .yatan-hastalar-page .admission-timeline-content::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--kenarlik-besinci); border-radius: 0 3px 3px 0; transition: all 0.3s ease; } .yatan-hastalar-page .admission-timeline-item.completed .admission-timeline-content::before { background: var(--ana-yesil); } .yatan-hastalar-page .admission-timeline-item.active .admission-timeline-content::before { background: var(--ana-mavi); } .yatan-hastalar-page .admission-timeline-item.pending .admission-timeline-content::before { background: var(--ana-sari); } /* Timeline content hover kaldırıldı */ /* Yatan Hastalar Admission Timeline İkonları */ .yatan-hastalar-page .admission-timeline-item i { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; padding: 20px; flex-shrink: 0; border-radius: 50%; transition: all 0.3s ease; margin-right: 12px; color: var(--metin-ucuncu); background: var(--arka-plan-ucuncu); } .yatan-hastalar-page .admission-timeline-item.completed i { color: var(--ana-yesil); background: rgba(16, 185, 129, 0.15); } .yatan-hastalar-page .admission-timeline-item.active i { color: var(--ana-mavi); background: rgba(59, 130, 246, 0.15); } .yatan-hastalar-page .admission-timeline-item.pending i { color: var(--ana-sari); background: rgba(245, 158, 11, 0.15); } /* Yatan Hastalar Admission Timeline Metin */ .yatan-hastalar-page .admission-timeline-item span { flex: 1; font-size: 16px; font-weight: 600; color: var(--metin-ana); line-height: 1.4; /* margin-right: 16px; */ display: block; /* margin-bottom: 6px; */ } .yatan-hastalar-page .admission-timeline-item.completed span { color: var(--durum-basarili-metin); } .yatan-hastalar-page .admission-timeline-item.active span { color: var(--durum-bilgi-metin); font-weight: 700; } .yatan-hastalar-page .admission-timeline-item.pending span { color: var(--durum-uyari-metin); } /* Yatan Hastalar Admission Timeline Açıklama Metni */ .yatan-hastalar-page .admission-timeline-item p { font-size: 14px; color: var(--metin-ucuncu); line-height: 1.5; margin: 0; font-weight: 400; } /* Yatan Hastalar Admission Timeline Tarih Etiketleri */ .yatan-hastalar-page .admission-timeline-item time { font-size: 12px; color: var(--metin-ikincil); background: var(--arka-plan-ucuncu); padding: 8px 16px; border-radius: 20px; white-space: nowrap; font-weight: 600; border: 1px solid var(--kenarlik-ana); /* box-shadow: 0 2px 6px var(--golge-hover); */ transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; } .yatan-hastalar-page #dynamicPatientDetailModal .patient-avatar { /* background-color: var(--ana-mavi-cok-acik); */ border: none; background-color: transparent; box-shadow: none; padding: 0; margin: 0; } .yatan-hastalar-page #dynamicPatientDetailModal .stat-item { background-color: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); } .yatan-hastalar-page .admission-timeline-item:hover { background: none; transform: none; box-shadow: none; /* background: var(--arka-plan-ucuncu); */ border-radius: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; transition: none; } /* Yatan Hastalar Admission Timeline Butonları */ .yatan-hastalar-page .admission-timeline-item .btn { padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; border: none; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 0.5px; } .yatan-hastalar-page .admission-timeline-item .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s ease; } /* Timeline buton stilleri ortak stillerden miras alınır */ /* Timeline Durum Etiketleri - Düzenli */ .timeline-item .status-badge { padding: 4px 8px; border-radius: var(--radius-xl); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; border: 1px solid transparent; transition: all 0.2s ease; } /* Avukat Bilgileri - Sade ve Basit */ .lawyer-info-simple { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); background: var(--arka-plan-ucuncu); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); margin: 16px 0; } .lawyer-label { font-size: var(--text-base); font-weight: 500; color: var(--metin-ikincil); } .lawyer-info-right { display: flex; align-items: center; gap: var(--spacing-md); } .lawyer-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ana-mavi); } .lawyer-name { font-size: 15px !important; font-weight: 600 !important; color: var(--metin-ana) !important; } @keyframes pulse-online { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .timeline-item .status-badge.completed { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); border-color: var(--durum-basarili); } .timeline-item .status-badge.active { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); border-color: var(--durum-bilgi); } .timeline-item .status-badge.pending { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); border-color: var(--durum-uyari); } /* Timeline Item Border Colors */ .timeline-item.completed { border-left-color: var(--ana-yesil); } .timeline-item.active { border-left-color: var(--ana-mavi); } .timeline-item.pending { border-left-color: var(--ana-sari); } /* Pulse Animasyonları */ @keyframes pulse-success { 0%, 100% { transform: scale(1); opacity: 1; } 50% { /* transform: scale(1.1); */ opacity: 0.8; } } @keyframes pulse-info { 0%, 100% { transform: scale(1); opacity: 1; } 50% { /* transform: scale(1.1); */ opacity: 0.8; } } @keyframes pulse-warning { 0%, 100% { transform: scale(1); opacity: 1; } 50% { /* transform: scale(1.1); */ opacity: 0.8; } } /* .timeline-item:first-child { padding-top: 8px; } */ /* Modal Animasyonları */ @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes modalSlideOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.8) translateY(-50px); } } /* Modal Overlay Animasyonu - Kaldırıldı (çakışma nedeniyle) */ @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalFadeOut { from { opacity: 1; } to { opacity: 0; } } /* Yatan Hastalar Timeline Hover Efektleri */ .yatan-hastalar-page .timeline-item:hover .timeline-content { border-color: var(--kenarlik-odak); box-shadow: 0 6px 20px var(--golge-odak); } .yatan-hastalar-page .timeline-item.completed:hover .timeline-content { border-color: var(--ana-yesil); box-shadow: 0 6px 20px var(--golge-yesil); } .yatan-hastalar-page .timeline-item.active:hover .timeline-content { border-color: var(--ana-mavi); box-shadow: 0 6px 20px var(--golge-odak); } .yatan-hastalar-page .timeline-item.pending:hover .timeline-content { border-color: var(--ana-sari); box-shadow: 0 6px 20px var(--golge-sari); } .yatan-hastalar-page .timeline-item:last-child { padding-bottom: 8px; } /* Yatan Hastalar Timeline - Temizlendi */ /* Duplicate timeline stilleri kaldırıldı */ /* Hover efektleri */ .timeline-item:hover { background: var(--arka-plan-ucuncu); border-radius: var(--radius-lg); margin-left: 12px; margin-right: -4px; padding-left: 20px; padding-right: 8px; transition: all 0.3s ease; } /* Eski timeline hover - Kaldırıldı */ /* Dark tema için timeline hover */ /* [data-theme="dark"] .timeline-item:hover { background: var(--arka-plan-ikincil); } */ /* #endregion */ /* Request Result */ .request-result { background: var(--durum-basarili-acik); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 20px; border: 1px solid var(--kenarlik-ana); } .result-badge { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; /* margin-bottom: 12px; */ } .result-badge.success { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .result-summary { color: var(--durum-basarili-metin); font-size: var(--text-base); line-height: 1.6; margin: 0; } /* Request Actions */ .request-actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--arka-plan-ucuncu); } /* #endregion */ /* ------------------------------------ */ /* #region Hukuki Destek Sayfası Stilleri - Legal Support Page Styles */ /* ------------------------------------ */ /* #region Login Sayfası Stilleri - Giriş ve Şifre Sıfırlama */ /* Ana body override login sayfaları için */ body.login-page { margin: 0; padding: 0; height: 100vh; overflow: hidden; font-family: 'Inter', sans-serif; } /* Ana container - 2 kolon */ .login-page .login-container { display: flex; height: 100vh; width: 100vw; } /* SOL PANEL - Görsel taraf */ /* #region Login Form Elementleri - Form Elemanları */ /* Login sayfası input stilleri - Birleştirilmiş */ .login-page .image-overlay { position: absolute; top: 100px; left: 100px; right: 0; bottom: 0; display: flex; align-items: flex-start; justify-content: flex-start; transition: opacity 0.3s ease; width: 100%; } .login-page .input-wrapper input { width: 100% !important; padding: 15px 50px 15px 45px !important; border: 2px solid var(--kenarlik-ana) !important; border-radius: 12px !important; font-size: 15px !important; background: var(--arka-plan-ikincil) !important; transition: all 0.2s ease !important; box-sizing: border-box !important; } .login-page .input-wrapper input:focus { outline: none !important; border-color: var(--ana-mavi) !important; background: var(--arka-plan-ana) !important; color: var(--metin-ana) !important; box-shadow: 0 0 0 3px var(--golge-odak) !important; } /* Login butonları için güçlü specificity */ .login-page .login-btn, .login-page .reset-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 16px 24px !important; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%) !important; color: var(--metin-beyaz) !important; border: none !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px var(--golge-mavi) !important; color: var(--metin-beyaz) !important; } .login-page .login-btn:hover, .login-page .reset-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 25px var(--golge-mavi) !important; } .login-page .login-btn span, .login-page .reset-btn span { color: var(--metin-beyaz) !important; } /* #region Login CSS Override - Ana Stil Çakışma Düzeltmeleri */ /* Login form-group stilleri - Birleştirilmiş */ body.login-page .form-group { margin-bottom: 0 !important; } body.login-page .form-group label { color: var(--metin-ikincil) !important; } body.login-page .form-group input, body.login-page .form-group select, body.login-page .form-group textarea { width: 100% !important; padding: 15px 50px 15px 45px !important; border: 2px solid var(--kenarlik-ana) !important; border-radius: 12px !important; font-size: 15px !important; background: var(--arka-plan-ikincil) !important; transition: all 0.2s ease !important; color: var(--metin-ikincil) !important; box-sizing: border-box !important; } body.login-page .form-group input:focus, body.login-page .form-group select:focus, body.login-page .form-group textarea:focus { outline: none !important; border-color: var(--kenarlik-odak) !important; background: var(--arka-plan-ana) !important; color: var(--metin-ana) !important; box-shadow: 0 0 0 1px var(--seffaf-mavi) !important; } /* Login sayfası için buton genişliğini ayarla */ body.login-page .btn-primary { width: 100%; padding: 16px 24px; font-weight: 600; } /* Modal z-index çakışması için */ body.login-page .loading-overlay { z-index: 9999 !important; /* Sidebar'dan (99999) düşük olmalı */ } /* Login input türleri - Özel padding */ body.login-page input[type="email"] { padding: 15px 20px 15px 45px !important; } body.login-page input[type="password"] { padding: 15px 45px 15px 45px !important; } /* #endregion */ /* #region Login Password Toggle - Şifre Görünürlük Toggle */ .login-page .input-wrapper { position: relative !important; display: block !important; width: 100% !important; } .login-page .input-wrapper input[type="password"] { padding-right: 45px !important; } .login-page .password-toggle { position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; color: var(--metin-dorduncu) !important; cursor: pointer !important; padding: 8px !important; z-index: 999 !important; width: 30px !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; } .login-page .password-toggle:hover { color: var(--metin-ikincil) !important; /* background: rgba(0,0,0,0.05) !important; */ } .login-page .password-toggle i { font-size: 16px !important; pointer-events: none !important; color: var(--metin-dorduncu) !important; z-index: 2 !important; } /* Social buttons override */ .login-page .social-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: 100% !important; padding: 14px 24px !important; border: 2px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--arka-plan-ana) !important; color: var(--metin-ikincil) !important; font-size: 15px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; } .login-page .social-btn:hover { border-color: var(--kenarlik-ikincil) !important; background: var(--arka-plan-ikincil) !important; } /* #endregion */ /* #region Login Layout - Login Düzeni */ .login-page .login-container { display: flex !important; height: 100vh !important; width: 100vw !important; margin: 0 !important; padding: 0 !important; } /* Sol panel override */ .login-page .login-image-panel { flex: 1 !important; background: url('../assets/login-hero-dark.png') center/cover no-repeat !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--metin-beyaz) !important; position: relative !important; } /* Sağ panel override - Silindi, aşağıdaki daha kapsamlı tanım kullanılıyor */ /* Input wrapper icon override */ .login-page .input-wrapper i:not(.password-toggle i) { position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--metin-dorduncu) !important; font-size: 16px !important; z-index: 5 !important; } /* Sol panel varsayılan içerik */ .login-page .image-overlay:empty::before, .login-page .image-overlay:not(:has(*))::before { content: "VITAPI®\A\AVeteriner Klinik Yönetim Sistemi\A\AModern, güvenli ve kullanıcı dostu platform" !important; white-space: pre-line !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.5 !important; display: block !important; text-align: center !important; color: var(--metin-beyaz) !important; } /* #endregion */ .login-page .logo-large { margin-bottom: 40px; } .login-page .logo-large img { height: 36px; /* filter: brightness(0) invert(1); */ } .login-page .image-overlay h2 { font-size: 20px; font-weight: 500; margin-bottom: 20px; line-height: 1.2; color: var(--metin-beyaz) !important; } .login-page .image-overlay p { font-size: 16px; opacity: 0.9; margin-bottom: 50px; line-height: 1.6; color: var(--metin-beyaz) !important; } .login-page .features-list { display: flex; flex-direction: column; gap: 25px; text-align: left; max-width: 400px; margin: 0 auto; display: none; } .login-page .feature-item { display: flex; align-items: center; gap: 15px; font-size: 16px; color: var(--metin-beyaz) !important; } .login-page .feature-item i { color: var(--ana-sari-acik); font-size: 20px; width: 25px; } /* Security features for forgot password */ .login-page .security-features { display: flex; flex-direction: column; gap: 30px; text-align: left; max-width: 400px; margin: 0 auto; display: none; } .login-page .security-item { display: flex; align-items: center; gap: var(--spacing-xl); } .login-page .security-icon { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.15); border-radius: 15px; display: flex; align-items: center; justify-content: center; color: var(--ana-sari-acik); font-size: 24px; flex-shrink: 0; } .login-page .security-text h4 { font-size: 18px; font-weight: 600; margin-bottom: 5px; color: var(--metin-beyaz) !important; } .login-page .security-text p { font-size: var(--text-base); opacity: 0.8; margin: 0; color: var(--metin-beyaz) !important; } /* #region Login Form Panel - Login Form Paneli */ .login-page .login-form-panel { flex: 1 !important; background: var(--arka-plan-ana) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 40px !important; overflow-y: auto !important; max-height: 100vh !important; } /* Login sayfa başlıkları */ .login-page h1 { color: var(--metin-ana) !important; font-size: 32px !important; font-weight: 700 !important; margin-bottom: 8px !important; } .login-page h2 { color: var(--metin-ana) !important; font-size: 20px !important; font-weight: 500 !important; margin-bottom: 20px !important; } .login-page h3 { color: var(--metin-ana) !important; font-size: 18px !important; font-weight: 600 !important; margin-bottom: 16px !important; } .login-page h4 { color: var(--metin-ana) !important; font-size: 16px !important; font-weight: 600 !important; margin-bottom: 12px !important; } /* Login sayfa metinleri */ .login-page p { color: var(--metin-beyaz) ; font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 16px !important; } /* Login sayfa linkleri */ .login-page a { color: var(--ana-mavi) !important; text-decoration: none !important; font-weight: 500 !important; transition: all 0.2s ease !important; } .login-page a:hover { color: var(--ana-mavi-koyu) !important; text-decoration: underline !important; } .login-page .form-container { width: 100%; max-width: 450px; } /* Header stilleri */ .login-page .login-header, .login-page .reset-header { text-align: center; margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; } .login-page .logo-small { margin-bottom: 30px; } .login-page .logo-small img { height: 24px; } .login-header h1, .reset-header h1 { font-size: 32px; font-weight: 700; color: var(--metin-ana); /* margin-bottom: 10px; */ } .login-header p, .reset-header p { color: var(--metin-ucuncu); font-size: 16px; margin: 0; } /* Back button */ .back-button { margin-bottom: 25px; } .back-link { display: inline-flex; align-items: center; gap: var(--spacing-sm); color: var(--ana-mavi); text-decoration: none; font-size: var(--text-base); font-weight: 500; } .back-link:hover { color: var(--ana-mavi-daha-koyu); } /* Form stilleri */ .login-form, .reset-form { display: flex; flex-direction: column; gap: 25px; } /* Bu stil ana .form-group label ile birleştirildi */ /* Input wrapper */ .input-wrapper { position: relative; } .input-wrapper i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--metin-dorduncu); font-size: 16px; z-index: 2; } .input-wrapper input { width: 100%; padding: 15px 15px 15px 45px; border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-xl); font-size: 15px; background: var(--arka-plan-ikincil); transition: all 0.2s ease; box-sizing: border-box; } .input-wrapper input:focus { outline: none; border-color: var(--kenarlik-ana); background: var(--arka-plan-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .input-wrapper input::placeholder { color: var(--metin-dorduncu); } /* Password toggle */ /* Form options */ .form-options { display: flex; justify-content: space-between; align-items: center; margin: -10px 0 5px 0; } /* #endregion */ /* #region Login Checkbox Styles - Login Checkbox Stilleri */ .checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .checkbox-wrapper input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ana-mavi); } .login-page .checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; margin: 0; } .login-page .checkbox-wrapper input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } .login-page .checkbox-wrapper .checkmark { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .login-page .checkbox-wrapper:hover .checkmark { border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .login-page .checkbox-wrapper input[type="checkbox"]:checked + .checkmark { background: var(--ana-mavi); border-color: var(--kenarlik-ana); } .login-page .checkbox-wrapper .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } .login-page .checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after { opacity: 1; transform: scale(1); } .login-page .checkbox-wrapper .checkbox-label { font-size: var(--text-base); color: var(--metin-ana); font-weight: 500; cursor: pointer; background: none; border: none; padding: 0; user-select: none; } /* #endregion */ .forgot-password { color: var(--ana-mavi); text-decoration: none; font-size: var(--text-base); font-weight: 500; } .forgot-password:hover { color: var(--ana-mavi-daha-koyu); } /* #endregion */ /* #region Login Buton Stilleri - Login Button Styles */ /* .login-btn, .reset-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); color: var(--arka-plan-ana); border: none; border-radius: var(--radius-xl); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px var(--golge-mavi); color: var(--metin-beyaz) !important; } .login-btn:hover, .reset-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px var(--golge-mavi); } */ /* Divider */ .divider { position: relative; text-align: center; margin: 25px 0; } .divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--arka-plan-dorduncu); } .divider span { background: var(--arka-plan-ana); color: var(--metin-dorduncu); padding: 0 15px; font-size: var(--text-base); font-weight: 500; } /* #endregion */ /* #region Social Login Butonları - Social Login Buttons */ .social-login { display: flex; flex-direction: column; gap: var(--spacing-md); } .social-btn { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); width: 100%; padding: 14px 24px; border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--arka-plan-ana); color: var(--metin-ana); font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .social-btn:hover { border-color: var(--kenarlik-ana); background: var(--arka-plan-ikincil); } .social-btn.google:hover { border-color: var(--durum-hata); color: var(--durum-hata); } .social-btn.microsoft:hover { border-color: var(--ana-mavi-koyu); color: var(--ana-mavi-koyu); } /* #endregion */ /* #region Login Footer - Login Alt Bilgi */ .login-footer, .reset-footer { text-align: center; margin-top: 30px; } .login-footer p { color: var(--metin-ucuncu); font-size: var(--text-base); margin-bottom: 15px; } .login-footer a { color: var(--ana-mavi); text-decoration: none; font-weight: 600; } .login-footer a:hover { color: var(--ana-mavi-daha-koyu); } .help-links { display: flex; justify-content: center; gap: var(--spacing-xl); margin-top: 15px; } .help-links a { color: var(--metin-dorduncu); text-decoration: none; font-size: 13px; font-weight: 500; } .help-links a:hover { color: var(--metin-ucuncu); } /* Version info */ .version-info { text-align: center; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--arka-plan-ucuncu); } .version-info span { display: block; color: var(--metin-dorduncu); font-size: var(--text-sm); margin-bottom: 3px; } /* Loading overlay */ .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: none; align-items: center; justify-content: center; z-index: 9999; } .loading-overlay.active { display: flex; } .loading-spinner { text-align: center; color: var(--arka-plan-ana); color: yellow !important; } .spinner { width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.3); border-top: 3px solid var(--arka-plan-ana); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-spinner p { font-size: 15px; font-weight: 500; margin: 0; } /* FORGOT PASSWORD ÖZEL STİLLER */ /* Reset steps */ .reset-step { display: none; } .reset-step.active { display: block; } /* Success icons */ .success-icon { width: 64px; height: 64px; background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 25px; } .success-icon.large { width: 80px; height: 80px; font-size: 32px; } /* Confirmation content */ .confirmation-content { text-align: center; } .inbox-illustration { font-size: 60px; color: var(--ana-mavi); margin: 30px 0; display: none; } .next-steps { background: var(--arka-plan-ikincil); padding: 25px; border-radius: var(--radius-xl); margin: 25px 0; text-align: left; } .next-steps h3 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 15px; } .next-steps ol { color: var(--metin-ucuncu); font-size: var(--text-base); line-height: 1.6; padding-left: 20px; } .next-steps li { margin-bottom: 8px; } /* Resend section */ .resend-section { margin: 25px 0; display: flex ; align-items: center; justify-content: space-between; } .resend-section p { color: var(--metin-ucuncu); font-size: var(--text-base); /* margin-bottom: 15px; */ } .resend-btn { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: 12px 20px; background: var(--arka-plan-ucuncu); color: var(--metin-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .resend-btn:hover:not(:disabled) { background: var(--arka-plan-dorduncu); border-color: var(--kenarlik-ana); } .resend-btn:disabled { opacity: 0.6; cursor: not-allowed; } .countdown { color: var(--metin-dorduncu); font-size: var(--text-sm); } /* Troubleshoot */ .troubleshoot { margin-top: 25px; text-align: left; } .troubleshoot details { background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 15px; } .troubleshoot summary { color: var(--ana-mavi); font-weight: 500; cursor: pointer; font-size: var(--text-base); } .troubleshoot-content { margin-top: 12px; } .troubleshoot-content ul { color: var(--metin-ucuncu); font-size: 13px; line-height: 1.5; padding-left: 20px; } .troubleshoot-content li { margin-bottom: 6px; } .troubleshoot-content a { color: var(--ana-mavi); text-decoration: none; } .troubleshoot-content a:hover { text-decoration: underline; } /* #endregion */ /* #region Login Redirect - Login Yönlendirme */ .back-to-login { text-align: center; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--arka-plan-ucuncu); } /* Password strength */ .password-strength { margin-top: 10px; } .strength-bar { width: 100%; height: 4px; background: var(--arka-plan-dorduncu); border-radius: 2px; overflow: hidden; margin-bottom: 6px; } .strength-fill { height: 100%; width: 0%; transition: all 0.3s ease; border-radius: 2px; } .strength-fill.weak { width: 25%; background: var(--durum-hata); } .strength-fill.fair { width: 50%; background: var(--durum-uyari); } .strength-fill.good { width: 75%; background: var(--durum-basarili); } .strength-fill.strong { width: 100%; background: var(--ana-yesil-koyu); } .strength-text { font-size: var(--text-sm); color: var(--metin-ucuncu); } /* Password requirements */ .password-requirements { margin: 15px 0; padding: 15px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); } .password-requirements h4 { color: var(--metin-ana); font-size: var(--text-base); font-weight: 600; margin-bottom: 12px; } .password-requirements ul { list-style: none; padding: 0; margin: 0; } .requirement { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 13px; margin-bottom: 6px; } .requirement i { width: 14px; font-size: var(--text-sm); } .requirement.valid { color: var(--durum-basarili-metin); } .requirement.valid i { color: var(--ana-yesil); } .requirement:not(.valid) { color: var(--durum-hata-metin); } .requirement:not(.valid) i { color: var(--ana-kirmizi); } /* Disabled button */ #setPasswordBtn:disabled { background: var(--arka-plan-dorduncu); color: var(--metin-dorduncu); cursor: not-allowed; box-shadow: none; } #setPasswordBtn:disabled:hover { transform: none; box-shadow: none; } /* Success content */ .success-content { text-align: center; } .success-illustration { font-size: 60px; color: var(--ana-yesil); margin: 30px 0; } .security-tips { background: var(--durum-basarili-acik); padding: 25px; border-radius: var(--radius-xl); margin: 25px 0; text-align: left; } .security-tips h3 { color: var(--durum-basarili-metin); font-size: 16px; font-weight: 600; margin-bottom: 15px; } .security-tips ul { color: var(--durum-basarili-koyu); font-size: var(--text-base); line-height: 1.6; padding-left: 20px; } .security-tips li { margin-bottom: 8px; } .login-redirect-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%); color: var(--arka-plan-ana); border: none; border-radius: var(--radius-xl); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px var(--golge-yesil); margin-top: 25px; } .login-redirect-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px var(--golge-yesil); } .login-page .help-text { margin-top: 20px; font-size: var(--text-base); opacity: .7; color: var(--metin-ikincil) !important; } /* Forgot Password - Reset Step Elementleri */ .login-page .reset-step { display: none; } .login-page .reset-step.active { display: block; } .login-page .back-button { margin-bottom: 20px; } .login-page .back-link { display: flex !important; align-items: center !important; gap: 8px !important; color: var(--metin-ikincil) !important; text-decoration: none !important; font-size: 14px !important; font-weight: 500 !important; transition: all 0.2s ease !important; } .login-page .back-link:hover { color: var(--ana-mavi) !important; } .login-page .back-link i { font-size: 12px !important; } /* Success Icon */ .login-page .success-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 80px !important; height: 80px !important; background: var(--durum-basarili-acik) !important; border-radius: 50% !important; margin: 0 auto 20px auto !important; } .login-page .success-icon.large { width: 100px !important; height: 100px !important; } .login-page .success-icon i { font-size: 36px !important; color: var(--durum-basarili) !important; } .login-page .success-icon.large i { font-size: 48px !important; } /* Confirmation Content */ .login-page .confirmation-content { text-align: center; } .login-page .inbox-illustration { margin: 30px 0; } .login-page .inbox-illustration i { font-size: 64px !important; color: var(--ana-mavi-acik) !important; opacity: 0.7; } .login-page .next-steps { margin: 30px 0; text-align: left; } .login-page .next-steps h3 { margin-bottom: 16px !important; } .login-page .next-steps ol { padding-left: 20px; color: var(--metin-ikincil) !important; } .login-page .next-steps li { margin-bottom: 8px; color: var(--metin-ikincil) !important; } /* Resend Section */ .login-page .resend-section { margin: 30px 0; } .login-page .resend-section p { margin-bottom: 12px !important; font-size: 14px !important; color: var(--metin-ikincil) !important; } .login-page .resend-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 12px 20px !important; background: var(--arka-plan-ikincil) !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 8px !important; color: var(--metin-ikincil) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; } .login-page .resend-btn:hover { background: var(--arka-plan-ucuncu) !important; border-color: var(--kenarlik-ikincil) !important; } .login-page .resend-btn:disabled { opacity: 0.5; cursor: not-allowed; } .login-page .countdown { font-size: 12px !important; color: var(--metin-ucuncu) !important; } /* Troubleshoot */ .login-page .troubleshoot { margin: 20px 0; } .login-page .troubleshoot details { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 12px; } .login-page .troubleshoot summary { color: var(--ana-mavi) !important; font-weight: 500; cursor: pointer; font-size: var(--text-base); } .login-page .troubleshoot-content { margin-top: 12px; } .login-page .troubleshoot-content ul { padding-left: 20px; color: var(--metin-ikincil) !important; } .login-page .troubleshoot-content li { margin-bottom: 8px; color: var(--metin-ikincil) !important; font-size: var(--text-base); } /* Password Requirements */ .login-page .password-requirements { margin: 20px 0; } .login-page .password-requirements h4 { margin-bottom: 12px !important; font-size: 14px !important; color: var(--metin-ana) !important; } .login-page .password-requirements ul { list-style: none; padding: 0; } .login-page .requirement { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 8px !important; font-size: 14px !important; color: var(--metin-ikincil) !important; } .login-page .requirement i { color: var(--durum-hata) !important; font-size: 12px !important; } .login-page .requirement.valid i { color: var(--durum-basarili) !important; } /* Password Strength */ .login-page .password-strength { margin-top: 8px; } .login-page .strength-bar { width: 100%; height: 4px; background: var(--kenarlik-ana); border-radius: 2px; overflow: hidden; margin-bottom: 4px; } .login-page .strength-fill { height: 100%; width: 0%; background: var(--durum-hata); transition: all 0.3s ease; border-radius: 2px; } .login-page .strength-fill.weak { width: 25%; background: var(--durum-hata); } .login-page .strength-fill.fair { width: 50%; background: var(--durum-uyari); } .login-page .strength-fill.good { width: 75%; background: var(--ana-mavi); } .login-page .strength-fill.strong { width: 100%; background: var(--durum-basarili); } .login-page .strength-text { font-size: 12px !important; color: var(--metin-ucuncu) !important; } /* Security Tips */ .login-page .security-tips { margin: 30px 0; text-align: left; } .login-page .security-tips h3 { margin-bottom: 16px !important; color: var(--metin-ana) !important; } .login-page .security-tips ul { padding-left: 20px; color: var(--metin-ikincil) !important; } .login-page .security-tips li { margin-bottom: 8px; color: var(--metin-ikincil) !important; font-size: var(--text-base); } /* Success Content */ .login-page .success-content { text-align: center; } .login-page .success-illustration { margin: 30px 0; } .login-page .success-illustration i { font-size: 64px !important; color: var(--durum-basarili) !important; opacity: 0.8; } .login-page .login-redirect-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 16px 24px !important; background: linear-gradient(135deg, var(--durum-basarili) 0%, var(--durum-basarili-koyu) 100%) !important; color: var(--metin-beyaz) !important; border: none !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px var(--golge-yesil) !important; } .login-page .login-redirect-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 25px var(--golge-yesil) !important; } /* Reset Footer */ .login-page .reset-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--kenarlik-ana); text-align: center; } .login-page .help-links { display: flex; justify-content: center; gap: var(--spacing-xl); margin-bottom: 20px; } .login-page .help-links a { color: var(--metin-ikincil) !important; font-size: 14px !important; text-decoration: none !important; } .login-page .help-links a:hover { color: var(--ana-mavi) !important; } /* Version Info */ .login-page .version-info { display: flex; justify-content: center; gap: var(--spacing-xl); font-size: 12px !important; color: var(--metin-ucuncu) !important; margin-top: 20px; } /* Form Options */ .login-page .form-options { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; } .login-page .forgot-password { color: var(--ana-mavi) !important; font-size: 14px !important; text-decoration: none !important; font-weight: 500 !important; } .login-page .forgot-password:hover { color: var(--ana-mavi-koyu) !important; text-decoration: underline !important; } /* Login Footer */ .login-page .login-footer { margin-top: 40px; text-align: center; } .login-page .login-footer p { color: var(--metin-ikincil) !important; font-size: 14px !important; margin-bottom: 16px !important; } .login-page .login-footer a { color: var(--ana-mavi) !important; font-weight: 600 !important; } /* Dark tema için logo değişikliği */ [data-theme="dark"] .login-page .logo-large img, [data-theme="dark"] .login-page .logo-small img { content: url('../assets/logo-vitapi-light.svg') !important; } /* #endregion */ /* #region Ayarlar Sayfası Stilleri - Settings Page Styles */ /* Settings Container */ .ayarlar-page { overflow: hidden; } .ayarlar-page .settings-container { display: grid; grid-template-columns: 280px 1fr; gap: 32px; height: calc(100vh - 140px); overflow: hidden; } .ayarlar-page .content-wrapper { padding-bottom: 0; overflow-y: hidden; } /* Settings Sidebar */ .ayarlar-page .settings-sidebar { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); padding: 24px 0; height: fit-content; position: static; } .ayarlar-page .settings-nav ul { list-style: none; padding: 0; margin: 0; } .ayarlar-page .settings-nav-link { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); font-size: var(--text-base); color: var(--metin-ucuncu); text-decoration: none; font-weight: 500; transition: all 0.2s ease; border-left: 3px solid transparent; } .ayarlar-page .settings-nav-link:hover { background: var(--arka-plan-ikincil); color: var(--ana-mavi); } .ayarlar-page .settings-nav-link.active { background: var(--durum-bilgi-acik); color: var(--ana-mavi); border-left-color: var(--ana-mavi); } .ayarlar-page .settings-nav-link i { font-size: var(--text-base); width: 20px; } /* Settings Content */ .ayarlar-page .settings-content { overflow-y: auto; padding-right: 24px; } .ayarlar-page .settings-section { display: none; } .ayarlar-page .settings-section.active { display: block; } .ayarlar-page .section-header { margin-bottom: 32px; justify-content: space-between; align-items: center; } .ayarlar-page .section-header h2 { color: var(--metin-ana); font-size: 24px; font-weight: 600; /* margin-bottom: 8px; */ } .ayarlar-page .section-header p { color: var(--metin-ucuncu); font-size: var(--text-base); margin: 0; } /* Ayarlar Sayfası Select Stilleri */ .ayarlar-page select, .ayarlar-page .form-group select, .ayarlar-page .settings-form select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; padding-right: 40px !important; cursor: pointer !important; } .ayarlar-page select:hover, .ayarlar-page select:focus, .ayarlar-page .form-group select:hover, .ayarlar-page .form-group select:focus { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); } /* Settings Card */ .ayarlar-page .settings-card { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); padding: 32px; margin-bottom: 24px; } /* Ayarlar sayfası buton genişliği */ .ayarlar-page .settings-card .btn-secondary { width: fit-content; } .ayarlar-page .settings-card .card-header { padding: 12px 0; } .ayarlar-page .settings-card .card-header h3 { padding: 0; margin: 0; } .ayarlar-page .settings-card .card-header p { padding: 0; margin: 0; color: var(--metin-ana); font-size: 14px; } .ayarlar-page .settings-card h3 { color: var(--metin-ana); font-size: 18px; font-weight: 600; margin-bottom: 24px; /* padding-bottom: 16px; */ } /* .ayarlar-page .settings-card p { color: var(--metin-ana); font-size: 14px; padding-bottom: 16px; } */ /* Profile Photo Section */ .ayarlar-page .profile-photo-section { display: flex; align-items: center; gap: var(--spacing-2xl); margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--arka-plan-ucuncu); } .ayarlar-page .current-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid var(--kenarlik-ana); } .ayarlar-page .current-photo img { width: 100%; height: 100%; object-fit: cover; } .ayarlar-page .photo-actions { display: flex; /* flex-direction: column; */ gap: var(--spacing-md); } .ayarlar-page .photo-actions .upload { background-color: var(--arka-plan-ucuncu); } /* Settings Form */ .ayarlar-page .settings-form { display: flex; flex-direction: column; /* gap: var(--spacing-2xl); */ } /* Form stilleri ortak alanda tanımlı */ input[type="checkbox" i] { width: fit-content; } /* Hasta Detay Modal Stilleri */ .patient-detail-modal { max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto; } .patient-detail-container { padding: 0; } .patient-info-card { background: var(--kart-arka-plan); color: var(--metin-ana); padding: 2rem; border-radius: var(--radius-xl); margin-bottom: 2rem; display: flex; align-items: center; gap: 1.5rem; border: 1px solid var(--kenarlik-ana); /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); */ } .patient-basic-info h2 { margin: 0 0 0.5rem 0; font-size: 2rem; font-weight: 700; color: var(--metin-ana); } .breed-info { margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--metin-ucuncu); } .status-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--radius-3xl); font-size: 0.875rem; font-weight: 600; } .status-badge.active { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .status-badge i { font-size: 0.5rem; } .detail-sections { display: grid; gap: 1.5rem; margin-bottom: 2rem; } /* Bu stil genel .detail-section ile birleştirildi */ .section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--kenarlik-ana); } /* unified in single base rule below */ .section-header h4 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--metin-ana); } .detail-grid { display: grid; /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */ gap: 1rem; } .notes-content { background: var(--arka-plan-ikincil); padding: 1rem; border-radius: var(--radius-lg); border-left: 4px solid var(--ana-mavi); } .notes-content p { margin: 0; color: var(--metin-ana); line-height: 1.6; } .patient-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-start; /* padding: 1.5rem 0; */ /* border-top: 1px solid #e2e8f0; */ margin-top: 16px; } /* Bu stiller ana .patient-avatar-large stilinde birleştirildi */ .patient-basic-info h2 { margin: 0 0 0.5rem 0; font-size: 2rem; font-weight: 700; } .breed-info { margin: 0 0 1rem 0; font-size: 1.1rem; opacity: 0.9; } .status-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--radius-3xl); font-size: 0.9rem; font-weight: 600; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); } /* .status-badge i { font-size: 0.7rem; color: var(--ana-yesil-acik); } */ .detail-sections { display: grid; gap: 1.5rem; } /* Bu stil genel .detail-section ile birleştirildi */ .section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--arka-plan-ucuncu); } /* unified in single base rule below */ .section-header h4 { margin: 0; color: var(--metin-ana); font-size: 1.2rem; font-weight: 600; } .detail-grid { display: grid; gap: 1rem; } .notes-content { background: var(--arka-plan-ikincil); padding: 1rem; border-radius: var(--radius-lg); border-left: 4px solid var(--ana-mor); } .notes-content p { margin: 0; color: var(--metin-ana); line-height: 1.6; } /* .quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } */ /* .quick-actions-grid button { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem 1.5rem; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; font-size: 0.95rem; } */ .quick-actions-grid button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ikincil); } .quick-actions-grid button i { font-size: 1.1rem; } /* Raporlar Modal Stilleri */ .scheduled-reports-list { margin-bottom: 2rem; } .scheduled-report-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); margin-bottom: 1rem; background: var(--arka-plan-ikincil); } .report-info h4 { margin: 0 0 0.5rem 0; color: var(--metin-ana); font-size: 1.1rem; } .report-info p { margin: 0; color: var(--metin-ucuncu); font-size: 0.9rem; } .report-actions { display: flex; gap: 0.5rem; } .add-schedule-section { text-align: center; padding: 1rem; border-top: 1px solid var(--kenarlik-ana); } .checkbox-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 0.5rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem; border-radius: var(--radius-md); transition: background-color 0.2s; } .checkbox-item:hover { background-color: var(--arka-plan-ucuncu); } .checkbox-item input[type="checkbox"] { margin: 0; } .date-range-inputs { display: flex; align-items: center; gap: 1rem; } .date-range-inputs span { color: var(--metin-ucuncu); font-weight: 500; } /* Hukuki Destek Modal Stilleri */ .modal-header.emergency { background: linear-gradient(135deg, #dc2626 0%, var(--durum-hata-daha-koyu) 100%); color: var(--arka-plan-ana); } /* Acil Hukuki Yardım Modal Stilleri */ .emergency-info { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--durum-hata-acik); border-radius: var(--radius-lg); border: 1px solid var(--durum-hata-acik); margin-bottom: 24px; } .emergency-icon { width: 48px; height: 48px; background: var(--durum-hata); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--arka-plan-ana); font-size: 20px; flex-shrink: 0; } .emergency-content h4 { margin: 0 0 8px 0; font-size: 18px; font-weight: 600; color: var(--durum-hata-koyu); } .emergency-content p { margin: 0; font-size: var(--text-base); color: var(--durum-hata-daha-koyu); } .emergency-options { display: flex; flex-direction: column; gap: var(--spacing-lg); } .emergency-option { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .emergency-option:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ana); } .emergency-option i { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .emergency-option:nth-child(1) i { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .emergency-option:nth-child(2) i { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .emergency-option:nth-child(3) i { background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); } .option-info { flex: 1; } .option-info h5 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .option-info p { margin: 0; font-size: var(--text-base); color: var(--metin-ucuncu); } .phone-number { font-size: 1.8rem; font-weight: 700; color: var(--durum-hata-koyu); margin: 0 0 1rem 0; } .emergency-note { color: var(--metin-ucuncu); line-height: 1.6; margin: 0; } .emergency-actions { display: flex; gap: 1rem; justify-content: center; margin: 2rem 0; } .btn-primary.emergency { background: linear-gradient(135deg, #dc2626 0%, var(--durum-hata-daha-koyu) 100%); border: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: 600; } .documents-grid { display: grid; gap: 2rem; } /* Hukuki Belgeler Modal Stilleri */ .documents-categories { display: flex; flex-direction: column; gap: 32px; /* Kategoriler arası boşluğu artırdık */ } .document-category { background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); padding: 24px; border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .document-category:hover { /* background: var(--arka-plan-ucuncu); */ border-color: var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-hover); } .document-category h4 { margin: 0 0 20px 0; color: var(--metin-ana); font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: var(--spacing-sm); padding-bottom: 12px; border-bottom: 2px solid var(--kenarlik-ana); } .document-category h4 i { color: var(--ana-mavi); font-size: 18px; } .document-list { display: flex; flex-direction: column; gap: var(--spacing-lg); /* Belge öğeleri arası boşluğu artırdık */ } .document-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 16px; background: var(--arka-plan-ana); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .document-item:hover { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ana); /* transform: translateY(-1px); */ box-shadow: 0 2px 4px var(--golge-ana); } .document-item i { color: var(--ana-kirmizi); font-size: 18px; flex-shrink: 0; } .document-item span { flex: 1; font-size: var(--text-base); font-weight: 500; color: var(--metin-ana); } /* .document-item .btn-small ortak stillerden miras alınır */ /* Malpraktis Savunması Modal Stilleri */ .malpractice-info { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--durum-bilgi-acik); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); margin-bottom: 24px; } .malpractice-icon { width: 48px; height: 48px; background: var(--ana-cyan); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--arka-plan-ana); font-size: 20px; flex-shrink: 0; } .malpractice-content h4 { margin: 0 0 8px 0; font-size: 18px; font-weight: 600; color: var(--durum-bilgi-metin); } .malpractice-content p { margin: 0; font-size: var(--text-base); color: var(--ana-cyan-koyu); } .malpractice-steps h5 { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .step-list { display: flex; flex-direction: column; gap: var(--spacing-lg); } .step-item { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .step-number { width: 32px; height: 32px; background: var(--ana-mavi); color: var(--arka-plan-ana); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--text-base); flex-shrink: 0; } .step-content h6 { margin: 0 0 4px 0; font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); } .step-content p { margin: 0; font-size: 13px; color: var(--metin-ucuncu); } .malpractice-actions { display: flex; gap: var(--spacing-md); margin-top: 24px; } /* Sigorta Tazminatı Modal Stilleri */ .insurance-info { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--durum-basarili-acik); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); margin-bottom: 24px; } .insurance-icon { width: 48px; height: 48px; background: var(--durum-basarili); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--arka-plan-ana); font-size: 20px; flex-shrink: 0; } .insurance-content h4 { margin: 0 0 8px 0; font-size: 18px; font-weight: 600; color: var(--durum-basarili-metin); } .insurance-content p { margin: 0; font-size: var(--text-base); color: var(--durum-basarili-metin); } .insurance-types h5, .insurance-process h5 { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-bottom: 24px; } .type-item { padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); text-align: center; transition: all 0.2s ease; } .type-item:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ana); /* transform: translateY(-1px); */ } .type-item i { font-size: 24px; color: var(--ana-yesil); margin-bottom: 8px; } .type-item h6 { margin: 0 0 4px 0; font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); } .type-item p { margin: 0; font-size: var(--text-sm); color: var(--metin-ucuncu); } .process-steps { display: flex; flex-direction: column; gap: var(--spacing-md); } .process-step { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); background: var(--arka-plan-ikincil); border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); } .step-icon { width: 24px; height: 24px; background: var(--durum-basarili); color: var(--arka-plan-ana); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 600; flex-shrink: 0; } .process-step span:last-child { font-size: var(--text-base); color: var(--metin-ana); } .insurance-actions { display: flex; gap: var(--spacing-md); margin-top: 24px; } .document-list { display: grid; gap: 0.75rem; } .document-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); background: var(--arka-plan-ikincil); transition: all 0.2s; } .document-item:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ana); } .document-item i { color: var(--metin-ucuncu); font-size: 1.2rem; } .document-item span { flex: 1; color: var(--metin-ana); font-weight: 500; } .document-item .btn-small i { color: var(--metin-beyaz) !important; } .defense-info { margin-bottom: 2rem; padding: 1.5rem; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border-left: 4px solid var(--ana-mor); } .defense-info h4 { margin: 0 0 0.5rem 0; color: var(--metin-ana); } .defense-info p { margin: 0; color: var(--metin-ucuncu); line-height: 1.6; } .defense-steps { display: grid; gap: 1.5rem; margin-bottom: 2rem; } .step-item { display: flex; gap: 1rem; align-items: flex-start; } .step-number { width: 40px; height: 40px; background: var(--ana-mor); color: var(--arka-plan-ana); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .step-content h5 { margin: 0 0 0.5rem 0; color: var(--metin-ana); font-size: 1.1rem; } .step-content p { margin: 0; color: var(--metin-ucuncu); line-height: 1.5; } .defense-actions { text-align: center; } .file-upload-area { border: 2px dashed var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 2rem; text-align: center; transition: all 0.2s; cursor: pointer; position: relative; } .file-upload-area:hover { border-color: var(--ana-mor); background: var(--arka-plan-ikincil); } .file-upload-area input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .file-upload-text i { font-size: 2rem; color: var(--metin-dorduncu); margin-bottom: 1rem; } .file-upload-text p { margin: 0 0 0.5rem 0; color: var(--metin-ana); font-weight: 500; } .file-upload-text span { color: var(--metin-ucuncu); font-size: 0.9rem; } /* Hasta Detay Kartı Stilleri */ .patient-detail-card { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.25rem; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); margin-top: 1rem; margin-bottom: 1.5rem; box-shadow: 0 2px 8px var(--golge-hover); } .patient-detail-card .patient-avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-xl); background: var(--arka-plan-ucuncu); display: flex; align-items: center; justify-content: center; padding: 8px; } .patient-detail-card .patient-avatar img { width: 100%; height: 100%; object-fit: contain; } .patient-detail-card .patient-info { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; } .patient-detail-card .patient-info h4 { margin: 0; color: var(--metin-ana); font-size: 1.125rem; font-weight: 600; line-height: 1.3; } .patient-detail-card .patient-info p { margin: 0; color: var(--metin-ucuncu); font-size: 0.875rem; } .patient-detail-card .patient-meta { color: var(--metin-ucuncu); font-size: 0.85rem; font-weight: 500; } /* Hukuki Destek > Yeni Hukuki Destek Talebi formu için spesifik düzen */ .hukuki-destek-page #newLegalRequestForm .patient-detail-card { align-items: flex-start; padding: 1.5rem; } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .patient-info { flex: 1; gap: 10px; } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .patient-info-wrapper { display: flex; align-items: center; gap: 1rem; } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--kenarlik-ana); border-bottom: 1px solid var(--kenarlik-ana); } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .contact-grid .field { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .contact-grid .label { color: var(--metin-ikincil); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .contact-grid .value { color: var(--metin-ana); font-size: 0.9375rem; font-weight: 500; } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .patient-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1.5rem; /* padding: 0.75rem 0 0 0; */ } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .patient-meta .meta-item { display: flex; /* flex-direction: column; */ align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--kenarlik-ana); padding: 5px; border-radius: 5px; } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .patient-meta .meta-item .label { color: var(--kenarlik-dorduncu); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .hukuki-destek-page #newLegalRequestForm .patient-detail-card .patient-meta .meta-item .value { color: var(--metin-ana); font-size: 13px; font-weight: 500; } /* Hasta Belgeleri Checklist Stilleri */ .patient-documents-info { background: var(--arka-plan-ikincil); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; border-left: 4px solid var(--ana-mor); } .patient-documents-info p { margin: 0; color: var(--metin-ana); font-weight: 500; } .documents-checklist { max-height: 300px; overflow-y: auto; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); background: var(--arka-plan-ana); } .documents-table { width: 100%; border-collapse: collapse; background: var(--arka-plan-ana); } .documents-table thead { background: var(--arka-plan-ikincil); position: sticky; top: 0; z-index: 10; } .documents-table th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--metin-ana); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--kenarlik-ana); } .documents-table th:first-child { width: 60px; text-align: center; } .documents-table th:nth-child(2) { width: auto; } .documents-table th:nth-child(3) { width: 120px; } .documents-table th:nth-child(4) { width: 100px; } .documents-table tbody tr { border-bottom: 1px solid var(--arka-plan-ucuncu); cursor: pointer; transition: all 0.2s; } .documents-table tbody tr:last-child { border-bottom: none; } .documents-table tbody tr:hover { background: var(--arka-plan-ikincil); } .documents-table tbody tr.selected { background: var(--ana-mavi-cok-acik-v2) !important; } .documents-table td { padding: 1rem; vertical-align: middle; } .documents-table td:first-child { text-align: center; } #patientDocumentsSection { margin-bottom: 20px; } #patientDocumentsSection .document-info { padding: 0; background: transparent; } #patientDocumentsSection label { display: flex; font-weight: var(--font-semibold); font-size: var(--text-base); line-height: 1.4; color: var(--metin-ana); margin-bottom: 8px; } .documents-table input[type="checkbox"] { margin: 0; cursor: pointer; width: 18px; height: 18px; } .document-checkbox-item .checkbox-item .checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .document-checkbox-item .checkbox-item .checkbox-wrapper input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } .document-checkbox-item .checkbox-item .checkbox-wrapper .checkmark { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; } .document-checkbox-item .checkbox-item .checkbox-wrapper:hover .checkmark { border-color: var(--ana-mor); box-shadow: 0 0 0 2px var(--golge-odak); } .document-checkbox-item .checkbox-item .checkbox-wrapper input[type="checkbox"]:checked + .checkmark { background: var(--ana-mor); border-color: var(--ana-mor); } .document-checkbox-item .checkbox-item .checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 1; transform: scale(1); transition: all 0.2s ease; } .document-checkbox-item .checkbox-item .checkbox-wrapper .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } .document-info { display: flex; flex-direction: column; gap: 0.25rem; } .document-name { font-weight: 600; color: var(--metin-ana); font-size: 0.9rem; line-height: 1.3; } .document-type { font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-xl); font-weight: 500; width: fit-content; text-align: center; } .document-type.onam { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .document-type.tedavi { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .document-date { font-size: 0.8rem; color: var(--metin-ucuncu); text-align: right; } .document-status { font-size: 0.75rem; color: var(--metin-ucuncu); text-align: right; } .no-documents { text-align: center; color: var(--metin-ucuncu); font-size: 12px; /* font-style: italic; */ padding: 2rem; margin: 0; } /* Form düzenlemeleri */ /* .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } */ @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } .documents-checklist { max-height: 200px; } .documents-checklist-header { grid-template-columns: 30px 1fr 80px 80px; gap: 0.5rem; font-size: 0.75rem; padding: 0.5rem; } .document-checkbox-item .checkbox-item { grid-template-columns: 30px 1fr 80px 80px; gap: 0.5rem; padding: 0.75rem 0.5rem; min-height: 50px; } .document-name { font-size: 0.8rem; } .document-type { font-size: 0.7rem; padding: 0.15rem 0.4rem; } .document-date { font-size: 0.7rem; } } /* Bu stiller global input stillerini kullanıyor */ /* Working Hours Section */ .working-hours-section { margin-top: 32px; } .working-hours-section h3 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 20px; } .working-hours-grid { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Klinik ayarları - Working hours section için toggle buton görünürlüğü */ .working-hours-section .time-inputs .working-hours-toggle { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; margin-left: auto; flex-shrink: 0 !important; flex-grow: 0 !important; flex-basis: auto !important; width: auto !important; min-width: fit-content !important; order: 999 !important; position: relative !important; z-index: 1 !important; } /* Klinik ayarları - Toggle slider görünürlüğü */ .working-hours-section .time-inputs .working-hours-toggle .toggle-slider { display: block !important; visibility: visible !important; opacity: 1 !important; flex-shrink: 0 !important; } .working-hours-section .time-inputs .working-hours-toggle .toggle-slider::before { display: block !important; visibility: visible !important; opacity: 1 !important; } .day-schedule { display: grid; grid-template-columns: 100px 1fr; gap: var(--spacing-lg); align-items: start; padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); } /* Staff hours section için day-schedule özel stil */ #staff-hours-section .day-schedule { align-items: start; } #staff-hours-section .card-header { margin-bottom: 20px; } .day-schedule label { font-weight: 500; color: var(--metin-ana); } /* Staff hours - time slots - Spesifik hekim çalışma saatleri stilleri */ /* #staff-hours-section .time-slots { display: flex; flex-direction: column; gap: var(--spacing-md); width: 100%; } #staff-hours-section .day-schedule { align-items: center; } #staff-hours-section .time-slot { display: grid !important ; grid-template-columns: 130px auto max-content !important; align-items: center !important; gap: var(--spacing-md) !important; background: transparent; padding: 0; margin: 0; margin-bottom: 10px; align-items: flex-start; justify-content: flex-start; border: none; cursor: default; } #staff-hours-section .slot-label { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ikincil); } #staff-hours-section .time-inputs { display: flex; align-items: center; gap: var(--spacing-md); } #staff-hours-section .time-inputs input[type="time"] { padding: 8px 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: var(--text-base); width: 110px !important; } #staff-hours-section .time-slot .working-hours-toggle { justify-self: start; } */ .time-inputs { display: flex; align-items: center; gap: var(--spacing-md); } .time-inputs input[type="time"] { padding: 8px 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: var(--text-base); width: fit-content !important; } .time-inputs input[type="time"]:disabled { background: var(--arka-plan-ucuncu); color: var(--metin-dorduncu); opacity: 0.5; cursor: not-allowed; pointer-events: none; } .time-inputs span { color: var(--metin-ucuncu); font-weight: 500; } /* Working Hours Toggle - Time Inputs içinde (klinik ayarları) */ .time-inputs .working-hours-toggle { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; margin-left: auto; flex-shrink: 0 !important; flex-grow: 0 !important; flex-basis: auto !important; width: auto !important; min-width: 140px !important; order: 999 !important; position: relative !important; z-index: 1 !important; white-space: nowrap !important; } /* Working Hours Toggle - Açık/Kapalı Toggle Butonu */ .working-hours-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .working-hours-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .working-hours-toggle .toggle-slider { position: relative; width: 60px; height: 32px; background: var(--arka-plan-ucuncu); border: 2px solid var(--kenarlik-ana); border-radius: 20px; transition: all 0.3s ease; } .working-hours-toggle .toggle-slider::before { content: ''; position: absolute; width: 24px; height: 24px; left: 4px; top: 50%; transform: translateY(-50%); background: var(--metin-ucuncu); border-radius: 50%; transition: all 0.3s ease; } .working-hours-toggle input[type="checkbox"]:checked + .toggle-slider { background: #4CAF50; border-color: #4CAF50; } .working-hours-toggle input[type="checkbox"]:checked + .toggle-slider::before { transform: translate(28px, -50%); background: var(--metin-beyaz); } .working-hours-toggle .toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ana); user-select: none; min-width: 45px; } .working-hours-toggle input[type="checkbox"]:checked ~ .toggle-label { color: #4CAF50; } .working-hours-toggle:hover .toggle-slider { box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); } .working-hours-toggle input[type="checkbox"]:disabled ~ .toggle-slider { opacity: 0.5; cursor: not-allowed; } /* Checkbox Wrapper - Genel Stil */ .checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } /* Modal Checkbox Wrapper - Özel Stil */ .modal .checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; padding: 8px 12px; background: var(--arka-plan-ucuncu); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); transition: all 0.2s ease; } .modal .checkbox-wrapper:hover { background: var(--arka-plan-dorduncu); border-color: var(--kenarlik-odak); } .modal .checkbox-wrapper .checkbox-label { font-weight: 500; color: var(--metin-ana); font-size: var(--text-base); line-height: 1.4; margin: 0; background: none; border: none; padding: 0; cursor: pointer; user-select: none; } .checkbox-wrapper input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } .checkbox-wrapper .checkmark { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; } .checkbox-wrapper:hover .checkmark { border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } .checkbox-wrapper input[type="checkbox"]:checked + .checkmark { background: var(--ana-mavi); border-color: var(--ana-mavi); } .checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 1; transform: scale(1); transition: all 0.2s ease; } .checkbox-wrapper .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } .checkbox-wrapper span { font-size: var(--text-base); color: var(--metin-ana); font-weight: 500; } /* Form Actions */ .form-actions { display: flex; justify-content: flex-end; gap: var(--spacing-md); padding-top: 24px; border-top: 1px solid var(--arka-plan-ucuncu); } /* Switch Toggle */ .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--arka-plan-ucuncu); transition: 0.3s; border-radius: 24px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--arka-plan-ana); transition: 0.3s; border-radius: 50%; } input:checked + .slider { background-color: var(--ana-mavi); } input:checked + .slider:before { transform: translateX(26px); } /* Feature Toggle */ .feature-toggle { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); margin-bottom: 24px; } .feature-info h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 4px; } .feature-info p { color: var(--metin-ucuncu); font-size: var(--text-base); margin: 0; } /* Two Factor Setup */ .two-factor-setup { padding: 24px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); margin-top: 24px; } .setup-steps { display: flex; flex-direction: column; gap: var(--spacing-2xl); } .step { display: flex; gap: var(--spacing-lg); } .step-number { width: 32px; height: 32px; background: var(--ana-mavi); color: var(--arka-plan-ana); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--text-base); flex-shrink: 0; } .step-content h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 8px; } .step-content p { color: var(--metin-ucuncu); font-size: var(--text-base); margin-bottom: 16px; } .qr-code { width: 120px; height: 120px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background: var(--arka-plan-ana); margin-bottom: 16px; } .qr-code img { width: 100px; height: 100px; } .step-content input { padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: 16px; letter-spacing: 2px; text-align: center; width: 160px; margin-right: 12px; margin-bottom: 10px; } /* Session Management */ .session-management { display: flex; flex-direction: column; gap: var(--spacing-2xl); } .session-item { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } .session-info { display: flex; align-items: center; gap: var(--spacing-lg); } .device-icon { width: 48px; height: 48px; background: var(--durum-bilgi-acik); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--ana-mavi); font-size: 20px; } .session-details h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 4px; } .session-details p { color: var(--metin-ucuncu); font-size: var(--text-base); margin-bottom: 4px; } .current-session { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); padding: 4px 8px; border-radius: 4px; font-size: var(--text-sm); font-weight: 500; } /* Notification Preferences */ .notification-preferences { display: flex; flex-direction: column; /* gap: 20px; */ } .notification-item { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } .notification-info h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 4px; } .notification-info p { color: var(--metin-ucuncu); font-size: var(--text-base); margin: 0; } /* Theme Selection */ .theme-selection { margin: 24px 0; } .theme-selection label { display: block; color: var(--metin-ana); font-weight: 500; font-size: var(--text-base); margin-bottom: 16px; } .theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } .theme-option { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); padding: 20px; border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-xl); cursor: pointer; transition: all 0.2s ease; } .theme-option:hover { border-color: var(--kenarlik-ana); } .theme-option.active { border-color: var(--ana-mavi); background: var(--durum-bilgi-acik); } .theme-preview { width: 60px; height: 40px; border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .theme-preview.light { background: linear-gradient(135deg, var(--sistem-beyaz) 50%, var(--arka-plan-ana) 50%); } .theme-preview.dark { background: linear-gradient(135deg, var(--arka-plan-ana) 50%, var(--footer-arka-plan) 50%); } .theme-preview.auto { background: linear-gradient(135deg, var(--sistem-beyaz) 25%, var(--arka-plan-ana) 25%, var(--arka-plan-ana) 50%, var(--sistem-beyaz) 50%, var(--sistem-beyaz) 75%, var(--arka-plan-ana) 75%); } .theme-option span { font-size: var(--text-base); font-weight: 500; /* color: var(--metin-ana); */ } /* Privacy Settings */ .ayarlar-page .privacy-settings { display: flex; flex-direction: column; gap: var(--spacing-xl); position: relative; z-index: 1; } /* Privacy Item içindeki tüm yazıları zorla görünür yap */ /* .ayarlar-page .privacy-item * { color: inherit !important; opacity: 1 !important; visibility: visible !important; display: block !important; } */ /* Privacy Item Yazıları - En Güçlü Kural */ .ayarlar-page .privacy-item h4, .ayarlar-page .privacy-info h4 { color: var(--metin-ana) !important; font-size: 16px !important; font-weight: 600 !important; margin-bottom: 4px !important; opacity: 1 !important; visibility: visible !important; line-height: 1.4 !important; display: block !important; position: relative !important; z-index: 9999 !important; } .ayarlar-page .privacy-item p, .ayarlar-page .privacy-info p { color: var(--metin-ikincil) !important; font-size: 14px !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; line-height: 1.4 !important; display: block !important; position: relative !important; z-index: 9999 !important; } .ayarlar-page .privacy-item { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); /* margin-bottom: 16px; */ position: relative; z-index: 5; width: 100%; min-height: 80px; overflow: visible; } .ayarlar-page .privacy-info { display: flex !important ; flex-direction: column; flex: 1; margin-right: 20px; position: relative; z-index: 10 !important; width: auto !important; min-width: 200px; color: red !important; height: auto !important; overflow: visible !important; } /* Backup Settings */ .ayarlar-page .backup-settings { display: flex; flex-direction: column; gap: 32px; } .ayarlar-page .backup-toggle { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--durum-basarili-acik); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } .ayarlar-page .backup-info h4 { color: var(--durum-basarili-metin); font-size: 16px; font-weight: 600; margin-bottom: 4px; } .ayarlar-page .backup-info p { color: var(--durum-basarili-koyu); font-size: var(--text-base); margin: 0; } .active-sessions { display: flex; flex-direction: column; gap: var(--spacing-lg); } .backup-schedule { display: flex; flex-direction: column; gap: var(--spacing-xl); padding: 24px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); } .backup-history h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 16px; } .backup-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .backup-item { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px 20px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); } .backup-status { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .backup-status.success { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .backup-details { flex: 1; display: flex; flex-direction: column; gap: 4px; } .backup-date { font-weight: 500; color: var(--metin-ana); font-size: var(--text-base); } .backup-size { color: var(--metin-ucuncu); font-size: 13px; } .manual-backup { display: flex; justify-content: center; padding: 24px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 2px dashed var(--kenarlik-ana); } /* Restore Section */ .restore-section { display: flex; flex-direction: column; gap: var(--spacing-2xl); } .restore-warning { display: flex; gap: var(--spacing-lg); padding: 20px; background: var(--durum-uyari-acik); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); } .restore-warning i { color: var(--ana-sari); font-size: 20px; flex-shrink: 0; margin-top: 2px; } .restore-warning h4 { color: var(--durum-uyari-metin); font-size: 16px; font-weight: 600; margin-bottom: 4px; } .restore-warning p { color: var(--ana-sari-koyu); font-size: var(--text-base); margin: 0; } .restore-form { display: flex; flex-direction: column; gap: var(--spacing-xl); } /* Current Plan */ /* .current-plan { padding: 32px; background: linear-gradient(135deg, var(--ana-mavi-acik) 0%, var(--ana-mor) 100%); color: var(--arka-plan-ana); border-radius: 16px; margin-bottom: 24px; } */ .plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .plan-info-wrapper { display: grid; grid-template-columns: 300px 1fr; } .plan-badge { display: flex; align-items: center; gap: var(--spacing-sm); background: rgba(255, 255, 255, 0.1); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-lg); font-weight: 600; cursor: default;; } /* .plan-price { text-align: right; } .plan-price .price { font-size: 32px; font-weight: 700; } .plan-price .period { font-size: 16px; opacity: 0.8; } */ .feature { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-base); } .feature.active i { color: var(--ana-yesil); } .subscription-info { display: flex; flex-direction: row; opacity: 0.9; gap: 64px; position: relative; z-index: 1; /* width: fit-content; */ height: fit-content; align-items: flex-end; justify-content: flex-end; height: 100%; } .info-item { display: flex; justify-content: space-between; align-items: flex-start; font-size: var(--text-base); } .subscription-actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } /* Usage Stats */ .usage-stats { display: flex; flex-direction: column; gap: var(--spacing-2xl); } .usage-item { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); } .usage-icon { width: 48px; height: 48px; background: var(--durum-bilgi-acik); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--ana-mavi); font-size: 20px; flex-shrink: 0; } .usage-details { flex: 1; } .usage-details h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 8px; } .progress-bar { width: 100%; height: 8px; background: var(--arka-plan-dorduncu); border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .progress { height: 100%; background: linear-gradient(90deg, var(--ana-mavi), var(--ana-mavi-daha-koyu)); border-radius: 4px; transition: width 0.3s ease; } .usage-details span { color: var(--metin-ucuncu); font-size: var(--text-base); font-weight: 500; } /* #endregion */ /* #region Ayarlar Sayfası Düzeltmeleri */ /* Abonelik sayfası düzeltmeleri */ .ayarlar-page .current-plan { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); border-radius: 16px; padding: 32px; color: var(--arka-plan-ana); position: relative; overflow: hidden; margin-bottom: 24px; } /* Dark tema için current-plan - daha koyu arka plan */ [data-theme="dark"] .ayarlar-page .current-plan { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); color: var(--metin-beyaz); } [data-theme="dark"] .ayarlar-page .current-plan h3, [data-theme="dark"] .ayarlar-page .current-plan h4, [data-theme="dark"] .ayarlar-page .current-plan p, [data-theme="dark"] .ayarlar-page .current-plan span { color: var(--metin-beyaz); } [data-theme="dark"] .ayarlar-page .current-plan .plan-price { color: var(--metin-beyaz); } [data-theme="dark"] .ayarlar-page .current-plan .plan-features { color: rgba(255, 255, 255, 0.8); } .current-plan::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); pointer-events: none; } .plan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; position: relative; z-index: 1; } .plan-badge { display: flex; align-items: center; gap: var(--spacing-sm); background: rgba(255, 255, 255, 0.2); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-3xl); font-size: var(--text-base); font-weight: 600; color: var(--arka-plan-ana); backdrop-filter: blur(10px); } .plan-price { text-align: right; display: flex; align-items: center; justify-content: center; } .plan-price .price { font-size: 32px; font-weight: 700; color: var(--ana-yesil-acik); text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .plan-price .period { font-size: 16px; color: rgba(255, 255, 255, 0.8); margin-left: 4px; } .plan-features { /* display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); margin-bottom: 24px; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); */ display: flex; flex-direction: column; /* grid-template-columns: 1fr; */ gap: var(--spacing-lg); /* margin-bottom: 24px; */ position: relative; z-index: 1; } .plan-features .feature { display: flex; align-items: center; gap: var(--spacing-md); color: var(--metin-beyaz); font-size: var(--text-base); } .plan-features .feature i { color: var(--ana-yesil); font-size: 16px; } .subscription-info .info-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */ } .subscription-info .info-item:last-child { border-bottom: none; } .subscription-info .value { color: var(--arka-plan-ana); font-weight: 600; font-size: var(--text-base); } /* #endregion */ /* ------------------------------------ */ /* Ayarlar Sayfası Stilleri */ /* ------------------------------------ */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* #region FullCalendar Styles */ #appointmentCalendar { height: 600px; margin: 20px 0; } .fc { font-family: 'Inter', sans-serif; } .fc-header-toolbar { margin-bottom: 1em; } .fc-button { background: var(--ana-mavi) !important; border: 1px solid var(--ana-mavi) !important; border-radius: 8px !important; padding: 8px 16px !important; font-weight: 500 !important; color: var(--metin-beyaz) !important; transition: all 0.2s ease !important; } .fc-button:hover { background: var(--ana-mavi-koyu) !important; border-color: var(--ana-mavi-koyu) !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px var(--golge-mavi) !important; } .fc-button:focus { box-shadow: 0 0 0 2px var(--seffaf-mavi) !important; outline: none !important; } .fc-today-button { background: var(--ana-yesil) !important; border-color: var(--ana-yesil) !important; } .fc-today-button:hover { background: var(--ana-yesil-koyu) !important; border-color: var(--ana-yesil-koyu) !important; box-shadow: 0 2px 8px var(--golge-yesil) !important; } .fc-event { border-radius: 6px !important; border: none !important; padding: 4px 8px !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; } .fc-event:hover { /* transform: translateY(-1px) !important; */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; } .appointment-vaccination { background: linear-gradient(135deg, #4CAF50, #45a049) !important; } .appointment-surgery { background: linear-gradient(135deg, #FF9800, #f57c00) !important; } .appointment-checkup { background: linear-gradient(135deg, var(--durum-bilgi), #1976D2) !important; } .appointment-dental { background: linear-gradient(135deg, var(--ana-mor), #7B1FA2) !important; } .fc-timegrid-slot { height: 2.5em !important; } .fc-timegrid-event { border-radius: 6px !important; margin: 1px 0 !important; } .fc-daygrid-event { border-radius: 6px !important; margin: 1px 0 !important; } .fc-col-header-cell { background: var(--arka-plan-ucuncu) !important; color: var(--metin-ana) !important; font-weight: 600 !important; padding: 12px 8px !important; border-color: var(--kenarlik-ana) !important; } .fc-daygrid-day { background: var(--kart-arka-plan) !important; border-color: var(--kenarlik-ana) !important; } .fc-daygrid-day:hover { background: var(--arka-plan-ucuncu) !important; } .fc-timegrid-slot-label { color: var(--metin-ikincil) !important; font-size: 12px !important; } .fc-timegrid-axis { color: var(--metin-ikincil) !important; } .fc-scrollgrid { border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; overflow: hidden !important; } .fc-scrollgrid-sync-table { border-radius: 12px !important; } .fc-theme-standard td, .fc-theme-standard th { border-color: var(--kenarlik-ana) !important; } .fc-day-today { background: var(--seffaf-mavi) !important; } .fc-day-today .fc-daygrid-day-number { color: var(--ana-mavi) !important; font-weight: 700 !important; } .fc-daygrid-day-number { color: var(--metin-ana) !important; font-weight: 500 !important; padding: 8px !important; } .fc-timegrid-slot-minor { border-color: var(--kenarlik-ikincil) !important; } .fc-timegrid-slot-major { border-color: var(--kenarlik-ana) !important; } .fc-event-title { font-weight: 600 !important; color: var(--metin-beyaz) !important; } .fc-event-time { color: rgba(255, 255, 255, 0.9) !important; font-size: 11px !important; } /* #endregion */ /* #region Timeline View Styles */ .timeline-item { display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--kenarlik-ikincil); position: relative; } .timeline-item:last-child { border-bottom: none; } .timeline-item.completed { opacity: 0.7; } .timeline-item.current { background: rgba(59, 130, 246, 0.05); border-radius: var(--radius-lg); padding: 16px; margin: 0 -16px; } .timeline-time { font-weight: 600; color: var(--metin-ana); font-size: var(--text-base); min-width: 60px; margin-right: 20px; } .timeline-content { display: flex; align-items: center; flex: 1; } .timeline-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 16px; font-size: 16px; } .timeline-details { flex: 1; } .timeline-title { font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); margin: 0 0 4px 0; } .timeline-type { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xl); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .timeline-type.meeting { background: var(--arka-plan-besinci); color: var(--metin-ana); } .timeline-type.vaccination { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .timeline-type.dental { background: var(--ana-mor-cok-acik); color: var(--ana-kirmizi-daha-koyu); } .timeline-type.surgery { background: var(--ana-sari-cok-acik); color: var(--ana-kirmizi-koyu); } .timeline-type.checkup { background: var(--durum-bilgi-acik); color: var(--ana-mavi-daha-koyu); } .timeline-type.break { background: var(--durum-uyari-acik); color: var(--ana-sari-koyu); } .timeline-type.admin { background: var(--arka-plan-ucuncu); color: var(--metin-ana); } /* Timeline bağlantı çizgisi - Kaldırıldı (çakışma nedeniyle) */ /* Timeline current after - Kaldırıldı */ /* #endregion */ /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */ /* #region Responsive Design - Responsive Tasarım */ @media (max-width: 1200px) { .inpatients-layout { grid-template-columns: 1fr; gap: var(--spacing-2xl); } .todo-sidebar { position: relative; top: 0; } .vital-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--spacing-md); } } @media (max-width: 1024px) { /* Eski sidebar kuralları kaldırıldı - Yeni grid sistemi kullanılıyor */ .content-wrapper { padding: 24px; padding-bottom: 40px; /* Tablet görünümde alt boşluk */ } .stats-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .patients-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } } @media (max-width: 768px) { /* Eski sidebar kuralları kaldırıldı - Yeni grid sistemi kullanılıyor */ /* Hamburger menü butonu görünür */ .mobile-menu-btn { display: block !important; z-index: 1001 !important; /* Sidebar'ın üstünde */ position: relative !important; } .d-none-desktop { display: block !important; } /* Sidebar mobil görünümde - TÜM SAYFALAR İÇİN ORTAK STİL */ .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; width: 280px !important; height: 100vh !important; /* Tam viewport yüksekliği */ max-height: 100vh !important; /* Maksimum yükseklik */ transform: translateX(-100%) !important; transition: transform 0.3s ease !important; z-index: 10000 !important; /* Her zaman en üstte görünmesi için çok yüksek z-index */ box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important; overflow-y: auto !important; /* Scroll edilebilir */ overflow-x: hidden !important; display: flex !important; flex-direction: column !important; } /* Sidebar-nav mobil görünümde - Scroll edilebilir olmalı */ .sidebar-nav { flex: 1 !important; min-height: 0 !important; /* Flex item'ın scroll edebilmesi için */ overflow-y: auto !important; overflow-x: hidden !important; } /* Sidebar-footer mobil görünümde - Alt kısım görünür olmalı */ .sidebar-footer { flex-shrink: 0 !important; /* Footer her zaman görünür */ } /* Modern tarayıcılar için Small Viewport Height */ @supports (height: 100svh) { .sidebar { height: 100svh !important; max-height: 100svh !important; } } .sidebar.open, .sidebar.active { transform: translateX(0) !important; z-index: 99999 !important; /* Açık sidebar için EN YÜKSEK z-index - overlay'ın kesinlikle üstünde olmalı */ } /* Sidebar overlay mobil görünümde - Sidebar'ın ARKASINDA olmalı */ .sidebar-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: var(--golge-dorduncu) !important; z-index: 9998 !important; /* Sidebar'ın (10000) altında olmalı - overlay sidebar'ın üstünde görünmemeli */ opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; } .sidebar-overlay.active { opacity: 1 !important; visibility: visible !important; } .main-content { margin-left: 0; } .page-header .header-text h1 { font-size: 24px; } .search-box { width: 100%; max-width: 300px; } .content-wrapper { padding: 20px; padding-bottom: 40px; /* Mobil görünümde alt boşluk */ } .stats-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); } .action-bar { flex-direction: column; align-items: stretch; gap: var(--spacing-lg); } .action-left, .action-right { justify-content: center; } .filter-group { flex-wrap: wrap; justify-content: center; } .patients-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); } .patient-card { padding: 20px; } .inpatient-card { padding: 16px; } .patient-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); } .admission-info { text-align: left; flex-direction: row; gap: var(--spacing-md); } .vital-grid { grid-template-columns: repeat(2, 1fr); } .patient-actions { flex-direction: column; gap: var(--spacing-sm); } .btn-small { width: 100%; justify-content: center; } .todo-sidebar { padding: 16px; } .filter-tabs { flex-direction: column; gap: 4px; } .filter-tab { text-align: left; } .todo-item { padding: 12px; } .todo-meta { flex-direction: column; align-items: flex-start; gap: 4px; } /* .notification-container { left: 20px; right: 20px; max-width: none; } */ } @media (max-width: 480px) { /* Mobil görünümde page-header düzeni: Üst satır (hamburger + logo + header-right), Alt satır (header-text) */ .page-header { padding: 0.75rem 1rem !important; /* display: grid !important; */ /* grid-template-columns: minmax(0, 1fr) auto; */ grid-template-rows: auto auto; gap: 0.75rem !important; align-items: center !important; height: auto !important; min-height: auto !important; } /* Header-left'i düzenle: Üst satırda hamburger + logo, alt satırda header-text */ .header-left { grid-column: 1 !important; grid-row: 1 / span 2 !important; display: grid !important; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 0.75rem !important; row-gap: 0.5rem !important; align-items: center !important; } .header-left .mobile-menu-btn { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; justify-self: flex-start !important; } /* Logo - Hamburger'ın yanında (üst satırda) */ .header-left::after { content: ''; display: block; grid-column: 2 !important; grid-row: 1 !important; width: 110px; height: 32px; background-image: url('../assets/logo-vitapi-dark.svg'); background-repeat: no-repeat; background-position: left center; background-size: contain; } /* Header-text alt satırda */ .header-left .header-text { grid-column: 1 / span 2 !important; grid-row: 2 !important; margin: 0 !important; } .header-right { order: 2 !important; margin-left: auto !important; flex-shrink: 0 !important; z-index: 10 !important; align-self: flex-start !important; justify-content: flex-end !important; align-items: center !important; } /* Hastalar-page kuralları 47308'deki 480px media query'sine taşındı - 1023px'ten sonra olduğu için öncelikli */ .header-right .search-box { width: 100%; max-width: none; flex: 1; margin: 0 !important; } .search-box { width: 100%; max-width: 250px; } .content-wrapper { padding: 16px; padding-bottom: 40px !important; /* Mobil görünümde alt boşluk */ } /* Main content mobilde (480px) - Fixed header kullanırken scroll ETMEMELİ */ /* Sadece content-wrapper scroll edecek */ .app-container .main-content, .app-layout .main-content, .page-wrapper .main-content, .main-content { overflow-y: visible !important; /* Main-content scroll ETMEMELİ */ overflow-x: hidden !important; height: 100vh !important; /* Viewport yüksekliği */ max-height: 100vh !important; min-height: 100vh !important; padding-top: 0 !important; /* Padding-top yok, content-wrapper'a margin-top eklenecek */ } /* Modern tarayıcılar için Small Viewport Height */ @supports (height: 100svh) { .app-container .main-content, .app-layout .main-content, .page-wrapper .main-content, .main-content { height: 100svh !important; max-height: 100svh !important; min-height: 100svh !important; } } /* Hasta-sahipler-page için özel ayarlar (480px) - Body scroll açık, main-content ve content-wrapper scroll kapalı */ .hasta-sahipler-page .main-content { padding-top: 0 !important; overflow-y: visible !important; height: auto !important; max-height: none !important; min-height: auto !important; } /* Tüm container'lar alt boşluk olmadan */ .app-container, .app-layout, .page-wrapper, .main-content { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Content wrapper mobilde (480px) - Scroll container olarak çalışmalı */ /* Page-header yüksekliği dinamik olarak hesaplanıyor (--page-header-height) */ .app-container .content-wrapper, .app-layout .content-wrapper, .page-wrapper .content-wrapper, .main-content .content-wrapper, .content-wrapper { overflow-y: auto !important; /* Content wrapper içinde scroll */ overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; /* iOS için smooth scrolling */ padding-bottom: 40px !important; /* Mobil görünümde alt boşluk */ margin-bottom: 0 !important; margin-top: var(--page-header-height) !important; /* Dinamik olarak hesaplanan header yüksekliği */ height: calc(100vh - var(--page-header-height)) !important; /* Viewport - header yüksekliği */ max-height: calc(100vh - var(--page-header-height)) !important; min-height: calc(100vh - var(--page-header-height)) !important; } /* Content-wrapper scrollbar GÖRÜNÜR OLMALI - Scrollbar gizleme kurallarını override et */ .content-wrapper::-webkit-scrollbar { display: block !important; width: 8px !important; height: 8px !important; background: transparent !important; } .content-wrapper::-webkit-scrollbar-track { display: block !important; background: var(--arka-plan-ucuncu) !important; border-radius: 4px !important; } .content-wrapper::-webkit-scrollbar-thumb { display: block !important; background: var(--arka-plan-besinci) !important; border-radius: 4px !important; } .content-wrapper::-webkit-scrollbar-thumb:hover { background: var(--metin-dorduncu) !important; } .content-wrapper { -ms-overflow-style: auto !important; /* IE ve Edge - scrollbar görünür */ scrollbar-width: thin !important; /* Firefox - scrollbar görünür */ } /* Modern tarayıcılar için Small Viewport Height */ @supports (height: 100svh) { .app-container .content-wrapper, .app-layout .content-wrapper, .page-wrapper .content-wrapper, .main-content .content-wrapper, .content-wrapper { height: calc(100svh - var(--page-header-height)) !important; max-height: calc(100svh - var(--page-header-height)) !important; min-height: calc(100svh - var(--page-header-height)) !important; margin: 0 !important; } } /* Page header mobilde (480px) fixed olmalı - sabit kalmalı */ .page-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 90 !important; background-color: var(--kart-arka-plan) !important; border-bottom: 1px solid var(--kenarlik-ana) !important; } .stat-content { flex: 0 !important; } .stat-card { padding: 20px; flex-direction: column; text-align: center; min-height: auto !important; height: auto; justify-content: space-between; align-items: flex-end !important; /* gap: 0 !important; */ max-height: 152px !important; } .breakdown-item { padding: 3px 7px; border-radius: 5px; font-size: 10px; font-weight: 600; } .patient-card { padding: 16px; } .patient-actions { flex-direction: column; } .btn-small { justify-content: center; } .filter-group { flex-direction: column; width: 100%; } .action-left { flex-direction: column; width: 100%; } .btn-primary, .btn-secondary, .btn-outline, .btn-ai { width: 100%; justify-content: center; } .modal-header, .modal-body, .modal-footer { padding-left: 20px; padding-right: 20px; } .form-row { grid-template-columns: 1fr; gap: var(--spacing-md); } .manual-barcode-section .form-group { flex-direction: column !important; } } /* #endregion */ /* #region Onam Sistemi Özel Stiller */ /* Bekleyen Onamlar Tab Stilleri */ .pending-consents-list { display: flex; flex-direction: column; gap: var(--spacing-lg); margin-top: 20px; } .pending-consents-list .status-info { flex-direction: column; align-items: flex-start; } .pending-consents-list .consent-status{ padding: 0; } .pending-consent-card { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-sm); transition: all 0.2s ease; } .pending-consent-card:hover { box-shadow: 0 2px 6px var(--golge-hover); transform: translateY(-2px); } .pending-consent-card.urgent { border-left: 4px solid var(--ana-sari); background: linear-gradient(135deg, var(--durum-uyari-acik) 0%, var(--metin-beyaz)fff 100%); } .pending-consent-card.normal { border-left: 4px solid var(--ana-mavi); } .pending-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .consent-info { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex-shrink: 0; } .consent-number { font-weight: 600; color: var(--metin-ana); font-size: var(--text-base); } .consent-date { font-size: var(--text-sm); color: var(--metin-ucuncu); } .urgency-indicator { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 500; } .urgency-indicator.urgent { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .urgency-indicator.normal { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .pending-patient-info { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: 16px; } .pending-actions { display: flex; gap: var(--spacing-sm); justify-content: flex-end; } /* .pending-actions .btn-small ortak stillerden miras alınır */ /* Tüm Onamlar Listesi Stilleri */ .consent-list-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--arka-plan-ana); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); } .consent-list-table th { background: var(--arka-plan-ikincil); padding: 16px; text-align: left; font-weight: 600; color: var(--metin-ana); border-bottom: 1px solid var(--kenarlik-ana); } .consent-list-table td { padding: 16px; border-bottom: 1px solid var(--arka-plan-ucuncu); vertical-align: middle; } /* .consent-list-table tr:hover { background: var(--arka-plan-ikincil); } */ .consent-number-cell { font-weight: 600; color: var(--metin-ana); } .consent-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 500; } .consent-status.pending { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .consent-status.signed { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .consent-status.rejected { background: var(--durum-hata-acik); color: var(--durum-hata-koyu); } .consent-actions { display: flex; gap: var(--spacing-sm); } .consent-actions .btn-small { padding: 4px 8px; font-size: 11px; } /* Onam Oluştur Form Stilleri */ .consent-form-steps { display: flex; justify-content: center; margin-bottom: 32px; } /* ======================== View Template Modal - Okunabilirlik ======================== */ #viewTemplateModal .modal-content.xlarge { max-width: 960px; } #viewTemplateModal .modal-body { padding: 0; } #viewTemplateModal .template-preview { max-height: 70vh; overflow: auto; padding: 20px 24px; background: var(--arka-plan-ana); } #viewTemplateModal .template-preview > *:first-child { margin-top: 0; } #viewTemplateModal .template-preview h1, #viewTemplateModal .template-preview h2, #viewTemplateModal .template-preview h3, #viewTemplateModal .template-preview h4, #viewTemplateModal .template-preview h5, #viewTemplateModal .template-preview h6 { color: var(--baslik-ana); margin: 16px 0 8px 0; line-height: 1.35; } #viewTemplateModal .template-preview h1 { font-size: 26px; } #viewTemplateModal .template-preview h2 { font-size: 22px; } #viewTemplateModal .template-preview h3 { font-size: 18px; } #viewTemplateModal .template-preview p { color: var(--metin-ana); line-height: 1.7; margin: 10px 0; font-size: var(--text-base); /* justify-content: flex-start; gap: 5px; */ } #viewTemplateModal .template-preview ul, #viewTemplateModal .template-preview ol { padding-left: 20px; margin: 8px 0 12px; } #viewTemplateModal .template-preview li { margin: 6px 0; } #viewTemplateModal .template-preview blockquote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--ana-mavi); background: var(--arka-plan-ikincil); } #viewTemplateModal .template-preview table { width: 100%; border-collapse: collapse; margin: 12px 0; } #viewTemplateModal .template-preview th, #viewTemplateModal .template-preview td { border: 1px solid var(--kenarlik-ana); padding: 8px 10px; text-align: left; } #viewTemplateModal .template-preview img, #viewTemplateModal .template-preview svg { max-width: 100%; height: auto; } /* İmza görseli için özel stil */ #viewTemplateModal .template-preview img[alt="İmza"], #viewTemplateModal img[alt="İmza"] { max-width: 300px; max-height: 120px; /* border: 1px solid #ddd; */ border-radius: 4px; background: var(--kart-arka-plan); padding: 10px; display: block; margin-top: 10px; } #viewTemplateModal .template-preview p img[alt="İmza"] { margin-top: 15px; } #viewTemplateModal .template-preview hr { border: none; border-top: 1px solid var(--kenarlik-ana); margin: 16px 0; } .step-indicator { display: flex; align-items: center; gap: var(--spacing-lg); } .step-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-3xl); font-size: var(--text-base); font-weight: 500; transition: all 0.2s ease; } .step-item.active { background: var(--ana-mavi); color: var(--arka-plan-ana); } .step-item.completed { background: var(--durum-basarili); color: var(--arka-plan-ana); } .step-item.pending { background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); } .step-number { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 600; } .step-item.active .step-number { background: rgba(255, 255, 255, 0.2); } .step-item.completed .step-number { background: rgba(255, 255, 255, 0.2); } .step-item.pending .step-number { background: var(--arka-plan-besinci); } /* Form Seçim Sistemi */ .form-selection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); margin: 20px 0; } .form-template-card { border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 20px; cursor: pointer; transition: all 0.2s ease; text-align: center; } .form-template-card:hover { border-color: var(--kenarlik-ana); box-shadow: 0 4px 12px var(--golge-mavi); } .form-template-card.selected { border-color: var(--kenarlik-ana); background: var(--durum-bilgi-acik); } .form-template-icon { font-size: 32px; color: var(--ana-mavi); margin-bottom: 12px; } .form-template-title { font-size: 16px; font-weight: 600; color: var(--metin-ana); margin-bottom: 8px; } .form-template-description { font-size: var(--text-base); color: var(--metin-ucuncu); margin-bottom: 12px; } .form-template-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .form-template-tag { background: var(--arka-plan-ucuncu); color: var(--metin-ana); padding: 2px 8px; border-radius: var(--radius-xl); font-size: 11px; font-weight: 500; } /* Hasta Seçim Sistemi */ .patient-selection-container { background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); padding: 20px; margin: 20px 0; } .patient-search { position: relative; margin-bottom: 16px; } .patient-selection .search-box { position: relative; margin-bottom: 20px; } .patient-search input { width: 100%; /* padding-left: 32px !important; */ border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: var(--text-base); } .patient-search i { position: absolute; /* left: 12px; */ top: 50%; transform: translateY(-50%); color: var(--metin-dorduncu); } .patient-results { max-height: 200px; overflow-y: auto; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); background: var(--arka-plan-ana); } .patient-result-item { padding: var(--spacing-md) var(--spacing-lg); cursor: pointer; border-bottom: 1px solid var(--arka-plan-ucuncu); display: flex; align-items: center; gap: var(--spacing-md); } .patient-result-item:hover { background: var(--arka-plan-ikincil); } .patient-result-item:last-child { border-bottom: none; } /* SMS Link Oluşturma */ .sms-link-container { background: var(--durum-bilgi-acik); border: 1px solid #0ea5e9; border-radius: var(--radius-xl); padding: 20px; margin: 20px 0; } .sms-link-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: 12px; } .sms-link-header i { color: var(--ana-cyan); font-size: 18px; } .sms-link-header h4 { margin: 0; color: var(--durum-bilgi-metin); font-size: 16px; } .sms-link-content { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: 16px; } .sms-link-input { flex: 1; padding: 8px 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); background: var(--arka-plan-ana); /* font-family: monospace; */ font-family: 'Inter', sans-serif; font-size: var(--text-sm); } .sms-link-actions { display: flex; gap: var(--spacing-sm); } /* #endregion */ /* #region Tedaviler Sayfası Özel Stiller */ /* Bu stil yeni modal sistemi ile değiştirildi */ .form-section { background-color: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 20px; } .form-section h4 { font-size: 16px; font-weight: 600; color: var(--metin-ana); margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--kenarlik-ana); } .form-row { display: flex; gap: var(--spacing-xl); /* margin-bottom: 15px; */ } .form-row .form-group { flex: 1; /* gap: 5px; */ } /* .form-group { margin-bottom: 15px; } */ /* Bu stil ana .form-group label ile birleştirildi */ /* Form group stilleri global input stillerini kullanıyor - gereksiz tekrar kaldırıldı */ /* Textarea font fix global stillerde tanımlandı */ /* Randevular Sayfası Stilleri */ .time-slot { cursor: pointer; transition: all 0.2s ease; position: relative; } /* .time-slot:hover, .time-slot-hover { background-color: var(--durum-bilgi-acik) !important; border-left: 2px solid #2196f3 !important; } */ /* .time-slot::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.2s ease; color: var(--ana-mavi); font-weight: bold; font-size: var(--text-sm); } */ .time-slot:hover::after, .time-slot-hover::after { opacity: 1; } /* Bu stil kaldırıldı - çakışma önlenmek için */ /* Bu stiller kaldırıldı - çakışma önlenmek için */ .appointment-time { font-size: 10px; font-weight: 600; margin-bottom: 2px; } .appointment-title { font-size: 11px; font-weight: 600; margin-bottom: 1px; } .appointment-owner { font-size: 10px; opacity: 0.8; } /* Aylık Takvim Stilleri */ .month-calendar-container { background: var(--arka-plan-ana); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .month-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background-color: var(--kenarlik-ana); border-top: 1px solid var(--kenarlik-ana); } .month-calendar-grid .day-header { background-color: var(--arka-plan-ucuncu); padding: 12px 8px; text-align: center; font-weight: 600; font-size: var(--text-base); color: var(--metin-ana); border-bottom: 1px solid var(--kenarlik-ana); } .month-day { min-height: 110px; background: var(--arka-plan-ana); border-right: 1px solid #f1f5f9; border-bottom: 1px solid var(--arka-plan-ucuncu); padding: 8px; position: relative; cursor: pointer; transition: background-color 0.2s ease; } .month-day:hover { background-color: var(--arka-plan-ucuncu) !important; /* border-left: 2px solid var(--ana-mavi) !important; */ } .month-day.other-month { background-color: var(--arka-plan-yedinci); color: var(--metin-dorduncu); } .month-day.other-month:hover { background-color: var(--arka-plan-yedinci) !important; color: var(--metin-dorduncu) !important; cursor: default !important; transform: none !important; box-shadow: none !important; } hov.month-day.today { background-color: var(--seffaf-mavi); border: 2px solid var(--ana-mavi); } .month-day-number { position: absolute; top: 8px; right: 8px; font-weight: 600; font-size: var(--text-base); color: var(--metin-ana); } .month-day.other-month .month-day-number { color: var(--metin-dorduncu); } .month-day.today .month-day-number { background-color: var(--ana-mavi); color: var(--metin-beyaz); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); } /* Dark tema için month-day stilleri */ [data-theme="dark"] .month-day.other-month { background-color: var(--arka-plan-yedinci); color: var(--metin-dorduncu); } [data-theme="dark"] .month-day.other-month:hover { background-color: var(--arka-plan-yedinci) !important; color: var(--metin-dorduncu) !important; cursor: default !important; transform: none !important; box-shadow: none !important; } [data-theme="dark"] .month-day.today { background-color: var(--seffaf-mavi); border-color: var(--ana-mavi); } .month-events { margin-top: 30px; max-height: 110px; min-height: 110px; overflow-y: auto; padding-right: 4px; } .month-event { background-color: var(--ana-mavi); color: var(--arka-plan-ana); padding: 2px 6px; margin-bottom: 2px; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .month-event:hover { background-color: var(--ana-mavi); scale: 0.98; transition: all 0.2s ease; } .month-event.type-vaccination { background-color: var(--ana-yesil); } .month-event.type-surgery { background-color: var(--ana-kirmizi); } .month-event.type-checkup { background-color: var(--ana-mavi); } /* .month-event.type-general { background-color: var(--arka-plan-dorduncu); } */ .month-day-info { position: absolute; top: 8px; left: 8px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 500; color: var(--durum-bilgi-metin); text-align: center; z-index: 0; max-width: 120px; min-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* .more-events removed - no longer needed */ /* Haftalık ve Günlük Takvim Stilleri */ .week-calendar-container { background: var(--arka-plan-ana); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); overflow: hidden; box-shadow: var(--shadow-sm); } .week-calendar-grid, .day-calendar-grid { display: grid; grid-template-columns: 60px 1fr; gap: 1px; background-color: var(--kenarlik-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); overflow: hidden; } .week-calendar-grid { grid-template-columns: 60px repeat(7, 1fr); margin: 0 24px 24px 24px; } .day-calendar-grid { grid-template-columns: 60px 1fr; } /* Haftalık görünüm için özel randevu kartları */ .week-calendar-grid .appointment-block { position: absolute; top: -26px; left: 4px; right: 0; padding: 3px 10px; background: linear-gradient(135deg, var(--durum-bilgi-acik) 0%, var(--durum-bilgi-kenarlik) 100%); border: 1px solid var(--ana-mavi); border-left: 3px solid var(--ana-mavi); border-radius: 3px; font-size: 10px; cursor: pointer; transition: all 0.2s ease; overflow: hidden; display: flex ; align-items: center; gap: 10px; margin: 0; min-height: auto; z-index: 1; width: 95%; } .week-calendar-grid .appointment-block:hover { /* transform: scale(1.02); */ /* box-shadow: 0 2px 8px var(--golge-mavi); */ z-index: 10; scale: 0.98; transition: all 0.2s ease; } .month-event-source-icon { margin-right: 3px; } .week-calendar-grid .appointment-block.type-surgery { background: var(--durum-uyari-acik); border-color: var(--kenarlik-ana); border-left-color: var(--ana-sari); border-left-width: 4px; } .week-calendar-grid .appointment-block.type-checkup { background: var(--durum-basarili-acik); border-color: var(--kenarlik-ana); border-left-color: var(--ana-yesil); border-left-width: 4px; } .week-calendar-grid .appointment-block.type-vaccination { background: var(--durum-bilgi-acik); border-color: var(--kenarlik-ana); border-left-color: var(--ana-mavi); border-left-width: 4px; } .week-calendar-grid .appointment-time { font-size: 9px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 1px; line-height: 1.1; } .week-calendar-grid .appointment-source-icon { margin-right: 3px; } .week-calendar-grid .appointment-title { font-size: 10px; font-weight: 600; color: var(--metin-ana); margin-bottom: 1px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .week-calendar-grid .appointment-owner { font-size: 9px; color: var(--metin-ucuncu); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; } /* Haftalık görünüm için saat slotları */ .week-calendar-grid .time-slot { height: 30px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-bottom: 1px solid var(--kenarlik-ana); font-size: 11px; color: var(--metin-ikincil); background-color: var(--kart-arka-plan); position: relative; } .week-calendar-grid .time-slot:hover { background-color: var(--arka-plan-ucuncu); } .week-calendar-grid .day-appointments { position: relative; height: calc(100% - 60px); overflow-y: auto; display: grid; grid-template-rows: repeat(23, 30px); /* gap: 1px; */ } /* Pasif buton stili */ .view-btn-disabled { opacity: 0.5 !important; cursor: not-allowed !important; pointer-events: none; } /* Modal varsayılan gizli durumu */ /* Bu modal stilleri yukarıda zaten tanımlanmış, tekrar tanımlamaya gerek yok */ /* Notification Toast Stilleri */ .notification-toast { position: fixed; top: 20px; right: 20px; padding: 12px 20px; border-radius: var(--radius-lg); color: var(--arka-plan-ana); font-weight: 500; z-index: 10000; max-width: 350px; box-shadow: 0 4px 12px var(--golge-ikincil); transition: all 0.3s ease; font-family: 'Inter', sans-serif; font-size: var(--text-base); } .notification-toast.notification-success { background: var(--durum-basarili); } .notification-toast.notification-error { background: var(--durum-hata); } .notification-toast.notification-warning { background: var(--durum-uyari); } .notification-toast.notification-info { background: var(--ana-mavi); } /* Confirmation Dialog Styles */ .confirmation-dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 16000; opacity: 0; transition: opacity 0.3s ease; } .confirmation-dialog-overlay.show { opacity: 1; } .confirmation-dialog { background: var(--modal-arka-plan); border-radius: var(--radius-3xl); box-shadow: 0 20px 60px var(--golge-dorduncu); max-width: 400px; width: 90%; max-height: 90vh; overflow-y: auto; overflow-x: hidden; transform: scale(0.9); transition: transform 0.3s ease; position: relative; z-index: 15000; } .confirmation-dialog-overlay.show .confirmation-dialog { transform: scale(1); } .confirmation-header { padding: 24px 24px 20px; border-bottom: 1px solid var(--kenarlik-ana); border-radius: 20px 20px 0 0; } .confirmation-header h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--metin-ana); } .confirmation-body { padding: 24px 24px 20px; } .confirmation-body p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--metin-ana); } /* Input Dialog Value için özel stiller */ #inputDialogValue { width: 100%; padding: var(--spacing-md) var(--spacing-lg); border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: var(--text-base); background-color: var(--kart-arka-plan); color: var(--metin-ana); transition: all 0.2s ease; box-sizing: border-box; font-family: inherit; margin-top: 12px; } #inputDialogValue:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); background-color: var(--kart-arka-plan); } #inputDialogValue::placeholder { color: var(--metin-ucuncu); } /* Genel form-input sınıfı için stiller */ .form-input { width: 100%; padding: var(--spacing-md) var(--spacing-lg); border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: var(--text-base); background-color: var(--kart-arka-plan); color: var(--metin-ana); transition: all 0.2s ease; box-sizing: border-box; font-family: inherit; } .form-input:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); background-color: var(--kart-arka-plan); } .form-input::placeholder { color: var(--metin-ucuncu); } /* Confirmation dialog içindeki tüm input alanları */ .confirmation-dialog input[type="text"], .confirmation-dialog input[type="number"], .confirmation-dialog input[type="date"], .confirmation-dialog input[type="email"], .confirmation-dialog textarea, .confirmation-dialog select { width: 100%; padding: var(--spacing-md) var(--spacing-lg); border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: var(--text-base); background-color: var(--kart-arka-plan); color: var(--metin-ana); transition: all 0.2s ease; box-sizing: border-box; font-family: inherit; margin-top: 12px; } /* Confirmation dialog select elementleri için FontAwesome ikon stili */ .confirmation-dialog select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; cursor: pointer; } .confirmation-dialog input[type="text"]:focus, .confirmation-dialog input[type="number"]:focus, .confirmation-dialog input[type="date"]:focus, .confirmation-dialog input[type="email"]:focus, .confirmation-dialog textarea:focus, .confirmation-dialog select:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); background-color: var(--kart-arka-plan); } .confirmation-dialog input::placeholder, .confirmation-dialog textarea::placeholder { color: var(--metin-ucuncu); } /* Bu stil yeni modal sistemi ile değiştirildi */ /* #region Hasta Geçmişi Modal Stilleri */ .patient-history-content { max-height: 60vh; overflow-y: auto; padding: 16px; } .history-section { margin-bottom: 24px; } .history-section h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px 0; color: var(--metin-ana); font-size: 16px; font-weight: 600; padding: 12px 16px; background: var(--kart-arka-plan); border-radius: 8px; border-left: 4px solid var(--ana-mavi); } .history-timeline { display: flex; flex-direction: column; gap: 12px; } .history-item { background: var(--kart-arka-plan); border-radius: 8px; border: 1px solid var(--kenarlik-ana); box-shadow: 0 2px 4px var(--golge-ana); overflow: hidden; } .history-date { font-size: 12px; font-weight: 600; color: var(--ana-mavi); background: var(--kart-arka-plan); padding: 8px 12px; margin: 0; border-bottom: 1px solid var(--kenarlik-ana); } .history-content { padding: 16px; } .history-content h5 { margin: 0 0 8px 0; color: var(--metin-ana); font-size: 14px; font-weight: 600; } .history-content p { margin: 0 0 8px 0; color: var(--metin-ikincil); line-height: 1.4; font-size: 13px; } .history-doctor { font-size: 11px; color: var(--metin-ucuncu); font-style: italic; display: block; margin-top: 8px; } .treatment-list, .reports-list { display: flex; flex-direction: column; gap: 12px; } .treatment-item, .report-item { display: flex; gap: 12px; padding: 12px; background: var(--kart-arka-plan); border-radius: 8px; border: 1px solid var(--kenarlik-ana); box-shadow: 0 2px 4px var(--golge-ana); align-items: flex-start; } .treatment-date, .report-date { min-width: 80px; font-size: 12px; font-weight: 600; color: var(--ana-mavi); text-align: center; padding: 6px 8px; background: var(--kart-arka-plan); border-radius: 4px; flex-shrink: 0; } .treatment-content, .report-content { flex: 1; } .treatment-content h5, .report-content h5 { margin: 0 0 6px 0; color: var(--metin-ana); font-size: 14px; font-weight: 600; } .treatment-content p, .report-content p { margin: 0; color: var(--metin-ikincil); line-height: 1.4; font-size: 13px; } /* #endregion */ /* #region Hasta Yazdırma Modal Stilleri */ .print-preview { background: var(--arka-plan-ikincil); padding: 20px; border-radius: 8px; border: 1px solid var(--kenarlik-ana); } .patient-card-print { background: var(--kart-arka-plan); padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px var(--golge-ana); max-width: 800px; margin: 0 auto; } .print-header { text-align: center; border-bottom: 2px solid var(--ana-mavi); padding-bottom: 20px; margin-bottom: 30px; } .print-header h2 { color: var(--ana-mavi); margin: 0 0 10px 0; font-size: 24px; font-weight: 700; } .clinic-info { color: var(--metin-ikincil); font-size: 14px; line-height: 1.4; } .clinic-info p { margin: 4px 0; } .print-content { margin-bottom: 30px; } .patient-info-print, .owner-info-print, .medical-info-print { margin-bottom: 25px; padding: 20px; background: var(--arka-plan-ikincil); border-radius: 8px; border-left: 4px solid var(--ana-mavi); } .patient-info-print h3, .owner-info-print h3, .medical-info-print h3 { color: var(--ana-mavi); margin: 0 0 16px 0; font-size: 18px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--kenarlik-ana); } .info-row { display: flex; margin-bottom: 12px; align-items: flex-start; } .info-row .label { font-weight: 600; color: var(--metin-ana); width: 140px; flex-shrink: 0; } .info-row .value { color: var(--metin-ikincil); flex: 1; word-break: break-word; } .print-footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 2px solid var(--kenarlik-ana); color: var(--metin-ucuncu); font-size: 14px; } .print-footer p { margin: 4px 0; } /* Yazdırma için özel stiller */ @media print { .print-preview { background: var(--kart-arka-plan) !important; padding: 0 !important; border: none !important; } .patient-card-print { box-shadow: none !important; margin: 0 !important; padding: 20px !important; } .print-header h2 { color: #000 !important; } .patient-info-print, .owner-info-print, .medical-info-print { background: #f5f5f5 !important; border-left: 3px solid #000 !important; } .patient-info-print h3, .owner-info-print h3, .medical-info-print h3 { color: #000 !important; } } /* #endregion */ .treatment-report-container { padding: 0; } .report-section { margin-bottom: 32px; padding: 24px; background: var(--kart-arka-plan); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-hover); } .report-section .section-header { justify-content: flex-start; } .report-section:last-child { margin-bottom: 0; } .report-section-title { display: flex; align-items: center; gap: var(--spacing-md); font-size: 18px; font-weight: 600; color: var(--metin-ana); margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 2px solid var(--kenarlik-ana); } .report-section-title i { color: var(--ana-mavi); font-size: 20px; } .report-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); } .report-info-item { display: flex; flex-direction: column; gap: 4px; } .report-info-item label { font-size: var(--text-sm); font-weight: 600; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; } .report-info-item span { font-size: var(--text-base); font-weight: 500; color: var(--metin-ana); padding: 8px 12px; background: var(--arka-plan-ikincil); border-radius: var(--radius-md); border-left: 3px solid var(--ana-mavi); } .report-content { margin-top: 16px; } .report-content p { margin: 0; padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border-left: 4px solid var(--ana-mavi); font-size: var(--text-base); line-height: 1.6; color: var(--metin-ana); white-space: pre-wrap; } .medications-report { margin-top: 16px; } .medication-report-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) var(--spacing-lg); background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); margin-bottom: 8px; border-left: 4px solid var(--durum-basarili-acik); } .medication-report-item:last-child { margin-bottom: 0; } .med-name { font-weight: 600; color: var(--metin-ana); font-size: var(--text-base); } .med-details { font-size: 13px; color: var(--metin-ana); } .treatment-result { margin-top: 16px; } .result-badge { display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-3xl); font-size: var(--text-base); font-weight: 600; margin-bottom: 12px; } .result-badge.success { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .result-badge.warning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .result-badge.danger { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .result-badge.info { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .confirmation-footer { padding: 20px 24px 24px; display: flex; gap: var(--spacing-md); justify-content: flex-end; border-top: 1px solid var(--kenarlik-ana); border-radius: 0 0 20px 20px; } .confirmation-footer .btn-outline { padding: 12px 24px; font-size: var(--text-base); font-weight: 500; border: 1px solid var(--kenarlik-ana); background: var(--kart-arka-plan); color: var(--metin-ana); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; } .confirmation-footer .btn-outline:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-odak); } .confirmation-footer .btn-primary:hover { background: var(--ana-mavi-koyu); } /* Select option empty state */ .select-option-empty { color: var(--metin-ana) !important; font-style: italic !important; } /* Modal open state for body */ .modal-open { overflow: hidden !important; } /* Notification fade out animation */ .notification-fade-out { opacity: 0 !important; transform: translateX(100%) !important; } /* Clickable day cursor */ .clickable-day { cursor: pointer !important; } /* Takvim Grid Stilleri - Basit Stil */ .calendar-grid { display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 1px; background-color: var(--arka-plan-ikincil); border: 1px solid #dee2e6; border-radius: var(--radius-md); overflow: hidden; } .time-column { background-color: var(--kenarlik-ana); border-right: 1px solid #dee2e6; } .time-slot { height: 25px; display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 11px; font-weight: 500; color: var(--metin-ikincil); border-bottom: 1px solid var(--kenarlik-ana); background-color: var(--kart-arka-plan); } .day-column { background-color: var(--kart-arka-plan); border-right: 1px solid #dee2e6; position: relative; } .day-column:last-child { border-right: none; } .day-header { height: 60px; background-color: var(--arka-plan-ucuncu); display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid var(--kenarlik-ana); position: relative; color: var(--metin-ana); font-weight: 600; font-size: var(--text-base); } .day-name { font-size: 11px; font-weight: 600; color: var(--metin-ikincil); } .day-date { font-size: var(--text-base); font-weight: 700; color: var(--metin-ana); } .today-badge { position: absolute; top: 2px; right: 4px; background-color: var(--ana-mavi); color: var(--metin-beyaz); font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: 600; } .day-appointments { position: relative; min-height: 500px; } /* Liste Görünümü Stilleri */ .appointments-list { background-color: var(--kart-arka-plan); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .list-header { /* display: grid; grid-template-columns: 80px 120px 120px 100px 120px 100px 120px; */ gap: var(--spacing-lg); padding: 16px; background-color: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); font-weight: 600; color: var(--metin-ana); font-size: var(--text-base); } .list-row { /* display: grid; grid-template-columns: 80px 120px 120px 100px 120px 100px 120px; */ gap: var(--spacing-lg); padding: 16px; border-bottom: 1px solid var(--arka-plan-ucuncu); transition: background-color 0.2s ease; } .list-row:hover { background-color: var(--arka-plan-ikincil); } .list-col { display: flex; align-items: center; font-size: var(--text-sm); color: var(--metin-ana); } /* Randevu Kaynağı Bilgisi - Liste Görünümü */ .appointment-source-info { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--metin-ana); cursor: help; min-width: 200px; max-width: 200px; } .appointment-source-info i { color: var(--ana-mavi); font-size: 14px; } .appointment-source-info span { font-weight: 500; } /* Liste satırı hover efekti - zaten var, tekrar etme */ .time-badge { background-color: var(--ana-mavi); color: var(--arka-plan-ana); padding: 4px 8px; border-radius: 4px; font-size: var(--text-sm); font-weight: 600; } .patient-info-mini { display: flex; align-items: center; gap: var(--spacing-sm); } .patient-info-mini i { color: var(--metin-ucuncu); } .service-badge { padding: 4px 8px; border-radius: 4px; font-size: var(--text-sm); font-weight: 600; } .service-badge.type-vaccination { background-color: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .service-badge.type-surgery { background-color: var(--durum-hata-acik); color: var(--durum-hata-metin); } .service-badge.type-checkup { background-color: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .service-badge.type-dental { background-color: #fef3c7; color: #92400e; } .card-body .status-badge { font-size: 9px; } .status-badge { padding: 4px 8px; border-radius: 4px; font-size: var(--text-sm); font-weight: 600; } .status-badge.confirmed { background-color: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .status-badge.pending { background-color: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .status-badge.cancelled { background-color: var(--durum-hata-acik); color: var(--durum-hata-metin); } /* Artık genel .action-buttons kullanılıyor */ /* Artık action-btn kullanılıyor */ .btn-icon:hover { background-color: var(--arka-plan-besinci); /* color: #374151; */ } /* Timeline Görünümü Stilleri */ .timeline-body { padding: 20px; } .timeline-day-group { margin-bottom: 32px; } .timeline-day-header { margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--vurgu-platin); } .timeline-day-header h4 { color: var(--metin-ana); font-size: 18px; font-weight: 600; } .timeline-appointment { display: flex; align-items: center; padding: 16px; margin-bottom: 12px; background-color: var(--kart-arka-plan); border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-left: 4px solid var(--vurgu-platin); transition: all 0.2s ease; } .timeline-appointment:hover { /* transform: translateY(-1px); */ box-shadow: 0 4px 8px var(--golge-ikincil); } .timeline-appointment.type-vaccination { border-left-color: var(--ana-yesil); } .timeline-appointment.type-surgery { border-left-color: var(--ana-kirmizi); } .timeline-appointment.type-checkup { border-left-color: var(--ana-mavi); } .timeline-time { min-width: 120px; font-weight: 600; color: var(--metin-ucuncu); font-size: var(--text-base); } .timeline-content { flex: 1; margin: 0 16px; } .timeline-content h5 { color: #111827; font-size: 16px; font-weight: 600; margin-bottom: 4px; } .timeline-content p { color: var(--metin-ucuncu); font-size: var(--text-base); margin: 2px 0; } .timeline-actions { display: flex; gap: var(--spacing-sm); } /* Radio Button Styles - Özel Stil */ .patient-type-radio-group { display: flex; justify-content: space-between; gap: var(--spacing-2xl); /* margin-top: 8px; */ } .patient-type-radio-option { display: flex; align-items: center; cursor: pointer; user-select: none; padding: 10px 16px; border-radius: 10px; transition: all 0.3s ease; border: 2px solid transparent; background-color: var(--kart-arka-plan); white-space: nowrap; } .patient-type-radio-option input[type="radio"] { display: none; } .patient-type-radio-custom { width: 16px; height: 16px; min-width: 16px; min-height: 16px; max-width: 16px; max-height: 16px; border: 2px solid #cbd5e1; border-radius: 50%; margin-right: 12px; position: relative; transition: all 0.3s ease; background-color: var(--kart-arka-plan); flex-shrink: 0; box-shadow: var(--shadow-sm); display: inline-block; } .patient-type-radio-option input[type="radio"]:checked + .patient-type-radio-custom { border-color: var(--ana-mavi); background-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } .patient-type-radio-option input[type="radio"]:checked ~ .patient-type-radio-label { color: var(--ana-mavi); font-weight: 600; } .patient-type-radio-option:has(input[type="radio"]:checked) { border: 2px solid var(--ana-mavi); background: rgba(59, 130, 246, 0.05); border-radius: 8px; /* padding: 8px 12px; */ /* margin: 0 -4px; */ } .patient-type-radio-option input[type="radio"]:checked + .patient-type-radio-custom::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; /* background-color: var(--metin-beyaz)fff; */ } .patient-type-radio-label { font-size: var(--text-base); color: var(--metin-ana); font-weight: 600; white-space: nowrap; letter-spacing: 0.025em; } /* .patient-type-radio-option:hover .patient-type-radio-custom { border-color: var(--kenarlik-ana); transform: scale(1.05); } */ .patient-type-radio-option:hover .patient-type-radio-label { color: var(--metin-ana); } .patient-type-radio-option input[type="radio"]:checked ~ .patient-type-radio-label { color: var(--durum-bilgi-metin); /* font-weight: 700; */ } /* Hasta Giriş Türü Bölümü Arka Plan */ .form-group:has(.patient-type-radio-group) { /* background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, var(--arka-plan-ucuncu) 100%); */ /* background-color: var(--arka-plan-ucuncu); */ padding: 20px; border-radius: 16px; border: 2px solid var(--kenarlik-ana); margin-bottom: 24px; /* box-shadow: 0 1px 3px var(--golge-ana); */ } .form-group:has(.patient-type-radio-group) label { color: var(--metin-ana); font-weight: 600; /* margin-bottom: 16px; */ font-size: var(--text-base); display: flex; align-items: center; } .patient-type-radio-group label { border-color: var(--kenarlik-ana); } .patient-type-radio-option:hover { /* background-color: var(--arka-plan-ucuncu); */ border-color: var(--kenarlik-odak); /* transform: translateY(-1px); */ /* box-shadow: 0 2px 8px var(--golge-hover); */ } /* Medication Rows */ #medicationsList { margin-bottom: 15px; } /* #medicationsList .form-row stilleri artık #prescriptionModal .medication-row .form-row içinde tanımlı */ /* Prescription Medicines */ .prescription-medicines { margin-bottom: 20px; } .prescription-medicines h4 { font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); margin-bottom: 10px; } .medicine-item { background-color: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 15px; margin-bottom: 10px; } .medicine-item .form-row { margin-bottom: 0; } /* Filter Group */ .filter-group { display: flex; gap: var(--spacing-md); align-items: center; } /* Card Actions Filter Group */ .card-actions .filter-group { display: flex; gap: var(--spacing-sm); align-items: center; margin-right: var(--spacing-md); } /* Card Actions Responsive */ @media (max-width: 768px) { .card-actions { flex-direction: column; align-items: stretch; gap: var(--spacing-sm); } .card-actions .filter-group { margin-right: 0; margin-bottom: var(--spacing-sm); flex-wrap: wrap; } } .treatments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: var(--spacing-xl); /* padding: 20px; */ } /* Treatment Cards */ .treatment-card { background-color: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 20px; transition: all 0.2s ease; box-shadow: var(--shadow-sm); } .treatment-card:hover { box-shadow: 0 2px 6px var(--golge-hover); transform: translateY(-2px); } .treatment-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; } .treatment-badge { padding: 6px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: 6px; } .treatment-badge.ongoing { background-color: var(--durum-bilgi-acik); color: var(--ana-mavi); } .treatment-badge.scheduled { background-color: var(--durum-uyari-acik); color: var(--durum-uyari-koyu); } .treatment-badge.completed { background-color: var(--durum-basarili-acik); color: var(--durum-basarili-koyu); } .treatment-badge.cancelled { background-color: var(--durum-hata-acik); color: var(--durum-hata-koyu); } .treatment-actions { display: flex; gap: var(--spacing-sm); } .treatment-actions .btn-icon { width: 32px; height: 32px; background-color: var(--arka-plan-ikincil); transition: all 0.2s ease; } .treatment-actions .btn-icon:hover { background-color: var(--arka-plan-ucuncu); /* color: var(--metin-ana); */ border-color: var(--kenarlik-ana); } .treatment-patient { display: flex; align-items: center; gap: var(--spacing-md); } /* Bu stiller ana .patient-avatar stilinde birleştirildi */ .patient-info h4 { font-size: 16px; font-weight: 600; color: var(--metin-ana); margin: 0 0 4px 0; } .patient-info p { font-size: var(--text-base); color: var(--metin-ucuncu); margin: 0; } .treatment-status { padding: 4px 8px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; } .treatment-status.active { background-color: var(--durum-basarili-acik); color: var(--durum-basarili-koyu); } .treatment-status.completed { background-color: var(--durum-bilgi-acik); color: var(--ana-mavi); } .treatment-status.pending { background-color: var(--durum-uyari-acik); color: var(--durum-uyari-koyu); } .treatment-details { margin-bottom: 15px; } /* .detail-item span { flex: 1; font-weight: 500; } */ .detail-item time { font-size: var(--text-sm); color: var(--metin-dorduncu); background: var(--arka-plan-ikincil); padding: 2px 6px; border-radius: 4px; font-weight: 500; } .treatment-medications { margin-bottom: 15px; } .treatment-medications h5 { font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); margin: 0 0 8px 0; } .medication-tags { display: flex; flex-wrap: wrap; gap: 6px; } .med-tag { background-color: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); padding: 4px 8px; border-radius: var(--radius-xl); font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--kenarlik-ana); } .treatment-progress { margin-bottom: 15px; } .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: var(--text-base); color: var(--metin-ana); } .progress-bar { width: 100%; height: 6px; background-color: var(--arka-plan-ucuncu); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--ana-mavi), var(--ana-mavi-daha-koyu)); border-radius: 3px; transition: width 0.3s ease; } .treatment-footer { display: flex; gap: var(--spacing-sm); justify-content: flex-end; padding-top: 15px; border-top: 1px solid var(--arka-plan-ucuncu); } .owner-name { font-size: var(--text-sm); color: var(--metin-dorduncu); font-weight: 500; } .treatment-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } /* .treatment-actions .btn-small ortak stillerden miras alınır */ /* Tedavi butonları ortak stillerden miras alır */ /* Today Schedule Styles */ .today-schedule { background: var(--arka-plan-ana); border-radius: var(--radius-xl); /* padding: 24px; */ /* box-shadow: var(--shadow-sm); */ margin-bottom: 20px; } .schedule-timeline { display: flex; flex-direction: column; gap: var(--spacing-xl); } .schedule-hour { display: flex; gap: var(--spacing-xl); align-items: center; } .hour-label { min-width: 80px; font-weight: 600; color: var(--metin-ana); font-size: var(--text-base); padding: 8px 12px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-lg); text-align: center; } .hour-treatments { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-md); } .schedule-item { background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 16px; display: flex; align-items: center; gap: var(--spacing-lg); transition: all 0.2s ease; } .schedule-item:hover { box-shadow: 0 2px 8px var(--golge-ana); /* transform: translateY(-1px); */ } .schedule-time { min-width: 120px; font-size: var(--text-sm); color: var(--metin-ucuncu); font-weight: 500; background: var(--arka-plan-ana); padding: 4px 8px; border-radius: var(--radius-md); text-align: center; } .schedule-content { flex: 1; display: flex; flex-direction: column; gap: 4px; } .schedule-patient { display: flex; align-items: center; gap: var(--spacing-sm); font-weight: 600; color: var(--metin-ana); font-size: var(--text-base); } .schedule-patient i { color: var(--ana-mavi); font-size: 16px; } .schedule-doctor { font-size: var(--text-sm); color: var(--metin-ucuncu); font-weight: 500; } .schedule-status { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; padding: 6px 12px; border-radius: var(--radius-3xl); min-width: 100px; justify-content: center; } .schedule-status.completed { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); border: 1px solid var(--kenarlik-ana); } .schedule-status.completed i { color: var(--ana-yesil); } .schedule-status.pending { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); border: 1px solid var(--kenarlik-ana); } .schedule-status.pending i { color: var(--ana-sari); } .schedule-status.in-progress { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); border: 1px solid var(--kenarlik-ana); } /* .schedule-status.in-progress i { color: var(--ana-mavi); } */ /* #endregion */ /* #region Ayarlar Sayfası Özel Stiller */ /* Bildirim Dropdown */ .notification-container { position: relative; display: inline-block; } /* .notification-btn { position: relative; background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--radius-lg); transition: background-color 0.2s; color: var(--metin-ucuncu); } .notification-btn:hover { background-color: var(--arka-plan-ucuncu); color: var(--metin-ana); } */ /* .notification-badge { position: absolute; top: 2px; right: 2px; background-color: var(--ana-kirmizi); color: var(--arka-plan-ana); border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 600; } */ .notification-dropdown { position: fixed; top: 80px; right: 20px; width: 350px; background: var(--arka-plan-ana); border-radius: var(--radius-xl); box-shadow: 0 8px 25px var(--golge-ikincil); border: 1px solid var(--kenarlik-ana); z-index: 999999; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; pointer-events: none; } .notification-dropdown:hover { box-shadow: 0 12px 35px var(--golge-ucuncu); transform: translateY(-5px); } .notification-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .notification-header { padding: 16px 20px; border-bottom: 1px solid var(--kenarlik-ana); display: flex; justify-content: space-between; align-items: center; } .notification-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .notification-header-actions { display: flex; align-items: center; gap: 12px; } .unread-count { background: #ef4444; color: var(--metin-beyaz); padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; min-width: 20px; text-align: center; } .mark-all-read { background: none; border: none; color: var(--ana-mavi); font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background-color 0.2s; } .mark-all-read:hover { background-color: var(--arka-plan-ikincil); } .mark-all-read { background: none; border: none; color: var(--ana-mavi); font-size: var(--text-sm); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-md); transition: background-color 0.2s; } .mark-all-read:hover { background-color: var(--arka-plan-ucuncu); } .notification-list { max-height: 300px; overflow-y: auto; } .notification-item { padding: 16px 20px; border-bottom: 1px solid var(--arka-plan-ucuncu); display: flex; gap: var(--spacing-md); transition: all 0.2s ease; position: relative; margin: 10px; /* cursor: pointer; */ border-radius: 8px; background-color: var(--notification-item-bg); } .notification-item:hover { background-color: var(--notification-item-bg-hover); transition: all 0.2s ease; } .notification-item.unread:hover { background-color: var(--notification-unread-item-bg-hover); transition: all 0.2s ease; } .notification-item.unread { background-color: var(--notification-unread-item-bg); border-left: 3px solid var(--notification-unread-item-border); } .notification-item.unread::before { content: ''; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px; background-color: var(--ana-kirmizi); border-radius: 50%; transform: translateY(-50%); } .notification-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .notification-item.unread .notification-icon { background-color: var(--metin-beyaz); color: var(--notification-unread-item-border); } .notification-item:not(.unread) .notification-icon { background-color: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); } .notification-item.no-click { cursor: default; } .notification-content { flex: 1; min-width: 0; } .notification-content h5 { margin: 0 0 4px 0; font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); } .notification-content p { margin: 0 0 4px 0; font-size: 13px; color: var(--metin-ucuncu); line-height: 1.4; } .notification-time { font-size: 11px; color: var(--metin-dorduncu); } .notification-footer { display: flex; align-items: center; justify-content: center; padding: 12px 20px; border-top: 1px solid var(--kenarlik-ana); text-align: center; } .view-all-notifications { color: var(--ana-mavi); text-decoration: none; font-size: 13px; font-weight: 500; } .view-all-notifications:hover { text-decoration: underline; } /* Abonelik Bölümü İyileştirmeleri */ /* .current-plan { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); border-radius: 16px; padding: 32px; color: var(--arka-plan-ana); position: relative; overflow: hidden; } */ /* Dark tema için genel current-plan - [data-theme="dark"] kullanılıyor */ /* #region Ödeme ve Fatura Modal Stilleri */ .invoice-filters .form-row { display: flex; gap: var(--spacing-xl); align-items: end; } .invoice-filters .form-row .form-group { flex: 1; margin-bottom: 0; } .payment-form .form-group { margin-bottom: 20px; } .payment-form label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--metin-ana); } .payment-form input[type="text"], .payment-form input[type="date"], .payment-form textarea, .invoice-filters input[type="date"] { width: 100%; padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); background: var(--arka-plan-ana); color: var(--metin-ana); font-size: var(--text-base); transition: all 0.2s ease; } .payment-form input:focus, .payment-form textarea:focus, .invoice-filters input:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); } .payment-form input[type="checkbox"] { margin-right: 8px; } /* Fatura Geçmişi Stilleri */ .invoice-filters { background: var(--arka-plan-ikincil); padding: 20px; border-radius: var(--radius-xl); margin-bottom: 24px; border: 1px solid var(--kenarlik-ana); } .invoice-filters label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--metin-ana); font-size: var(--text-base); } .invoice-list { max-height: 400px; overflow-y: auto; } .invoice-item { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); margin-bottom: 12px; transition: all 0.2s ease; } .invoice-item:hover { background: var(--arka-plan-ikincil); border-color: var(--ana-mavi); } .invoice-number { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: 8px; } .invoice-number strong { color: var(--metin-ana); font-size: 16px; } .invoice-status { padding: 4px 8px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; } .invoice-status.paid { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .invoice-status.pending { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .invoice-details { display: flex; gap: var(--spacing-xl); color: var(--metin-ucuncu); font-size: var(--text-base); } .invoice-amount { font-weight: 600; color: var(--metin-ana); } .invoice-actions { display: flex; gap: var(--spacing-sm); } .invoice-actions .btn-outline { padding: 8px 12px; font-size: var(--text-sm); } /* Dark tema için modal stilleri */ [data-theme="dark"] .invoice-filters { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ana); } [data-theme="dark"] .invoice-item { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ana); } [data-theme="dark"] .invoice-item:hover { background: var(--arka-plan-ucuncu); border-color: var(--ana-mavi); } [data-theme="dark"] .invoice-number strong { color: var(--metin-ana); } [data-theme="dark"] .invoice-amount { color: var(--metin-ana); } [data-theme="dark"] .invoice-details { color: var(--metin-ucuncu); } /* #endregion */ .current-plan::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); pointer-events: none; } .plan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; position: relative; z-index: 1; } .plan-badge { display: flex; align-items: center; gap: var(--spacing-sm); background: rgba(255, 255, 255, 0.2); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-3xl); font-size: var(--text-base); font-weight: 600; } .plan-badge i { color: var(--ana-sari-acik); } .plan-price { text-align: right; display: flex; align-items: center; justify-content: center; } .plan-price .price { font-size: 32px; font-weight: 700; color: var(--ana-yesil-acik); text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .plan-price .period { font-size: 16px; color: rgba(255, 255, 255, 0.8); margin-left: 4px; } .plan-info-wrapper { display: grid; grid-template-columns: 300px 1fr; gap: 32px; position: relative; z-index: 1; } .plan-features { display: flex; flex-direction: column; gap: var(--spacing-md); } /* .plan-features .feature { display: flex; align-items: center; gap: var(--spacing-md); color: var(--arka-plan-ana); font-size: var(--text-base); } */ .plan-features .feature i { color: var(--ana-yesil); font-size: 16px; } .subscription-info { display: flex; flex-direction: column; gap: var(--spacing-lg); opacity: 0.9; } .subscription-info .info-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .subscription-info .label { color: var(--metin-beyaz); font-size: var(--text-sm); } .subscription-info .value { color: var(--metin-beyaz); font-weight: 600; font-size: var(--text-base); } .subscription-actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; margin-top: 24px; } /* #endregion */ /* Treatment Detail Modal Styles for Tedaviler Page */ /* Bu stiller yeni modal sistemi ile değiştirildi */ #treatmentDetailModal .modal-body { padding: 24px; max-height: 60vh; overflow-y: auto; } #treatmentDetailModal .treatment-detail { padding: 0; } #treatmentDetailModal .treatment-detail h4 { color: var(--metin-ana); font-size: 20px; font-weight: 600; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--kenarlik-ana); } /* Bu stil genel #treatmentDetailModal .detail-section ile birleştirildi */ #treatmentDetailModal .detail-section h5 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--kenarlik-ana); } #treatmentDetailModal .detail-section p { margin-bottom: 12px; padding: 8px 0; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--arka-plan-ucuncu); line-height: 1.5; } #treatmentDetailModal .detail-section p:last-child { border-bottom: none; margin-bottom: 0; } #treatmentDetailModal .detail-section strong { color: var(--metin-ana); font-weight: 600; min-width: 140px; margin-right: 16px; flex-shrink: 0; font-size: 14px; } #treatmentDetailModal .detail-section span { color: var(--metin-ucuncu); /* flex: 1; */ text-align: right; word-wrap: break-word; font-size: 14px; } #treatmentDetailModal .status-active { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); padding: 4px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; display: inline-block; } #treatmentDetailModal .status-scheduled { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); padding: 4px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; display: inline-block; } #treatmentDetailModal .status-completed { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); padding: 4px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; display: inline-block; } /* Treatment Edit Modal Styles for Tedaviler Page */ /* Bu stiller yeni modal sistemi ile değiştirildi */ #editTreatmentModal .modal-body { padding: 24px; max-height: 70vh; overflow-y: auto; } #editTreatmentModal .treatment-edit { padding: 0; } #editTreatmentModal .treatment-edit h4 { color: var(--metin-ana); font-size: 20px; font-weight: 600; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--kenarlik-ana); } #editTreatmentModal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); margin-bottom: 20px; } #editTreatmentModal .form-group { margin-bottom: 20px; } #editTreatmentModal .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--metin-ana); } /* #region Hastalar Sayfası Tablo Görünümü Stilleri */ .hastalar-page .patients-table-container { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); overflow: hidden; /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */ } .hastalar-page .patients-table { width: 100%; border-collapse: collapse; font-size: 14px; } .hastalar-page .patients-table thead { background: var(--arka-plan-ikincil); border-bottom: 2px solid var(--kenarlik-ana); } .hastalar-page .patients-table th { padding: 16px 12px; text-align: left; font-weight: 600; color: var(--metin-ana); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border-right: 1px solid var(--kenarlik-ana); } .hastalar-page .patients-table th:last-child { border-right: none; text-align: center; } .hastalar-page .patients-table tbody tr { border-bottom: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .hastalar-page .patients-table tbody tr:hover { background: var(--arka-plan-ikincil); } .hastalar-page .patients-table tbody tr:last-child { border-bottom: none; } .hastalar-page .patients-table td { padding: 16px 12px; vertical-align: middle; border-right: 1px solid var(--kenarlik-ana); } .hastalar-page .patients-table td:last-child { border-right: none; } /* Hasta bilgileri */ .hastalar-page .patient-table-info { display: flex; align-items: center; gap: 12px; } .hastalar-page .patient-table-avatar { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--metin-beyaz); /* box-shadow: var(--shadow-sm); */ } /* .hastalar-page .patient-table-avatar i { color: var(--metin-beyaz) !important; font-size: 16px !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .hastalar-page .patient-table-avatar.dog { background: linear-gradient(135deg, var(--ana-sari-acik) 0%, var(--ana-sari) 100%) !important; } .hastalar-page .patient-table-avatar.cat { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%) !important; } .hastalar-page .patient-table-avatar.kuş { background: linear-gradient(135deg, var(--ana-cyan) 0%, var(--ana-cyan-koyu) 100%) !important; } .hastalar-page .patient-table-avatar.other { background: linear-gradient(135deg, var(--metin-ikincil) 0%, var(--baslik-ucuncu) 100%) !important; } */ .hastalar-page #animalTypeFilter { width: fit-content; } .hastalar-page .patient-table-details h4 { font-weight: 600; color: var(--metin-ana); margin: 0 0 4px 0; font-size: 15px; } .hastalar-page .patient-table-details p { color: var(--metin-ikincil); margin: 0; font-size: 13px; } /* Sahip bilgileri */ .hastalar-page .owner-table-info { display: flex; flex-direction: column; gap: 4px; } .hastalar-page .owner-table-name { font-weight: 600; color: var(--metin-ana); font-size: 14px; } .hastalar-page .owner-table-phone { color: var(--metin-ikincil); font-size: 13px; display: flex; align-items: center; gap: 6px; } .hastalar-page .owner-table-phone i { color: var(--primary); font-size: 12px; } /* Durum badge */ .hastalar-page .status-badge-table { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .hastalar-page .status-badge-table.active { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); border: 1px solid var(--durum-basarili); } .hastalar-page .status-badge-table.warning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); border: 1px solid var(--durum-uyari); } .hastalar-page .status-badge-table.danger { background: var(--durum-hata-acik); color: var(--durum-hata-metin); border: 1px solid var(--durum-hata); } .hastalar-page .status-badge-table.completed { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); border: 1px solid var(--durum-bilgi); } .hastalar-page .status-badge-table i { font-size: 8px; } /* İşlemler butonları */ .hastalar-page .table-actions { display: flex; gap: 8px; align-items: center; justify-content: center; } /* .hastalar-page .table-actions .btn-small ortak stillerden miras alınır */ .hastalar-page .table-actions .btn-small span { font-size: 12px; font-weight: 500; } .yatan-hastalar-page .table-actions{ display: flex; align-items: center; justify-content: space-between; } .yatan-hastalar-page .buttons{ display: flex; gap: 8px; flex-wrap: wrap; } /* Yatan Hastalar sayfası butonları - yazı ile birlikte */ .yatan-hastalar-page .buttons .action-btn { width: auto !important; min-width: auto !important; max-width: none !important; padding: 8px 12px !important; gap: 6px; white-space: nowrap; } .yatan-hastalar-page .buttons .action-btn span { font-size: 13px; font-weight: 500; } .yatan-hastalar-page .buttons .action-btn i { font-size: 14px; } /* Yatan Hastalar Sayfası Buton Stilleri */ /* Artık action-btn kullanılıyor */ /* Randevu Detay Modal Header Stilleri */ .modal-header-content { display: flex; align-items: center; gap: 12px; } .modal-header-content .patient-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--metin-beyaz); flex-shrink: 0; } .modal-header-content .patient-avatar i { color: var(--metin-beyaz) !important; font-size: 18px !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Tür/Irk bilgisi */ .hastalar-page .species-breed-info { display: flex; flex-direction: column; gap: 4px; } .hastalar-page .species-breed-info .species { font-weight: 600; color: var(--metin-ana); font-size: 14px; } .hastalar-page .species-breed-info .breed { color: var(--metin-ikincil); font-size: 13px; } /* Yaş bilgisi */ .hastalar-page .age-info { font-weight: 600; color: var(--metin-ana); font-size: 14px; } /* Son ziyaret */ .hastalar-page .last-visit { color: var(--metin-ikincil); font-size: 13px; } /* Kayıt sayısı */ .hastalar-page .record-count { display: flex; align-items: center; gap: 6px; color: var(--metin-ikincil); font-size: 13px; } .hastalar-page .record-count i { color: var(--primary); font-size: 12px; } /* Checkbox stilleri */ .hastalar-page .patients-table input[type="checkbox"], .faturalama-page .invoice-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } /* #endregion */ /* #region Hastalar Sayfası View-Toggle Stilleri */ .hastalar-page .view-toggle { display: flex; gap: 4px; margin-right: 16px; padding: 4px; background: var(--arka-plan-ucuncu); border-radius: var(--radius-xl); } .hastalar-page .view-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; color: var(--metin-ucuncu); font-size: 16px; } .hastalar-page .view-btn:hover { background: rgba(255, 255, 255, 0.5); color: var(--ana-mavi); } .hastalar-page .view-btn.active { background: var(--arka-plan-ana); color: var(--ana-mavi); box-shadow: var(--shadow-sm); } .hastalar-page .view-btn i { font-size: 14px; } /* #endregion */ /* #region Bulk Actions Bar Stilleri */ .bulk-actions-bar { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; margin-bottom: var(--spacing-lg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); animation: slideDown 0.3s ease; } .bulk-actions-content { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; } .bulk-actions-left { display: flex; align-items: center; gap: 12px; } .selected-count { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--metin-ana); font-size: 14px; } .selected-count i { color: var(--primary); font-size: 16px; } .bulk-actions-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bulk-actions-right .btn-small { white-space: nowrap; } .bulk-actions-right .btn-small i { margin-right: 6px; font-size: 12px; } /* Animasyon */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* #region Onay Modalı Stilleri */ /* .btn-danger ortak stillerden miras alınır */ .modal-content.small { max-width: 400px; width: 90%; } .modal-content.small .modal-body p { margin: 0; line-height: 1.5; color: var(--metin-ana); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* Radio ve Checkbox Grupları */ .radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .radio-option, .checkbox-option { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px; border-radius: 8px; transition: background-color 0.2s ease; position: relative; user-select: none; } .radio-option:hover, .checkbox-option:hover { background: var(--arka-plan-ikincil); } .radio-option:active, .checkbox-option:active { background: var(--arka-plan-ucuncu); } .radio-option label, .checkbox-option label { cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; } .radio-option:hover, .checkbox-option:hover { background: var(--arka-plan-ikincil); } .radio-option input[type="radio"], .checkbox-option input[type="checkbox"] { display: none; } .radio-custom, .checkbox-custom { width: 20px; height: 20px; border: 2px solid var(--kenarlik-ana); border-radius: 50%; position: relative; transition: all 0.2s ease; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .checkbox-custom { border-radius: 4px; } .radio-option input[type="radio"]:checked + .radio-custom, .radio-custom.active { border-color: var(--primary); background: var(--primary); } .radio-option input[type="radio"]:checked + .radio-custom::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--kart-arka-plan); border-radius: 50%; } .checkbox-option input[type="checkbox"]:checked + .checkbox-custom, .checkbox-custom.active { border-color: var(--primary); background: var(--primary); } .checkbox-option input[type="checkbox"]:checked + .checkbox-custom::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--kart-arka-plan); font-size: 14px; font-weight: bold; line-height: 1; font-family: 'Inter', sans-serif; } /* Checkbox ve Radio Button Hover Efektleri */ .radio-option:hover .radio-custom { border-color: var(--primary); } .checkbox-option:hover .checkbox-custom { border-color: var(--primary); } /* Checkbox ve Radio Button Focus Efektleri */ .radio-option input[type="radio"]:focus + .radio-custom { box-shadow: 0 0 0 3px var(--golge-odak); } .checkbox-option input[type="checkbox"]:focus + .checkbox-custom { box-shadow: 0 0 0 3px var(--golge-odak); } .radio-option span:last-child, .checkbox-option span:last-child { font-weight: 500; color: var(--metin-ana); } /* #endregion */ /* #region Raporlar Sayfası Özel Stiller */ /* Görünüm Değiştirme Butonları */ .view-toggle { display: flex; gap: 4px; margin-right: 16px; } .view-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--kenarlik-ana); background: var(--arka-plan-ana); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; color: var(--metin-ucuncu); width: max-content; } .view-btn:hover { border-color: var(--kenarlik-ana); color: var(--ana-mavi); background: var(--arka-plan-ikincil); } .view-btn.active { border-color: var(--kenarlik-ana); background: var(--ana-mavi); color: var(--arka-plan-ana); } .view-btn i { font-size: 16px; } /* Bu bölüm kaldırıldı - tekrar eden stiller temizlendi */ .report-card-actions .action-btn:hover { border-color: var(--kenarlik-ana); color: var(--ana-mavi); background: var(--arka-plan-ikincil); } /* Artık genel action-btn.view kullanılıyor */ /* Artık genel action-btn.download kullanılıyor */ .report-card-actions .action-btn.share:hover { background: var(--durum-uyari-acik); border-color: var(--kenarlik-ana); color: var(--ana-sari); } .report-card-actions .action-btn i { font-size: var(--text-base); } /* Responsive */ @media (max-width: 768px) { .reports-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); } .view-toggle { margin-right: 12px; } .view-btn { width: 36px; height: 36px; } .report-card-header { padding: 16px 16px 12px; } .report-card-content { padding: 0 16px 16px; } .report-card-actions { padding: 12px 16px 16px; } } /* #endregion */ /* #region Stok ve Faturalandırma Rapor Stilleri */ /* Rapor Formu */ .report-form { display: flex; flex-direction: column; gap: 32px; } .form-section { background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); padding: 24px; border: 1px solid var(--kenarlik-ana); } .form-section h4 { color: var(--metin-ana); font-size: 18px; font-weight: 600; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--kenarlik-ana); } /* .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); } */ /* .form-group { display: flex; flex-direction: column; } */ /* Bu stil ana .form-group label ile birleştirildi */ /* Form group stilleri global input stillerini kullanıyor - gereksiz tekrar kaldırıldı */ /* Rapor Özeti */ .report-summary { /* display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */ gap: var(--spacing-lg); margin-bottom: 20px; } .summary-item { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 16px; text-align: center; } .summary-label { display: block; color: var(--metin-ucuncu); font-size: var(--text-base); font-weight: 500; margin-bottom: 8px; } .summary-value { display: block; color: var(--metin-ana); font-size: 24px; font-weight: 700; } .summary-value.warning { color: var(--ana-sari); } .summary-value.danger { color: var(--ana-kirmizi); } /* Rapor Türü Kartları */ .report-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); } .report-type-card { background: var(--arka-plan-ana); border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; } .report-type-card:hover { border-color: var(--kenarlik-ana); transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-mavi); } .report-type-card.selected { border-color: var(--kenarlik-ana); background: var(--durum-bilgi-acik); box-shadow: 0 2px 6px var(--golge-odak); } .report-type-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--ana-mavi), var(--ana-mavi-daha-koyu)); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--arka-plan-ana); font-size: 20px; } .report-type-card h5 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 8px; } .report-type-card p { color: var(--metin-ucuncu); font-size: 13px; margin: 0; } /* Radio Grubu */ .radio-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); } .faturalama-page .radio-group { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-lg); } .radio-item { display: flex; align-items: center; gap: var(--spacing-md); cursor: pointer; padding: 12px; border-radius: var(--radius-lg); transition: all 0.2s ease; } .radio-item:hover { background: var(--arka-plan-ucuncu); } .radio-item input[type="radio"] { display: none; } .radio-mark { width: 20px; height: 20px; border: 2px solid var(--kenarlik-ana); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .radio-item input[type="radio"]:checked + .radio-mark { border-color: var(--kenarlik-ana); background: var(--ana-mavi); } .radio-item input[type="radio"]:checked + .radio-mark::after { content: ''; width: 8px; height: 8px; background: var(--arka-plan-ana); border-radius: 50%; } .radio-item span:last-child { color: var(--metin-ana); font-size: var(--text-base); font-weight: 500; } /* Checkbox Grubu */ .checkbox-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); } .checkbox-item { display: flex; align-items: center; gap: var(--spacing-md); cursor: pointer; padding: 12px; border-radius: var(--radius-lg); transition: all 0.2s ease; } .checkbox-item:hover { background: var(--arka-plan-ucuncu); } .checkbox-item input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } .checkbox-item .checkmark { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; } .checkbox-item:hover .checkmark { border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } .checkbox-item input[type="checkbox"]:checked + .checkmark { background: var(--ana-mavi); border-color: var(--ana-mavi); } .checkbox-item input[type="checkbox"]:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 1; transform: scale(1); transition: all 0.2s ease; } .checkbox-item .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } .checkbox-item span:last-child { color: var(--metin-ana); font-size: var(--text-base); font-weight: 500; } /* Responsive */ @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; gap: var(--spacing-lg); } .report-type-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } .radio-group, .checkbox-group { grid-template-columns: 1fr; gap: var(--spacing-md); } .report-summary { grid-template-columns: 1fr; gap: var(--spacing-md); } .form-section { padding: 16px; } } /* #endregion */ /* #region Onam Sistemi Stilleri */ /* Tab Sistemi */ .consent-tabs { background: var(--arka-plan-ana); border-radius: 16px; box-shadow: 0 2px 8px var(--golge-ana); overflow: hidden; margin-bottom: 24px; } .tab-buttons { display: flex; background: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); overflow-x: auto; } .consent-tab-btn { flex: 1; padding: 20px 24px; background: transparent; border: none; display: flex ; align-items: center; justify-content: center; gap: var(--spacing-md); font-size: 16px; font-weight: 600; color: var(--metin-ucuncu); cursor: pointer; transition: all 0.3s ease; position: relative; } .consent-tab-btn:hover { background: rgba(59, 130, 246, 0.05); color: var(--ana-mavi); } .consent-tab-btn.active { background: var(--arka-plan-ana); color: var(--ana-mavi); border-bottom: 2px solid var(--ana-mavi); } .consent-tab-btn i { font-size: 16px; } .tab-content { display: none; padding: 24px; } .tab-content.active { display: block; } .tab-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--kenarlik-ana); } /* Bu stil yukarıda genel bölümde tanımlandı */ .tab-header p { margin: 0 0 12px 0; color: var(--metin-ucuncu); font-size: 16px; } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .status-badge.success { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .status-badge.warning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .status-badge.danger { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } /* Onam Oluşturma Formu */ .consent-creation-form { max-width: 800px; margin: 0 auto; } .form-step { display: none; animation: fadeIn 0.3s ease; } .form-step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .step-header { display: flex; align-items: center; gap: var(--spacing-lg); margin-bottom: 32px; } .step-number { width: 40px; height: 40px; border-radius: 50%; background: var(--ana-mavi); color: var(--arka-plan-ana); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; } .step-info h4 { margin: 0 0 4px 0; font-size: 20px; font-weight: 600; color: var(--metin-ana); } .step-info p { margin: 0; color: var(--metin-ucuncu); font-size: var(--text-base); } /* Form Şablonları */ .form-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); margin-bottom: 32px; } .template-card { padding: 20px; border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-xl); cursor: pointer; transition: all 0.3s ease; position: relative; background: var(--arka-plan-ana); display: flex ; flex-direction: column; justify-content: space-between; } .template-card:hover { border-color: var(--kenarlik-ana); transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-mavi); } .template-card.selected { border-color: var(--kenarlik-ana); background: var(--durum-bilgi-acik); border: 2px solid var(--ana-mavi); } .template-card.selected .template-icon { background-color: var(--metin-beyaz); } .template-icon { width: 48px; height: 48px; border-radius: var(--radius-xl); background: var(--arka-plan-ucuncu); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--ana-mavi); font-size: 20px; } .template-card h5 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .template-card p { margin: 0 0 12px 0; color: var(--metin-ucuncu); font-size: var(--text-base); line-height: 1.5; } .template-badge { position: absolute; top: 12px; right: 12px; padding: 4px 8px; border-radius: var(--radius-xl); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .template-badge.popular { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } /* Hasta Seçimi */ .patient-selection { margin-bottom: 32px; } /* Bu bölüm kaldırıldı - ortak search box stilleri kullanılıyor */ .patient-list { max-height: 400px; overflow-y: auto; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--arka-plan-ana); } .patient-item { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; border-bottom: 1px solid var(--arka-plan-ucuncu); cursor: pointer; transition: all 0.3s ease; background: var(--kart-arka-plan); } .patient-item:hover { background: var(--arka-plan-ikincil); } .patient-item.selected { background: var(--durum-bilgi-acik); border-color: var(--kenarlik-ana); } .patient-item:last-child { border-bottom: none; } .patient-info h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .patient-info p { margin: 0 0 4px 0; color: var(--metin-ucuncu); font-size: var(--text-base); } .patient-info small { color: var(--metin-dorduncu); font-size: var(--text-sm); } .patient-contact { display: flex; align-items: center; gap: 6px; color: var(--metin-ucuncu); font-size: var(--text-base); margin-left: auto; } /* Onam Önizleme */ .consent-preview { background: var(--arka-plan-ikincil); border: 2px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 24px; margin-bottom: 32px; } .preview-header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--kenarlik-ana); } .preview-header h5 { margin: 0 0 8px 0; font-size: 18px; font-weight: 700; color: var(--metin-ana); letter-spacing: 1px; } .preview-header p { margin: 0; color: var(--metin-ucuncu); font-size: var(--text-base); } .preview-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); } .preview-section h6 { margin: 0 0 12px 0; font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); text-transform: uppercase; letter-spacing: 0.5px; } .preview-section p { /* margin: 0 0 8px 0; */ color: var(--metin-ana); font-size: var(--text-base); border-bottom: 1px solid var(--kenarlik-ana); padding: 5px 0; } .preview-section p:last-child { margin-bottom: 0; } /* Adım Butonları */ .step-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--kenarlik-ana); } .step-actions button { display: flex; align-items: center; gap: var(--spacing-sm); padding: 12px 24px; border-radius: var(--radius-lg); font-weight: 500; transition: all 0.3s ease; cursor: pointer; } .step-actions button:disabled { opacity: 0.5; cursor: not-allowed; } /* Onam Listeleri */ .sent-consents-list, .pending-consents-list, .rejected-consents-list { display: flex; flex-direction: column; gap: var(--spacing-lg); } .consent-item { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 16px; transition: all 0.3s ease; } .consent-item:hover { border-color: var(--kenarlik-ana); box-shadow: 0 2px 6px var(--golge-hover); } .consent-item.urgent { border-color: var(--kenarlik-ana); /* background: var(--durum-uyari-acik); */ } .consent-item.rejected { border-color: var(--kenarlik-ana); /* background: var(--durum-hata-acik); */ } .consent-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 16px; } /* consent-info ve consent-patient-info yan yana */ .consent-header-content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1; } .consent-info h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .consent-date { color: var(--metin-ucuncu); font-size: var(--text-base); } .urgency-indicator { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .urgency-indicator.urgent { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .urgency-indicator.normal { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .rejection-reason { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-3xl); background: var(--durum-hata-acik); color: var(--durum-hata-metin); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .consent-patient-info { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: 0; flex: 1; margin-bottom: 16px; } .consent-patient-info .patient-avatar img { width: 56px; height: 56px; object-fit: contain; } /* Hayvan ismi stili - Tüm onam sekmelerinde */ .consent-patient-info .patient-details h4, .consent-patient-info .patient-details h5 { font-size: 18px !important; font-weight: 600 !important; color: var(--baslik-ana) !important; margin: 0 0 4px 0 !important; line-height: 1.4 !important; } /* Bu stil yukarıda genel bölümde tanımlandı */ .patient-details p { margin: 0 0 4px 0; color: var(--metin-ucuncu); font-size: var(--text-base); } .contact { color: var(--metin-dorduncu); font-size: var(--text-sm); } .consent-procedure { margin-bottom: 16px; } .procedure-type { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: 8px; padding: 8px 12px; border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 600; width: fit-content; } .procedure-type.surgery { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .procedure-type.radiology { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .procedure-type.emergency { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .procedure-description { margin: 0; color: var(--metin-ucuncu); font-size: var(--text-base); line-height: 1.5; } .consent-status { margin-bottom: 16px; } .status-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .status-text { color: var(--metin-ana); font-size: var(--text-base); font-weight: 500; } .status-time { color: var(--metin-dorduncu); font-size: var(--text-sm); } .progress-bar { width: 100%; height: 6px; background: var(--arka-plan-dorduncu); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; background: var(--ana-mavi); border-radius: 3px; transition: width 0.3s ease; } .progress-fill.urgent { background: var(--durum-uyari); } .rejection-details { margin-bottom: 16px; padding: 12px; background: var(--durum-hata-acik); border-radius: var(--radius-lg); border-left: 4px solid var(--ana-kirmizi); } .rejection-reason-text { margin-bottom: 8px; color: var(--durum-hata-metin); font-size: var(--text-base); } .rejection-time { display: flex; align-items: center; gap: 6px; color: var(--metin-dorduncu); font-size: var(--text-sm); } .consent-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: 12px; } .consent-actions .btn-small { display: flex; align-items: center; gap: 6px; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; transition: all 0.3s ease; cursor: pointer; border: none; } /* Onam Tablosu */ .signed-consents-table { background: var(--arka-plan-ana); border-radius: var(--radius-xl); overflow: hidden; /* box-shadow: var(--shadow-sm); */ } .simple-table { width: 100%; border-collapse: collapse; } .simple-table th { background: var(--arka-plan-ikincil); padding: 16px; text-align: left; font-weight: 600; color: var(--metin-ana); font-size: var(--text-base); border-bottom: 1px solid var(--kenarlik-ana); } .simple-table td { padding: 16px; border-bottom: 1px solid var(--arka-plan-ucuncu); color: var(--metin-ana); font-size: var(--text-base); } /* .simple-table tr:hover { background: var(--arka-plan-ikincil); } */ .patient-info-cell { display: flex; align-items: center; gap: var(--spacing-md); } .patient-info-cell .patient-avatar img { width: 40px; height: 40px; object-fit: contain; } .patient-info-cell strong { color: var(--metin-ana); font-weight: 600; } .patient-info-cell small { color: var(--metin-ucuncu); font-size: var(--text-sm); } /* İmzalanan Onamlar Tablosu - Genişlik/Daralma düzeltmeleri */ .onam-sistemi-page .signed-consents-table { overflow-x: auto; } .onam-sistemi-page .signed-consents-table .simple-table { display: table !important; width: 100% !important; table-layout: auto; min-width: 960px; } .onam-sistemi-page .signed-consents-table .simple-table th:nth-child(1), .onam-sistemi-page .signed-consents-table .simple-table td:nth-child(1) { min-width: 140px; white-space: nowrap; } .onam-sistemi-page .signed-consents-table .simple-table th:nth-child(2), .onam-sistemi-page .signed-consents-table .simple-table td:nth-child(2) { min-width: 240px; } .onam-sistemi-page .signed-consents-table .simple-table th:nth-child(3), .onam-sistemi-page .signed-consents-table .simple-table td:nth-child(3) { min-width: 160px; white-space: nowrap; } .onam-sistemi-page .signed-consents-table .simple-table th:nth-child(4), .onam-sistemi-page .signed-consents-table .simple-table td:nth-child(4) { min-width: 170px; white-space: nowrap; } .onam-sistemi-page .signed-consents-table .simple-table th:nth-child(5), .onam-sistemi-page .signed-consents-table .simple-table td:nth-child(5) { min-width: 140px; white-space: nowrap; } .onam-sistemi-page .signed-consents-table .simple-table th:nth-child(6), .onam-sistemi-page .signed-consents-table .simple-table td:nth-child(6) { min-width: 160px; white-space: nowrap; } .onam-sistemi-page .signed-consents-table .action-buttons-right { display: flex; gap: var(--spacing-sm); } .type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .type-badge.surgery { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .type-badge.radiology { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } /* Patient Avatar - Hayvan İkonları */ .onam-sistemi-page .patient-avatar { width: 48px; height: 48px; /* border-radius: 50%; */ display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .onam-sistemi-page .patient-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Artık genel .action-buttons kullanılıyor */ .action-buttons .btn-small { border: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ana); color: var(--metin-ucuncu); } .action-buttons .btn-small:hover { background: var(--arka-plan-ikincil); color: var(--metin-ana); } /* Responsive Tasarım */ @media (max-width: 768px) { .tab-buttons { flex-direction: column; } .tab-btn { min-width: auto; justify-content: center; } .form-templates { grid-template-columns: 1fr; } .preview-content { grid-template-columns: 1fr; } .consent-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); } .consent-header { flex-direction: column; align-items: flex-start; gap: 12px; } .consent-header-content { flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; } .consent-info { min-width: auto; width: 100%; } .consent-patient-info { flex-direction: row; align-items: center; width: 100%; } .consent-actions { justify-content: center; } .step-actions { flex-direction: column; gap: var(--spacing-md); } .step-actions button { width: 100%; justify-content: center; } } /* Gönderim Yöntemi Seçenekleri */ .send-options { margin: 24px 0; padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); } .send-options h6 { margin: 0 0 16px 0; font-size: var(--text-base); font-weight: 600; color: #495057; } .send-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } .send-method-option { cursor: pointer; position: relative; } .send-method-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .method-card { display: flex; flex-direction: column; align-items: center; padding: 16px 20px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); transition: all 0.2s ease; min-width: 200px; } .method-card i { font-size: 24px; margin-bottom: 8px; color: var(--metin-dorduncu); } .method-card span { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); } .send-method-option input[type="radio"]:checked + .method-card { border-color: var(--ana-mavi); background: var(--kart-arka-plan-vurgu); } .send-method-option input[type="radio"]:checked + .method-card i { color: var(--ana-mavi); } .send-method-option input[type="radio"]:checked + .method-card span { color: var(--ana-mavi); font-weight: 600; } .send-method-option:hover .method-card { border-color: var(--kenarlik-ana); transform: translateY(-2px); box-shadow: 0 4px 12px var(--kenarlik-seffaf-mavi); } /* #endregion */ /* #region Template Management Styles */ .template-management { margin-bottom: 24px; } .template-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .template-header h4 { margin: 0; color: var(--metin-ana); font-size: 18px; font-weight: 600; } .template-actions { display: flex; gap: var(--spacing-sm); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kenarlik-ana); } .template-actions .btn-sm { padding: 6px 12px; font-size: var(--text-sm); border-radius: var(--radius-md); flex: 1; justify-content: center; } .template-actions .btn-sm i { margin-right: 4px; } /* File Upload Styles */ .file-upload-area { border: 2px dashed #cbd5e0; border-radius: var(--radius-lg); padding: 32px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: var(--arka-plan-ana); } .file-upload-area:hover { border-color: var(--kenarlik-ana); background: var(--durum-bilgi-acik); } .file-upload-area i { font-size: 32px; color: #a0aec0; margin-bottom: 12px; } .file-upload-area p { margin: 0; color: var(--metin-ucuncu); font-size: var(--text-base); } .file-info { display: flex; align-items: center; gap: var(--spacing-md); padding: 12px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); /* margin-top: 8px; */ } .file-info i { color: #2b6cb0; font-size: 20px; } .file-info span { flex: 1; color: var(--metin-ana); font-weight: 500; } .file-info button { background: none; border: none; color: #e53e3e; cursor: pointer; padding: 4px; border-radius: 4px; transition: background 0.2s ease; } .file-info button:hover { background: var(--durum-hata-acik); } /* Bu stil yeni modal sistemi ile değiştirildi */ .template-preview { max-height: 500px; overflow-y: auto; /* border: 1px solid #e2e8f0; */ border-radius: var(--radius-lg); padding: 20px; background: var(--kart-arka-plan); } .template-preview h4 { color: var(--metin-ana); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ana-mavi); } .template-preview p { color: var(--metin-ana); line-height: 1.6; margin-bottom: 12px; } .template-preview ul { margin: 12px 0; padding-left: 20px; } .template-preview li { color: var(--metin-ana); margin-bottom: 8px; } /* Form Group Styles */ /* .form-group { margin-bottom: 15px; } */ /* Bu stil ana .form-group label ile birleştirildi */ /* Form group stilleri global input stillerini kullanıyor - gereksiz tekrar kaldırıldı */ /* Template Name in Consent Items */ .template-name { color: var(--durum-bilgi-metin); font-size: var(--text-base); font-weight: 600; margin: 4px 0; background: var(--durum-bilgi-acik); padding: 4px 8px; border-radius: var(--radius-md); display: inline-block; border-left: 3px solid var(--ana-mavi); } /* Send Method in Consent Items */ .consent-item .send-method { display: flex; align-items: center; gap: var(--spacing-sm); padding: 8px 12px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: 13px; font-weight: 500; color: var(--metin-ana); transition: all 0.2s ease; cursor: default; } /* .consent-item .send-method:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-ana); } */ .consent-item .send-method i { font-size: 16px; width: 20px; text-align: center; } /* SMS Method */ .consent-item .send-method i.fa-sms { color: var(--durum-basarili-koyu); } /* Email Method */ .consent-item .send-method i.fa-envelope { color: var(--durum-hata-koyu); } /* WhatsApp Method */ .consent-item .send-method i.fa-whatsapp { color: var(--durum-basarili); } /* Send Method Text */ .consent-item .send-method span { font-weight: 600; letter-spacing: 0.025em; } /* Consent Document Styles */ .consent-document { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--metin-ana); } .consent-document .consent-header { text-align: center; border-bottom: 2px solid var(--ana-mavi); padding-bottom: 20px; margin-bottom: 30px; } .consent-document .consent-header h2 { color: var(--durum-bilgi-metin); font-size: 24px; margin: 0 0 15px 0; font-weight: 700; } .consent-document .document-info { display: flex; justify-content: center; gap: 30px; font-size: var(--text-base); color: var(--metin-ucuncu); } .consent-document .consent-body { margin-bottom: 30px; } .consent-document .patient-section, .consent-document .owner-section, .consent-document .consent-content, .consent-document .signature-section { margin-bottom: 25px; padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border-left: 4px solid var(--ana-mavi); } .consent-document h3 { color: var(--durum-bilgi-metin); font-size: 18px; margin: 0 0 15px 0; font-weight: 600; border-bottom: 1px solid var(--kenarlik-ana); padding-bottom: 8px; } .consent-document .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); margin-top: 10px; } .consent-document .info-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--kenarlik-ana); min-height: 40px; } .consent-document .info-item strong { color: var(--metin-ana); font-weight: 600; min-width: 100px; flex-shrink: 0; margin-right: 15px; } .consent-document .consent-text { background: var(--arka-plan-ana); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); font-size: var(--text-base); line-height: 1.8; } .consent-document .consent-text h4 { color: var(--durum-bilgi-metin); margin: 20px 0 10px 0; font-size: 16px; } .consent-document .consent-text h5 { color: var(--metin-ana); margin: 15px 0 8px 0; font-size: var(--text-base); } .consent-document .consent-text ul { margin: 10px 0; padding-left: 20px; } .consent-document .consent-text li { margin-bottom: 5px; color: var(--metin-ana); } .consent-document .signature-section { background: var(--durum-uyari-acik); border-left-color: var(--ana-sari); } .consent-document .signature-line { display: flex; justify-content: space-between; margin-top: 20px; font-size: var(--text-base); font-weight: 500; } .consent-document .signature-line p { margin: 0; min-width: 200px; } /* Responsive Design for Consent Document */ @media (max-width: 768px) { .consent-document .info-grid { grid-template-columns: 1fr; gap: 15px; } .consent-document .info-item { flex-direction: column; align-items: flex-start; gap: 5px; } .consent-document .info-item strong { margin-right: 0; margin-bottom: 5px; } .consent-document .document-info { flex-direction: column; gap: 10px; } .consent-document .signature-line { flex-direction: column; gap: 15px; } } /* #endregion */ /* #region Stok Geçmişi Modal Stilleri */ .history-timeline { max-height: 400px; overflow-y: auto; padding: 20px; } .history-item { display: flex; align-items: flex-start; margin-bottom: 20px; position: relative; padding-left: 40px; } .history-item:not(:last-child)::before { content: ''; position: absolute; left: 20px; top: 40px; bottom: -20px; width: 2px; background: var(--arka-plan-dorduncu); } .history-icon { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--arka-plan-ana); z-index: 2; } .history-item.entry .history-icon { background: var(--durum-basarili); } .history-item.exit .history-icon { background: var(--durum-hata); } .history-item.return .history-icon { background: var(--durum-uyari); } .history-item.adjustment .history-icon { background: var(--ana-mor); } .history-content { flex: 1; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); padding: 16px; border-left: 4px solid var(--arka-plan-dorduncu); margin-left: 10px; } .history-item.entry .history-content { border-left-color: var(--ana-yesil); } .history-item.exit .history-content { border-left-color: var(--ana-kirmizi); } .history-item.return .history-content { border-left-color: var(--ana-sari); } .history-item.adjustment .history-content { border-left-color: #6366f1; } .history-content h4 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .history-content p { margin: 0 0 8px 0; font-size: var(--text-base); color: var(--metin-ucuncu); line-height: 1.5; } .history-date { font-size: var(--text-sm); color: var(--metin-dorduncu); font-weight: 500; } .history-item:hover .history-content { background: var(--arka-plan-ucuncu); transition: all 0.2s ease; } /* Stok Geçmişi Modal Özel Stilleri */ /* Bu stil yeni modal sistemi ile değiştirildi */ /* #stockHistoryModal .modal-header { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); color: var(--arka-plan-ana); border-radius: 16px 16px 0 0; } #stockHistoryModal .modal-header h3 { color: var(--arka-plan-ana); margin: 0; font-weight: 600; } #stockHistoryModal .modal-header .modal-close { color: var(--arka-plan-ana); background: rgba(255, 255, 255, 0.2); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } #stockHistoryModal .modal-header .modal-close:hover { background: rgba(255, 255, 255, 0.3); } */ #stockHistoryModal .modal-body { padding: 24px; max-height: 60vh; overflow-y: auto; } #stockHistoryModal .modal-footer { background: var(--arka-plan-ikincil); border-top: 1px solid var(--kenarlik-ana); border-radius: 0 0 16px 16px; } /* Boş Geçmiş Durumu */ .history-empty { text-align: center; padding: 40px 20px; color: var(--metin-ucuncu); } .history-empty i { font-size: 48px; margin-bottom: 16px; color: #d1d5db; } .history-empty h4 { margin: 0 0 8px 0; color: var(--metin-ana); } .history-empty p { margin: 0; font-size: var(--text-base); } /* #endregion */ /* #region Barkod Modal Stilleri */ .barcode-preview { margin-top: 20px; padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .barcode-preview h4 { margin: 0 0 15px 0; color: var(--metin-ana); font-size: 16px; } .barcode-display { text-align: center; background: var(--arka-plan-ana); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); } .barcode-lines { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; height: 40px; } .barcode-line { width: 3px; height: 30px; background: var(--metin-siyah); margin: 0 1px; border-radius: 1px; } .barcode-line:nth-child(odd) { height: 25px; } .barcode-line:nth-child(even) { height: 35px; } .barcode-text { /* font-family: 'Courier New', monospace; */ font-family: 'Inter', sans-serif; font-size: var(--text-base); font-weight: bold; color: var(--metin-ana); letter-spacing: 2px; } /* Barkod Modal Özel Stilleri - Standart modal stillerini kullanıyor */ /* #endregion */ /* #region Barkod Tarama Modal Stilleri */ .barcode-scanner-container { display: flex; flex-direction: column; gap: var(--spacing-xl); margin-bottom: 20px; } .scanner-section { flex: 1; } .scanner-video-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--arka-plan-ikincil); border: 2px solid var(--kenarlik-ana); } .scanner-video-container video { width: 100%; height: 300px; object-fit: cover; display: block; } .scanner-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); color: var(--metin-beyaz) } .scanner-frame { width: 200px; height: 100px; /* border: 2px solid var(--ana-yesil); */ border-radius: var(--radius-lg); position: relative; margin-bottom: 20px; } .scanner-frame::before, .scanner-frame::after { content: ''; position: absolute; width: 20px; height: 20px; border: 3px solid var(--ana-yesil); } .scanner-frame::before { top: -3px; left: -3px; border-right: none; border-bottom: none; } .scanner-frame::after { bottom: -3px; right: -3px; border-left: none; border-top: none; } .scanner-instruction { margin: 0; font-size: var(--text-base); text-align: center; background: rgba(0, 0, 0, 0.7); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-3xl); } .scanner-controls { display: flex; gap: 10px; margin-top: 15px; justify-content: center; } .scanned-results { flex: 1; /* max-width: 400px; */ } .scanned-results h4 { margin: 0 0 15px 0; color: var(--metin-ana); font-size: 16px; } .scanned-products-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); background: var(--arka-plan-ikincil); } .scanned-product-item { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid var(--kenarlik-ana); gap: 15px; } .scanned-product-item:last-child { border-bottom: none; } .scanned-product-item .product-info { flex: 1; } .scanned-product-item .product-info h5 { margin: 0 0 5px 0; color: var(--metin-ana); font-size: var(--text-base); } .scanned-product-item .product-code { margin: 0 0 3px 0; color: var(--metin-ikincil); font-size: var(--text-sm); } .scanned-product-item .product-barcode { margin: 0; color: var(--metin-ucuncu); font-size: var(--text-sm); font-family: 'Courier New', monospace; } .scanned-product-item .product-quantity { display: flex; flex-direction: column; align-items: center; min-width: 60px; background-color: var(--ana-yesil); color: var(--metin-beyaz); } .scanned-product-item .quantity { font-size: 18px; font-weight: 600; /* color: var(--ana-yesil); */ } .scanned-product-item .unit { font-size: 11px; color: var(--metin-beyaz); } .scanned-product-item .product-actions { display: flex; gap: 5px; } /* .no-products { text-align: center; color: var(--metin-ikincil); font-style: italic; padding: 20px; margin: 0; } */ .manual-barcode-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--kenarlik-ana); } .manual-barcode-section h4 { margin: 0 0 15px 0; color: var(--metin-ana); font-size: 16px; } .manual-barcode-section .form-group { display: flex; flex-direction: row; gap: 10px; align-items: center; } .manual-barcode-section input { flex: 1; padding: 10px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: var(--text-base); } .manual-barcode-section input:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } /* Barkod Tarama Modal Özel Stilleri */ /* Bu stil yeni modal sistemi ile değiştirildi */ /* #barcodeScannerModal .modal-header { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--durum-basarili-koyu) 100%); color: var(--arka-plan-ana); } */ /* #barcodeScannerModal .modal-header h3 { color: var(--arka-plan-ana); margin: 0; } */ /* #barcodeScannerModal .modal-header .modal-close { color: var(--arka-plan-ana); background: rgba(255, 255, 255, 0.2); } #barcodeScannerModal .modal-header .modal-close:hover { background: rgba(255, 255, 255, 0.3); } */ #barcodeScannerModal .btn-success { background: var(--ana-yesil); color: var(--arka-plan-ana); border: none; padding: 10px 20px; border-radius: var(--radius-md); font-weight: 500; cursor: pointer; transition: all 0.3s ease; } /* .btn-success ortak stillerden miras alınır */ #barcodeScannerModal .btn-sm { padding: 6px 10px; font-size: var(--text-sm); border-radius: 4px; } /* Responsive tasarım */ @media (max-width: 768px) { .barcode-scanner-container { flex-direction: column; } .scanned-results { max-width: none; } .scanner-video-container video { height: 250px; } .scanner-controls { flex-wrap: wrap; } } /* #endregion */ /* #region E-Fatura Modal Stilleri */ .e-invoice-container { display: flex; flex-direction: column; gap: 25px; } .e-invoice-section { background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 20px; } .e-invoice-section h4 { margin: 0 0 15px 0; color: var(--metin-ana); font-size: 16px; font-weight: 600; } .invoice-selection { margin-top: 15px; } .selection-controls { display: flex; gap: 10px; margin-bottom: 15px; } .invoice-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); background: var(--arka-plan-ana); } .invoice-selection-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid var(--kenarlik-ana); gap: 15px; transition: all 0.3s ease; } .invoice-selection-item:last-child { border-bottom: none; } .invoice-selection-item:hover { background: var(--arka-plan-ikincil); } .invoice-selection-item.selected { background: rgba(59, 130, 246, 0.1); border-left: 3px solid var(--ana-mavi); } .invoice-checkbox { display: flex; align-items: center; } .invoice-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; } .invoice-checkbox label { margin-left: 8px; cursor: pointer; font-size: var(--text-base); color: var(--metin-ana); } /* .invoice-info { flex: 1; } */ .invoice-number { font-weight: 600; color: var(--metin-ana); font-size: var(--text-base); margin-bottom: 3px; } .invoice-customer { color: var(--metin-ikincil); font-size: 13px; margin-bottom: 2px; } .invoice-date { color: var(--metin-ucuncu); font-size: var(--text-sm); } .invoice-amount { font-weight: 600; color: var(--ana-yesil); font-size: 16px; min-width: 80px; text-align: right; } .invoice-status { min-width: 100px; text-align: center; } .status-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } .status-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: var(--arka-plan-ana); border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); } .status-label { color: var(--metin-ikincil); font-size: var(--text-base); } .status-value { font-weight: 600; font-size: var(--text-base); } .status-value.ready { color: var(--ana-yesil); } .status-value.warning { color: var(--durum-uyari-koyu); } .status-progress { margin-bottom: 20px; } .progress-bar { width: 100%; height: 8px; background: var(--arka-plan-ikincil); border-radius: 4px; overflow: hidden; margin-bottom: 10px; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--ana-mavi), var(--ana-yesil)); transition: width 0.3s ease; } .invoice-results { margin-top: 20px; } .results-header h4 { margin: 0 0 15px 0; color: var(--metin-ana); font-size: 16px; } .results-list { display: flex; flex-direction: column; gap: 10px; } .result-item { display: flex; align-items: center; padding: 12px; border-radius: var(--radius-md); gap: var(--spacing-md); } .result-item.success { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); } .result-item.error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); } .result-icon { font-size: 18px; } .result-item.success .result-icon { color: var(--ana-yesil); } .result-item.error .result-icon { color: var(--durum-hata-koyu); } .result-info { flex: 1; } .result-invoice { font-weight: 600; color: var(--metin-ana); font-size: var(--text-base); margin-bottom: 2px; } .result-message { color: var(--metin-ikincil); font-size: 13px; margin-bottom: 2px; } .result-einvoice { color: var(--metin-ucuncu); font-size: var(--text-sm); font-family: 'Courier New', monospace; } /* E-Fatura Modal Özel Stilleri */ /* Bu stil yeni modal sistemi ile değiştirildi */ /* #eInvoiceModal .modal-header { background: linear-gradient(135deg, var(--durum-basarili-koyu) 0%, var(--ana-mavi) 100%); color: var(--arka-plan-ana); } #eInvoiceModal .modal-header h3 { color: var(--arka-plan-ana); margin: 0; } #eInvoiceModal .modal-header .modal-close { color: var(--arka-plan-ana); background: rgba(255, 255, 255, 0.2); } #eInvoiceModal .modal-header .modal-close:hover { background: rgba(255, 255, 255, 0.3); } */ /* Bu stil yeni modal sistemi ile değiştirildi */ /* #eInvoiceStatusModal .modal-header { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--durum-basarili-koyu) 100%); color: var(--arka-plan-ana); } #eInvoiceStatusModal .modal-header h3 { color: var(--arka-plan-ana); margin: 0; } #eInvoiceStatusModal .modal-header .modal-close { color: var(--arka-plan-ana); background: rgba(255, 255, 255, 0.2); } #eInvoiceStatusModal .modal-header .modal-close:hover { background: rgba(255, 255, 255, 0.3); } */ /* Responsive tasarım */ @media (max-width: 768px) { .e-invoice-container { gap: 15px; } .e-invoice-section { padding: 15px; } .invoice-selection-item { flex-direction: column; align-items: flex-start; gap: 10px; } .invoice-amount { text-align: left; min-width: auto; } .status-summary { grid-template-columns: 1fr; } .selection-controls { flex-wrap: wrap; } } /* #endregion */ /* #region Bulk Actions Stilleri */ .bulk-actions { background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 16px 20px; margin: 20px 0; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px var(--golge-ana); transition: all 0.3s ease; gap: 5px; } .bulk-info { display: flex; align-items: center; gap: 6px; margin-right: 16px; } .bulk-count { font-weight: 600; color: var(--metin-ana); font-size: 18px; margin-right: 10px; } .bulk-info .btn-text { background: var(--durum-bilgi-acik); border: none; color: var(--ana-mavi); font-size: var(--text-base); font-weight: 500; cursor: pointer; padding: 8px; border-radius: 4px; transition: background-color 0.2s ease; } .bulk-info .btn-text:hover { background: var(--ana-mor-cok-acik); color: #4f46e5; } .bulk-buttons { display: flex; gap: var(--spacing-md); align-items: center; } .bulk-buttons .btn-outline { padding: var(--spacing-sm) var(--spacing-lg); font-size: 13px; font-weight: 500; border-radius: var(--radius-md); display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .bulk-buttons .btn-outline.warning { color: var(--durum-hata-koyu); border-color: var(--kenarlik-ana); } .bulk-buttons .btn-outline.warning:hover { background: var(--durum-hata-acik); border-color: var(--durum-hata-acik); color: var(--durum-hata-daha-koyu); } /* Checkbox Stilleri */ .product-checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .product-checkbox-wrapper input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } .product-checkbox-wrapper .checkmark { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 4px; background: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; cursor: pointer; } .product-checkbox-wrapper:hover .checkmark { border-color: var(--ana-mor); box-shadow: 0 0 0 2px var(--golge-odak); } .product-checkbox-wrapper input[type="checkbox"]:checked + .checkmark { background: var(--ana-mor); border-color: var(--ana-mor); } .product-checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 1; transform: scale(1); transition: all 0.2s ease; } .product-checkbox-wrapper .checkmark::after { content: '✓'; color: var(--metin-beyaz); font-size: var(--text-sm); font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.2s ease; } /* Bulk Actions Animasyon */ .bulk-actions.show { animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Bulk Actions */ @media (max-width: 768px) { .bulk-actions { flex-direction: column; gap: var(--spacing-lg); align-items: stretch; } .bulk-info { justify-content: center; } .bulk-buttons { flex-wrap: wrap; justify-content: center; } .bulk-buttons .btn-outline { flex: 1; min-width: 120px; justify-content: center; } } /* #endregion */ /* #region Hukuki Destek Modal Stilleri */ /* Detaylar Gör Modal */ .request-details-content { max-height: 70vh; overflow-y: auto; } /* Bu stil genel .detail-section ile birleştirildi */ .detail-section h4 { color: var(--metin-ana); font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } /* .detail-section h4::before { content: ''; width: 4px; height: 20px; background: linear-gradient(135deg, var(--ana-mavi), var(--ana-mavi-daha-koyu)); border-radius: 2px; } */ .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .detail-description { background: var(--arka-plan-ikincil); padding: 1rem; border-radius: var(--radius-lg); border-left: 4px solid var(--ana-mavi); } .detail-description p { margin: 0; line-height: 1.6; color: var(--metin-ana); } .lawyer-detail { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .lawyer-detail .lawyer-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 3px solid var(--vurgu-platin); } .lawyer-detail .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .lawyer-detail .lawyer-info h5 { margin: 0 0 0.25rem 0; color: var(--metin-ana); font-size: 1rem; } .lawyer-detail .lawyer-info p { margin: 0 0 0.5rem 0; color: var(--metin-ucuncu); font-size: 0.875rem; } .lawyer-detail .lawyer-status { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-xl); font-weight: 500; } .lawyer-detail .lawyer-status.online { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .lawyer-detail .lawyer-status.busy { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .timeline-detail { display: flex; flex-direction: column; gap: 1rem; } .timeline-detail .timeline-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: var(--radius-lg); background: var(--arka-plan-ikincil); border-left: 4px solid var(--vurgu-platin); } .timeline-detail .timeline-item.completed { border-left-color: var(--ana-yesil); background: var(--durum-basarili-acik); } .timeline-detail .timeline-item.active { border-left-color: var(--ana-mavi); background: var(--durum-bilgi-acik); } .timeline-detail .timeline-item.pending { border-left-color: var(--ana-sari); background: var(--durum-uyari-acik); } .timeline-detail .timeline-item i { width: 20px; text-align: center; color: var(--metin-ucuncu); } .timeline-detail .timeline-item.completed i { color: var(--ana-yesil); } .timeline-detail .timeline-item.active i { color: var(--ana-mavi); } .timeline-detail .timeline-item.pending i { color: var(--ana-sari); } .timeline-detail .timeline-item span { flex: 1; color: var(--metin-ana); font-weight: 500; } .timeline-detail .timeline-item time { color: var(--metin-ucuncu); font-size: 0.875rem; font-weight: 500; } /* Avukatla Görüş Modal */ .lawyer-contact-info { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; background: linear-gradient(135deg, var(--arka-plan-ikincil), #f1f5f9); border-radius: var(--radius-xl); margin-bottom: 2rem; border: 1px solid var(--kenarlik-ana); } .lawyer-contact-info .lawyer-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 4px solid var(--kenarlik-ana); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .lawyer-contact-info .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .lawyer-contact-info .lawyer-details h4 { margin: 0 0 0.5rem 0; color: var(--metin-ana); font-size: 1.25rem; font-weight: 600; } /* .lawyer-contact-info .lawyer-details p { margin: 0 0 0.5rem 0; color: var(--metin-ucuncu); font-size: 0.875rem; } */ .contact-options { display: flex; flex-direction: column; gap: 1rem; } .contact-option { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); transition: all 0.2s ease; } .contact-option:hover { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ana); transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .contact-option i { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ana-mavi), var(--ana-mavi-daha-koyu)); color: var(--arka-plan-ana); border-radius: 10px; font-size: 1.1rem; } .contact-option .option-info { flex: 1; } .contact-option .option-info h5 { margin: 0 0 0.25rem 0; color: var(--metin-ana); font-size: 1rem; font-weight: 600; } .contact-option .option-info p { margin: 0 0 0.5rem 0; color: var(--metin-ucuncu); font-size: 0.875rem; line-height: 1.4; } .contact-option .phone-number, .contact-option .email-address, .contact-option .meeting-time { color: var(--ana-mavi); font-weight: 500; font-size: 0.875rem; } /* Belge Gönder Modal */ .upload-section { margin-bottom: 2rem; } .upload-section h4 { color: var(--metin-ana); font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .upload-section h4::before { content: ''; width: 4px; height: 20px; background: linear-gradient(135deg, var(--ana-yesil), var(--durum-basarili-koyu)); border-radius: 2px; } .file-upload-area { position: relative; border: 2px dashed var(--kenarlik-ana); border-radius: var(--radius-xl); padding: 2rem; text-align: center; background: var(--arka-plan-ikincil); transition: all 0.2s ease; cursor: pointer; } .file-upload-area:hover { border-color: var(--kenarlik-ana); background: var(--durum-bilgi-acik); } .file-upload-area input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .file-upload-text { pointer-events: none; } .file-upload-text i { font-size: 3rem; color: var(--metin-dorduncu); margin-bottom: 1rem; } .file-upload-text p { margin: 0 0 0.5rem 0; color: var(--metin-ana); font-weight: 500; font-size: 1.1rem; } .file-upload-text span { color: var(--metin-ucuncu); font-size: 0.875rem; } .uploaded-files { background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 1rem; } .uploaded-files h4 { margin: 0 0 1rem 0; color: var(--metin-ana); font-size: 1rem; font-weight: 600; } .files-list { display: flex; flex-direction: column; gap: 0.5rem; } .file-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); } .file-item .file-info { display: flex; align-items: center; gap: 0.75rem; } .file-item .file-info i { color: var(--ana-mavi); font-size: 1.1rem; } .file-item .file-info span { color: var(--metin-ana); font-weight: 500; } .file-item .file-size { color: var(--metin-ucuncu); font-size: 0.875rem; font-weight: normal; } /* Not Ekle Modal */ .note-form { display: flex; flex-direction: column; gap: 1.5rem; } .note-form .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .note-form label { color: var(--metin-ana); font-weight: 500; font-size: 0.875rem; } .note-form input, .note-form textarea, .note-form select { padding: 0.75rem; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); font-size: 0.875rem; transition: all 0.2s ease; } .note-form input:focus, .note-form textarea:focus, .note-form select:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .note-form textarea { resize: vertical; min-height: 100px; } /* Responsive Tasarım */ @media (max-width: 768px) { .detail-grid { grid-template-columns: 1fr; } .lawyer-detail { flex-direction: column; text-align: center; } .lawyer-contact-info { flex-direction: column; text-align: center; } .contact-option { flex-direction: column; text-align: center; } .contact-option .option-info { margin-bottom: 1rem; } } /* #endregion */ /* #region Hukuki Destek Sekme Stilleri */ .legal-tabs { display: flex; /* gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid #e5e7eb; padding-bottom: 0; */ } .legal-tab-btn { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; background: none; border: none; border-bottom: 3px solid transparent; color: var(--metin-ucuncu); font-weight: 500; font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; position: relative; white-space: nowrap; } .legal-tab-btn:hover { color: var(--metin-ana); background: var(--arka-plan-ikincil); border-radius: 8px 8px 0 0; } .legal-tab-btn.active { color: var(--ana-mavi); border-bottom-color: var(--ana-mavi); background: var(--durum-bilgi-acik); border-radius: 8px 8px 0 0; } .legal-tab-btn i { font-size: 1rem; width: 16px; text-align: center; } .legal-tab-btn span:first-of-type { font-weight: 600; } .tab-badge { background: var(--arka-plan-dorduncu); color: var(--metin-ucuncu); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: var(--radius-xl); min-width: 20px; text-align: center; transition: all 0.2s ease; } .legal-tab-btn.active .tab-badge { background: var(--ana-mavi); color: var(--arka-plan-ana); } .legal-tab-btn:hover .tab-badge { background: var(--arka-plan-besinci); /* color: #374151; */ } .legal-tab-btn.active:hover .tab-badge { background: var(--ana-mavi-daha-koyu); } .legal-tab-content { display: none; animation: fadeIn 0.3s ease-in-out; } .legal-tab-content.active { display: block !important; visibility: visible; opacity: 1; height: auto; overflow: visible; } /* Mobile responsive for tabs */ @media (max-width: 768px) { .legal-tab-content { display: none !important; } .legal-tab-content.active { display: block !important; width: 100%; padding: var(--spacing-md); } } .no-data-message { text-align: center; padding: 40px 20px; color: var(--metin-ucuncu); font-size: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); margin: 20px 0; border: 2px dashed var(--kenarlik-ana); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Reddedilen dosyalar için özel stiller */ .legal-request-card.rejected { border-left: 4px solid var(--ana-kirmizi); background: linear-gradient(135deg, var(--durum-hata-acik), var(--metin-beyaz)fff); } .legal-request-card.rejected .request-header { background: var(--durum-hata-acik); padding: 20px; } .legal-request-card.rejected .status-indicator.danger { background: var(--kart-arka-plan); color: var(--durum-hata-koyu); /* border: 1px solid var(--kenarlik-ana); */ } .legal-request-card.rejected .request-type { color: var(--durum-hata-koyu); } .legal-request-card.rejected .request-type i { color: var(--durum-hata-koyu); } .result-badge.danger { background: var(--durum-hata-acik); color: var(--durum-hata-koyu); border: 1px solid var(--kenarlik-ana); padding: 0.5rem 1rem; border-radius: var(--radius-lg); display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.875rem; } .result-badge.success { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); border: 1px solid var(--kenarlik-ana); padding: 0.5rem 1rem; border-radius: var(--radius-lg); display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.875rem; } .request-result { margin: 1rem 0; padding: 1rem; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .result-summary { margin: 0.75rem 0 0 0; color: var(--metin-ana); line-height: 1.6; font-size: 0.875rem; } /* Responsive tasarım */ @media (max-width: 768px) { .legal-tabs { flex-direction: column; gap: 0; border-bottom: none; } .legal-tab-btn { border-bottom: 1px solid var(--kenarlik-ana); border-radius: 0; justify-content: space-between; padding: 1rem; } .legal-tab-btn.active { border-bottom-color: var(--ana-mavi); background: var(--durum-bilgi-acik); border-radius: 0; } .legal-tab-btn:hover { border-radius: 0; } } @media (max-width: 480px) { .legal-tab-btn { font-size: 16px; } .legal-tab-btn i { font-size: 0.875rem; } /* .tab-badge { font-size: 0.7rem; padding: 0.2rem 0.4rem; } */ } /* #endregion */ /* #region Modal Scroll Fix - Modal açıldığında scroll'u engelleme */ /* Modal açıldığında body'yi sabitleyerek arka planda scroll'u engeller */ body.modal-open { position: fixed !important; width: 100% !important; overflow: hidden !important; } /* Modal açıldığında scroll pozisyonunu korur */ body.modal-open-scroll-fix { position: fixed !important; width: 100% !important; top: 0 !important; left: 0 !important; right: 0 !important; } /* Modal overlay'lerin scroll'u engellemesi - Ana modal stilinde zaten var */ /* Modal içeriğindeki scroll'ları kaldır */ .modal .card-body, .modal .modal-body { /* overflow: visible !important; */ max-height: none !important; } .modal .table-responsive, .modal .scrollable-content { max-height: 60vh; overflow-y: auto; } /* #endregion */ /* #region Hukuki Destek Modal Stilleri */ .legal-modal .request-detail-info { max-height: 70vh; overflow-y: auto; } /* Bu stil genel .legal-modal .detail-section ile birleştirildi */ .legal-modal .detail-section h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: var(--spacing-sm); } /* .legal-modal .detail-section h4::before { content: ''; width: 4px; height: 16px; background: var(--ana-mavi); border-radius: 2px; } */ .legal-modal .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); } .legal-modal .detail-label { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; } .legal-modal .detail-value { font-size: var(--text-base); font-weight: 500; color: var(--metin-ana); } .legal-modal .lawyer-detail-card { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .legal-modal .lawyer-detail-card .lawyer-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .legal-modal .lawyer-detail-card .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .legal-modal .lawyer-detail-card .lawyer-info h5 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .legal-modal .lawyer-detail-card .lawyer-info p { margin: 0 0 8px 0; font-size: var(--text-base); color: var(--metin-ucuncu); } .legal-modal .lawyer-contact-info { display: flex; align-items: center; gap: var(--spacing-lg); padding: 20px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); margin-bottom: 24px; } .legal-modal .lawyer-contact-info .lawyer-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .legal-modal .lawyer-contact-info .lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; } .legal-modal .lawyer-contact-info .lawyer-details h4 { margin: 0 0 4px 0; font-size: 18px; font-weight: 600; color: var(--metin-ana); } .legal-modal .lawyer-contact-info .lawyer-details p { margin: 0 0 8px 0; font-size: var(--text-base); color: var(--metin-ucuncu); } .legal-modal .contact-lawyer-name { font-size: 15px !important; font-weight: 600 !important; margin: 0 !important; } .legal-modal .contact-options { display: flex; flex-direction: column; gap: var(--spacing-lg); } .legal-modal .contact-option { display: flex; align-items: center; gap: var(--spacing-lg); padding: 16px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); transition: all 0.2s ease; } .legal-modal .contact-option:hover { border-color: var(--kenarlik-ana); box-shadow: 0 2px 8px var(--golge-mavi); } .legal-modal .contact-option i { font-size: var(--text-base); color: var(--ana-mavi); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--durum-bilgi-acik); border-radius: var(--radius-lg); flex-shrink: 0; } .legal-modal .contact-option .contact-info { flex: 1; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; } .legal-modal .contact-option .contact-info h5 { /* margin: 0 0 6px 0; */ font-size: 16px; font-weight: 600; color: var(--metin-ana); } .legal-modal .contact-option .contact-info p { margin: 0; font-size: var(--text-base); color: var(--metin-ucuncu); line-height: 1.4; } .legal-modal .contact-option button { padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--text-base); font-weight: 500; border-radius: var(--radius-md); border: none; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } /* Avukat ile İletişim Modal - Spesifik Buton Stilleri */ .legal-modal .contact-options .contact-option .btn-primary, .legal-modal .contact-options .contact-option .btn-secondary, .legal-modal .contact-options .contact-option .btn-outline { background: var(--ana-mavi) !important; color: var(--metin-beyaz) !important; border: none !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 6px !important; cursor: pointer !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .legal-modal .contact-options .contact-option .btn-primary:hover, .legal-modal .contact-options .contact-option .btn-secondary:hover, .legal-modal .contact-options .contact-option .btn-outline:hover { background: var(--ana-mavi) !important; /* transform: translateY(-1px) !important; */ box-shadow: none !important; } /* Request Status Styles */ .request-status.archived { background: var(--metin-ucuncu); color: var(--arka-plan-ana); } .request-status.appealed { background: var(--durum-uyari); color: var(--arka-plan-ana); } /* Appeal Form Styles */ .legal-modal .appeal-form { padding: 20px 0; } .legal-modal .appeal-form .form-group { margin-bottom: 20px; } .legal-modal .appeal-form .form-group label { margin-bottom: 8px; } .legal-modal .appeal-form .form-group .form-control { width: 100%; padding: 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: var(--text-base); transition: border-color 0.2s ease; } .legal-modal .appeal-form .form-group .form-control:focus { outline: none; border-color: var(--kenarlik-ana); box-shadow: 0 0 0 2px var(--golge-odak); } .legal-modal .appeal-form .form-group textarea.form-control { resize: vertical; min-height: 100px; } .legal-modal .appeal-form .form-group .form-text { font-size: var(--text-sm); color: var(--metin-ucuncu); margin-top: 4px; } .legal-modal .appeal-form .form-group input[readonly] { background-color: var(--arka-plan-ikincil); color: var(--metin-ucuncu); } .legal-modal .upload-form { display: flex; flex-direction: column; gap: var(--spacing-xl); } .legal-modal .upload-form .form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .legal-modal .upload-form .form-group label { font-size: var(--text-base); } /* Bu stiller global input stillerini kullanıyor */ .legal-modal .file-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); margin-bottom: 8px; } .legal-modal .file-item .file-info { display: flex; align-items: center; gap: var(--spacing-sm); flex: 1; } .legal-modal .file-item .file-info i { color: var(--ana-mavi); } .legal-modal .file-item .file-size { color: var(--metin-ucuncu); font-size: var(--text-sm); } .legal-modal .note-form { display: flex; flex-direction: column; gap: var(--spacing-xl); } .legal-modal .note-form .form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .legal-modal .note-form .form-group label { font-size: var(--text-base); } /* Bu stiller global input stillerini kullanıyor */ /* #endregion */ /* #endregion */ /* #region Report View Modal Styles */ /* Bu stil yeni modal sistemi ile değiştirildi */ .radyoloji-page .report-view-container { display: flex; flex-direction: column; gap: 1.5rem; } .radyoloji-page .report-patient-card { background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik); border-radius: var(--radius-lg); padding: 1rem; display: flex; flex-direction: column; gap: 1rem; } .radyoloji-page .report-patient-card .patient-info-header { display: flex; align-items: center; justify-content: space-between; /* gap: 1rem; */ width: 100%; } .radyoloji-page .report-patient-card .patient-info-wrapper { display: flex; align-items: center; gap: 1rem; } .radyoloji-page .report-patient-card .patient-avatar img { width: 56px; height: 56px; object-fit: contain; } .radyoloji-page .patient-avatar { width: 50px; height: 50px; background: var(--ana-mavi); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--metin-beyaz); font-weight: 600; flex-shrink: 0; } .radyoloji-page .patient-details { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .radyoloji-page .patient-details h4 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--metin-ana); } .radyoloji-page .patient-details p { margin: 0; color: var(--metin-ikincil); font-size: 0.85rem; } .radyoloji-page .patient-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; } .radyoloji-page .meta-tag { display: flex; align-items: center; gap: 0.5rem; color: var(--metin-ikincil); font-size: 0.85rem; } .radyoloji-page .meta-tag i { width: 16px; text-align: center; } .radyoloji-page .report-type-badge { background: var(--ana-mavi); color: var(--metin-beyaz); padding: 0.25rem 0.75rem; border-radius: var(--radius-3xl); font-size: 0.8rem; font-weight: 500; align-self: flex-start; } /* .radyoloji-page .report-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; } */ .radyoloji-page .report-section { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: 0 2px 4px var(--golge-ana); transition: all 0.2s ease; } .radyoloji-page .section-header { font-size: 1.1rem; font-weight: 700; color: var(--metin-ana); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--ana-mavi); display: flex; align-items: center; gap: 0.5rem; } /* .radyoloji-page .section-header::before { content: ''; width: 4px; height: 20px; background: var(--ana-mavi); border-radius: 2px; } */ .radyoloji-page .section-content { color: var(--metin-ikincil); line-height: 1.7; font-size: 0.95rem; text-align: justify; } .radyoloji-page .section-content p { margin: 0 0 0.75rem 0; } .radyoloji-page .section-content p:last-child { margin-bottom: 0; } /* Dark theme adjustments */ [data-theme="dark"] .radyoloji-page .report-patient-card { background: var(--arka-plan-ikincil); border-color: var(--kenarlik); } [data-theme="dark"] .radyoloji-page .patient-avatar { background: var(--ana-mavi); } [data-theme="dark"] .radyoloji-page .patient-details h4 { color: var(--metin-ana); } [data-theme="dark"] .radyoloji-page .patient-details p { color: var(--metin-ikincil); } [data-theme="dark"] .radyoloji-page .meta-tag { color: var(--metin-ikincil); } [data-theme="dark"] .radyoloji-page .report-section { background: var(--arka-plan-ikincil); border-color: var(--kenarlik); box-shadow: 0 2px 4px var(--golge-ucuncu); } [data-theme="dark"] .radyoloji-page .report-section:hover { box-shadow: 0 4px 8px var(--golge-dorduncu); } [data-theme="dark"] .radyoloji-page .section-header { color: var(--metin-ana); border-color: var(--kenarlik); } [data-theme="dark"] .radyoloji-page .section-content { color: var(--metin-ikincil); } /* Responsive design */ @media (max-width: 768px) { .radyoloji-page .report-content-grid { grid-template-columns: 1fr; } .radyoloji-page .report-patient-card { flex-direction: column; text-align: center; } .radyoloji-page .patient-meta { justify-content: center; } } /* #endregion */ /* Legal Modal Request Detail Info - Tek Kural */ .legal-modal .request-detail-info { max-height: 70vh; overflow-y: visible; } /* #region Stok Geçmişi Modal İçerik Stilleri */ #stockHistoryModal .product-info { background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 24px; border: 1px solid var(--kenarlik-ana); } #stockHistoryModal .product-details h4 { font-size: 18px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 12px; } #stockHistoryModal .product-details p { margin: 6px 0; color: var(--metin-ana); font-size: var(--text-base); flex-direction: row; align-items: flex-start; justify-content: flex-start; } #stockHistoryModal .product-details strong { color: var(--baslik-ana); font-weight: 600; margin-right: 4px; } #stockHistoryModal .history-section h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--kenarlik-ana); } #stockHistoryModal .history-table-container { background: var(--arka-plan-ana); border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); overflow: hidden; } #stockHistoryModal .history-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); } #stockHistoryModal .history-table thead { background: var(--arka-plan-ikincil); border-bottom: 2px solid var(--kenarlik-ana); } #stockHistoryModal .history-table th { padding: 16px 12px; text-align: left; font-weight: 600; color: var(--metin-ana); text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.5px; border-right: 1px solid var(--kenarlik-ana); } #stockHistoryModal .history-table th:last-child { border-right: none; } #stockHistoryModal .history-table tbody tr { border-bottom: 1px solid var(--arka-plan-ucuncu); transition: all 0.2s ease; } #stockHistoryModal .history-table tbody tr:hover { background: var(--arka-plan-ikincil); } #stockHistoryModal .history-table tbody tr:last-child { border-bottom: none; } #stockHistoryModal .history-table td { padding: 12px; color: var(--metin-ana); border-right: 1px solid var(--arka-plan-ucuncu); } #stockHistoryModal .history-table td:last-child { border-right: none; } #stockHistoryModal .history-table .positive { color: var(--durum-basarili-metin); font-weight: 600; } #stockHistoryModal .history-table .negative { color: var(--durum-hata-metin); font-weight: 600; } /* #region Kullanım Kaydı Modal Stilleri */ /* Bu stil yeni modal sistemi ile değiştirildi */ /* #usedProductModal .modal-header { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); color: var(--arka-plan-ana); border-radius: 16px 16px 0 0; } */ /* #usedProductModal .modal-header h3 { color: var(--arka-plan-ana); margin: 0; font-weight: 600; } #usedProductModal .modal-header .modal-close { color: var(--arka-plan-ana); background: rgba(255, 255, 255, 0.2); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } #usedProductModal .modal-header .modal-close:hover { background: rgba(255, 255, 255, 0.3); } */ #usedProductModal .modal-body { padding: 24px; max-height: 60vh; overflow-y: auto; } #usedProductModal .modal-footer { background: var(--arka-plan-ikincil); border-top: 1px solid var(--kenarlik-ana); border-radius: 0 0 16px 16px; } #usedProductModal .product-info { background: var(--arka-plan-ikincil); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 24px; border: 1px solid var(--kenarlik-ana); } #usedProductModal .product-details h4 { font-size: 18px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 12px; } #usedProductModal .product-details p { margin: 6px 0; color: var(--metin-ana); font-size: var(--text-base); } #usedProductModal .product-details strong { color: var(--baslik-ana); font-weight: 600; } #usedProductModal .form-section h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--kenarlik-ana); } /* #region SKT Geçmiş Ürün Modal Stilleri */ #expiredProductModal .modal-header.warning { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: var(--arka-plan-ana); } #expiredProductModal .warning-message { background: #fef2f2; border: 2px solid #fecaca; border-radius: var(--radius-xl); padding: 20px; margin-bottom: 24px; } #expiredProductModal .warning-content { display: flex; align-items: flex-start; gap: var(--spacing-lg); } #expiredProductModal .warning-content i { font-size: 24px; color: #dc2626; margin-top: 4px; } #expiredProductModal .warning-text h4 { color: #dc2626; margin: 0 0 8px 0; font-size: 18px; font-weight: 600; } #expiredProductModal .warning-text p { margin: 4px 0; color: #7f1d1d; font-size: var(--text-base); } #expiredProductModal .expired-date { color: #dc2626; font-weight: 600; text-decoration: line-through; } #expiredProductModal .expired-actions h4 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 16px; text-align: center; } #expiredProductModal .action-buttons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); margin-bottom: 24px; } #expiredProductModal .action-buttons-grid button { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; border: 2px solid transparent; border-radius: var(--radius-xl); background: var(--arka-plan-ikincil); color: var(--metin-ana); cursor: pointer; transition: all 0.3s ease; text-align: center; min-height: 120px; } #expiredProductModal .action-buttons-grid button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-ikincil); } #expiredProductModal .action-buttons-grid button i { font-size: 24px; margin-bottom: 8px; } #expiredProductModal .action-buttons-grid button span { font-size: var(--text-base); font-weight: 600; margin-bottom: 4px; } #expiredProductModal .action-buttons-grid button small { font-size: 11px; color: var(--metin-ucuncu); line-height: 1.3; } #expiredProductModal .action-buttons-grid .btn-warning { border-color: #d97706; color: #d97706; } #expiredProductModal .action-buttons-grid .btn-warning:hover { background: #d97706; color: var(--arka-plan-ana); } #expiredProductModal .action-buttons-grid .btn-info { border-color: #2563eb; color: #2563eb; } #expiredProductModal .action-buttons-grid .btn-info:hover { background: #2563eb; color: var(--arka-plan-ana); } #expiredProductModal .action-buttons-grid .btn-secondary { border-color: #6b7280; color: #6b7280; } #expiredProductModal .action-buttons-grid .btn-secondary:hover { background: #6b7280; color: var(--arka-plan-ana); } /* #endregion */ /* ======================================== SAYFA BAZLI PREFIX SİSTEMİ ======================================== */ /* ===== AYARLAR SAYFASI ===== */ /* Removed - same as main .btn-primary class */ /* .ayarlar-page .form-group { margin-bottom: var(--spacing-lg); } */ .ayarlar-page .card-base { border-left: 4px solid var(--ana-mavi); } /* ===== HASTALAR SAYFASI ===== */ .hastalar-page .patient-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .hastalar-page .patient-status { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-3xl); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .hastalar-page .patient-status.active { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } .hastalar-page .patient-status.warning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .hastalar-page .patient-status.danger { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .hastalar-page .patient-status.completed { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .hastalar-page .patient-status i { font-size: 8px; } .hastalar-page .patient-info { margin-bottom: 20px; } .hastalar-page .patient-info h3 { font-size: 22px; font-weight: 700; color: var(--baslik-ana); margin-bottom: 4px; } .hastalar-page .patient-info .breed { color: var(--metin-ucuncu); font-size: 15px; margin-bottom: 16px; font-weight: 500; } .hastalar-page .owner-info, .hastalar-page .contact-info { display: flex; align-items: center; flex-direction: row; gap: 10px; margin-bottom: 8px; } .hastalar-page .owner-info i, .hastalar-page .contact-info i { width: 16px; color: var(--metin-dorduncu); font-size: var(--text-base); } .hastalar-page .owner-info span, .hastalar-page .contact-info span { color: var(--metin-ana); font-size: var(--text-base); font-weight: 500; } .hastalar-page .patient-stats { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .hastalar-page .stat-item i { color: var(--metin-dorduncu); font-size: 13px; } .hastalar-page .stat-item span { color: var(--metin-ucuncu); font-size: 11px; font-weight: 500; } .hastalar-page .patient-actions { display: flex; gap: var(--spacing-sm); } .hastalar-page .patients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-2xl); margin-bottom: 32px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } .hastalar-page .patients-section { margin-bottom: 32px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } .hastalar-page .pagination { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); margin-top: 32px; } .hastalar-page .pagination-btn { width: 44px; height: 44px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); background: var(--arka-plan-ana); color: var(--metin-ana); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .hastalar-page .pagination-btn:hover:not(.disabled) { background: var(--arka-plan-ucincu); color: var(--metin-ana); border-color: var(--kenarlik-odak); } .hastalar-page .pagination-btn.disabled { opacity: 0.4; cursor: not-allowed; } .hastalar-page .pagination-info { color: var(--metin-ucincu); font-size: var(--text-base); font-weight: 500; } /* Responsive patients grid */ @media (max-width: 1024px) { .hastalar-page .patients-section { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .hastalar-page .patients-grid { grid-template-columns: repeat(2, 1fr) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; gap: var(--spacing-lg) !important; } .hastalar-page .patient-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } } @media (max-width: 768px) { .hastalar-page .patients-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); } } @media (max-width: 480px) { .hastalar-page .patients-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } } /* .hastalar-page .form-group { margin-bottom: var(--spacing-lg); } */ /* ===== FATURALAMA SAYFASI ===== */ .faturalama-page .invoice-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } #newInvoiceModal .btn-small.danger { height: 44px; } /* .faturalama-page .form-group { margin-bottom: var(--spacing-lg); } */ /* ===== STOK SAYFASI ===== */ .stok-page .stock-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } .stok-page .form-group { margin-bottom: var(--spacing-lg); } /* ===== TEDAVİLER SAYFASI ===== */ .tedaviler-page .treatment-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } .tedaviler-page .form-group { margin-bottom: var(--spacing-lg); } /* ===== RANDEVULAR SAYFASI ===== */ .randevular-page .appointment-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } .randevular-page .form-group { margin-bottom: var(--spacing-lg); } /* ===== RAPORLAR SAYFASI ===== */ .raporlar-page .report-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } .raporlar-page .form-group { margin-bottom: var(--spacing-lg); } /* .randevular-page .modal-footer { flex-direction: column; } */ /* ===== YATAN HASTALAR SAYFASI ===== */ .yatan-hastalar-page .inpatient-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } .yatan-hastalar-page .form-group { margin-bottom: var(--spacing-lg); } /* ===== RADYOLOJİ SAYFASI ===== */ .radyoloji-page .radiology-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } .radyoloji-page .form-group { margin-bottom: var(--spacing-lg); } /* ===== ONAM SİSTEMİ SAYFASI ===== */ .onam-sistemi-page .consent-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } .onam-sistemi-page .form-group { margin-bottom: var(--spacing-lg); } /* ===== HUKUKİ DESTEK SAYFASI ===== */ .hukuki-destek-page .legal-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } .hukuki-destek-page .form-group { margin-bottom: var(--spacing-lg); } /* Removed - same as main .btn-primary class */ /* ===== LOGİN SAYFASI ===== */ .login-page .login-card { border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-xl); background: var(--kart-arka-plan); } /* Removed - same as main .btn-primary class */ .login-page .form-group { margin-bottom: var(--spacing-lg); } /* ===== PERSONEL BİLGİ KARTI SİSTEMİ ===== */ /* Modifier info alanı - tıklanabilir */ .modifier-info { cursor: pointer; position: relative; display: flex; align-items: center; gap: 3px; padding: 1px 10px 1px 1px; background: var(--arka-plan-ikincil); border-radius: 200px; border: 1px solid var(--kenarlik-ikincil); transition: all 0.2s ease; } /* modifier-content kaldırıldı - artık kullanılmıyor */ .modifier-text { font-size: var(--text-xsplus); font-weight: 500; color: var(--metin-ikincil); margin-top: 1px; } .modifier-datetime { font-size: var(--text-xs); font-weight: 400; color: var(--metin-dorduncu); } /* Hover efekti kaldırıldı */ .modifier-avatar-small { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; border: 2px solid var(--kenarlik-ana); flex-shrink: 0; } .modifier-avatar-small img { width: 100%; height: 100%; object-fit: cover; } /* .modifier-text { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ikincil); } */ /* Personel bilgi kartı - tooltip benzeri */ .modifier-card { position: absolute; background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); box-shadow: var(--golge-ana) 0 8px 24px; padding: var(--spacing-lg); min-width: 280px; max-width: 320px; z-index: 10000; /* Pozisyon ayarları - JavaScript'ten dinamik olarak ayarlanıyor */ /* top: auto; */ /* left: auto; */ } /* Ok işareti kaldırıldı - ortada görünüyor */ /* Personel kartı içeriği */ .modifier-card-header { display: flex; align-items: center; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--kenarlik-ikincil); cursor: default; } .modifier-avatar { width: 48px; height: 48px; border-radius: 50%; margin-right: var(--spacing-md); overflow: hidden; border: 2px solid var(--kenarlik-ana); flex-shrink: 0; } .modifier-avatar img { width: 100%; height: 100%; object-fit: cover; } .modifier-basic-info h4 { /* margin: 0 0 var(--spacing-xs) 0; */ font-size: var(--text-lg); font-weight: 600; color: var(--baslik-ana); } .modifier-basic-info p { margin: 0; font-size: var(--text-sm); color: var(--metin-ikincil); font-weight: 500; } .modifier-details { display: flex; flex-direction: column; gap: var(--spacing-sm); } .modifier-detail-item { display: flex; align-items: center; font-size: var(--text-sm); cursor: default; } .modifier-detail-item i { width: 16px; margin-right: var(--spacing-sm); color: var(--metin-ucuncu); text-align: center; } .modifier-detail-item span { color: var(--metin-ikincil); } /* Dark tema uyumluluğu */ [data-theme="dark"] .modifier-card { background: var(--kart-arka-plan); border-color: var(--kenarlik-ana); box-shadow: var(--golge-ana) 0 8px 24px; } [data-theme="dark"] .modifier-card::after { border-top-color: var(--kart-arka-plan); } [data-theme="dark"] .modifier-card::before { border-top-color: var(--kenarlik-ana); } /* Responsive tasarım */ @media (max-width: 768px) { .modifier-card { min-width: 260px; max-width: 280px; padding: var(--spacing-md); } .modifier-avatar { width: 40px; height: 40px; } .modifier-basic-info h4 { font-size: var(--text-base); } } /* Animasyonlar */ @keyframes modifierCardFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(-4px); } } .modifier-card.show { animation: modifierCardFadeIn 0.3s ease-out; } /* #region Fatura Detay Modal Stilleri */ #invoiceDetailModal .invoice-detail-container { max-width: 100%; margin: 0 auto; } #invoiceDetailModal .invoice-detail-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; /* background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); */ background-color: var(--ana-mavi-daha-koyu); color: var(--metin-beyaz); border-radius: 12px; margin-bottom: 24px; } #invoiceDetailModal .invoice-header-left { display: flex; flex-direction: column; align-items: flex-start; color: var(--metin-beyaz) } #invoiceDetailModal .invoice-header-left h2 { margin: 0; font-size: 28px; font-weight: 700; color: var(--metin-beyaz) } #invoiceDetailModal .invoice-header-left p { margin: 5px 0; padding: 0; opacity: 0.9; color: var(--metin-beyaz); display: block; align-items: flex-start; } #invoiceDetailModal .invoice-header-right { text-align: right; } #invoiceDetailModal .invoice-amount-large { display: flex; flex-direction: column; align-items: flex-end; } #invoiceDetailModal .amount-label { font-size: 14px; opacity: 0.8; margin-bottom: 4px; color: var(--metin-beyaz) } #invoiceDetailModal .amount-value { font-size: 32px; font-weight: 700; color: var(--metin-beyaz) } #invoiceDetailModal .invoice-detail-section { margin-bottom: 32px; padding: 20px; background: var(--arka-plan-ikincil); border-radius: 12px; border: 1px solid var(--arka-plan-dorduncu); } #invoiceDetailModal .invoice-detail-section h4 { margin: 0 0 16px 0; color: var(--baslik-ana); font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; } #invoiceDetailModal .customer-info { display: flex; align-items: center; gap: 16px; } #invoiceDetailModal .customer-avatar { width: 60px; height: 60px; /* background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); */ /* border-radius: 50%; */ display: flex; align-items: center; justify-content: center; } #invoiceDetailModal .customer-avatar img { width: 40px; height: 40px; object-fit: contain; } #invoiceDetailModal .customer-details h5 { margin: 0 0 4px 0; font-size: 20px; font-weight: 600; color: var(--baslik-ana); } #invoiceDetailModal .customer-details p { margin: 2px 0; color: #718096; font-size: 14px; } #invoiceDetailModal .invoice-items-table { width: 100%; border-collapse: collapse; background: var(--metin-beyaz); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); } #invoiceDetailModal .invoice-items-table th { background: var(--arka-plan-ikincil); color: var(--metin-ikincil); font-weight: 600; padding: 16px; text-align: left; border-bottom: 2px solid var(--arka-plan-dorduncu); } #invoiceDetailModal .invoice-items-table td { padding: 16px; border-bottom: 1px solid var(--arka-plan-dorduncu); color: var(--baslik-ana); } #invoiceDetailModal .invoice-items-table tr:last-child td { border-bottom: none; } #invoiceDetailModal .payment-info-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } #invoiceDetailModal .payment-method, #invoiceDetailModal .payment-date, #invoiceDetailModal .payment-amount { display: flex; align-items: center; gap: 8px; padding: 16px; background: var(--metin-beyaz); border-radius: 8px; border: 1px solid var(--arka-plan-dorduncu); } #invoiceDetailModal .payment-method i, #invoiceDetailModal .payment-date i, #invoiceDetailModal .payment-amount i { color: var(--ana-mavi); font-size: 18px; } #invoiceDetailModal .invoice-notes { background: var(--metin-beyaz); padding: 16px; border-radius: 8px; border: 1px solid var(--arka-plan-dorduncu); } #invoiceDetailModal .invoice-notes p { margin: 0; color: #4a5568; line-height: 1.6; } /* Dark tema için fatura detay modal stilleri */ [data-theme="dark"] #invoiceDetailModal .invoice-detail-section { background: #2d3748; border-color: #4a5568; } [data-theme="dark"] #invoiceDetailModal .invoice-detail-section h4 { color: #e2e8f0; } [data-theme="dark"] #invoiceDetailModal .customer-details h5 { color: #e2e8f0; } [data-theme="dark"] #invoiceDetailModal .customer-details p { color: #a0aec0; } [data-theme="dark"] #invoiceDetailModal .invoice-items-table { background: #2d3748; } [data-theme="dark"] #invoiceDetailModal .invoice-items-table th { background: #4a5568; color: #e2e8f0; border-bottom-color: #718096; } [data-theme="dark"] #invoiceDetailModal .invoice-items-table td { color: #e2e8f0; border-bottom-color: #4a5568; } [data-theme="dark"] #invoiceDetailModal .payment-method, [data-theme="dark"] #invoiceDetailModal .payment-date, [data-theme="dark"] #invoiceDetailModal .payment-amount { background: #4a5568; border-color: #718096; } [data-theme="dark"] #invoiceDetailModal .invoice-notes { background: #4a5568; border-color: #718096; } [data-theme="dark"] #invoiceDetailModal .invoice-notes p { color: #a0aec0; } /* #region Geciken Ödemeler Modal Stilleri */ #urgentCollectionModal .urgent-collection-container, #finalNoticeModal .final-notice-container, #paymentPlanModal .payment-plan-container, #partialPaymentModal .partial-payment-container { max-width: 100%; } #urgentCollectionModal .alert, #finalNoticeModal .alert, #paymentPlanModal .alert, #partialPaymentModal .alert { padding: 16px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } #urgentCollectionModal .alert-warning, #finalNoticeModal .alert-warning, #paymentPlanModal .alert-warning, #partialPaymentModal .alert-warning { background: #fef3cd; border: 1px solid #fde68a; color: #92400e; } #urgentCollectionModal .alert-danger, #finalNoticeModal .alert-danger, #paymentPlanModal .alert-danger, #partialPaymentModal .alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; } #urgentCollectionModal .invoice-info-card, #finalNoticeModal .invoice-info-card, #paymentPlanModal .invoice-info-card, #partialPaymentModal .invoice-info-card { background: var(--arka-plan-ikincil); padding: 20px; border-radius: 8px; border: 1px solid var(--arka-plan-dorduncu); margin-bottom: 20px; } #urgentCollectionModal .invoice-info-card h4, #finalNoticeModal .invoice-info-card h4, #paymentPlanModal .invoice-info-card h4, #partialPaymentModal .invoice-info-card h4 { margin: 0 0 16px 0; color: var(--baslik-ana); font-size: 18px; font-weight: 600; } #urgentCollectionModal .invoice-info-card p, #finalNoticeModal .invoice-info-card p, #paymentPlanModal .invoice-info-card p, #partialPaymentModal .invoice-info-card p { margin: 8px 0; color: #4a5568; } #paymentPlanModal .installment-preview { margin-top: 24px; } #paymentPlanModal .installment-preview h4 { margin: 0 0 16px 0; color: var(--baslik-ana); font-size: 18px; font-weight: 600; } #paymentPlanModal .installment-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--metin-beyaz); border: 1px solid var(--arka-plan-dorduncu); border-radius: 6px; margin-bottom: 8px; } #paymentPlanModal .installment-number { font-weight: 600; color: var(--baslik-ana); } #paymentPlanModal .installment-date { color: #718096; font-size: 14px; } #paymentPlanModal .installment-amount { font-weight: 600; color: var(--ana-mor-acik); font-size: 16px; } /* Dark tema için geciken ödemeler modal stilleri */ [data-theme="dark"] #urgentCollectionModal .alert-warning, [data-theme="dark"] #finalNoticeModal .alert-warning, [data-theme="dark"] #paymentPlanModal .alert-warning, [data-theme="dark"] #partialPaymentModal .alert-warning { background: #451a03; border-color: #92400e; color: #fbbf24; } [data-theme="dark"] #urgentCollectionModal .alert-danger, [data-theme="dark"] #finalNoticeModal .alert-danger, [data-theme="dark"] #paymentPlanModal .alert-danger, [data-theme="dark"] #partialPaymentModal .alert-danger { background: #450a0a; border-color: #dc2626; color: #fca5a5; } [data-theme="dark"] #urgentCollectionModal .invoice-info-card, [data-theme="dark"] #finalNoticeModal .invoice-info-card, [data-theme="dark"] #paymentPlanModal .invoice-info-card, [data-theme="dark"] #partialPaymentModal .invoice-info-card { background: #2d3748; border-color: #4a5568; } [data-theme="dark"] #urgentCollectionModal .invoice-info-card h4, [data-theme="dark"] #finalNoticeModal .invoice-info-card h4, [data-theme="dark"] #paymentPlanModal .invoice-info-card h4, [data-theme="dark"] #partialPaymentModal .invoice-info-card h4 { color: #e2e8f0; } [data-theme="dark"] #urgentCollectionModal .invoice-info-card p, [data-theme="dark"] #finalNoticeModal .invoice-info-card p, [data-theme="dark"] #paymentPlanModal .invoice-info-card p, [data-theme="dark"] #partialPaymentModal .invoice-info-card p { color: #a0aec0; } [data-theme="dark"] #paymentPlanModal .installment-preview h4 { color: #e2e8f0; } [data-theme="dark"] #paymentPlanModal .installment-item { background: #4a5568; border-color: #718096; } [data-theme="dark"] #paymentPlanModal .installment-number { color: #e2e8f0; } [data-theme="dark"] #paymentPlanModal .installment-date { color: #a0aec0; } [data-theme="dark"] #paymentPlanModal .installment-amount { color: #93c5fd; } /* #endregion */ /* ======================================== */ /* KAPSAMLI RESPONSIVE TASARIM STİLLERİ */ /* ======================================== */ /* ===== MOBILE-FIRST TEMEL RESPONSIVE YAKLAŞIMI ===== */ /* Extra Small Devices (phones, 480px and down) */ @media (max-width: 480px) { /* Global mobile adjustments */ body { font-size: var(--mobile-text-base) !important; line-height: 1.5 !important; } /* Container adjustments */ .container { padding: var(--mobile-spacing-md) !important; margin: 0 !important; } /* Eski sidebar kuralları kaldırıldı - Yeni grid sistemi kullanılıyor */ /* Main content adjustments */ .main-content { margin-left: 0 !important; width: 100% !important; padding: 0 !important; } /* Page wrapper adjustments */ .page-wrapper { margin-left: 0 !important; width: 100% !important; padding: 0 !important; } /* Content wrapper - Mobil görünümde alt kısım kesilmesini önlemek için */ .content-wrapper { padding-bottom: 0 !important; /* Adres çubuğu için boş alan istemiyoruz */ } /* Typography adjustments */ h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 15px; } h6 { font-size: 14px; } /* Button adjustments */ .btn { padding: var(--mobile-spacing-md) var(--mobile-spacing-lg); font-size: var(--mobile-text-sm); min-height: 44px; /* Touch target size */ } .btn-sm { padding: var(--mobile-spacing-sm) var(--mobile-spacing-md); font-size: var(--mobile-text-xs); min-height: 36px; } .btn-lg { padding: var(--mobile-spacing-lg) var(--mobile-spacing-xl); font-size: var(--mobile-text-lg); min-height: 52px; } /* Form elements */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select { padding: var(--mobile-spacing-md) var(--mobile-spacing-lg); font-size: var(--mobile-text-base); min-height: 44px; } /* Card adjustments */ .card { margin-bottom: var(--mobile-spacing-lg); padding: var(--mobile-spacing-lg); } .card-header { padding: 20px !important; margin: calc(-1 * var(--mobile-spacing-lg)) calc(-1 * var(--mobile-spacing-lg)) var(--mobile-spacing-lg); flex-direction: column; align-items: flex-start; gap: var(--mobile-spacing-md); } .card-body { padding: var(--mobile-spacing-lg); } /* Grid adjustments */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: var(--mobile-spacing-lg) !important; } /* Patients grid responsive */ .patients-grid { display: grid !important; grid-template-columns: 1fr !important; gap: var(--mobile-spacing-lg) !important; } /* Stats grid responsive */ .stats-grid { display: grid !important; grid-template-columns: 1fr !important; gap: var(--mobile-spacing-lg) !important; } /* Flex adjustments */ .flex-row { flex-direction: column; gap: var(--mobile-spacing-md); } .flex-wrap { flex-wrap: wrap; } /* Spacing adjustments */ .p-1 { padding: var(--mobile-spacing-xs); } .p-2 { padding: var(--mobile-spacing-sm); } .p-3 { padding: var(--mobile-spacing-md); } .p-4 { padding: var(--mobile-spacing-lg); } .p-5 { padding: var(--mobile-spacing-xl); } .p-6 { padding: var(--mobile-spacing-2xl); } .m-1 { margin: var(--mobile-spacing-xs); } .m-2 { margin: var(--mobile-spacing-sm); } .m-3 { margin: var(--mobile-spacing-md); } .m-4 { margin: var(--mobile-spacing-lg); } .m-5 { margin: var(--mobile-spacing-xl); } .m-6 { margin: var(--mobile-spacing-2xl); } } /* Small Devices (large phones, 640px and down) */ @media (max-width: 640px) { /* Grid adjustments for small devices */ .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } /* Eski sidebar kuralları kaldırıldı - Yeni grid sistemi kullanılıyor */ /* Main content adjustments */ .main-content { margin-left: 0 !important; width: 100% !important; padding: 0 !important; } /* Page wrapper adjustments */ .page-wrapper { margin-left: 0 !important; width: 100% !important; padding: 0 !important; } /* Header adjustments */ .header { padding: var(--mobile-spacing-md) var(--mobile-spacing-lg); } .header .header-left { flex: 1; } .header .header-right { gap: var(--mobile-spacing-sm); } /* Mobile menu button - hidden by default */ .mobile-menu-btn { display: none !important; background: none; border: none; font-size: 20px; color: var(--metin-ana); cursor: pointer; padding: var(--mobile-spacing-sm); margin-right: var(--mobile-spacing-md); } /* Show mobile menu button on mobile */ @media (max-width: 768px) { .mobile-menu-btn { display: block !important; } } /* Search box adjustments */ .search-box { width: 100% !important; max-width: 300px !important; } /* Patients grid responsive */ .patients-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--mobile-spacing-lg) !important; } /* Stats grid responsive */ .stats-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--mobile-spacing-lg) !important; } /* Table adjustments */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { min-width: 600px; } .table th, .table td { padding: var(--mobile-spacing-sm) var(--mobile-spacing-md); font-size: var(--mobile-text-sm); } } /* Medium Devices (tablets, 768px and down) */ @media (max-width: 768px) { /* Grid adjustments */ .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } /* Eski sidebar kuralları kaldırıldı - Yeni grid sistemi kullanılıyor */ /* Main content adjustments */ .main-content { margin-left: 0 !important; width: 100% !important; padding: 0 !important; } /* Page wrapper adjustments */ .page-wrapper { margin-left: 0 !important; width: 100% !important; padding: 0 !important; } /* Form row adjustments */ .form-row { grid-template-columns: 1fr; gap: var(--mobile-spacing-lg); } .form-row-2 { grid-template-columns: 1fr; } .form-row-3 { grid-template-columns: 1fr; } /* Modal adjustments */ .modal-content { width: 95%; max-width: none; margin: var(--mobile-spacing-lg); max-height: 90vh; overflow-y: auto; } .modal-content.large { width: 98%; max-width: none; height: 90vh; margin: var(--mobile-spacing-sm); } /* Dashboard cards */ .dashboard-card { margin-bottom: var(--mobile-spacing-lg); } .dashboard-card .card-header { flex-direction: column; align-items: flex-start; gap: var(--mobile-spacing-md); } /* Stats cards */ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--mobile-spacing-lg); } .stat-card { padding: var(--mobile-spacing-lg); } /* Timeline adjustments */ .timeline-item { flex-direction: column; align-items: flex-start; gap: var(--mobile-spacing-md); } .timeline-content { width: 100%; } /* Tab adjustments */ .tab-buttons { flex-direction: column; gap: var(--mobile-spacing-sm); } .tab-btn { width: 100%; text-align: center; } /* Notification dropdown - Mobil (768px) - Profil menüsü gibi sağ üstte */ .notification-dropdown { position: fixed !important; top: 80px !important; right: 20px !important; left: auto !important; width: calc(100vw - 40px) !important; max-width: 400px !important; margin: 0 !important; transform: translateY(-10px) !important; } .notification-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } /* Patient info adjustments */ .patient-info { flex-direction: column; gap: var(--mobile-spacing-md); } .patient-info .info-item { width: 100%; } } /* Large Devices (small laptops, 1024px and down) */ @media (max-width: 1024px) { /* Grid adjustments */ .grid-4 { grid-template-columns: repeat(3, 1fr); } /* Eski sidebar kuralları kaldırıldı - Yeni grid sistemi kullanılıyor */ /* Stats cards */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* Table adjustments */ .table th, .table td { padding: var(--mobile-spacing-md) var(--mobile-spacing-lg); } /* Modal adjustments */ .modal-content { width: 90%; max-width: 800px; } } /* Extra Large Devices (laptops, 1280px and down) */ @media (max-width: 1280px) { /* Container max width */ .container { max-width: 1200px; } /* Grid adjustments */ .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Stats cards */ .stats-grid { grid-template-columns: repeat(4, 1fr); } } .sidebar.open { transform: translateX(0); } /* .sidebar-header { padding: var(--mobile-spacing-lg); border-bottom: 1px solid var(--kenarlik-ana); } */ /* .sidebar-nav { padding: var(--mobile-spacing-lg); } */ .nav-item { margin-bottom: var(--mobile-spacing-sm); } .nav-link { padding: var(--mobile-spacing-md) var(--mobile-spacing-lg); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--mobile-spacing-md); text-decoration: none; color: var(--metin-ana); transition: all 0.2s ease; } .nav-link:hover, .nav-link.active { background: var(--ana-mavi); color: var(--kart-arka-plan); } .nav-link i { font-size: 18px; width: 20px; text-align: center; } /* Overlay for mobile sidebar - Sidebar'ın ARKASINDA olmalı */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--golge-dorduncu); z-index: 9998; /* Sidebar'ın (10000) altında olmalı - overlay sidebar'ın üstünde görünmemeli */ opacity: 0; visibility: hidden; transition: all 0.3s ease; } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* ===== KARTLAR VE GRID YAPILARI RESPONSIVE ===== */ @media (max-width: 768px) { .dashboard-card .card-title { font-size: var(--mobile-text-lg); } .dashboard-card .card-actions { width: 100%; justify-content: flex-start; } /* Stats cards */ .stat-card { padding: var(--mobile-spacing-lg); text-align: center; min-height: 100px; flex-direction: column; gap: var(--mobile-spacing-md); } .stat-icon { width: 40px; height: 40px; font-size: 16px; } .stat-content h3 { font-size: 24px; margin-bottom: 2px; } .stat-content p { font-size: 13px; margin-bottom: 4px; } .stat-change { font-size: 11px; } /* Info cards */ .info-card { padding: var(--mobile-spacing-lg); margin-bottom: var(--mobile-spacing-lg); } .info-card .info-header { flex-direction: column; align-items: flex-start; gap: var(--mobile-spacing-md); margin-bottom: var(--mobile-spacing-lg); } .info-card .info-title { font-size: var(--mobile-text-lg); } /* Patient cards */ .patient-card { padding: var(--mobile-spacing-lg) !important; margin-bottom: var(--mobile-spacing-lg) !important; width: 100% !important; } .patient-card .patient-header { flex-direction: column !important; align-items: flex-start !important; gap: var(--mobile-spacing-md) !important; } .patient-card .patient-info { width: 100% !important; } .patient-card .patient-actions { width: 100% !important; justify-content: flex-start !important; } /* Patients grid responsive */ .patients-grid { display: grid !important; grid-template-columns: 1fr !important; gap: var(--mobile-spacing-lg) !important; } /* Stats grid responsive */ .stats-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--mobile-spacing-lg) !important; } } /* ===== FORM ELEMANLARI RESPONSIVE ===== */ @media (max-width: 768px) { /* Form containers */ .form-container { padding: var(--mobile-spacing-lg); } .form-header { margin-bottom: var(--mobile-spacing-xl); } .form-title { font-size: var(--mobile-text-xl); margin-bottom: var(--mobile-spacing-sm); } .form-subtitle { font-size: var(--mobile-text-base); color: var(--metin-ikincil); } /* Form rows */ .form-row { grid-template-columns: 1fr; gap: var(--mobile-spacing-lg); margin-bottom: var(--mobile-spacing-lg); } .form-row-2 { grid-template-columns: 1fr; } .form-row-3 { grid-template-columns: 1fr; } /* Form groups */ .form-group { margin-bottom: var(--mobile-spacing-lg); } .form-label { font-size: var(--mobile-text-sm); font-weight: 500; margin-bottom: var(--mobile-spacing-sm); display: block; } .form-control { width: 100%; padding: var(--mobile-spacing-md) var(--mobile-spacing-lg); font-size: var(--mobile-text-base); min-height: 44px; } /* Form buttons */ .form-actions { flex-direction: column; gap: var(--mobile-spacing-md); margin-top: var(--mobile-spacing-xl); } .form-actions .btn { width: 100%; justify-content: center; } /* Checkbox and radio groups */ .checkbox-group, .radio-group { flex-direction: column; gap: var(--mobile-spacing-md); } .checkbox-item, .radio-item { display: flex; align-items: center; gap: var(--mobile-spacing-sm); } /* File upload */ .file-upload { padding: var(--mobile-spacing-lg); border: 2px dashed var(--kenarlik-ana); border-radius: var(--radius-lg); text-align: center; } .file-upload.dragover { border-color: var(--ana-mavi); background: var(--golge-odak); } } /* ===== TABLOLAR RESPONSIVE ===== */ @media (max-width: 768px) { /* Table container */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); } .table { min-width: 600px; width: 100%; margin: 0; } .table th, .table td { padding: var(--mobile-spacing-md) var(--mobile-spacing-lg); font-size: var(--mobile-text-sm); white-space: nowrap; } .table th { background: var(--arka-plan-ikincil); font-weight: 600; position: sticky; top: 0; z-index: 10; } .table tbody tr { border-bottom: 1px solid var(--kenarlik-ana); } .table tbody tr:hover { background: var(--arka-plan-ikincil); } /* Action buttons in tables */ .table .action-buttons { display: flex; gap: var(--mobile-spacing-sm); flex-wrap: nowrap; } /* Artık ACTION_BTN_OVERRIDE.css kullanılıyor */ /* Table pagination */ .table-pagination { flex-direction: column; gap: var(--mobile-spacing-md); margin-top: var(--mobile-spacing-lg); } .pagination-info { text-align: center; font-size: var(--mobile-text-sm); color: var(--metin-ikincil); } .pagination-controls { display: flex; justify-content: center; gap: var(--mobile-spacing-sm); } .pagination-btn { padding: var(--mobile-spacing-sm) var(--mobile-spacing-md); font-size: var(--mobile-text-sm); min-width: 40px; height: 40px; } } /* ===== MODAL VE POPUP RESPONSIVE ===== */ @media (max-width: 768px) { /* Modal overlay */ .modal-overlay { padding: var(--mobile-spacing-md); } /* Modal content */ .modal-content { width: 100%; max-width: none; margin: 0; max-height: 90vh; border-radius: var(--radius-xl); } .modal-content.large { width: 100%; height: 90vh; max-height: 90vh; } .modal-content.small { width: 100%; max-width: 400px; } /* Modal header */ .modal-header { padding: var(--mobile-spacing-lg); border-bottom: 1px solid var(--kenarlik-ana); flex-direction: column; align-items: flex-start; gap: var(--mobile-spacing-md); } .modal-title { font-size: var(--mobile-text-lg); margin: 0; } .modal-close { position: absolute; top: var(--mobile-spacing-lg); right: var(--mobile-spacing-lg); background: none; border: none; font-size: 20px; color: var(--metin-ikincil); cursor: pointer; padding: var(--mobile-spacing-sm); } /* Modal body */ .modal-body { padding: var(--mobile-spacing-lg); max-height: calc(100vh - 200px); overflow-y: auto; } /* Modal footer */ .modal-footer { padding: var(--mobile-spacing-lg); border-top: 1px solid var(--kenarlik-ana); flex-direction: column; gap: var(--mobile-spacing-md); } .modal-footer .btn { width: 100%; justify-content: center; } /* Specific modal adjustments */ .patient-detail-modal { width: 100%; max-height: 90vh; } .treatment-modal { width: 100%; max-height: 90vh; } .billing-modal { width: 100%; max-height: 90vh; } } /* ===== UTILITY CLASSES RESPONSIVE ===== */ @media (max-width: 768px) { /* Display utilities */ .d-none-mobile { display: none !important; } .d-block-mobile { display: block !important; } .d-flex-mobile { display: flex !important; } .d-grid-mobile { display: grid !important; } /* Tablo responsive düzeltmesi */ table { display: table !important; width: 100%; } /* Text utilities */ .text-center-mobile { text-align: center !important; } .text-left-mobile { text-align: left !important; } .text-right-mobile { text-align: right !important; } /* Spacing utilities */ .p-mobile-0 { padding: 0 !important; } .p-mobile-1 { padding: var(--mobile-spacing-xs) !important; } .p-mobile-2 { padding: var(--mobile-spacing-sm) !important; } .p-mobile-3 { padding: var(--mobile-spacing-md) !important; } .p-mobile-4 { padding: var(--mobile-spacing-lg) !important; } .p-mobile-5 { padding: var(--mobile-spacing-xl) !important; } .m-mobile-0 { margin: 0 !important; } .m-mobile-1 { margin: var(--mobile-spacing-xs) !important; } .m-mobile-2 { margin: var(--mobile-spacing-sm) !important; } .m-mobile-3 { margin: var(--mobile-spacing-md) !important; } .m-mobile-4 { margin: var(--mobile-spacing-lg) !important; } .m-mobile-5 { margin: var(--mobile-spacing-xl) !important; } /* Width utilities */ .w-mobile-100 { width: 100% !important; } .w-mobile-50 { width: 50% !important; } .w-mobile-25 { width: 25% !important; } .w-mobile-75 { width: 75% !important; } /* Height utilities */ .h-mobile-100 { height: 100% !important; } .h-mobile-auto { height: auto !important; } /* Flex utilities */ .flex-mobile-column { flex-direction: column !important; } .flex-mobile-row { flex-direction: row !important; } .flex-mobile-wrap { flex-wrap: wrap !important; } .flex-mobile-nowrap { flex-wrap: nowrap !important; } .justify-mobile-center { justify-content: center !important; } .justify-mobile-start { justify-content: flex-start !important; } .justify-mobile-end { justify-content: flex-end !important; } .justify-mobile-between { justify-content: space-between !important; } .align-mobile-center { align-items: center !important; } .align-mobile-start { align-items: flex-start !important; } .align-mobile-end { align-items: flex-end !important; } } /* ===== PRINT STYLES ===== */ @media print { /* Sadece modal açıkken yazdırma stilleri */ .modal.active { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 9999 !important; background: white !important; } .modal.active .modal-overlay { display: none !important; } .modal.active .modal-content { margin: 0 !important; padding: 20px !important; max-width: 100% !important; box-shadow: none !important; border: none !important; } .modal.active .modal-close { display: none !important; } .modal.active .action-buttons { display: none !important; } .modal.active .report-actions-modal { display: none !important; } /* Report info bar için */ .modal.active .report-info-bar { margin-top: 0 !important; page-break-inside: avoid; } /* Ana sayfa gizle */ body:not(.modal-active) .main-content, body:not(.modal-active) .sidebar, body:not(.modal-active) .header { display: none !important; } } /* #region Sıcak Satış Sayfası Stilleri */ .sıcak-satis-page { background: var(--arka-plan-ana); } .page-wrapper-sıcak-satis { min-height: 100vh; background: var(--arka-plan-ana); } /* Responsive kurallar genel .page-wrapper sınıfında tanımlı */ /* Form Bölümleri */ .form-section { margin-bottom: 32px; } .form-section:last-child { margin-bottom: 0; } .form-section h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 2px solid var(--ana-mavi); display: inline-block; } /* .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } */ .form-row:last-child { margin-bottom: 0; } .form-group { display: flex; flex-direction: column; margin-bottom: 16px; } /* .form-group label { color: var(--metin-ana); font-size: 14px; font-weight: 500; margin-bottom: 8px; } */ .form-group input, .form-group select, .form-group textarea { padding: 12px 16px; border: 1px solid var(--kenarlik-ikincil); border-radius: 8px; background: var(--kart-arka-plan); color: var(--metin-ana); font-size: 14px; transition: all 0.2s ease; } .form-group select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 40px; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); } .form-group select:hover, .form-group select:focus { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); } .form-group input[readonly] { background: var(--arka-plan-ikincil); color: var(--metin-ikincil); } .form-group textarea { resize: vertical; min-height: 80px; } /* Custom Select */ .custom-select { position: relative; width: 100%; } .select-trigger { padding: 12px 16px; border: 1px solid var(--kenarlik-ikincil); border-radius: 8px; background: var(--seffaf-mavi); border: 2px solid var(--ana-mavi); color: var(--metin-ana); font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s ease; height: 44px; } .select-trigger:hover { border-color: var(--ana-mavi); } .select-trigger i { color: var(--metin-ikincil); transition: transform 0.2s ease; } .custom-select.open .select-trigger i { transform: rotate(180deg); } .select-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-2xl); z-index: 1000; display: none; max-height: 300px; overflow: hidden; margin-top: 4px; } .custom-select.open .select-dropdown { display: block; } .select-header { padding: 16px; border-bottom: 1px solid var(--kenarlik-ana); display: flex; justify-content: space-between; align-items: center; background: var(--arka-plan-ikincil); } .select-title { font-weight: 600; color: var(--metin-ana); font-size: 14px; } .select-close { cursor: pointer; color: var(--metin-ikincil); padding: 4px; border-radius: 4px; transition: all 0.2s ease; } .select-close:hover { background: var(--kenarlik-ikincil); color: var(--metin-ana); } .select-search { position: relative; padding: 16px; border-bottom: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ana); } .select-search .select-search-input { width: 100% !important; padding: 12px 16px 12px 40px !important; border: 1px solid var(--kenarlik-ikincil) !important; border-radius: 8px !important; background: var(--kart-arka-plan) !important; color: var(--metin-ana) !important; font-size: 14px !important; outline: none !important; transition: all 0.2s ease !important; font-family: inherit !important; margin: 0 !important; box-sizing: border-box !important; } .select-search .select-search-input:focus { border-color: var(--ana-mavi) !important; box-shadow: 0 0 0 3px var(--golge-odak) !important; } .select-search .select-search-input::placeholder { color: var(--metin-ikincil) !important; font-size: 14px !important; } .select-search i { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: var(--metin-ikincil); font-size: 14px; pointer-events: none; z-index: 1; } .select-options { max-height: 200px; overflow-y: auto; } .select-option { padding: 12px 16px; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--kenarlik-ikincil); background: var(--arka-plan-ana); } .select-option:last-child { border-bottom: none; } .select-option:hover { background: var(--seffaf-mavi); transform: translateX(4px); box-shadow: 0 2px 8px var(--golge-mavi); } .select-option.selected { background: var(--ana-mavi); color: var(--kart-arka-plan); box-shadow: 0 2px 8px var(--golge-mavi); } .option-content { display: flex; justify-content: space-between; align-items: center; } .option-name { font-weight: 500; color: inherit; } .option-details { display: flex; gap: 16px; font-size: 12px; color: inherit; opacity: 0.8; } .option-price { color: var(--ana-yesil); font-weight: 600; } .select-option.selected .option-price { color: var(--kart-arka-plan); } /* Sıcak Satış Sayfası Özel Stilleri */ /* Sales Form Actions - Özel Form Butonları */ .sales-form-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; /* margin-top: 8px; */ } /* Satış form butonları ortak stillerden miras alır */ .sales-form-actions .btn-outline { background: transparent; color: var(--metin-ana); border: 1px solid var(--kenarlik-ana); padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; height: 44px; } .sales-form-actions .btn-outline:hover { background: var(--arka-plan-ikincil); border-color: var(--ana-mavi); color: var(--ana-mavi); /* transform: translateY(-1px); */ /* box-shadow: 0 2px 8px var(--golge-ana); */ height: 44px; } .transaction-info-card { background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, var(--arka-plan-ucuncu) 100%); border-left: 4px solid var(--ana-mavi); } .sales-add-section .form-section { margin-bottom: 24px; padding: 16px; background: var(--kart-arka-plan); border-radius: 8px; border: 1px solid var(--kenarlik-ikincil); } .sales-add-section .form-section h5 { color: var(--metin-ana); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--kenarlik-ikincil); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .sales-add-section .form-section h5 i { width: 20px; height: 20px; border-radius: 50%; background: var(--ana-mavi); color: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; } .sales-add-section .form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; /* margin-bottom: 0; */ } .sales-add-section .form-group { display: flex; flex-direction: column; gap: 6px; } .sales-add-section .form-group-wide { grid-column: span 2; } .sales-add-section .form-group label { font-weight: 500; color: var(--metin-ana); font-size: 13px; margin: 0; } .sales-add-section .form-group input, .sales-add-section .form-group select { padding: 10px 12px; border: 1px solid var(--kenarlik-ikincil); border-radius: 6px; background: var(--kart-arka-plan); color: var(--metin-ana); font-size: 14px; transition: all 0.2s ease; } .sales-add-section .form-group input:focus, .sales-add-section .form-group select:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); } /* Sales add section filter-select özel stilleri */ .sales-add-section .form-group select.filter-select { background-color: var(--kart-arka-plan); } .sales-add-section .form-group input[readonly] { background: var(--arka-plan-ikincil); color: var(--metin-ikincil); } /* Miktar inputu için özel ana mavi border */ .sales-add-section .form-group input#quantity { border: 2px solid var(--ana-mavi); border-radius: 6px; } .sales-add-section .form-group input#quantity:focus { border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .section-header h4 { margin: 0; color: var(--metin-ana); display: flex; align-items: center; gap: 8px; } .filter-group { display: flex; gap: 12px; align-items: center; } .sales-main-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 24px; align-items: start; } .sales-add-section { background: var(--kart-arka-plan); padding: 20px; border-radius: 12px; border: 1px solid var(--kenarlik-ikincil); } .sales-add-section h4 { color: var(--metin-ana); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ana-mavi); display: flex; align-items: center; gap: 8px; } .sales-add-section h4 i { width: 24px; height: 24px; border-radius: 50%; background: var(--ana-mavi); color: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .sales-summary-section { background: var(--kart-arka-plan); padding: 20px; border-radius: 12px; border: 1px solid var(--kenarlik-ikincil); position: sticky; top: 0; height: fit-content; max-height: calc(100vh - 40px); overflow-y: auto; } .sales-summary-section h4 { color: var(--metin-ana); margin-bottom: 20px; /* padding-bottom: 12px; border-bottom: 2px solid var(--ana-yesil); */ display: flex; align-items: center; gap: 8px; } /* Sepet Özeti Stilleri */ .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ana-mavi); } .cart-header h4 { margin: 0; color: var(--metin-ana); display: flex; align-items: center; gap: 8px; } .cart-header h4 i { width: 24px; height: 24px; border-radius: 50%; background: var(--ana-yesil); color: var(--kart-arka-plan); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } /* Form bölümlerindeki H4 başlıklar için ortak görünüm (ör. Ek Bilgiler) */ .form-section h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ana-mavi); color: var(--metin-ana); } .form-section h4 i { width: 24px; height: 24px; border-radius: 50%; background: var(--ana-mavi); color: var(--kart-arka-plan) !important; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .item-count { background: var(--ana-mavi); color: var(--kart-arka-plan); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .cart-items { max-height: 260px; overflow-y: auto; margin-bottom: 20px; } .empty-cart { text-align: center; padding: 40px 20px; color: var(--metin-ikincil); } .empty-cart i { font-size: 48px; margin-bottom: 16px; color: var(--kenarlik-ikincil); } .empty-cart p { margin: 8px 0; font-weight: 500; } .empty-cart small { font-size: 12px; color: var(--metin-ikincil); } .cart-item { display: flex; align-items: center; padding: 16px; border: 1px solid var(--kenarlik-ikincil); border-radius: 12px; margin-bottom: 12px; background: var(--kart-arka-plan); transition: all 0.2s ease; gap: 16px; } .cart-item:hover { border-color: var(--ana-mavi); box-shadow: 0 2px 8px var(--golge-mavi); } .cart-item-info { flex: 1; } .cart-item-name { font-weight: 600; color: var(--metin-ana); margin-bottom: 6px; font-size: 15px; } .cart-item-details { font-size: 13px; color: var(--metin-ikincil); display: flex; align-items: ce; gap: 8px; } .cart-item-price { font-weight: 700; color: var(--ana-yesil); font-size: 16px; min-width: 120px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .cart-item-original-price { text-decoration: line-through; color: var(--metin-ikincil); font-size: 12px; font-weight: 400; } .final-price { color: var(--ana-yesil); font-weight: 700; font-size: 16px; } .cart-item-discount { color: var(--ana-kirmizi); font-size: 11px; font-weight: 500; } .discount-info { color: var(--ana-kirmizi); font-size: 11px; font-weight: 500; } .cart-item-discount-details { margin-top: 4px; padding: 4px 8px; background: rgba(239, 68, 68, 0.1); border-radius: 4px; display: flex; gap: 4px; align-items: center; font-size: 11px; width: fit-content; } .cart-item-discount-details .discount-amount { color: var(--ana-kirmizi); font-weight: 600; } .cart-item-discount-details .discount-percent { color: var(--metin-ikincil); font-weight: 500; } .products-cell { max-width: 250px; word-wrap: break-word; font-size: 13px; line-height: 1.4; padding: 8px 12px; } .products-list { display: flex; flex-direction: column; gap: 4px; } .product-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: var(--arka-plan-ikincil); border-radius: 4px; border-left: 3px solid var(--ana-mavi); font-size: 12px; } .product-name { font-weight: 500; color: var(--metin-ana); flex: 1; margin-right: 8px; } .product-quantity { background: var(--ana-mavi); color: var(--metin-beyaz); padding: 2px 6px; border-radius: 12px; font-size: 10px; font-weight: 600; white-space: nowrap; } .no-products { text-align: center; color: var(--metin-ikincil); font-size: 14px; /* font-style: italic; */ padding: 20px; margin: 0; } .cart-item-remove { background: var(--ana-kirmizi); color: var(--kart-arka-plan); border: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .cart-item-remove:hover { background: #dc2626; transform: scale(1.1); } .cart-summary { background: var(--arka-plan-ikincil); padding: 16px; border-radius: 8px; border: 1px solid var(--kenarlik-ikincil); /* margin-bottom: 20px; */ } .summary-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; } .summary-row:last-child { margin-bottom: 0; } .summary-row.total { font-weight: 700; font-size: 16px; color: var(--metin-ana); padding-top: 8px; /* border-top: 1px solid var(--kenarlik-ikincil); */ } .summary-row .discount { color: var(--ana-kirmizi); } /* Status Badge */ .status-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; text-transform: uppercase; } .status-completed { background: var(--ana-yesil); color: var(--kart-arka-plan); } .status-pending { background: var(--ana-turuncu); color: var(--kart-arka-plan); } /* Satış Geçmişi Tablo Stilleri - Faturalar Sayfası Gibi */ .dashboard-card .table-container { background: var(--kart-arka-plan); border-radius: 12px; overflow: hidden; border: 1px solid var(--kenarlik-ana); width: 100%; box-shadow: var(--shadow-sm); } .dashboard-card .table-container table { width: 100%; border-collapse: collapse; background: var(--kart-arka-plan); border-radius: 12px; overflow: hidden; } .dashboard-card .table-container thead { background: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); border-radius: 12px 12px 0 0; overflow: hidden; } .dashboard-card .table-container th { padding: 12px 16px; text-align: left; font-weight: 600; color: var(--metin-ana); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; border-bottom: 1px solid var(--kenarlik-ana); /* border-right: 1px solid var(--kenarlik-ikincil); */ } .dashboard-card .table-container th:last-child { border-right: none; } .dashboard-card .table-container th:first-child { border-top-left-radius: 12px; } .dashboard-card .table-container th:last-child { border-top-right-radius: 12px; } .dashboard-card .table-container tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; } .dashboard-card .table-container tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; } .dashboard-card .table-container tbody { background: var(--kart-arka-plan); border-radius: 0 0 12px 12px; overflow: hidden; } .dashboard-card .table-container tr { border-bottom: 1px solid var(--kenarlik-ikincil); transition: all 0.2s ease; /* background: var(--kart-arka-plan); */ } /* .dashboard-card .table-container tr:hover { background: var(--tablo-hover); } */ .dashboard-card .table-container tr:last-child { border-bottom: none; } .dashboard-card .table-container td { padding: 12px 16px; text-align: left; font-size: 14px; color: var(--metin-ana); /* border-right: 1px solid var(--kenarlik-ikincil); */ font-weight: 400; line-height: 1.5; } .dashboard-card .table-container td:last-child { border-right: none; } .sicak-satis-page .dashboard-card .btn-icon { width: 40px; min-width: 40px; max-width: 40px; height: 32px; font-size: 12px; margin: 0 2px; border: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ana); color: var(--metin-ikincil); cursor: pointer; text-decoration: none; flex-shrink: 0; } /* İşlemler sütunu genişliği */ .dashboard-card .table-container th:last-child, .dashboard-card .table-container td:last-child { width: 130px; min-width: 130px; max-width: 130px; text-align: left; } /* Artık action-btn kullanılıyor */ /* Status Badge Stilleri */ .status-badge { padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; } .status-completed { background: #10b981; color: var(--kart-arka-plan); } .status-pending { background: #f59e0b; color: var(--kart-arka-plan); } .status-overdue { background: #ef4444; color: var(--kart-arka-plan); } /* Barkod Okuyucu Modal */ .barcode-scanner { text-align: center; padding: 20px; } .scanner-placeholder { background: var(--arka-plan-ikincil); border: 2px dashed var(--kenarlik-ikincil); border-radius: 12px; padding: 40px 20px; margin-bottom: 20px; } .scanner-placeholder i { font-size: 48px; color: var(--ana-mavi); margin-bottom: 16px; } .scanner-placeholder p { margin: 8px 0; color: var(--metin-ana); font-weight: 500; } .scanner-hint { color: var(--metin-ikincil) !important; font-size: 14px; } .barcode-input-group { display: flex; gap: 12px; align-items: center; } .barcode-input-group input { flex: 1; padding: 12px 16px; border: 1px solid var(--kenarlik-ikincil); border-radius: 8px; background: var(--kart-arka-plan); color: var(--metin-ana); font-size: 16px; text-align: center; letter-spacing: 2px; } .barcode-input-group input:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); } /* Responsive */ @media (max-width: 768px) { .sales-main-layout { grid-template-columns: 1fr; gap: 16px; } .summary-cards { grid-template-columns: 1fr; } } /* Tablo Özeti */ .table-summary { background: var(--arka-plan-ikincil); border-top: 2px solid var(--kenarlik-ana); padding: 16px; margin-top: 16px; border-radius: 8px; } .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; } .summary-row:not(:last-child) { border-bottom: 1px solid var(--kenarlik-ikincil); } .summary-label { color: var(--metin-ikincil); font-weight: 500; } .summary-value { color: var(--metin-ana); font-weight: 600; } .summary-row.total-row { font-size: 16px; font-weight: 700; color: var(--ana-mavi); border-top: 2px solid var(--ana-mavi); margin-top: 8px; padding-top: 16px; } .total-row .summary-value { color: var(--ana-mavi); } /* Form Actions */ .form-actions { display: flex; gap: 12px; justify-content: flex-end; } /* .form-actions button { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; transition: all 0.2s ease; cursor: pointer; border: none; } */ /* Responsive Design */ @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; gap: 16px; } .form-actions { flex-direction: column; } .form-actions button { width: 100%; justify-content: center; } } /* #region Genel Tablo Stilleri - Dark Tema Uyumlu */ table { width: 100%; border-collapse: collapse; background: var(--kart-arka-plan); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); } table thead { background: var(--arka-plan-ikincil); border-bottom: 2px solid var(--kenarlik-ana); } table thead th { padding: 16px 20px; text-align: left; font-size: 12px; font-weight: 600; color: var(--metin-ana); text-transform: uppercase; letter-spacing: 0.5px; } table tbody tr { background: var(--kart-arka-plan); border-bottom: 1px solid var(--kenarlik-ikincil); transition: background-color 0.2s ease; } table tbody tr:hover { background: var(--tablo-hover); } table tbody tr:last-child { border-bottom: none; } table tbody td { padding: 16px 20px; color: var(--metin-ana); font-size: 14px; vertical-align: middle; } /* Tablo içindeki butonlar */ table .btn-icon { background: var(--arka-plan-ucuncu); color: var(--metin-ikincil); padding: 8px; margin: 0 2px; } table .btn-icon:hover { background: var(--arka-plan-dorduncu); color: var(--metin-ana); border-color: var(--kenarlik-ana); } table .btn-icon.btn-primary:hover { background: var(--ana-mavi); color: var(--metin-beyaz); border-color: var(--ana-mavi); } table .btn-icon.btn-danger:hover { background: var(--ana-kirmizi); color: var(--metin-beyaz); border-color: var(--ana-kirmizi); } /* Tablo içindeki status badge'ler */ table .status-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } table .status-badge.status-completed { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } table .status-badge.status-pending { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } table .status-badge.status-overdue { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } /* Tablo içindeki ürün listesi */ table .products-list { display: flex; flex-direction: column; gap: 4px; } table .product-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; /* background: var(--arka-plan-ucuncu); */ border-radius: 4px; font-size: 12px; } table .product-name { color: var(--metin-ana); font-weight: 500; } table .product-quantity { color: var(--metin-beyaz); font-size: 11px; } /* Number Input Spinner Gizleme */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* #endregion */ /* #endregion */ /* #region Toplu Bildirimler Sayfası Stilleri */ .toplu-bildirimler-page { background-color: var(--arka-plan-ana); } /* ===== ORTAK TABLO İŞLEM İKONLARI ===== */ /* Tüm sayfalar için ortak tablo işlem butonları */ /* .table-actions genel tanımı satır 14061'de yapıldı */ .table-actions .btn-small { min-width: 36px; height: 36px; } .table-actions .btn-small i { font-size: 14px; } /* Özel buton varyantları */ .table-actions .btn-icon { padding: 8px; font-size: var(--text-sm); border: none; cursor: pointer; } .table-actions .btn-icon.btn-danger { background-color: var(--durum-hata); color: var(--arka-plan-ana); } .table-actions .btn-icon.btn-danger:hover { background-color: var(--durum-hata-koyu); } .table-actions .btn-icon i { font-size: 14px; } /* Bildirim Detay Modal Stilleri */ .notification-detail { padding: var(--spacing-lg); } .detail-row { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) 0; border-bottom: 1px solid var(--kenarlik-ana); } .detail-row:last-child { border-bottom: none; } .detail-label { font-weight: 600; color: var(--metin-ikincil); min-width: 120px; } .detail-value { color: var(--metin-ana); text-align: right; flex: 1; margin-left: var(--spacing-md); } .detail-value.status-başarılı { color: var(--durum-basarili); font-weight: 600; } .detail-value.status-beklemede { color: var(--durum-uyari); font-weight: 600; } .detail-value.status-hata { color: var(--durum-hata); font-weight: 600; } /* Seçilen Paket Alanı Stilleri */ .selected-package { background: var(--arka-plan-ana); border: 2px solid var(--ana-mavi); border-radius: 12px; padding: var(--spacing-lg); margin: var(--spacing-lg) 0; box-shadow: 0 4px 12px var(--golge-mavi); transition: all 0.3s ease; } /* Kredi Kartı Formu Stilleri */ .credit-card-form { margin-top: var(--spacing-lg); padding: var(--spacing-lg); background: var(--arka-plan-ikincil); border-radius: 8px; border: 1px solid var(--kenarlik-ana); } .credit-card-form h5 { margin: 0 0 var(--spacing-md) 0; color: var(--metin-ana); font-size: var(--text-md); font-weight: 600; } .credit-card-form .form-group { margin-bottom: var(--spacing-md); } .credit-card-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .credit-card-form label { display: block; margin-bottom: var(--spacing-sm); font-weight: 500; color: var(--metin-ikincil); font-size: var(--text-sm); } .credit-card-form input { width: 100%; padding: var(--spacing-md); border: 1px solid var(--kenarlik-ana); border-radius: 8px; font-size: var(--text-md); background: var(--arka-plan-ana); color: var(--metin-ana); transition: all 0.2s ease; } .credit-card-form input:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); } .credit-card-form input::placeholder { color: var(--metin-ucuncu); } .selected-package h4 { margin: 0 0 var(--spacing-md) 0; color: var(--ana-mavi); font-size: var(--text-lg); font-weight: 600; display: flex; align-items: center; gap: var(--spacing-sm); } .selected-package h4::before { content: '✓'; background: var(--ana-mavi); color: var(--kart-arka-plan); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; } .selected-package #selectedPackageInfo { margin: 0 0 var(--spacing-lg) 0; padding: var(--spacing-md); background: var(--kart-arka-plan); border-radius: 8px; border-left: 4px solid var(--ana-mavi); font-size: var(--text-lg); font-weight: 600; color: var(--metin-ana); } /* Banka Havalesi Modal Stilleri */ .bank-info { padding: var(--spacing-lg); background: var(--arka-plan-ikincil); border-radius: 8px; margin-bottom: var(--spacing-lg); } .info-row { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--kenarlik-ana); } .info-row:last-child { border-bottom: none; } .info-label { font-weight: 600; color: var(--metin-ikincil); min-width: 80px; } .info-value { color: var(--metin-ana); font-weight: 500; text-align: right; flex: 1; margin-left: var(--spacing-md); /* font-family: 'Courier New', monospace; */ } .transfer-note { background: var(--arka-plan-ucuncu); border-radius: 8px; padding: var(--spacing-md); border-left: 4px solid var(--durum-uyari); } .transfer-note p { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--metin-ana); gap: 5px; } /* Prefixsiz sınıflar - HTML'de kullanılan sınıflar */ .credit-overview { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-md) 0; } .credit-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background-color: var(--arka-plan-ucuncu); border-radius: 10px; flex: 1; min-width: 0; border: 1px solid var(--kenarlik-ana); } .credit-icon { width: 40px; height: 40px; background-color: var(--ana-mavi); color: var(--kart-arka-plan); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; } .credit-content { flex: 1; } .credit-content h4 { margin: 0 0 var(--spacing-xs) 0; font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); } .credit-amount { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--ana-mavi); } .credit-amount.used { color: var(--ana-sari); } .credit-amount.remaining { color: var(--ana-yesil); } .credit-progress-section { flex: 1; min-width: 200px; } .credit-progress { margin-top: 0; } .progress-bar { width: 100%; height: 6px; background-color: var(--arka-plan-ucuncu); border-radius: 3px; overflow: hidden; margin-bottom: var(--spacing-xs); } .progress-fill { height: 100%; background-color: var(--ana-mavi); border-radius: 3px; transition: width 0.3s ease; } .progress-text { font-size: var(--text-xs); color: var(--metin-ucuncu); text-align: right; } .credit-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .credit-package { padding: var(--spacing-lg); border: 2px solid var(--kenarlik-ana); border-radius: 10px; text-align: center; transition: all 0.2s ease; cursor: pointer; } .credit-package:hover { border-color: var(--ana-mavi); background-color: var(--arka-plan-ucuncu); } .credit-package.recommended { border-color: var(--ana-mavi); background-color: rgba(59, 130, 246, 0.05); } .credit-package h4 { margin: 0 0 var(--spacing-sm) 0; font-size: var(--text-lg); font-weight: 600; color: var(--metin-ana); } .credit-package .price { margin: 0 0 var(--spacing-sm) 0; font-size: var(--text-xl); font-weight: 700; color: var(--ana-mavi); } .credit-package .description { margin: 0 0 var(--spacing-md) 0; font-size: var(--text-sm); color: var(--metin-ucuncu); } .payment-methods { display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-md); } .payment-option { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .payment-option input[type="radio"] { display: none; } .payment-radio-custom { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 50%; position: relative; transition: all 0.2s ease; } .payment-option input[type="radio"]:checked + .payment-radio-custom { border-color: var(--ana-mavi); background-color: var(--ana-mavi); } .payment-option input[type="radio"]:checked + .payment-radio-custom::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background-color: var(--kart-arka-plan); border-radius: 50%; } /* Bildirim Türü Radio Grupları */ .toplu-bildirimler-page .notification-type-radio-group { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-sm); } .toplu-bildirimler-page .notification-type-radio-option { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); border: 2px solid var(--kenarlik-ana); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; flex: 1; justify-content: center; } .toplu-bildirimler-page .dc-yeni-bildirim-alan { border: 2px solid var(--ana-mavi); } /* .toplu-bildirimler-page .card-body { padding: 0 24px; } */ .toplu-bildirimler-page .notification-type-radio-option:hover { border-color: var(--ana-mavi); /* background-color: var(--arka-plan-ucuncu); */ } .toplu-bildirimler-page .notification-type-radio-option input[type="radio"] { display: none; } .toplu-bildirimler-page .notification-type-radio-custom { width: 20px; height: 20px; border: 2px solid var(--kenarlik-ana); border-radius: 50%; position: relative; transition: all 0.2s ease; } .toplu-bildirimler-page .notification-type-radio-option input[type="radio"]:checked + .notification-type-radio-custom { border-color: var(--ana-mavi); background-color: var(--ana-mavi); } .toplu-bildirimler-page .notification-type-radio-option input[type="radio"]:checked + .notification-type-radio-custom::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background-color: var(--kart-arka-plan); border-radius: 50%; } .toplu-bildirimler-page .notification-type-radio-label { display: flex; align-items: center; gap: var(--spacing-sm); font-weight: 500; color: var(--metin-ana); } .toplu-bildirimler-page .notification-type-radio-label i { font-size: 18px; } /* Gönderim Zamanı Seçenekleri */ .toplu-bildirimler-page .send-time-options { display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-sm); } .toplu-bildirimler-page .send-time-radio-option { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .toplu-bildirimler-page .send-time-radio-option input[type="radio"] { display: none; } .toplu-bildirimler-page .send-time-radio-custom { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 50%; position: relative; transition: all 0.2s ease; } .toplu-bildirimler-page .send-time-radio-option input[type="radio"]:checked + .send-time-radio-custom { border-color: var(--ana-mavi); background-color: var(--ana-mavi); } .toplu-bildirimler-page .send-time-radio-option input[type="radio"]:checked + .send-time-radio-custom::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background-color: var(--kart-arka-plan); border-radius: 50%; } .toplu-bildirimler-page .send-time-radio-label { font-weight: 500; color: var(--metin-ana); } .toplu-bildirimler-page .scheduled-time { margin-top: var(--spacing-md); } .toplu-bildirimler-page .scheduled-time input { width: 100%; padding: var(--spacing-md); border: 1px solid var(--kenarlik-ana); border-radius: 10px; font-size: var(--text-base); } /* Karakter Sayacı */ .toplu-bildirimler-page .character-count { text-align: right; margin-top: var(--spacing-sm); font-size: var(--text-sm); color: var(--metin-ucuncu); } /* Form Aksiyonları */ .toplu-bildirimler-page .form-actions { display: flex; gap: var(--spacing-md); justify-content: flex-end; margin-top: var(--spacing-lg); } /* Hızlı Şablonlar - Ana Sayfa */ .toplu-bildirimler-page .template-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .toplu-bildirimler-page .template-card-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border: 1px solid var(--kenarlik-ana); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } .toplu-bildirimler-page .template-card-item:hover { border-color: var(--ana-mavi); background-color: var(--arka-plan-ucuncu); } .toplu-bildirimler-page .template-icon { width: 40px; height: 40px; background-color: var(--ana-mavi); color: var(--kart-arka-plan); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0; } .toplu-bildirimler-page .template-content h4 { margin: 0 0 var(--spacing-xs) 0; font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); } .toplu-bildirimler-page .template-content p { margin: 0; font-size: var(--text-sm); color: var(--metin-ucuncu); line-height: 1.4; } .toplu-bildirimler-page .template-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--kenarlik-ana); } .toplu-bildirimler-page .template-meta { display: flex; gap: var(--spacing-md); align-items: center; } .toplu-bildirimler-page .template-actions { display: flex; gap: var(--spacing-sm); } .toplu-bildirimler-page .template-modal-action { width: 36px; height: 36px; border: 1px solid var(--kenarlik-ana); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; background: var(--arka-plan-ana); color: var(--metin-ikincil); font-size: 14px; } .toplu-bildirimler-page .template-modal-action:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .toplu-bildirimler-page .template-modal-action.edit { border-color: var(--ana-mavi); color: var(--ana-mavi); } .toplu-bildirimler-page .template-modal-action.edit:hover { background: var(--ana-mavi); color: var(--kart-arka-plan); border-color: var(--ana-mavi); } .toplu-bildirimler-page .template-modal-action.delete { border-color: var(--durum-hata); color: var(--durum-hata); } .toplu-bildirimler-page .template-modal-action.delete:hover { background: var(--durum-hata); color: var(--kart-arka-plan); border-color: var(--durum-hata); } /* Şablon Yönetimi Modal */ .toplu-bildirimler-page .template-modal-management { display: flex; flex-direction: column; gap: var(--spacing-lg); } .toplu-bildirimler-page .template-modal-actions { display: flex; justify-content: flex-end; margin-bottom: var(--spacing-md); } .toplu-bildirimler-page .template-modal-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .toplu-bildirimler-page .template-modal-item { display: flex; flex-direction: column; padding: var(--spacing-lg); border: 2px solid var(--kenarlik-ana); border-radius: 10px; background-color: var(--arka-plan-ana); transition: all 0.2s ease; } .toplu-bildirimler-page .template-modal-item:hover { border: 2px solid var(--ana-mavi); box-shadow: 0 2px 8px var(--golge-ana); } .toplu-bildirimler-page .template-modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-md); } .toplu-bildirimler-page .template-modal-title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--metin-ana); flex: 1; } .toplu-bildirimler-page .template-modal-content { margin-bottom: var(--spacing-md); } .toplu-bildirimler-page .template-modal-message { margin: 0; font-size: var(--text-base); color: var(--metin-ikincil); line-height: 1.5; background-color: var(--arka-plan-ucuncu); padding: var(--spacing-md); border-radius: 10px; border-left: 4px solid var(--ana-mavi); } .toplu-bildirimler-page .template-modal-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-md); border-top: 1px solid var(--kenarlik-ana); } .toplu-bildirimler-page .template-modal-meta { display: flex; gap: var(--spacing-md); align-items: center; } .toplu-bildirimler-page .template-modal-type { background-color: var(--ana-mavi); color: var(--kart-arka-plan); padding: 4px 12px; border-radius: 16px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .toplu-bildirimler-page .template-modal-usage { font-size: var(--text-sm); color: var(--metin-ucuncu); font-weight: 500; } .toplu-bildirimler-page .template-modal-item-actions { display: flex; gap: var(--spacing-sm); margin: 0; } /* Modal Genişlik ve Düzen */ .toplu-bildirimler-page .modal-content.large { max-width: 900px; width: 90vw; } /* Banka havalesi modalı - creditModal'ın üstünde görünmeli (genel kural) */ #bankTransferModal { z-index: 9999 !important; } /* CreditModal z-index'i düşür (bankTransferModal açıldığında) */ #creditModal { z-index: 1000 !important; } /* Şablon Değişkenleri */ .toplu-bildirimler-page .template-variables { margin-top: var(--spacing-md); padding: var(--spacing-md); background-color: var(--arka-plan-ucuncu); border-radius: 10px; border: 1px solid var(--kenarlik-ana); } .toplu-bildirimler-page .template-variables h5 { margin: 0 0 var(--spacing-sm) 0; font-size: var(--text-sm); font-weight: 600; color: var(--metin-ana); } .toplu-bildirimler-page .variable-list { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .toplu-bildirimler-page .variable-tag { background-color: var(--ana-mavi); color: var(--kart-arka-plan); padding: 6px 12px; border-radius: 6px; font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .toplu-bildirimler-page .variable-tag:hover { background-color: var(--ana-mavi-daha-koyu); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); } /* Bildirim Geçmişi */ .toplu-bildirimler-page .notification-history { display: flex; flex-direction: column; gap: 0; } .toplu-bildirimler-page .history-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-radius: 0; transition: all 0.2s ease; position: relative; } .toplu-bildirimler-page .history-item.success { background-color: rgba(34, 197, 94, 0.05); border-left: 4px solid var(--ana-yesil); } .toplu-bildirimler-page .history-item.warning { background-color: rgba(245, 158, 11, 0.05); border-left: 4px solid var(--ana-sari); } .toplu-bildirimler-page .history-item.error { background-color: rgba(239, 68, 68, 0.05); border-left: 4px solid var(--ana-kirmizi); } .toplu-bildirimler-page .history-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .toplu-bildirimler-page .history-item.success .history-icon { background-color: var(--ana-yesil); color: var(--kart-arka-plan); } .toplu-bildirimler-page .history-item.warning .history-icon { background-color: var(--ana-sari); color: var(--kart-arka-plan); } .toplu-bildirimler-page .history-item.error .history-icon { background-color: var(--ana-kirmizi); color: var(--kart-arka-plan); } .toplu-bildirimler-page .history-content { flex: 1; min-width: 0; } .toplu-bildirimler-page .history-content h4 { margin: 0 0 var(--spacing-xs) 0; font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); } .toplu-bildirimler-page .history-content p { margin: 0 0 var(--spacing-xs) 0; font-size: var(--text-sm); color: var(--metin-ucuncu); } .toplu-bildirimler-page .history-time { font-size: var(--text-xs); color: var(--metin-ucuncu); } .toplu-bildirimler-page .history-status { display: flex; align-items: center; flex-shrink: 0; } .toplu-bildirimler-page .status-badge { padding: 6px 12px; border-radius: 16px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; min-width: 80px; text-align: center; } .toplu-bildirimler-page .status-badge.success { background-color: var(--ana-yesil); color: var(--kart-arka-plan); } .toplu-bildirimler-page .status-badge.warning { background-color: var(--ana-sari); color: var(--kart-arka-plan); } .toplu-bildirimler-page .status-badge.error { background-color: var(--ana-kirmizi); color: var(--kart-arka-plan); } /* Grup İstatistikleri */ .toplu-bildirimler-page .group-stats { display: flex; flex-direction: column; gap: 0; } .toplu-bildirimler-page .group-stat-item { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); border-bottom: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; cursor: pointer; } .toplu-bildirimler-page .group-stat-item:last-child { border-bottom: none; } .toplu-bildirimler-page .group-stat-item:hover { background-color: var(--arka-plan-ucuncu); } .toplu-bildirimler-page .group-stat-info { flex: 1; } .toplu-bildirimler-page .group-stat-info h4 { margin: 0 0 var(--spacing-xs) 0; font-size: var(--text-base); font-weight: 600; color: var(--metin-ana); } .toplu-bildirimler-page .group-stat-info p { margin: 0; font-size: var(--text-sm); color: var(--metin-ucuncu); } .toplu-bildirimler-page .group-stat-chart { width: 60px; height: 40px; display: flex; align-items: center; justify-content: center; } .toplu-bildirimler-page .mini-chart { width: 100%; height: 100%; display: flex; align-items: end; gap: 2px; } .toplu-bildirimler-page .chart-bar { flex: 1; background-color: var(--ana-mavi); border-radius: 2px; transition: all 0.3s ease; } /* Toplu bildirimler küçük buton */ .toplu-bildirimler-page .group-stat-item .btn-primary { padding: 6px 12px; font-size: var(--text-xs); } /* Önizleme Modal */ .toplu-bildirimler-page .preview-content { display: flex; flex-direction: column; gap: var(--spacing-md); } .toplu-bildirimler-page .preview-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--kenarlik-ana); } .toplu-bildirimler-page .preview-header h4 { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--metin-ana); } .toplu-bildirimler-page .preview-type { background-color: var(--ana-mavi); color: var(--kart-arka-plan); padding: 4px 8px; border-radius: 12px; font-size: var(--text-xs); font-weight: 500; } .toplu-bildirimler-page .preview-message { padding: var(--spacing-md); background-color: var(--arka-plan-ucuncu); border-radius: 10px; font-size: var(--text-base); line-height: 1.5; color: var(--metin-ana); min-height: 100px; } .toplu-bildirimler-page .preview-footer { padding-top: var(--spacing-md); border-top: 1px solid var(--kenarlik-ana); } .toplu-bildirimler-page .preview-footer p { margin: 0 0 var(--spacing-xs) 0; font-size: var(--text-sm); color: var(--metin-ucuncu); } .toplu-bildirimler-page .preview-footer strong { color: var(--metin-ana); } /* Müşteri Grubu Container */ .toplu-bildirimler-page .customer-group-container { display: flex; gap: var(--spacing-sm); align-items: center; } .toplu-bildirimler-page .customer-group-container select { flex: 1; } /* SMS Kredi Durumu - Minimal Tasarım */ .toplu-bildirimler-page .dashboard-card.full-width { grid-column: 1 / -1; margin-bottom: var(--spacing-lg); } .toplu-bildirimler-page .dashboard-card.full-width .card-body { padding: 0 24px; } .toplu-bildirimler-page .credit-overview { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-md) 0; } .toplu-bildirimler-page .credit-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background-color: var(--arka-plan-ikincil); border-radius: 10px; flex: 1; min-width: 0; border: 1px solid var(--kenarlik-ana); height: 74px; } .toplu-bildirimler-page .credit-icon { width: 40px; height: 40px; background-color: var(--arka-plan-ucuncu); color: var(--ana-mavi-acik); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; } .toplu-bildirimler-page .credit-content { flex: 1; display: flex; align-items: center; justify-content: space-between; } .toplu-bildirimler-page .credit-content h4 { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--metin-ucuncu); } .toplu-bildirimler-page .credit-amount { margin: 0; font-size: var(--text-lg); font-weight: 600; /* color: var(--ana-mavi); */ color: var(--baslik-dorduncu); } .toplu-bildirimler-page .credit-amount.used { /* color: var(--ana-sari); */ color: var(--baslik-dorduncu); } .toplu-bildirimler-page .credit-amount.remaining { /* color: var(--ana-yesil); */ color: var(--baslik-dorduncu); } .toplu-bildirimler-page .credit-progress-section { /* flex: 1; */ display: flex ; align-items: center; justify-content: center; gap: var(--spacing-md); padding: var(--spacing-md); background-color: var(--arka-plan-ikincil); border-radius: 10px; /* min-width: 0; */ border: 1px solid var(--kenarlik-ana); height: 74px; width: 100%; } .toplu-bildirimler-page .credit-progress { margin-top: 0; width: 100%; } .toplu-bildirimler-page .progress-bar { width: 100%; height: 6px; background-color: var(--arka-plan-ucuncu); border-radius: 3px; overflow: hidden; margin-bottom: var(--spacing-xs); } .toplu-bildirimler-page .progress-fill { height: 100%; background-color: var(--ana-mavi); border-radius: 3px; transition: width 0.3s ease; } .toplu-bildirimler-page .progress-text { font-size: var(--text-sm); color: var(--metin-ucuncu); text-align: center; } .toplu-bildirimler-page .credit-actions { margin-top: var(--spacing-md); text-align: center; } /* Bildirim Tablosu */ .toplu-bildirimler-page .table-container { overflow-x: auto; } .toplu-bildirimler-page .notifications-table { width: 100%; border-collapse: collapse; /* margin-bottom: var(--spacing-lg); */ border: none; } .toplu-bildirimler-page .notifications-table th { /* background-color: var(--arka-plan-ucuncu); */ padding: var(--spacing-md); text-align: left; font-weight: 600; color: var(--metin-ana); border: none; border-bottom: 2px solid var(--kenarlik-ana); } .toplu-bildirimler-page .notifications-table td { padding: var(--spacing-md); border: none; border-bottom: 1px solid var(--arka-plan-ucuncu); vertical-align: middle; } /* .toplu-bildirimler-page .notifications-table tr:hover { background-color: var(--arka-plan-ucuncu); } */ .toplu-bildirimler-page .notifications-table tr.success { border-left: 4px solid var(--ana-yesil); } .toplu-bildirimler-page .notifications-table tr.warning { border-left: 4px solid var(--ana-sari); } .toplu-bildirimler-page .notifications-table tr.error { border-left: 4px solid var(--ana-kirmizi); } .toplu-bildirimler-page .notifications-table .status-badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 4px 8px; border-radius: 12px; font-size: var(--text-xs); font-weight: 600; } .toplu-bildirimler-page .notifications-table .btn-small { margin-right: var(--spacing-xs); } /* Card Actions */ .toplu-bildirimler-page .card-actions { display: flex; gap: var(--spacing-sm); } /* Kredi Paketleri */ .toplu-bildirimler-page .credit-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .toplu-bildirimler-page .credit-package { padding: var(--spacing-lg); border: 2px solid var(--kenarlik-ana); border-radius: 10px; text-align: center; transition: all 0.2s ease; cursor: pointer; } .toplu-bildirimler-page .credit-package:hover { border-color: var(--ana-mavi); background-color: var(--arka-plan-ucuncu); } .toplu-bildirimler-page .credit-package.recommended { border-color: var(--ana-mavi); background-color: rgba(59, 130, 246, 0.05); } .toplu-bildirimler-page .credit-package h4 { margin: 0 0 var(--spacing-sm) 0; font-size: var(--text-lg); font-weight: 600; color: var(--metin-ana); } .toplu-bildirimler-page .credit-package .price { margin: 0 0 var(--spacing-sm) 0; font-size: var(--text-xl); font-weight: 700; color: var(--ana-mavi); } .toplu-bildirimler-page .credit-package .description { margin: 0 0 var(--spacing-md) 0; font-size: var(--text-sm); color: var(--metin-ucuncu); } .toplu-bildirimler-page .selected-package { padding: var(--spacing-md); background-color: var(--arka-plan-ikincil); border-radius: 10px; margin-top: var(--spacing-md); } .toplu-bildirimler-page .payment-methods { display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-md); } .toplu-bildirimler-page .payment-option { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .toplu-bildirimler-page .payment-option input[type="radio"] { display: none; } /* .toplu-bildirimler-page .payment-radio-custom { width: 18px; height: 18px; border: 2px solid var(--kenarlik-ana); border-radius: 50%; position: relative; transition: all 0.2s ease; } .toplu-bildirimler-page .payment-option input[type="radio"]:checked + .payment-radio-custom { border-color: var(--ana-mavi); background-color: var(--ana-mavi); } .toplu-bildirimler-page .payment-option input[type="radio"]:checked + .payment-radio-custom::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background-color: var(--kart-arka-plan); border-radius: 50%; } */ /* Responsive Tasarım */ @media (max-width: 768px) { .toplu-bildirimler-page .notification-type-radio-group { flex-direction: column; } .toplu-bildirimler-page .send-time-options { flex-direction: column; gap: var(--spacing-md); } .toplu-bildirimler-page .form-actions { flex-direction: column; } .toplu-bildirimler-page .template-card-item { flex-direction: column; text-align: center; } .toplu-bildirimler-page .customer-group-container { flex-direction: column; align-items: stretch; } .toplu-bildirimler-page .credit-packages { grid-template-columns: 1fr; } .toplu-bildirimler-page .payment-methods { flex-direction: column; } .toplu-bildirimler-page .notifications-table { font-size: var(--text-sm); } .toplu-bildirimler-page .notifications-table th, .toplu-bildirimler-page .notifications-table td { padding: var(--spacing-sm); } /* SMS Kredi Durumu Responsive */ .toplu-bildirimler-page .credit-overview { flex-direction: column; gap: var(--spacing-md); } .toplu-bildirimler-page .credit-item { width: 100%; } .toplu-bildirimler-page .credit-progress-section { width: 100%; min-width: auto; } /* Şablon Yönetimi Modal Responsive */ .toplu-bildirimler-page .template-modal-item { padding: var(--spacing-md); } .toplu-bildirimler-page .template-modal-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } .toplu-bildirimler-page .template-modal-footer { flex-direction: column; gap: var(--spacing-md); align-items: flex-start; } .toplu-bildirimler-page .template-modal-meta { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } .toplu-bildirimler-page .template-modal-item-actions { align-self: flex-end; } } @media (max-width: 1024px) { .toplu-bildirimler-page .credit-overview { flex-wrap: wrap; gap: var(--spacing-md); } .toplu-bildirimler-page .credit-item { flex: 1 1 calc(50% - var(--spacing-md)); min-width: 200px; } .toplu-bildirimler-page .credit-progress-section { flex: 1 1 100%; margin-top: var(--spacing-md); } } /* #endregion */ /* Header-right özel butonlar */ .header-special-buttons { display: flex; align-items: center; gap: var(--spacing-sm); margin-right: var(--spacing-md); } .header-special-btn { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); background: var(--primary-500); color: var(--white); border: none; border-radius: var(--border-radius-md); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .header-special-btn:hover { background: var(--primary-600); transform: translateY(-1px); box-shadow: var(--shadow-md); } .header-special-btn.secondary { background: var(--success-500); } .header-special-btn.secondary:hover { background: var(--success-600); } .header-special-btn.warning { background: var(--warning-500); } .header-special-btn.warning:hover { background: var(--warning-600); } .header-special-btn i { font-size: 16px; } /* Mobile responsive */ @media (max-width: 768px) { .sidebar-nav li .hover-dropdown { display: none; } .header-special-buttons { display: none; } } /* #endregion */ /* #region Göstergeler - Anasayfa Stilleri */ .anasayfa-page .quick-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } /* #endregion Göstergeler - Anasayfa Stilleri */ /* #region Genel Tanımlar Sayfası Stilleri */ .genel-tanimlar-page { background: var(--gray-50); } .genel-tanimlar-page .content-wrapper { overflow-y: hidden; } .page-wrapper-genel-tanimlar { min-height: 100vh; background: var(--gray-50); } .genel-tanimlar-page .settings-container { display: grid; grid-template-columns: 280px 1fr; gap: 32px; height: calc(100vh - 140px); overflow: hidden; } .genel-tanimlar-page .settings-sidebar { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); padding: 24px 0; height: fit-content; position: static; } .genel-tanimlar-page .settings-nav ul { list-style: none; padding: 0; margin: 0; } .genel-tanimlar-page .settings-nav-link { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); font-size: var(--text-base); color: var(--metin-ucuncu); text-decoration: none; font-weight: 500; transition: all 0.2s ease; border-left: 3px solid transparent; } .genel-tanimlar-page .settings-nav-link:hover { background: var(--arka-plan-ikincil); color: var(--ana-mavi); } .genel-tanimlar-page .settings-nav-link.active { background: var(--durum-bilgi-acik); color: var(--ana-mavi); border-left-color: var(--ana-mavi); } .genel-tanimlar-page .settings-nav-link i { font-size: var(--text-base); width: 20px; } .genel-tanimlar-page .settings-content { overflow-y: auto; padding-right: 24px; } .genel-tanimlar-page .settings-section { display: none; } .genel-tanimlar-page .settings-section.active { display: block; } .genel-tanimlar-page .section-header { margin-bottom: 32px; justify-content: space-between; align-items: flex-start; } .genel-tanimlar-page .section-title-group { display: flex; flex-direction: column; gap: 4px; } .genel-tanimlar-page .section-header h2 { color: var(--metin-ana); font-size: 24px; font-weight: 600; margin: 0; } .genel-tanimlar-page .section-header p { color: var(--metin-ucuncu); font-size: var(--text-base); margin: 0; } .genel-tanimlar-page .settings-card { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); padding: 24px; margin-bottom: 24px; } /* Genel Tanımlar Tablo Stilleri */ .genel-tanimlar-page .table-container { overflow-x: auto; width: 100%; } .genel-tanimlar-page .settings-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; min-width: 100%; } .genel-tanimlar-page .settings-table th { background: var(--gray-50); color: var(--gray-700); font-weight: 600; padding: 16px; text-align: left; border-bottom: 1px solid var(--gray-200); white-space: nowrap; } .genel-tanimlar-page .settings-table td { padding: 16px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; word-wrap: break-word; overflow-wrap: break-word; } .genel-tanimlar-page .settings-table tbody tr:hover { background: var(--gray-50); } .genel-tanimlar-page .settings-table tbody tr:last-child td { border-bottom: none; } /* Kolon genişlikleri */ .genel-tanimlar-page .settings-table th:nth-child(1), .genel-tanimlar-page .settings-table td:nth-child(1) { width: 25%; /* Bölüm Adı */ } .genel-tanimlar-page .settings-table th:nth-child(2), .genel-tanimlar-page .settings-table td:nth-child(2) { width: 45%; /* Açıklama */ } .genel-tanimlar-page .settings-table th:nth-child(3), .genel-tanimlar-page .settings-table td:nth-child(3) { width: 15%; /* Durum */ } .genel-tanimlar-page .settings-table th:nth-child(4), .genel-tanimlar-page .settings-table td:nth-child(4) { width: 15%; /* İşlemler */ } /* İşlemler sütunu için özel stil */ .genel-tanimlar-page .settings-table th:last-child, .genel-tanimlar-page .settings-table td:last-child, .genel-tanimlar-page .settings-table th[data-action="true"], .genel-tanimlar-page .settings-table td[data-action="true"] { width: fit-content !important; min-width: 80px !important; text-align: center !important; white-space: nowrap !important; } /* Action buttons görünürlüğü */ .genel-tanimlar-page .action-buttons { display: flex !important; gap: 8px !important; justify-content: center !important; } .genel-tanimlar-page .action-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Status Toggle Stilleri */ .genel-tanimlar-page .status-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 0.2s ease; user-select: none; } .genel-tanimlar-page .status-toggle:hover { background: var(--primary-50); } .genel-tanimlar-page .status-toggle input[type="checkbox"] { display: none; } .genel-tanimlar-page .toggle-slider { width: 40px; height: 20px; background: var(--kenarlik-ana); border-radius: 20px; position: relative; transition: all 0.3s ease; border: 2px solid var(--kenarlik-ana); } .genel-tanimlar-page .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; background: var(--kart-arka-plan); border-radius: 50%; top: 0px; left: 0px; transition: all 0.3s ease; box-shadow: 0 2px 4px var(--golge-ucuncu); } .genel-tanimlar-page .status-toggle input[type="checkbox"]:checked + .toggle-slider { background: var(--ana-mavi); border-color: var(--ana-mavi); } .genel-tanimlar-page .status-toggle input[type="checkbox"]:checked + .toggle-slider::before { transform: translateX(20px); } /* .genel-tanimlar-page .toggle-text { font-size: 12px; font-weight: 600; color: var(--metin-ikincil); transition: color 0.2s ease; } .genel-tanimlar-page .status-toggle input[type="checkbox"]:checked ~ .toggle-text { color: var(--ana-mavi); } /* Ayarlar sayfası için toggle stilleri (genel-tanimlar ile aynı) */ .ayarlar-page .status-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 0.2s ease; user-select: none; } .ayarlar-page .status-toggle:hover { background: var(--primary-50); } .ayarlar-page .status-toggle input[type="checkbox"] { display: none; } .ayarlar-page .toggle-slider { width: 40px; height: 20px; background: var(--kenarlik-ana); border-radius: 20px; position: relative; transition: all 0.3s ease; border: 2px solid var(--kenarlik-ana); } .ayarlar-page .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; background: var(--kart-arka-plan); border-radius: 50%; top: 0px; left: 0px; transition: all 0.3s ease; box-shadow: 0 2px 4px var(--golge-ucuncu); } .ayarlar-page .status-toggle input[type="checkbox"]:checked + .toggle-slider { background: var(--ana-mavi); border-color: var(--ana-mavi); } .ayarlar-page .status-toggle input[type="checkbox"]:checked + .toggle-slider::before { transform: translateX(20px); } */ .ayarlar-page .toggle-text { font-size: 12px; font-weight: 600; color: var(--metin-ikincil); transition: color 0.2s ease; } .ayarlar-page .status-toggle input[type="checkbox"]:checked ~ .toggle-text { color: var(--ana-mavi); } .table-container { overflow-x: auto; } .settings-table { width: 100%; border-collapse: collapse; font-size: 14px; } .settings-table th { background: var(--gray-50); color: var(--gray-700); font-weight: 600; padding: 16px; text-align: left; border-bottom: 1px solid var(--gray-200); white-space: nowrap; } .settings-table td { padding: 16px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; } .settings-table tbody tr:hover { background: var(--gray-50); } .settings-table tbody tr:last-child td { border-bottom: none; } /* Task Type Item */ .task-type-item { display: flex; align-items: center; gap: 8px; } .task-type-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .color-preview { width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--gray-300); } /* Status Badge */ .status-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .status-badge.active { background: var(--success-100); color: var(--success-700); } .status-badge.inactive { background: var(--gray-100); color: var(--gray-600); } /* Action Buttons */ /* Artık genel .action-buttons kullanılıyor */ /* .btn-icon ortak tanımda - bu tekrar tanım silindi */ .toplu-bildirimler-page .btn-icon { width: 32px; height: 32px; /* transition: all 0.2s ease; */ font-size: 14px; } .btn-icon:hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--gray-700); } .btn-icon.danger { color: var(--danger-600); border-color: var(--danger-200); } .btn-icon.danger:hover { background: var(--danger-50); border-color: var(--danger-300); color: var(--danger-700); } /* Definition Form */ .definition-form { display: flex; flex-direction: column; gap: 20px; } .definition-form .form-group { display: flex; flex-direction: column; gap: 6px; } .definition-form label { font-weight: 500; color: var(--gray-700); font-size: 14px; } .definition-form input, .definition-form textarea, .definition-form select { padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px; transition: border-color 0.2s ease; } .definition-form input:focus, .definition-form textarea:focus, .definition-form select:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .definition-form input[type="color"] { width: 60px; height: 40px; padding: 4px; cursor: pointer; } .checkbox-wrapper { display: flex; align-items: center; gap: 8px; cursor: pointer; } .checkbox-wrapper input[type="checkbox"] { width: 16px; height: 16px; margin: 0; } /* Modal Styles */ .modal.small .modal-content { max-width: 400px; } /* .btn-danger { background: var(--danger-500); color: var(--kart-arka-plan); border: 1px solid var(--danger-500); padding: 10px 20px; border-radius: 6px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; } */ /* .btn-danger:hover { border-color: var(--danger-600); } */ /* Genel Tanımlar Modal Stilleri */ .genel-tanimlar-page .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--modal-overlay); z-index: 15000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .genel-tanimlar-page .modal.show { display: flex; opacity: 1; } .genel-tanimlar-page .modal[style*="display: flex"] { display: flex !important; opacity: 1; } .genel-tanimlar-page .modal-content { background: var(--modal-arka-plan); border-radius: 16px; box-shadow: var(--shadow-2xl); position: relative; z-index: 15001; max-height: 90vh; overflow-y: auto; margin: auto; width: 90%; max-width: 600px; } .genel-tanimlar-page .modal-content.small { max-width: 400px; width: 90%; } /* .genel-tanimlar-page .modal-header { padding: 24px 32px; border-bottom: 1px solid var(--kenarlik-ana); border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: space-between; position: relative; background: var(--arka-plan-ana); } .genel-tanimlar-page .modal-header h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--metin-ana); display: flex; align-items: center; gap: 12px; } .genel-tanimlar-page .modal-header h3 i { color: var(--ana-mavi); font-size: 18px; } .genel-tanimlar-page .modal-close { width: 40px; height: 40px; border: none; background: var(--arka-plan-ucuncu); color: var(--metin-ikincil); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: all 0.2s ease; } .genel-tanimlar-page .modal-close:hover { background: var(--durum-hata); color: var(--metin-beyaz); transform: scale(1.05); } */ .genel-tanimlar-page .modal-body { padding: 32px; max-height: 60vh; overflow-y: auto; background: var(--arka-plan-ana); } .genel-tanimlar-page .modal-footer { padding: 24px 32px; border-top: 1px solid var(--kenarlik-ana); display: flex; gap: 12px; justify-content: flex-end; border-radius: 0 0 16px 16px; background: var(--arka-plan-ucuncu); } .genel-tanimlar-page .modal-content input, .genel-tanimlar-page .modal-content textarea, .genel-tanimlar-page .modal-content select { border: 2px solid var(--kenarlik-ana); background-color: var(--arka-plan-ana); /* padding: 12px 16px; */ border-radius: 8px; font-size: 14px; font-weight: 400; line-height: 1.5; transition: all 0.2s ease; width: 100%; color: var(--metin-ana); } .genel-tanimlar-page .modal-content select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; padding-right: 40px !important; cursor: pointer !important; } .genel-tanimlar-page .modal-content select:hover, .genel-tanimlar-page .modal-content select:focus { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important; } .genel-tanimlar-page .modal-content input:focus, .genel-tanimlar-page .modal-content textarea:focus, .genel-tanimlar-page .modal-content select:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--primary-100); background-color: var(--arka-plan-ana); } .genel-tanimlar-page .modal-content input::placeholder, .genel-tanimlar-page .modal-content textarea::placeholder { color: var(--metin-ucuncu); font-weight: 400; } .genel-tanimlar-page .modal-content input[type="color"] { width: 60px; height: 40px; padding: 4px; cursor: pointer; } .genel-tanimlar-page .modal-content input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; } .genel-tanimlar-page .modal .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--metin-ana); margin: 0; padding: 0; background: none; border: none; } .genel-tanimlar-page .modal .checkbox-label:hover { background: none; } .genel-tanimlar-page .modal .checkbox-label span { user-select: none; } .genel-tanimlar-page .definition-form { display: flex; flex-direction: column; gap: 24px; } .genel-tanimlar-page .definition-form .form-group { display: flex; flex-direction: column; gap: 8px; margin: 0; } .genel-tanimlar-page .definition-form label { font-weight: 600; color: var(--metin-ana); font-size: 14px; margin-bottom: 4px; } .genel-tanimlar-page .checkbox-wrapper { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--arka-plan-ucuncu); border: 2px solid var(--kenarlik-ana); border-radius: 8px; transition: all 0.2s ease; margin-top: 8px; } .genel-tanimlar-page .checkbox-wrapper:hover { background: var(--primary-50); border-color: var(--ana-mavi); } .genel-tanimlar-page .checkbox-wrapper input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ana-mavi); cursor: pointer; } .genel-tanimlar-page .checkbox-wrapper span { font-weight: 500; color: var(--metin-ana); font-size: 14px; user-select: none; } /* .btn-danger ortak stillerden miras alınır */ .genel-tanimlar-page .btn-outline { background: transparent; color: var(--metin-ikincil); border: 2px solid var(--kenarlik-ana); padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; } .genel-tanimlar-page .btn-outline:hover { background: var(--arka-plan-ucuncu); border-color: var(--metin-ikincil); color: var(--metin-ana); transform: translateY(-1px); } /* Responsive Modal */ @media (max-width: 768px) { /* Sayfa prefixli modal-content stili kaldırıldı - Ortak stil kullanılıyor */ .genel-tanimlar-page .modal-header, .genel-tanimlar-page .modal-body, .genel-tanimlar-page .modal-footer { padding: 16px; } } /* #endregion Genel Tanımlar Sayfası Stilleri */ /* ======================================== YETKİLENDİRME SİSTEMİ STİLLERİ ======================================== */ /* Yetkilendirme Bölümleri */ .settings-section { /* margin-bottom: 2rem; */ display: none; } .settings-section.active { display: block !important; } /* Yetkilendirme bölümleri sadece active olduğunda görünür olsun */ /* Kullanıcı Yönetimi Stilleri */ .user-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .role-badge { padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .role-badge.role-super-admin { background-color: #fef3c7; color: #92400e; } .role-badge.role-admin { background-color: #dbeafe; color: #1e40af; } .role-badge.role-veteriner { background-color: #dcfce7; color: #166534; } .role-badge.role-sekreter { background-color: #f3e8ff; color: var(--ana-mor-koyu); } .status-badge { padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .status-badge.status-aktif { background-color: #dcfce7; color: #166534; } .status-badge.status-pasif { background-color: #fee2e2; color: #dc2626; } /* Artık genel .action-buttons kullanılıyor */ /* .btn-icon ortak tanımda - bu tekrar tanım silindi */ .genel-tanimlar-page .btn-icon { /* transition: all 0.2s; */ font-size: 14px; /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */ } .genel-tanimlar-page .btn-icon:hover { background-color: #f9fafb; color: #374151; border-color: #d1d5db; /* box-shadow: var(--shadow-sm); */ /* transform: translateY(-1px); */ } .btn-icon.danger { color: #dc2626; border-color: #fecaca; } .btn-icon.danger:hover { background-color: #fef2f2; color: #b91c1c; border-color: #fca5a5; } /* Rol Yönetimi Stilleri */ .roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .role-card { background: var(--kart-arka-plan); border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; transition: all 0.2s; } .role-card:hover { border-color: #d1d5db; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .role-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .role-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--kart-arka-plan); } .role-icon.super-admin { background: linear-gradient(135deg, #f59e0b, #d97706); } .role-icon.admin { background: linear-gradient(135deg, #3b82f6, #2563eb); } .role-icon.veteriner { background: linear-gradient(135deg, #10b981, #059669); } .role-icon.sekreter { background: linear-gradient(135deg, var(--ana-mor), var(--ana-mor-koyu)); } .role-info h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #111827; } .role-info p { margin: 0; font-size: 14px; color: #6b7280; } .role-permissions { margin-bottom: 16px; } .permission-count { background-color: #f3f4f6; color: #374151; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; } .role-actions { display: flex; gap: 8px; } /* İzin Yönetimi Stilleri */ .permission-categories { display: flex; flex-direction: column; gap: 16px; } .permission-category { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; } .category-header { background-color: #f9fafb; padding: 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.2s; } .category-header:hover { background-color: #f3f4f6; } .category-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #111827; display: flex; align-items: center; gap: 8px; } .permission-list { padding: 16px; display: none; } .permission-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f3f4f6; } .permission-item:last-child { border-bottom: none; } .role-permissions { display: flex; gap: 16px; } .role-permissions label { display: flex; align-items: center; gap: 4px; font-size: 14px; cursor: pointer; } .role-permissions input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #10b981; margin-right: 8px; } .role-permissions input[type="checkbox"]:checked { background-color: #10b981; border-color: #10b981; } .role-permissions input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; } .role-permissions input[type="checkbox"]:disabled:checked { background-color: #6b7280; border-color: #6b7280; } .section-header { margin-bottom: 1.5rem; } .section-header h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } .section-header p { color: var(--text-secondary); font-size: 0.9rem; } /* Kullanıcı Yönetimi */ .ayarlar-page .user-info { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-details h4 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.25rem 0; } .user-details p { font-size: 0.8rem; color: var(--text-secondary); margin: 0; } .role-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .role-badge.super-admin { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #8b4513; } .role-badge.admin { background: linear-gradient(135deg, #3b82f6, #60a5fa); color: var(--kart-arka-plan); } .role-badge.veterinarian { background: linear-gradient(135deg, #10b981, #34d399); color: var(--kart-arka-plan); } .role-badge.secretary { background: linear-gradient(135deg, var(--ana-mor), var(--ana-mor-acik)); color: var(--kart-arka-plan); } .role-badge.accountant { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: var(--kart-arka-plan); } .status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 500; } .status-badge.active { background: #dcfce7; color: #166534; } .status-badge.inactive { background: #fee2e2; color: #991b1b; } /* Artık genel .action-buttons kullanılıyor */ /* .btn-icon { width: 32px; height: 32px; border: none; border-radius: 6px; background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .btn-icon:hover { background: var(--primary-color); color: var(--kart-arka-plan); transform: translateY(-1px); } .btn-icon.danger:hover { background: #ef4444; } */ /* Rol Kartları */ .roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } /* .role-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; transition: all 0.2s ease; } */ .role-card:hover { /* border-color: var(--primary-color); */ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1); } .role-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .role-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--kart-arka-plan); } .role-icon.super-admin { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #8b4513; } .role-icon.admin { background: linear-gradient(135deg, #3b82f6, #60a5fa); } .role-icon.veterinarian { background: linear-gradient(135deg, #10b981, #34d399); } .role-icon.secretary { background: linear-gradient(135deg, var(--ana-mor), var(--ana-mor-acik)); } .role-icon.accountant { background: linear-gradient(135deg, #f59e0b, #fbbf24); } .role-info { flex: 1; } .role-info h4 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.25rem 0; } .role-info p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; } .role-actions { display: flex; gap: 0.5rem; } .role-stats { display: flex; gap: 1rem; } .stat-item { font-size: 0.8rem; color: var(--text-secondary); background: var(--bg-secondary); padding: 0.25rem 0.75rem; border-radius: 12px; } /* İzin Yönetimi */ .permissions-tree { max-height: 500px; overflow-y: auto; } .permission-category { margin-bottom: 1rem; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .category-header { background: var(--bg-secondary); padding: 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; font-weight: 600; color: var(--text-primary); transition: all 0.2s ease; } .category-header:hover { background: var(--primary-color); color: var(--kart-arka-plan); } .category-arrow { transition: transform 0.2s ease; font-size: 0.8rem; } .category-arrow.rotated { transform: rotate(90deg); } .permission-items { display: none; padding: 0; } .permission-items.expanded { display: block; } .permission-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); transition: background 0.2s ease; } .permission-item:last-child { border-bottom: none; } .permission-item:hover { background: var(--bg-secondary); } .permission-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; flex: 1; font-size: 0.9rem; color: var(--text-primary); } .permission-label input[type="checkbox"] { display: none; } .checkmark { width: 18px; height: 18px; border: 2px solid var(--border-color); border-radius: 4px; position: relative; transition: all 0.2s ease; } .permission-label input[type="checkbox"]:checked + .checkmark { background: var(--primary-color); border-color: var(--primary-color); } .permission-label input[type="checkbox"]:checked + .checkmark::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--kart-arka-plan); font-size: 12px; font-weight: bold; } .permission-roles { display: flex; gap: 0.5rem; } .permission-roles .role-badge { font-size: 0.7rem; padding: 0.2rem 0.5rem; } /* Form Stilleri */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .checkbox-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.9rem; color: var(--text-primary); } .checkbox-label input[type="checkbox"] { display: none; } .checkbox-label .checkmark { width: 18px; height: 18px; border: 2px solid var(--border-color); border-radius: 4px; position: relative; transition: all 0.2s ease; } .checkbox-label input[type="checkbox"]:checked + .checkmark { background: var(--primary-color); border-color: var(--primary-color); } .checkbox-label input[type="checkbox"]:checked + .checkmark::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--kart-arka-plan); font-size: 12px; font-weight: bold; } /* Responsive */ @media (max-width: 768px) { .roles-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .permission-item { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .permission-roles { align-self: flex-end; } } /* #endregion Yetkilendirme Sistemi Stilleri */ /* #region E-Reçete Sistemi Stilleri */ .form-section { margin-bottom: 24px; padding: 20px; background: var(--kart-arka-plan); border-radius: 12px; border: 1px solid var(--kenarlik-ana); } .form-section h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .form-section h4 i { color: var(--renk-birincil); } .medication-row { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 8px; padding: 16px; margin-bottom: 12px; transition: all 0.3s ease; } .medication-row:hover { border-color: var(--ana-mavi-koyu); /* box-shadow: 0 2px 8px var(--golge-ana); */ } .drug-info { margin-top: 12px; padding: 12px; background: var(--kart-arka-plan); border-radius: 6px; border-left: 4px solid var(--renk-birincil); } /* Reçete modalındaki etkileşim alanını tamamen gizle (sadece reçete modalında) */ #prescriptionModal .drug-info, #prescriptionModal .drug-interactions, #prescriptionModal .drug-warnings, #newTreatmentModal .drug-info, #newTreatmentModal .drug-interactions, #newTreatmentModal .drug-warnings { display: none !important; } /* ============================================ E-REÇETE MODAL - YENİ TASARIM ============================================ */ /* Modal Body */ .prescription-modal-body { padding: 24px; max-height: calc(100vh - 200px); overflow-y: auto; } /* Bölüm Stilleri */ .prescription-section { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 12px; margin-bottom: 20px; overflow: hidden; transition: box-shadow 0.3s ease; } .prescription-section:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } /* .section-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, var(--ana-mavi-acik) 0%, var(--ana-mavi) 100%); color: white; border-bottom: 1px solid var(--kenarlik-ana); } */ .section-header h4 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; color: white; } .section-icon { font-size: 18px; width: 24px; text-align: center; } .section-icon.warning { color: var(--renk-uyari); } /* .section-content { padding: 20px; } */ /* Form Grid */ .prescription-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; } .prescription-form-group { display: flex; flex-direction: column; gap: 8px; } .prescription-form-group.full-width { grid-column: 1 / -1; } .prescription-form-group label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 0; } .prescription-form-group label i { font-size: 14px; color: var(--ana-mavi); } .prescription-form-group input, .prescription-form-group select, .prescription-form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--kenarlik-ana); border-radius: 8px; font-size: 14px; background-color: var(--arka-plan-ana); color: var(--metin-ana); transition: all 0.2s ease; box-sizing: border-box; font-family: inherit; } .prescription-form-group input:focus, .prescription-form-group select:focus, .prescription-form-group textarea:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .prescription-form-group input[readonly] { background-color: var(--arka-plan-ikincil); cursor: not-allowed; } .prescription-form-group select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 40px; cursor: pointer; } .prescription-form-group textarea { resize: vertical; min-height: 80px; } /* İlaç Ekle Butonu */ .btn-add-medication { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .btn-add-medication:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-1px); } /* İlaç Listesi */ .medications-list { display: flex; flex-direction: column; gap: 16px; } .medications-list:empty::before { content: "Henüz ilaç eklenmedi. 'İlaç Ekle' butonuna tıklayarak ilaç ekleyebilirsiniz."; display: block; padding: 40px 20px; text-align: center; color: var(--metin-ucuncu); font-style: italic; background: var(--arka-plan-ikincil); border-radius: 8px; border: 2px dashed var(--kenarlik-ana); } /* İlaç Öğesi */ .medication-item { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 10px; overflow: hidden; transition: all 0.3s ease; } .medication-item:hover { border-color: var(--ana-mavi); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); } .medication-item-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--arka-plan-ikincil); border-bottom: 1px solid var(--kenarlik-ana); } .medication-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--ana-mavi); color: white; border-radius: 50%; font-size: 13px; font-weight: 600; } .btn-remove-medication { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--durum-hata-acik); color: white; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; padding: 0; } .btn-remove-medication:hover { background: var(--durum-hata); transform: scale(1.1); } .medication-item-content { padding: 16px; } .medication-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .medication-form-group { display: flex; flex-direction: column; gap: 8px; } .medication-form-group.full-width { grid-column: 1 / -1; } .medication-form-group label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--baslik-ana); } .medication-form-group label i { font-size: 13px; color: var(--ana-mavi); } .medication-form-group input, .medication-form-group select { width: 100%; padding: 10px 14px; border: 1px solid var(--kenarlik-ana); border-radius: 6px; font-size: 14px; background-color: white; color: var(--metin-ana); transition: all 0.2s ease; } .medication-form-group input:focus, .medication-form-group select:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .medication-form-group select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; padding-right: 35px; cursor: pointer; } /* Uyarılar */ .warnings-container { min-height: 60px; } .warning-placeholder { display: flex; align-items: center; gap: 10px; padding: 16px; background: var(--arka-plan-ikincil); border-radius: 8px; color: var(--metin-ucuncu); font-size: 14px; } .warning-placeholder i { color: var(--ana-mavi); font-size: 18px; } /* Modal Header */ .modal-header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; } .modal-title-wrapper { display: flex; align-items: center; gap: 12px; } .modal-title-icon { font-size: 24px; color: var(--ana-mavi); } /* Responsive */ @media (max-width: 768px) { .prescription-modal-body { padding: 16px; } .prescription-form-grid, .medication-form-grid { grid-template-columns: 1fr; } .section-header { flex-wrap: wrap; gap: 8px; } .btn-add-medication { width: 100%; justify-content: center; } } .drug-warning-item, .drug-interaction-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 14px; } .drug-warning-item i { color: var(--renk-uyari); margin-top: 2px; } .drug-interaction-item i { color: var(--renk-bilgi); margin-top: 2px; } .warnings-container { background: var(--kart-arka-plan); border-radius: 8px; padding: 16px; border: 1px solid var(--kenarlik-ana); } .warning-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; font-size: 14px; } .warning-item:last-child { margin-bottom: 0; } .warning-item.info { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); border: 1px solid var(--durum-bilgi-kenarlik); } .warning-item.warning { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); border: 1px solid var(--durum-uyari-kenarlik); } .warning-item i { font-size: 16px; } /* Reçete Önizleme Stilleri */ .prescription-preview { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--metin-ana); } .prescription-header { text-align: center; border-bottom: 2px solid var(--renk-birincil); padding-bottom: 20px; margin-bottom: 24px; } .prescription-header h2 { color: var(--renk-birincil); font-size: 24px; font-weight: 700; margin: 0 0 12px 0; } .prescription-info { display: flex; justify-content: space-between; font-size: 14px; color: var(--metin-ikincil); } .prescription-patient, .prescription-medications, .prescription-instructions { margin-bottom: 24px; } .prescription-patient h3, .prescription-medications h3, .prescription-instructions h3 { color: var(--metin-ana); font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--kenarlik-ana); padding-bottom: 8px; margin-bottom: 16px; } .prescription-patient p, .prescription-instructions p { margin-bottom: 8px; } .prescription-patient strong, .prescription-instructions strong { color: var(--metin-ana); font-weight: 600; } .medication-item { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 8px; padding: 16px; margin-bottom: 12px; } .medication-item p { margin-bottom: 4px; } .medication-item strong { color: var(--renk-birincil); font-weight: 600; } .prescription-footer { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--kenarlik-ana); } .doctor-signature, .prescription-validity { flex: 1; } .doctor-signature p, .prescription-validity p { margin-bottom: 4px; } .doctor-signature strong, .prescription-validity strong { color: var(--metin-ana); font-weight: 600; } /* Modal Footer Butonları */ .modal-footer { display: flex; gap: 12px; justify-content: flex-end; padding: 20px; background: var(--kart-arka-plan); border-top: 1px solid var(--kenarlik-ana); border-radius: 0 0 12px 12px; } .modal-footer .btn-success { background: var(--durum-basarili-kenarlik); color: var(--durum-basarili-metin); border: 1px solid var(--durum-basarili-kenarlik); } .modal-footer .btn-success:hover { background: var(--durum-basarili-metin); color: var(--metin-beyaz); border: 1px solid var(--durum-basarili-metin); } /* Responsive Tasarım */ @media (max-width: 768px) { .form-section { padding: 16px; } .medication-row { padding: 12px; } .prescription-info { flex-direction: column; gap: 8px; } .prescription-footer { flex-direction: column; gap: 16px; } .modal-footer { flex-direction: column; } .modal-footer button { width: 100%; } } /* Tedaviler sayfası için modal stilleri */ .tedaviler-page .modal { z-index: 10000 !important; backdrop-filter: blur(8px); transition: all 0.3s ease; } .tedaviler-page .modal.show { display: flex !important; opacity: 1 !important; } .tedaviler-page .modal-content.large { max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto; border-radius: 16px; /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); */ transform: scale(1); animation: modalSlideIn 0.3s ease-out; } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* #endregion E-Reçete Sistemi Stilleri */ /* #region Laboratuvar Modülü Stilleri */ .radyoloji-page #labRequestsTab .lab-requests-list, .radyoloji-page #labResultsTab .lab-results-list, .radyoloji-page #xrayRequestsTab .xray-requests-list { display: flex; flex-direction: column; gap: 16px; } .radyoloji-page #labRequestsTab .lab-request-item, .radyoloji-page #labResultsTab .lab-result-item, .radyoloji-page #xrayRequestsTab .xray-request-item { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; transition: all 0.3s ease; } .radyoloji-page .lab-request-item .patient-info { display: flex; align-items: center; gap: 8px; } .radyoloji-page .lab-request-item .owner { margin: 0 !important; } .radyoloji-page #labRequestsTab .lab-request-item:hover, .radyoloji-page #labResultsTab .lab-result-item:hover, .radyoloji-page #xrayRequestsTab .xray-request-item:hover { border-color: var(--ana-mavi); /* box-shadow: 0 4px 12px var(--golge-ana); */ } .radyoloji-page #labRequestsTab .request-priority, .radyoloji-page #labResultsTab .result-priority, .radyoloji-page #xrayRequestsTab .request-priority { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; background: var(--ana-mavi); } .radyoloji-page #labRequestsTab .lab-request-item.urgent .request-priority, .radyoloji-page #labResultsTab .lab-result-item.urgent .result-priority, .radyoloji-page #xrayRequestsTab .xray-request-item.urgent .request-priority { background: var(--durum-hata); } .radyoloji-page #labRequestsTab .lab-request-item.normal .request-priority, .radyoloji-page #labResultsTab .lab-result-item.normal .result-priority, .radyoloji-page #xrayRequestsTab .xray-request-item.normal .request-priority { background: var(--ana-mavi); } /* Öncelik noktasındaki ikonları gizle, sadece renkli nokta kalsın */ .radyoloji-page #labRequestsTab .request-priority i, .radyoloji-page #labResultsTab .result-priority i, .radyoloji-page #xrayRequestsTab .request-priority i { display: none; } .radyoloji-page #labRequestsTab .request-info, .radyoloji-page #labResultsTab .result-info, .radyoloji-page #xrayRequestsTab .request-info { flex: 1; } .radyoloji-page #labRequestsTab .patient-info, .radyoloji-page #labResultsTab .patient-info, .radyoloji-page #xrayRequestsTab .patient-info { font-weight: 600; color: var(--metin-ana); margin-bottom: 4px; } .radyoloji-page #labRequestsTab .patient-info .owner, .radyoloji-page #labResultsTab .patient-info .owner, .radyoloji-page #xrayRequestsTab .patient-info .owner { font-weight: 400; color: var(--metin-ikincil); font-size: 14px; } .radyoloji-page #labRequestsTab .test-type, .radyoloji-page #labResultsTab .scan-type, .radyoloji-page #xrayRequestsTab .scan-type { display: flex; align-items: center; gap: 8px; color: var(--metin-ikincil); font-size: 14px; margin-bottom: 4px; } .radyoloji-page #labRequestsTab .request-details, .radyoloji-page #labResultsTab .result-details, .radyoloji-page #xrayRequestsTab .request-details { display: flex; gap: 0; /* Gap'i kaldırdık, padding-right ile ayırıyoruz */ font-size: 13px; color: var(--metin-ikincil); } /* Request details içindeki alanlara gri border ayırıcı */ /* .radyoloji-page .request-details > span:not(:last-child), .radyoloji-page .result-details > span:not(:last-child) { padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--kenarlik-ana); } */ /* Radyoloji - Lab İstekleri ve X-Ray İstekleri: gereksiz ayırıcıyı kaldır, sonuçlarla aynı görünüm */ .radyoloji-page #labRequestsTab .request-details, .radyoloji-page #xrayRequestsTab .request-details { border-top: none !important; padding-top: 0 !important; margin-top: 8px !important; } /* Aksiyon butonları ve rozet hizalarını sonuçlarla eşitle */ .radyoloji-page #labRequestsTab .request-actions, .radyoloji-page #xrayRequestsTab .request-actions { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; border: none; } .radyoloji-page #labRequestsTab .status-badge, .radyoloji-page #xrayRequestsTab .status-badge { white-space: nowrap; } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; } .status-badge.pending { background: var(--durum-bekleme-acik); color: var(--durum-bekleme-metin); /* border: 1px solid var(--durum-bekleme-kenarlik); */ } .status-badge.processing { background: var(--durum-basarili-kenarlik); color: var(--durum-islem-metin); /* border: 1px solid var(--durum-islem-kenarlik); */ } /* .status-badge.completed { background: var(--durum-basarili); color: var(--metin-beyaz); border: 1px solid var(--durum-basarili-kenarlik); } */ .request-actions, .result-actions { display: flex; gap: 8px; } /* .btn-icon { width: 36px; height: 36px; border: 1px solid var(--kenarlik-ana); background: var(--arka-plan-ana); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: var(--metin-ikincil); } .btn-icon:hover { background: var(--renk-birincil); color: var(--arka-plan-ana); border-color: var(--renk-birincil); } */ /* Test Kategorileri */ .test-categories, .xray-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 16px; } .test-category, .xray-category { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; } .test-category h5, .xray-category h5 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .test-category h5 i, .xray-category h5 i { color: var(--renk-birincil); } .test-options, .xray-options { display: flex; flex-direction: column; gap: 12px; } .checkbox-label { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px; border-radius: 8px; transition: background-color 0.3s ease; } .checkbox-label:hover { background: var(--arka-plan-ana); } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ana-mavi); } /* Radyoloji modallarında checkbox görünürlüğünü garanti altına al */ .radyoloji-page .modal .checkbox-label input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; -moz-appearance: auto; display: inline-block; margin: 0; } /* PACS Viewer */ .pacs-viewer { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 12px; overflow: hidden; } .pacs-toolbar { display: flex; gap: 8px; padding: 16px; background: var(--arka-plan-ana); border-bottom: 1px solid var(--kenarlik-ana); } .pacs-image-container { height: 500px; display: flex; align-items: center; justify-content: center; background: var(--kart-arka-plan); } .pacs-placeholder { text-align: center; color: var(--metin-ikincil); } .pacs-placeholder i { font-size: 48px; margin-bottom: 16px; color: var(--renk-birincil); } .pacs-placeholder p { margin-bottom: 8px; } /* PACS Info */ .pacs-info { display: flex; flex-direction: column; gap: 24px; } .info-card { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 24px; text-align: center; } .info-card i { font-size: 48px; color: var(--renk-birincil); margin-bottom: 16px; } .info-card h4 { color: var(--metin-ana); font-size: 20px; font-weight: 600; margin-bottom: 12px; } .info-card p { color: var(--metin-ikincil); line-height: 1.6; } .pacs-features h4 { color: var(--metin-ana); font-size: 18px; font-weight: 600; margin-bottom: 16px; } .pacs-features ul { list-style: none; padding: 0; margin: 0; } .pacs-features li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--metin-ikincil); } .pacs-features li i { color: var(--durum-basarili); font-size: 16px; } /* Responsive Tasarım */ @media (max-width: 768px) { .lab-request-item, .lab-result-item, .xray-request-item { flex-direction: column; align-items: flex-start; gap: 12px; } .request-actions, .result-actions { width: 100%; justify-content: flex-end; } .test-categories, .xray-categories { grid-template-columns: 1fr; } .pacs-toolbar { flex-wrap: wrap; } .pacs-image-container { height: 300px; } } /* #endregion Laboratuvar Modülü Stilleri */ /* #region Muayene Odaları Stilleri */ .muayene-page { background: var(--arka-plan-ana); } .muayene-page .rooms-section { padding: 24px; } .muayene-page .rooms-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 32px; } .muayene-page .room-card { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; /* box-shadow: 0 4px 20px var(--golge-hover); */ position: relative; display: flex; flex-direction: column; justify-content: space-between; } .muayene-page .room-card:hover { /* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); */ transform: translateY(-4px); border-color: var(--ana-mavi); } .muayene-page .room-card.status-occupied { border-left: 5px solid var(--durum-hata); background: linear-gradient(135deg, var(--arka-plan-ana) 0%, rgba(239, 68, 68, 0.02) 100%); } .muayene-page .room-card.status-available { border-left: 5px solid var(--durum-basarili); background: linear-gradient(135deg, var(--arka-plan-ana) 0%, rgba(16, 185, 129, 0.02) 100%); } .muayene-page .room-card.status-maintenance { border-left: 5px solid var(--durum-uyari); background: linear-gradient(135deg, var(--arka-plan-ana) 0%, rgba(245, 158, 11, 0.06) 100%); } .muayene-page .room-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 24px 16px 24px; background: transparent; border-bottom: none; } .muayene-page .room-header h3 { color: var(--metin-ana); font-size: 20px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 12px; } .muayene-page .room-header h3 i { color: var(--ana-mavi); font-size: 18px; } .muayene-page .status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 25px; font-size: 13px; font-weight: 600; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; } .muayene-page .status-badge.status-occupied { background: linear-gradient(135deg, var(--durum-hata) 0%, #dc2626 100%); color: var(--kart-arka-plan); /* box-shadow: 0 2px 8px var(--golge-kirmizi); */ } .muayene-page .status-badge.status-available { background: linear-gradient(135deg, var(--durum-basarili) 0%, #059669 100%); color: var(--kart-arka-plan); /* box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); */ } .muayene-page .status-badge.status-maintenance { background: linear-gradient(135deg, var(--durum-uyari) 0%, #d97706 100%); color: var(--kart-arka-plan); /* box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); */ } .muayene-page .room-content { padding: 0 24px 24px 24px; } .muayene-page .room-content .room-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--kart-arka-plan); font-size: 24px; margin-bottom: 16px; box-shadow: 0 4px 12px var(--golge-mavi); } /* Bakım/dolu renk tutarlılığı */ .muayene-page .room-card.status-occupied .room-content .room-icon { background: linear-gradient(135deg, var(--ana-kirmizi) 0%, var(--ana-kirmizi-koyu) 100%); box-shadow: 0 4px 12px var(--golge-kirmizi); } .muayene-page .room-card.status-maintenance .room-content .room-icon { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%); box-shadow: 0 4px 12px var(--golge-sari); } /* Oda Detay Modal Stilleri - Mevcut modal stiline uygun */ #roomDetailModal .room-detail-info { padding: 20px 0; display: flex; flex-direction: column; gap: 10px; } #roomDetailModal .detail-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--kenarlik-ana); } .detail-item:last-child { border-bottom: none; } .detail-item label { font-weight: 600; color: var(--metin-ana); font-size: 14px; } /* .detail-item span { color: var(--metin-ikincil); font-size: 14px; text-align: right; max-width: 200px; word-wrap: break-word; } */ .muayene-page .room-content .room-info h4 { color: var(--metin-ana); font-size: 18px; font-weight: 600; /* margin-bottom: 8px; */ } .muayene-page .room-content .room-info p { color: var(--metin-ikincil); font-size: 14px; margin-bottom: 4px; } .muayene-page .room-content .room-info .time { color: var(--ana-mavi); font-weight: 600; font-size: 14px; } .muayene-page .room-actions { display: flex; gap: 12px; padding: 0 24px 24px 24px; margin-top: auto; } .muayene-page .room-list-item .room-actions { padding: 0; } .muayene-page .room-actions .btn-outline { background: transparent; border: 2px solid var(--kenarlik-ana); color: var(--metin-ikincil); padding: 10px 20px; border-radius: 12px; font-weight: 600; transition: all 0.3s ease; } .muayene-page .room-actions .btn-outline:hover { background: var(--arka-plan-ikincil); border-color: var(--ana-mavi); color: var(--ana-mavi); } /* Muayene butonları ortak stillerden miras alır */ /* Room Management Modal Styles */ .room-management-content { display: flex; flex-direction: column; gap: 32px; } .room-list-section h4, .add-room-section h4 { color: var(--metin-ana); font-size: 18px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .room-list { display: flex; flex-direction: column; gap: 12px; } .room-list-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: 12px; transition: all 0.3s ease; } .room-list-item:hover { background: var(--arka-plan-ana); border-color: var(--ana-mavi); box-shadow: 0 2px 8px var(--golge-ana); } .room-info { display: flex; flex-direction: column; } .room-name { font-weight: 600; color: var(--metin-ana); font-size: 16px; } .room-status { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .room-actions { display: flex; gap: 8px; } .add-room-section { background: var(--arka-plan-ikincil); padding: 24px; border-radius: 16px; border: 1px solid var(--kenarlik-ana); } /* Queue Management Modal Styles */ .queue-management-content { display: flex; flex-direction: column; gap: 32px; } .general-queue-section h4, .room-queues-section h4, .queue-settings-section h4 { color: var(--metin-ana); font-size: 18px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .queue-stats { display: flex; gap: 24px; margin-bottom: 20px; } .queue-stats .stat-item { display: flex; flex-direction: column; gap: 4px; } .stat-label { font-size: 14px; color: var(--metin-ikincil); } .stat-value { font-size: 18px; font-weight: 600; color: var(--ana-mavi); } .queue-list { display: flex; flex-direction: column; gap: 12px; } .queue-item { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: 12px; transition: all 0.3s ease; } .queue-item.priority { border-left: 4px solid var(--durum-hata); background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, rgba(239, 68, 68, 0.05) 100%); } .queue-item:hover { background: var(--arka-plan-ana); border-color: var(--ana-mavi); box-shadow: 0 2px 8px var(--golge-ana); } .queue-number { width: 32px; height: 32px; background: var(--ana-mavi); color: var(--kart-arka-plan); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; } .queue-patient { flex: 1; } .patient-name { font-weight: 600; color: var(--metin-ana); font-size: 16px; } .patient-owner { font-size: 14px; color: var(--metin-ikincil); } .queue-time { font-weight: 600; color: var(--ana-mavi); font-size: 14px; } .queue-actions { display: flex; gap: 8px; } .room-queues-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .room-queue-card { background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 16px; } .room-queue-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .room-queue-header h5 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; } .queue-count { background: var(--ana-mavi); color: var(--kart-arka-plan); padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; } .room-queue-list { display: flex; flex-direction: column; gap: 8px; } .room-queue-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--arka-plan-ana); border-radius: 8px; font-size: 14px; } .room-queue-item .queue-number { width: 24px; height: 24px; font-size: 12px; } .room-queue-item .patient-name { flex: 1; font-weight: 500; } .room-queue-item .queue-time { font-size: 12px; } .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } .setting-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: 12px; } .setting-item label { font-weight: 500; color: var(--metin-ana); } .setting-item input[type="number"] { width: 60px; padding: 4px 8px; border: 1px solid var(--kenarlik-ana); border-radius: 6px; text-align: center; } .unit { font-size: 14px; color: var(--metin-ikincil); /* margin-left: 4px; */ } /* Switch Toggle */ .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--arka-plan-ucuncu); transition: .4s; border-radius: 24px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--kart-arka-plan); transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--ana-mavi); } input:checked + .slider:before { transform: translateX(26px); } .muayene-page .current-patient { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 16px; margin-bottom: 16px; } .muayene-page .patient-info { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .muayene-page .patient-avatar { width: 48px; height: 48px; background: var(--renk-birincil); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--arka-plan-ana); font-size: 20px; } .muayene-page .patient-details h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 4px; } .muayene-page .patient-details p { color: var(--metin-ikincil); font-size: 14px; margin-bottom: 4px; } .muayene-page .patient-details .owner { color: var(--metin-ikincil); font-size: 13px; } .muayene-page .examination-info { display: flex; justify-content: space-between; font-size: 13px; color: var(--metin-ikincil); } .muayene-page .examination-info > div { display: flex; align-items: center; gap: 6px; } .muayene-page .examination-info i { color: var(--renk-birincil); } .muayene-page .room-empty { text-align: center; padding: 32px 16px; color: var(--metin-ikincil); } .muayene-page .room-empty i { font-size: 48px; color: var(--renk-bilgi); margin-bottom: 16px; } .muayene-page .room-empty p { margin-bottom: 20px; font-size: 16px; } .muayene-page .room-maintenance { text-align: center; padding: 32px 16px; color: var(--metin-ikincil); } .muayene-page .room-maintenance i { font-size: 48px; color: var(--renk-bilgi); margin-bottom: 16px; } .muayene-page .room-maintenance p { margin-bottom: 20px; font-size: 16px; } .muayene-page .maintenance-info { display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .muayene-page .maintenance-info > span { display: flex; align-items: center; justify-content: center; gap: 8px; } .muayene-page .room-queue h5 { color: var(--metin-ana); font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .muayene-page .room-queue h5 i { color: var(--renk-birincil); } .muayene-page .queue-list { display: flex; flex-direction: column; gap: 8px; } .muayene-page .queue-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 8px; font-size: 13px; } .muayene-page .queue-number { width: 24px; height: 24px; background: var(--ana-mavi); color: var(--arka-plan-ana); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; } .muayene-page .queue-patient { flex: 1; color: var(--metin-ana); } .muayene-page .queue-time { color: var(--metin-ikincil); font-size: 12px; } /* Genel Kuyruk */ .muayene-page .general-queue { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 16px; padding: 24px; margin: 24px; } .muayene-page .queue-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .muayene-page .queue-header h3 { color: var(--metin-ana); font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .muayene-page .queue-header h3 i { color: var(--renk-birincil); } .muayene-page .queue-actions { display: flex; gap: 12px; } .muayene-page .queue-item.priority { border-left: 4px solid var(--renk-uyari); } .muayene-page .queue-item { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; margin-bottom: 12px; transition: all 0.3s ease; } .muayene-page .queue-item:hover { border-color: var(--renk-birincil); box-shadow: 0 2px 8px var(--golge-ana); } .muayene-page .queue-item .queue-number { width: 32px; height: 32px; background: var(--ana-mavi); color: var(--arka-plan-ana); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; } .muayene-page .queue-item .queue-patient { flex: 1; } .muayene-page .queue-item .patient-info { display: flex; align-items: center; gap: 12px; } .muayene-page .queue-item .patient-avatar { width: 40px; height: 40px; background: var(--renk-birincil); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--arka-plan-ana); font-size: 16px; } .muayene-page .queue-item .patient-details h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 4px; } .muayene-page .queue-item .patient-details p { color: var(--metin-ikincil); font-size: 14px; margin-bottom: 4px; } .muayene-page .queue-item .appointment-time { color: var(--metin-ikincil); font-size: 12px; background: var(--kart-arka-plan); padding: 2px 8px; border-radius: 12px; } .muayene-page .queue-item .queue-status { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .muayene-page .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; } .muayene-page .status-badge.in-progress { background: var(--durum-islem-acik); color: var(--durum-islem-metin); border: 1px solid var(--durum-islem-kenarlik); } .muayene-page .status-badge.waiting { background: var(--durum-bekleme-acik); color: var(--durum-bekleme-metin); border: 1px solid var(--durum-bekleme-kenarlik); } .muayene-page .room-assignment { color: var(--metin-ikincil); font-size: 12px; background: var(--kart-arka-plan); padding: 2px 8px; border-radius: 12px; } .muayene-page .queue-item .queue-actions { display: flex; gap: 8px; } /* Oda Yönetimi Modal */ .muayene-page .room-management { display: flex; flex-direction: column; gap: 24px; } .muayene-page .room-list { display: flex; flex-direction: column; gap: 16px; } .muayene-page .room-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; } .muayene-page .room-item .room-info h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 4px; } .muayene-page .room-item .room-actions { display: flex; gap: 8px; } .muayene-page .add-room-section { text-align: center; padding: 20px; border: 2px dashed var(--kenarlik-ana); border-radius: 12px; } /* Kuyruk Yönetimi Modal */ .muayene-page .queue-management { display: flex; flex-direction: column; gap: 24px; } .muayene-page .queue-controls { display: flex; gap: 12px; flex-wrap: wrap; } .muayene-page .queue-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .muayene-page .stat-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; } .muayene-page .stat-label { color: var(--metin-ikincil); font-size: 14px; } .muayene-page .stat-value { color: var(--metin-ana); font-size: 18px; font-weight: 600; } /* Responsive Tasarım */ @media (max-width: 1200px) { .muayene-page .rooms-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .muayene-page .rooms-grid { grid-template-columns: 1fr; } .muayene-page .room-header { flex-direction: column; gap: 12px; align-items: flex-start; } .muayene-page .room-actions { width: 100%; justify-content: flex-end; } .muayene-page .queue-item { flex-direction: column; align-items: flex-start; gap: 12px; } .muayene-page .queue-item .queue-status { align-items: flex-start; } .muayene-page .queue-controls { flex-direction: column; } .muayene-page .queue-stats { grid-template-columns: 1fr; } } /* #endregion Muayene Odaları Stilleri */ /* #region E-Fatura Sistemi Stilleri */ /* E-Fatura sekmesi için temel layout */ .faturalama-page .tab-content { display: none; padding: 24px; background: var(--arka-plan-ana); } .faturalama-page .tab-content.active { display: block; } .faturalama-page .tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--kenarlik-ana); } .faturalama-page .tab-header h3 { color: var(--metin-ana); font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .faturalama-page .tab-header h3 i { color: var(--renk-birincil); } .faturalama-page .tab-actions { display: flex; gap: 12px; } .faturalama-page .einvoice-status-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 24px; } .faturalama-page .status-card { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .faturalama-page .status-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px var(--golge-ana); } .faturalama-page .status-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .faturalama-page .status-icon.success { background: var(--durum-basarili); color: var(--durum-basarili-metin); } .faturalama-page .status-icon.warning { background: var(--durum-bekleme-acik); color: var(--durum-bekleme-metin); } .faturalama-page .status-icon.danger { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .faturalama-page .status-content h3 { font-size: 24px; font-weight: 700; color: var(--metin-ana); margin: 0 0 4px 0; } .faturalama-page .status-content p { font-size: 14px; color: var(--metin-ikincil); margin: 0 0 8px 0; } .faturalama-page .status-change { font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 4px; } .faturalama-page .status-change.positive { color: var(--durum-basarili); } .faturalama-page .status-change.negative { color: var(--durum-uyari); } .faturalama-page .status-change.neutral { color: var(--metin-ikincil); } .faturalama-page .einvoice-list { display: flex; flex-direction: column; gap: 16px; } .faturalama-page .einvoice-item { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; transition: all 0.3s ease; } .faturalama-page .einvoice-item:hover { border-color: var(--renk-birincil); box-shadow: 0 4px 12px var(--golge-ana); } .faturalama-page .einvoice-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .faturalama-page .einvoice-info h4 { color: var(--metin-ana); font-size: 16px; font-weight: 600; margin-bottom: 8px; } .faturalama-page .einvoice-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; } .faturalama-page .einvoice-status.sent { background: var(--durum-basarili); color: var(--metin-beyaz); border: 1px solid var(--durum-basarili-kenarlik); } .faturalama-page .einvoice-status.pending { background: var(--durum-bekleme-acik); color: var(--durum-bekleme-metin); border: 1px solid var(--durum-bekleme-kenarlik); } .faturalama-page .einvoice-status.error { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); border: 1px solid var(--durum-uyari-kenarlik); } .faturalama-page .einvoice-actions { display: flex; gap: 8px; } .faturalama-page .einvoice-details { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; font-size: 14px; } .faturalama-page .einvoice-customer strong { color: var(--metin-ana); font-weight: 600; display: block; margin-bottom: 4px; } .faturalama-page .einvoice-customer span { color: var(--metin-ikincil); font-size: 12px; } .faturalama-page .einvoice-amount strong { color: var(--renk-birincil); font-size: 18px; font-weight: 600; display: block; margin-bottom: 4px; } .faturalama-page .einvoice-amount span { color: var(--metin-ikincil); font-size: 12px; } .faturalama-page .einvoice-date { display: flex; flex-direction: column; gap: 4px; } .faturalama-page .einvoice-date span { color: var(--metin-ikincil); font-size: 12px; } /* E-Fatura Ayarları */ .faturalama-page .einvoice-settings { display: flex; flex-direction: column; gap: 24px; /* max-width: 1000px; */ margin: 0 auto; } .faturalama-page .einvoice-settings .settings-section { background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 24px; display: block !important; /* E-fatura ayarlarındaki bölümler her zaman görünür olsun */ box-shadow: 0 2px 8px var(--golge-hover); transition: box-shadow 0.3s ease; } .faturalama-page .einvoice-settings .settings-section:hover { box-shadow: 0 4px 16px var(--golge-ana); } .faturalama-page .settings-section h4 { color: var(--metin-ana); font-size: 18px; font-weight: 600; margin-bottom: 24px; display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--arka-plan-ana); } .faturalama-page .settings-section h4 i { color: var(--renk-birincil); } /* E-fatura ayarları form stilleri */ .faturalama-page .einvoice-settings .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .faturalama-page .einvoice-settings .form-group { margin-bottom: 0; } .faturalama-page .einvoice-settings .form-group label { display: block; font-weight: 500; color: var(--metin-ana); margin-bottom: 8px; font-size: 14px; } .faturalama-page .einvoice-settings .form-group input, .faturalama-page .einvoice-settings .form-group select { width: 100%; padding: 12px; border: 1px solid var(--kenarlik-ana); border-radius: 8px; font-size: 14px; background: var(--arka-plan-ana); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .faturalama-page .einvoice-settings .form-group input:focus, .faturalama-page .einvoice-settings .form-group select:focus { outline: none; border-color: var(--renk-birincil); box-shadow: 0 0 0 3px var(--golge-odak); } /* Tek sütunlu form elemanları için */ .faturalama-page .einvoice-settings .form-group.full-width { grid-column: 1 / -1; } .faturalama-page .checkbox-group { display: flex; flex-direction: column; gap: 16px; } .faturalama-page .checkbox-label { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px; border-radius: 8px; transition: background-color 0.3s ease; } .faturalama-page .checkbox-label:hover { background: var(--arka-plan-ana); } .faturalama-page .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--renk-birincil); } .faturalama-page .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .faturalama-page .activity-log { display: flex; flex-direction: column; gap: 12px; } .faturalama-page .activity-item { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 8px; position: relative; } /* E-fatura ayarlarındaki activity-item'larda dikey çizgileri kaldır */ .faturalama-page .activity-item::before { display: none !important; } .faturalama-page .activity-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; } .faturalama-page .activity-icon.success { background: var(--durum-basarili); color: var(--durum-basarili-metin); } .faturalama-page .activity-icon.warning { background: var(--durum-bekleme-acik); color: var(--durum-bekleme-metin); } .faturalama-page .activity-icon.danger { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .faturalama-page .activity-content { flex: 1; } .faturalama-page .activity-content h5 { color: var(--metin-ana); font-size: 14px; font-weight: 600; margin-bottom: 4px; } .faturalama-page .activity-content p { color: var(--metin-ikincil); font-size: 13px; margin-bottom: 4px; } .faturalama-page .activity-time { color: var(--metin-ikincil); font-size: 12px; } /* Responsive Tasarım */ @media (max-width: 768px) { .faturalama-page .einvoice-status-cards { grid-template-columns: 1fr; } .faturalama-page .einvoice-details { grid-template-columns: 1fr; gap: 12px; } .faturalama-page .einvoice-header { flex-direction: column; gap: 12px; align-items: flex-start; } .faturalama-page .einvoice-actions { width: 100%; justify-content: flex-end; } .faturalama-page .activity-item { flex-direction: column; align-items: flex-start; gap: 12px; } .faturalama-page .einvoice-settings .form-row { grid-template-columns: 1fr; gap: 16px; } .faturalama-page .einvoice-settings { gap: 20px; } } /* #endregion E-Fatura Sistemi Stilleri */ /* #region İlaç Rehberi Stilleri */ .ilac-rehberi-page { background: var(--arka-plan-ana); } .drug-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .drugs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; } .drug-card { background: var(--kart-arka-plan); border-radius: 12px; padding: 20px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; box-shadow: 0 2px 8px var(--golge-ana); } .drug-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--golge-ana); } .drug-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .drug-header h3 { font-size: 18px; font-weight: 600; color: var(--metin-ana); margin: 0; } .drug-category { padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 500; text-transform: uppercase; background: var(--durum-bilgi-acik); color: var(--durum-bilgi-koyu); } .drug-content { margin-bottom: 15px; } .drug-info p { margin: 8px 0; font-size: 14px; color: var(--metin-ikincil); } .drug-info strong { color: var(--metin-ana); font-weight: 600; } .drug-warnings { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .warning-tag { background: #ffebee; color: #d32f2f; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; } .drug-actions { display: flex; gap: 10px; justify-content: flex-end; } .btn-sm { padding: 8px 16px; font-size: 13px; } .interaction-checker { display: grid; /* grid-template-columns: 1fr 1fr auto; */ /* gap: 15px; */ /* align-items: end; */ /* margin-bottom: 20px; */ } .interaction-results { background: var(--kart-arka-plan); border: 1px solid var(--ana-mavi); border-radius: 8px; padding: 15px; margin-top: 20px; display: none; /* Varsayılan olarak gizli */ flex-direction: column; align-items: center; justify-content: center; } /* İçerik varsa göster */ .interaction-results:not(:empty) { display: flex !important; } .interaction-results i { font-size: 36px; color: var(--ana-yesil-koyu); } .interaction-success { display: flex !important; flex-direction: column; align-items: center; justify-content: center; } .modal-body p { display: flex; justify-content: space-between; /* flex-direction: column; align-items: center; justify-content: center; text-align: center; */ } .interaction-warning { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #856404; } .interaction-warning i { font-size: 36px; color: var(--ana-kirmizi); } .drug-detail-info { padding: 0; } .drug-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding: 20px; background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, var(--arka-plan-ana) 100%); border-radius: var(--radius-lg); box-shadow: 0 2px 8px var(--golge-hover); } .drug-detail-header h4 { font-size: 26px; font-weight: 700; color: var(--baslik-ana); margin: 0; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mor) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .drug-category-badge { display: inline-block; padding: 8px 16px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mor) 100%); color: var(--metin-beyaz); border-radius: var(--radius-full); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 8px var(--golge-mavi); } .drug-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; } .drug-detail-section { padding: 20px; background: linear-gradient(135deg, var(--arka-plan-ana) 0%, var(--arka-plan-ikincil) 100%); border-radius: var(--radius-lg); border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; position: relative; overflow: hidden; } .drug-detail-section::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mor) 100%); opacity: 0; transition: opacity 0.3s ease; } .drug-detail-section:hover { /* transform: translateY(-2px); */ /* box-shadow: 0 4px 16px var(--golge-ana); */ border-color: var(--ana-mavi); } .drug-detail-section:hover::before { opacity: 1; } .drug-detail-section.full-width { grid-column: 1 / -1; } .drug-detail-section h5 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 8px; border-bottom: 2px solid var(--kenarlik-ana); } .drug-detail-section h5 i { color: var(--ana-mavi); font-size: 16px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mor) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .drug-detail-section p { margin: 0; font-size: 14px; color: var(--metin-ana); line-height: 1.8; font-weight: 500; } .drug-detail-info h4 { font-size: 20px; font-weight: 600; color: var(--metin-ana); margin-bottom: 15px; } .drug-detail-info p { margin: 10px 0; font-size: 14px; color: var(--metin-ikincil); } .drug-detail-info strong { color: var(--metin-ana); font-weight: 600; } /* No Result Message */ .no-result-message { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; grid-column: 1 / -1; min-height: 400px; } .no-result-message .no-result-icon { /* width: 80px; */ /* height: 80px; */ /* border-radius: 50%; */ /* background: linear-gradient(135deg, var(--arka-plan-ikincil) 0%, var(--arka-plan-ana) 100%); */ display: flex ; align-items: center; justify-content: center; /* margin-bottom: 24px; */ /* box-shadow: 0 4px 16px var(--golge-ana); */ } .no-result-message .no-result-icon i { font-size: 36px; color: var(--metin-ikincil); opacity: 0.6; } .no-result-message h3 { font-size: 22px; font-weight: 700; color: var(--baslik-ana); margin: 0 0 12px 0; } .no-result-message p { font-size: 15px; color: var(--metin-ikincil); line-height: 1.6; max-width: 500px; margin: 0; text-align: center; } /* Stok sayfası için no-result-message düzeltmesi */ .stok-page .tab-content .no-result-message { grid-column: 1 / -1; margin: 24px 0; } /* Kategori Yönetimi Stilleri */ .category-management { display: flex; flex-direction: column; gap: 30px; } .category-list h4, .add-category-section h4 { margin-bottom: 20px; color: var(--baslik-ana); font-weight: 600; } .add-category-section { width: 100%; padding: 20px; background: var(--kart-arka-plan); border: 1px solid var(--kenarlik-ana); border-radius: 12px; } .add-category-section .form-group { margin-bottom: 16px; } .add-category-section label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--metin-ana); } .add-category-section .form-input, .add-category-section .form-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--kenarlik-ana); border-radius: 6px; background: var(--arka-plan-ana); color: var(--metin-ana); font-family: 'Inter', sans-serif; transition: all 0.2s ease; } .add-category-section .form-input:focus, .add-category-section .form-textarea:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--kenarlik-seffaf-mavi); } .add-category-section .form-textarea { resize: vertical; min-height: 80px; } .category-list { width: 100%; } .category-table { width: 100%; border-collapse: collapse; background: var(--kart-arka-plan); border-radius: 8px; overflow: hidden; border: 1px solid var(--kenarlik-ana); table-layout: fixed; /* Sütun genişliklerini sabitle */ } .category-table thead { background: var(--arka-plan-ikincil); } .category-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 14px; color: var(--metin-ana); border-bottom: 2px solid var(--kenarlik-ana); } .category-table th:first-child { width: 70%; /* Kategori adı sütunu daha geniş */ } .category-table th:last-child { width: 30%; /* İşlemler sütunu daha dar */ } .category-table td { padding: 12px 16px; font-size: 14px; color: var(--metin-ikincil); border-bottom: 1px solid var(--kenarlik-ana); word-wrap: break-word; /* Uzun metinleri kır */ overflow-wrap: break-word; /* Uzun metinleri kır */ } .category-table td:first-child { white-space: normal; /* Metin kırılabilir */ overflow: visible; /* Taşan metin görünsün */ text-overflow: clip; /* Kesme işareti olmadan */ } .category-table tbody tr:last-child td { border-bottom: none; } .category-table tbody tr:hover { background: var(--kart-arka-plan-hover); } .category-table .category-actions { display: flex; gap: 8px; justify-content: flex-end; /* İşlem butonlarını sağa hizala */ align-items: center; flex-wrap: nowrap; /* Butonlar kırılmasın */ } .category-actions .btn-icon { padding: 6px; flex-shrink: 0; /* Butonlar küçülmesin */ } @media (max-width: 768px) { .drugs-grid { grid-template-columns: 1fr; } .drug-stats { grid-template-columns: repeat(2, 1fr); } .interaction-checker { grid-template-columns: 1fr; } .category-management { gap: 20px; } .category-table { font-size: 13px; } .category-table th, .category-table td { padding: 10px 12px; } .category-table th:first-child { width: 60%; /* Mobilde kategori adı biraz daha dar */ } .category-table th:last-child { width: 40%; /* Mobilde işlemler biraz daha geniş */ } .category-table .category-actions { gap: 6px; justify-content: flex-end; } .category-actions .btn-icon { padding: 5px; min-width: 32px; min-height: 32px; } } /* #endregion İlaç Rehberi Stilleri */ /* #region AI Teşhis Öneri Sistemi Stilleri */ /* AI Button */ .btn-ai { background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); color: var(--metin-beyaz); /* box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); */ } .btn-ai:hover { background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); /* box-shadow: 0 4px 16px var(--golge-mavi); */ /* transform: translateY(-1px); */ } /* AI Diagnosis Modal */ /* .ai-diagnosis-modal { max-width: 1200px; width: 90%; max-height: 90vh; overflow-y: auto; } */ .ai-diagnosis-modal .modal-content { padding: 0; border-radius: 12px; /* overflow: hidden; */ } .ai-diagnosis-header { background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); color: var(--metin-beyaz); padding: 20px; text-align: center; } .ai-diagnosis-header h2 { margin: 0; font-size: 24px; font-weight: 600; } .ai-diagnosis-header p { margin: 8px 0 0 0; opacity: 0.9; font-size: 14px; } .ai-diagnosis-body { padding: 24px; } .ai-input-section { background: var(--form-bg-light-gray); border-radius: 12px; padding: 25px; /* margin-bottom: 25px; */ } .ai-input-section h3 { margin: 0 0 20px 0; color: var(--metin-ana); font-size: 18px; font-weight: 600; } .symptoms-input { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; } .symptom-group { display: flex; flex-direction: column; } .symptom-group label { font-weight: 500; margin-bottom: 8px; color: var(--metin-ana); } .symptom-group input, .symptom-group textarea, .symptom-group select { padding: 12px; /* border: 2px solid #e1e8ed; */ border-radius: 8px; font-size: 14px; transition: none !important; animation: none !important; transform: none !important; will-change: auto !important; backface-visibility: hidden !important; perspective: none !important; transform-style: flat !important; color: inherit; } .symptom-group input:focus, .symptom-group textarea:focus, .symptom-group select:focus { outline: none; border-color: var(--ana-mor-acik); transition: none !important; animation: none !important; transform: none !important; backface-visibility: hidden !important; perspective: none !important; transform-style: flat !important; } .ai-analyze-btn { background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); color: var(--metin-beyaz); border: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 auto; } .ai-analyze-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px var(--golge-mavi); } .ai-analyze-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .ai-results-section { background: var(--kart-arka-plan); border: 2px solid #e1e8ed; border-radius: 12px; padding: 25px; margin-top: 25px; } .ai-results-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; } .ai-results-header h3 { margin: 0; color: #2c3e50; font-size: 18px; font-weight: 600; } .ai-confidence-badge { background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); color: var(--kart-arka-plan); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .diagnosis-suggestions { display: grid; gap: 15px; margin-bottom: 25px; } .diagnosis-item { background: var(--form-bg-light-gray); border: 2px solid #e1e8ed; border-radius: 8px; padding: 20px; transition: all 0.3s ease; } .diagnosis-item:hover { border-color: var(--ana-mor-acik); transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-odak); } .diagnosis-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .diagnosis-name { font-weight: 600; color: #2c3e50; font-size: 16px; } .diagnosis-confidence { background: var(--ana-mor-acik); color: var(--kart-arka-plan); padding: 4px 10px; border-radius: 15px; font-size: 12px; font-weight: 600; } .diagnosis-description { color: #7f8c8d; font-size: 14px; line-height: 1.5; margin-bottom: 15px; } .diagnosis-symptoms { display: flex; flex-wrap: wrap; gap: 8px; } .symptom-tag { background: #e8f4fd; color: #2980b9; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .treatment-suggestions { background: var(--form-bg-light-gray); border-radius: 8px; padding: 20px; margin-top: 20px; } .treatment-suggestions h4 { margin: 0 0 15px 0; color: #2c3e50; font-size: 16px; font-weight: 600; } .treatment-list { display: grid; gap: 10px; } .treatment-item { background: var(--kart-arka-plan); border: 1px solid #e1e8ed; border-radius: 6px; padding: 15px; display: flex; justify-content: space-between; align-items: center; } .treatment-info { flex: 1; } .treatment-name { font-weight: 500; color: #2c3e50; margin-bottom: 4px; } .treatment-dosage { color: #7f8c8d; font-size: 12px; } .treatment-action { background: var(--ana-mor-acik); color: var(--kart-arka-plan); border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background 0.3s ease; } .treatment-action:hover { background: #5a6fd8; } .ai-loading { text-align: center; padding: 40px; } .ai-loading-spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--ana-mor-acik); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ai-loading-text { color: #7f8c8d; font-size: 16px; font-weight: 500; } /* AI Dashboard Card */ .ai-card { background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); color: var(--kart-arka-plan); cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .ai-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px var(--golge-mavi); } .ai-card .stat-icon { background: rgba(255, 255, 255, 0.2); color: var(--kart-arka-plan); } .ai-card .stat-content h3 { color: var(--kart-arka-plan); font-size: 28px; font-weight: 700; } .ai-card .stat-content p { color: rgba(255, 255, 255, 0.9); } .ai-card .progress-bar { background: rgba(255, 255, 255, 0.2); } .ai-card .progress-fill.ai-progress { background: rgba(255, 255, 255, 0.8); } .ai-card .progress-text { color: rgba(255, 255, 255, 0.9); } .ai-badge { position: absolute; top: 15px; right: 15px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 16px; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* AI Hasta Profili Özel Stilleri */ .patient-search-results { background: var(--kart-arka-plan); border: 2px solid #e1e8ed; border-radius: 8px; margin-top: 10px; max-height: 200px; overflow-y: auto; } .patient-search-item { padding: 12px; border-bottom: 1px solid #f1f3f4; cursor: pointer; transition: background 0.3s ease; } .patient-search-item:hover { background: var(--form-bg-light-gray); } .patient-search-item:last-child { border-bottom: none; } .patient-name { font-weight: 600; color: #2c3e50; margin-bottom: 4px; } .patient-details { font-size: 12px; color: #7f8c8d; } .health-score-card { background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); border-radius: 12px; padding: 25px; margin-bottom: 25px; color: var(--kart-arka-plan); display: flex; align-items: center; gap: 25px; } .score-circle { text-align: center; min-width: 120px; } .score-number { font-size: 48px; font-weight: 700; line-height: 1; margin-bottom: 8px; } .score-label { font-size: 14px; opacity: 0.9; } .score-details { flex: 1; } .score-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .score-item:last-child { margin-bottom: 0; } .score-category { min-width: 120px; font-size: 14px; opacity: 0.9; } .score-bar { flex: 1; height: 8px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; overflow: hidden; } .score-fill { height: 100%; background: rgba(255, 255, 255, 0.8); border-radius: 4px; transition: width 0.3s ease; } .score-fill.risk { background: rgba(255, 193, 7, 0.8); } .score-value { min-width: 40px; text-align: right; font-weight: 600; font-size: 14px; } .risk-factors-section, .recommendations-section { background: var(--form-bg-light-gray); border-radius: 8px; padding: 20px; margin-bottom: 20px; } .risk-factors-section h4, .recommendations-section h4 { margin: 0 0 15px 0; color: #2c3e50; font-size: 16px; font-weight: 600; } .risk-factor-item, .recommendation-item { background: var(--kart-arka-plan); border: 1px solid #e1e8ed; border-radius: 6px; padding: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; } .risk-factor-item:last-child, .recommendation-item:last-child { margin-bottom: 0; } .risk-icon { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--kart-arka-plan); } .risk-high { background: #dc3545; } .risk-medium { background: #ffc107; color: #000; } .risk-low { background: #28a745; } .recommendation-icon { width: 35px; height: 35px; border-radius: 50%; background: var(--ana-mor-acik); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--kart-arka-plan); } .risk-content, .recommendation-content { flex: 1; } .risk-title, .recommendation-title { font-weight: 600; color: #2c3e50; margin-bottom: 4px; } .risk-description, .recommendation-description { font-size: 14px; color: #7f8c8d; line-height: 1.4; } /* AI Muayene Asistanı Özel Stilleri */ .emergency-alert { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: var(--kart-arka-plan); border-radius: 12px; padding: 20px; margin-bottom: 25px; display: flex; align-items: center; gap: 15px; animation: pulse-alert 2s infinite; } @keyframes pulse-alert { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } .alert-icon { width: 50px; height: 50px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; } .alert-content { flex: 1; } .alert-title { font-size: 18px; font-weight: 700; margin-bottom: 5px; } .alert-message { font-size: 14px; opacity: 0.9; } .quick-diagnosis-section, .recommended-tests-section, .emergency-actions-section { background: var(--form-bg-light-gray); border-radius: 8px; padding: 20px; margin-bottom: 20px; } .quick-diagnosis-section h4, .recommended-tests-section h4, .emergency-actions-section h4 { margin: 0 0 15px 0; color: #2c3e50; font-size: 16px; font-weight: 600; } .quick-diagnosis-item { background: var(--kart-arka-plan); border: 2px solid #e1e8ed; border-radius: 8px; padding: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; transition: all 0.3s ease; } .quick-diagnosis-item:hover { border-color: var(--ana-mor-acik); transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-odak); } .quick-diagnosis-item:last-child { margin-bottom: 0; } .diagnosis-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--kart-arka-plan); } .diagnosis-high { background: #dc3545; } .diagnosis-medium { background: #ffc107; color: #000; } .diagnosis-low { background: #28a745; } .diagnosis-content { flex: 1; } .diagnosis-name { font-weight: 600; color: #2c3e50; margin-bottom: 4px; } .diagnosis-probability { font-size: 12px; color: #7f8c8d; font-weight: 500; } .tests-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } .test-card { background: var(--kart-arka-plan); border: 1px solid #e1e8ed; border-radius: 8px; padding: 15px; text-align: center; transition: all 0.3s ease; } .test-card:hover { border-color: var(--ana-mor-acik); transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-odak); } .test-icon { width: 40px; height: 40px; background: var(--ana-mor-acik); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: var(--kart-arka-plan); font-size: 16px; } .test-name { font-weight: 600; color: #2c3e50; margin-bottom: 5px; } .test-priority { font-size: 12px; color: #7f8c8d; } .emergency-actions-list { display: grid; gap: 10px; } .emergency-action-item { background: var(--kart-arka-plan); border: 1px solid #e1e8ed; border-radius: 6px; padding: 15px; display: flex; align-items: center; gap: 12px; } .emergency-action-icon { width: 35px; height: 35px; background: #dc3545; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kart-arka-plan); font-size: 14px; } .emergency-action-content { flex: 1; } .emergency-action-title { font-weight: 600; color: #2c3e50; margin-bottom: 4px; } .emergency-action-description { font-size: 14px; color: #7f8c8d; } /* AI Görüntü Analizi Özel Stilleri */ .image-upload-area { border: 2px dashed var(--ana-mor-acik); border-radius: 12px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: var(--form-bg-light-gray); } .image-upload-area:hover { border-color: var(--ana-mavi); background: var(--arka-plan-ikincil); } .upload-placeholder i { font-size: 48px; color: var(--ana-mor-acik); margin-bottom: 15px; } .upload-placeholder p { font-size: 16px; font-weight: 600; color: var(--metin-beyaz); margin-bottom: 8px; } .upload-placeholder span { font-size: 14px; color: #7f8c8d; } .uploaded-image-preview { margin-top: 20px; text-align: center; } .uploaded-image-preview img { max-width: 100%; max-height: 300px; border-radius: 8px; box-shadow: 0 4px 12px var(--golge-ana); } .image-info { margin-top: 10px; display: flex; justify-content: center; gap: 20px; font-size: 14px; color: #7f8c8d; } .analysis-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 25px; } .summary-card { background: var(--kart-arka-plan); border: 2px solid #e1e8ed; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 15px; transition: all 0.3s ease; } .summary-card:hover { border-color: var(--ana-mavi-acik); /* transform: translateY(-2px); */ /* box-shadow: 0 4px 12px var(--golge-odak); */ } .summary-icon { width: 50px; height: 50px; background: var(--ana-mavi-acik); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kart-arka-plan); font-size: 20px; } .summary-content { flex: 1; } .summary-title { font-size: 14px; color: #7f8c8d; margin-bottom: 5px; } .summary-text { font-size: 18px; font-weight: 700; color: #2c3e50; } .anomalies-section, .measurements-section, .ai-report-section { background: var(--form-bg-light-gray); border-radius: 8px; padding: 20px; margin-bottom: 20px; } .anomalies-section h4, .measurements-section h4, .ai-report-section h4 { margin: 0 0 15px 0; color: #2c3e50; font-size: 16px; font-weight: 600; } .anomaly-item { background: var(--kart-arka-plan); border: 1px solid #e1e8ed; border-radius: 8px; padding: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; } .anomaly-item:last-child { margin-bottom: 0; } .anomaly-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--kart-arka-plan); } .anomaly-high { background: #dc3545; } .anomaly-medium { background: #ffc107; color: #000; } .anomaly-low { background: #28a745; } .anomaly-content { flex: 1; } .anomaly-title { font-weight: 600; color: #2c3e50; margin-bottom: 4px; } .anomaly-description { font-size: 14px; color: #7f8c8d; } .anomaly-confidence { font-size: 12px; color: var(--ana-mor-acik); font-weight: 600; } .measurements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } .measurement-card { background: var(--kart-arka-plan); border: 1px solid #e1e8ed; border-radius: 8px; padding: 15px; text-align: center; } .measurement-value { font-size: 24px; font-weight: 700; color: var(--ana-mor-acik); margin-bottom: 5px; } .measurement-label { font-size: 14px; color: #7f8c8d; font-weight: 500; } .report-content { background: var(--kart-arka-plan); border: 1px solid #e1e8ed; border-radius: 8px; padding: 20px; margin-bottom: 15px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; color: #2c3e50; white-space: pre-wrap; max-height: 300px; overflow-y: auto; } .report-actions { display: flex; gap: 10px; justify-content: center; } /* AI Buton Stilleri - Overlay Actions */ .overlay-btn.ai-btn { background: linear-gradient(135deg, var(--ana-mor-acik) 0%, var(--ana-mor-koyu) 100%); color: var(--metin-beyaz); border: none; animation: pulse-ai 2s infinite; } .overlay-btn.ai-btn:hover { background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); transform: scale(1.1); color: var(--metin-beyaz); } @keyframes pulse-ai { 0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); } } /* AI Modal Form Elementleri - Temiz Stil */ .ai-diagnosis-modal input { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.4; padding: 12px; border: 2px solid var(--arka-plan-dorduncu); border-radius: 8px; background: var(--kart-arka-plan); color: var(--baslik-ana); } /* AI Modal textarea için özel stil yok - inline style kullanılıyor */ .ai-diagnosis-modal select { /* Filter-select ile aynı stil */ padding: 8px 40px 8px 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); background: var(--arka-plan-ana); color: var(--metin-ana); font-size: var(--text-base); min-width: 150px; /* Select görünümü */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Dropdown ikonu - filter-select ile aynı */ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; cursor: pointer; transition: all 0.2s ease; } .ai-diagnosis-modal input:focus { outline: none; border-color: var(--ana-mor-acik); box-shadow: 0 0 0 3px var(--golge-odak); } /* AI Modal textarea focus için özel stil yok - inline style kullanılıyor */ /* AI Modal Select hover durumu - filter-select ile aynı */ .ai-diagnosis-modal select:hover { border-color: var(--ana-mavi); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); } /* AI Modal Select focus durumu - filter-select ile aynı */ .ai-diagnosis-modal select:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 2px var(--golge-odak); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); } /* AI Modal Select artık filter-select stili kullanıyor - custom ok kaldırıldı */ /* #endregion AI Teşhis Öneri Sistemi Stilleri */ /* ======================================== */ /* BİLGİ SAYFALARI STİLLERİ */ /* ======================================== */ /* #region Yardım Sayfası Stilleri */ .yardim-page * { margin: 0; padding: 0; box-sizing: border-box; } .yardim-page body { font-family: 'Inter', sans-serif; background: #f5f7fa; color: #333; } .yardim-page .info-page-container { display: flex; min-height: 100vh; } /* Header */ .yardim-page .info-header { position: fixed; top: 0; left: 0; right: 0; height: 70px; background: var(--kart-arka-plan); border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; padding: 0 2rem; z-index: 1000; box-shadow: 0 1px 3px var(--golge-hover); } .yardim-page .info-header .logo { height: 35px; } .yardim-page .info-header .logo img { height: 100%; width: auto; } .yardim-page .header-right { margin-left: auto; display: flex; gap: 1rem; align-items: center; } .yardim-page .header-btn { padding: 0.5rem 1.25rem; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; } /* Yardım sayfası butonları ortak stillerden miras alır */ /* Sidebar */ .yardim-page .info-sidebar { position: fixed; left: 0; top: 70px; width: 260px; height: calc(100vh - 70px); background: var(--kart-arka-plan); border-right: 1px solid #e5e7eb; padding: 2rem 0; overflow-y: auto; } .yardim-page .sidebar-menu { list-style: none; } .yardim-page .sidebar-menu li { margin-bottom: 0.25rem; } .yardim-page .sidebar-menu a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; color: #6b7280; text-decoration: none; font-weight: 500; transition: all 0.2s; } .yardim-page .sidebar-menu a:hover { background: #f9fafb; color: #111827; } .yardim-page .sidebar-menu a.active { background: #eff6ff; color: #2563eb; border-right: 3px solid #2563eb; } .yardim-page .sidebar-menu a i { font-size: 1.1rem; width: 20px; text-align: center; } .yardim-page .sidebar-divider { height: 1px; background: #e5e7eb; margin: 1rem 0; } /* Main Content */ .yardim-page .info-main { margin-left: 260px; margin-top: 70px; padding: 2rem; flex: 1; } .yardim-page .page-title { font-size: 2rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; } .yardim-page .page-subtitle { font-size: 1rem; color: #6b7280; margin-bottom: 2rem; } /* Search Box */ .yardim-page .search-box { background: var(--kart-arka-plan); border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 0.75rem; } .yardim-page .search-box i { color: var(--metin-ucuncu); font-size: 1.1rem !important; left: 30px !important; } .yardim-page .search-box input { border: none; outline: none; flex: 1; font-size: 1rem; font-family: 'Inter', sans-serif; } /* FAQ Section */ .yardim-page .faq-section { margin-bottom: 2rem; } .yardim-page .section-title { font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 1rem; } .yardim-page .faq-item { background: var(--kart-arka-plan); border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; transition: all 0.2s; } .yardim-page .faq-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .yardim-page .faq-question { padding: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-weight: 500; color: #111827; user-select: none; transition: all 0.2s; } .yardim-page .faq-question:hover { background: #f9fafb; } .yardim-page .faq-question.active { background: #f9fafb; color: #2563eb; } .yardim-page .faq-icon { color: #9ca3af; transition: transform 0.3s ease; font-size: 1.1rem; } .yardim-page .faq-question.active .faq-icon { transform: rotate(180deg); color: #2563eb; } .yardim-page .faq-answer { padding: 0 1.25rem; max-height: 0; overflow: hidden; transition: all 0.3s ease; color: #6b7280; line-height: 1.7; } .yardim-page .faq-answer.active { padding: 0 1.25rem 1.25rem 1.25rem; max-height: 500px; } /* Quick Links */ .yardim-page .quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 2rem; } .yardim-page .quick-link-card { background: var(--kart-arka-plan); border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.5rem; text-decoration: none; color: #111827; transition: all 0.2s; } .yardim-page .quick-link-card:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); } .yardim-page .quick-link-card i { font-size: 1.75rem; color: #2563eb; margin-bottom: 1rem; display: block; } .yardim-page .quick-link-card h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; font-weight: 600; } .yardim-page .quick-link-card p { margin: 0; color: #6b7280; font-size: 0.9rem; } /* Responsive */ @media (max-width: 968px) { .yardim-page .info-sidebar { transform: translateX(-100%); transition: transform 0.3s; } .yardim-page .info-sidebar.open { transform: translateX(0); } .yardim-page .info-main { margin-left: 0; } } /* #endregion Yardım Sayfası Stilleri */ /* #region İletişim Sayfası Stilleri */ .iletisim-page * { margin: 0; padding: 0; box-sizing: border-box; } .iletisim-page body { font-family: 'Inter', sans-serif; background: #f5f7fa; color: #333; } .iletisim-page .info-page-container { display: flex; min-height: 100vh; } /* Header */ .iletisim-page .info-header { position: fixed; top: 0; left: 0; right: 0; height: 70px; background: var(--kart-arka-plan); border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; padding: 0 2rem; z-index: 1000; box-shadow: 0 1px 3px var(--golge-hover); } .iletisim-page .info-header .logo { height: 35px; } .iletisim-page .info-header .logo img { height: 100%; width: auto; } .iletisim-page .header-right { margin-left: auto; display: flex; gap: 1rem; align-items: center; } .iletisim-page .header-btn { padding: 0.5rem 1.25rem; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; } /* İletişim sayfası butonları ortak stillerden miras alır */ /* Sidebar */ .iletisim-page .info-sidebar { position: fixed; left: 0; top: 70px; width: 260px; height: calc(100vh - 70px); background: var(--kart-arka-plan); border-right: 1px solid #e5e7eb; padding: 2rem 0; overflow-y: auto; } .iletisim-page .sidebar-menu { list-style: none; } .iletisim-page .sidebar-menu li { margin-bottom: 0.25rem; } .iletisim-page .sidebar-menu a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; color: #6b7280; text-decoration: none; font-weight: 500; transition: all 0.2s; } .iletisim-page .sidebar-menu a:hover { background: #f9fafb; color: #111827; } .iletisim-page .sidebar-menu a.active { background: #eff6ff; color: #2563eb; border-right: 3px solid #2563eb; } .iletisim-page .sidebar-menu a i { font-size: 1.1rem; width: 20px; text-align: center; } .iletisim-page .sidebar-divider { height: 1px; background: #e5e7eb; margin: 1rem 0; } /* Main Content */ .iletisim-page .info-main { margin-left: 260px; margin-top: 70px; padding: 2rem; flex: 1; } .iletisim-page .page-title { font-size: 2rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; } .iletisim-page .page-subtitle { font-size: 1rem; color: #6b7280; margin-bottom: 2rem; } /* Contact Grid */ .iletisim-page .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; margin-top: 2rem; } @media (max-width: 968px) { .iletisim-page .contact-grid { grid-template-columns: 1fr; } } /* Contact Info */ .iletisim-page .contact-info-section { background: var(--kart-arka-plan); border: 1px solid #e5e7eb; border-radius: 10px; padding: 2rem; } .iletisim-page .contact-info-title { font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 1.5rem; } .iletisim-page .contact-detail { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #f3f4f6; } .iletisim-page .contact-detail:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .iletisim-page .contact-detail-icon { width: 40px; height: 40px; background: #eff6ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #2563eb; font-size: 1.1rem; flex-shrink: 0; } .iletisim-page .contact-detail-content h3 { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; color: #111827; } .iletisim-page .contact-detail-content p { margin: 0.25rem 0; color: #6b7280; font-size: 0.95rem; } .iletisim-page .contact-detail-content a { color: #2563eb; text-decoration: none; } .iletisim-page .contact-detail-content a:hover { text-decoration: underline; } .iletisim-page .social-links { display: flex; gap: 0.75rem; margin-top: 1.5rem; } .iletisim-page .social-link { width: 40px; height: 40px; border-radius: 8px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #6b7280; text-decoration: none; transition: all 0.2s; font-size: 1.1rem; } .iletisim-page .social-link:hover { background: #2563eb; color: var(--kart-arka-plan); } /* Contact Form */ .iletisim-page .contact-form-section { background: var(--kart-arka-plan); border: 1px solid #e5e7eb; border-radius: 10px; padding: 2rem; } .iletisim-page .form-title { font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 1.5rem; } .iletisim-page .success-message { display: none; padding: 1rem; background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; border-radius: 8px; margin-bottom: 1.5rem; align-items: center; gap: 0.5rem; } .iletisim-page .success-message.show { display: flex; } .iletisim-page .form-group { margin-bottom: 1.25rem; } .iletisim-page .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; font-size: 0.95rem; } .iletisim-page .form-group input, .iletisim-page .form-group textarea, .iletisim-page .form-group select { width: 100%; padding: 0.75rem 1rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 1rem; font-family: 'Inter', sans-serif; transition: all 0.2s; background: var(--kart-arka-plan); appearance: none; -webkit-appearance: none; -moz-appearance: none; } .iletisim-page .form-group select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.5rem; } .iletisim-page .form-group input:focus, .iletisim-page .form-group textarea:focus, .iletisim-page .form-group select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .iletisim-page .form-group textarea { resize: vertical; min-height: 120px; } .iletisim-page .submit-btn { width: 100%; padding: 0.875rem; background: #2563eb; color: var(--kart-arka-plan); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s; } .iletisim-page .submit-btn:hover { background: #1d4ed8; } .iletisim-page .submit-btn:active { transform: scale(0.98); } /* Responsive */ @media (max-width: 968px) { .iletisim-page .info-sidebar { transform: translateX(-100%); transition: transform 0.3s; } .iletisim-page .info-sidebar.open { transform: translateX(0); } .iletisim-page .info-main { margin-left: 0; } } /* #endregion İletişim Sayfası Stilleri */ /* #region Gizlilik Politikası Sayfası Stilleri */ .gizlilik-politikasi-page * { margin: 0; padding: 0; box-sizing: border-box; } .gizlilik-politikasi-page body { font-family: 'Inter', sans-serif; background: #f5f7fa; color: #333; } .gizlilik-politikasi-page .info-page-container { display: flex; min-height: 100vh; } /* Header */ .gizlilik-politikasi-page .info-header { position: fixed; top: 0; left: 0; right: 0; height: 70px; background: var(--kart-arka-plan); border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; padding: 0 2rem; z-index: 1000; box-shadow: 0 1px 3px var(--golge-hover); } .gizlilik-politikasi-page .info-header .logo { height: 35px; } .gizlilik-politikasi-page .info-header .logo img { height: 100%; width: auto; } .gizlilik-politikasi-page .header-right { margin-left: auto; display: flex; gap: 1rem; align-items: center; } .gizlilik-politikasi-page .header-btn { padding: 0.5rem 1.25rem; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; } /* Gizlilik politikası sayfası butonları ortak stillerden miras alır */ /* Sidebar */ .gizlilik-politikasi-page .info-sidebar { position: fixed; left: 0; top: 70px; width: 260px; height: calc(100vh - 70px); background: var(--kart-arka-plan); border-right: 1px solid #e5e7eb; padding: 2rem 0; overflow-y: auto; } .gizlilik-politikasi-page .sidebar-menu { list-style: none; } .gizlilik-politikasi-page .sidebar-menu li { margin-bottom: 0.25rem; } .gizlilik-politikasi-page .sidebar-menu a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; color: #6b7280; text-decoration: none; font-weight: 500; transition: all 0.2s; } .gizlilik-politikasi-page .sidebar-menu a:hover { background: #f9fafb; color: #111827; } .gizlilik-politikasi-page .sidebar-menu a.active { background: #eff6ff; color: #2563eb; border-right: 3px solid #2563eb; } .gizlilik-politikasi-page .sidebar-menu a i { font-size: 1.1rem; width: 20px; text-align: center; } .gizlilik-politikasi-page .sidebar-divider { height: 1px; background: #e5e7eb; margin: 1rem 0; } /* Main Content */ .gizlilik-politikasi-page .info-main { margin-left: 260px; margin-top: 70px; padding: 2rem; flex: 1; } .gizlilik-politikasi-page .page-title { font-size: 2rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; } .gizlilik-politikasi-page .page-subtitle { font-size: 1rem; color: #6b7280; margin-bottom: 2rem; } /* Privacy Content */ .gizlilik-politikasi-page .privacy-content { background: var(--kart-arka-plan); border: 1px solid #e5e7eb; border-radius: 10px; padding: 2.5rem; } .gizlilik-politikasi-page .privacy-section { margin-bottom: 2.5rem; } .gizlilik-politikasi-page .privacy-section:last-child { margin-bottom: 0; } .gizlilik-politikasi-page .section-title { font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; } .gizlilik-politikasi-page .section-title i { color: #2563eb; font-size: 1.2rem; } .gizlilik-politikasi-page .privacy-section h3 { color: #374151; font-size: 1.1rem; margin: 1.5rem 0 0.75rem 0; font-weight: 600; } .gizlilik-politikasi-page .privacy-section p { color: #6b7280; line-height: 1.7; margin-bottom: 1rem; } .gizlilik-politikasi-page .privacy-section ul { color: #6b7280; line-height: 1.7; margin-left: 1.5rem; margin-bottom: 1rem; } .gizlilik-politikasi-page .privacy-section ul li { margin-bottom: 0.5rem; } .gizlilik-politikasi-page .privacy-section ul li strong { color: #374151; } .gizlilik-politikasi-page .info-box { background: #eff6ff; border-left: 3px solid #2563eb; padding: 1.25rem; border-radius: 8px; margin: 1.5rem 0; } .gizlilik-politikasi-page .info-box strong { color: #1e40af; display: block; margin-bottom: 0.5rem; } .gizlilik-politikasi-page .info-box p { margin: 0; } .gizlilik-politikasi-page .contact-box { background: #f9fafb; border: 1px solid #e5e7eb; padding: 2rem; border-radius: 8px; margin-top: 2rem; text-align: center; } .gizlilik-politikasi-page .contact-box h3 { margin: 0 0 1rem 0; font-size: 1.2rem; color: #111827; } .gizlilik-politikasi-page .contact-box p { margin: 0.5rem 0; color: #6b7280; } .gizlilik-politikasi-page .contact-box a { color: #2563eb; text-decoration: none; } .gizlilik-politikasi-page .contact-box a:hover { text-decoration: underline; } .gizlilik-politikasi-page .last-updated { text-align: center; color: #9ca3af; font-size: 0.9rem; padding: 1.5rem 0 0 0; margin-top: 2rem; border-top: 1px solid #e5e7eb; } /* Responsive */ @media (max-width: 968px) { .gizlilik-politikasi-page .info-sidebar { transform: translateX(-100%); transition: transform 0.3s; } .gizlilik-politikasi-page .info-sidebar.open { transform: translateX(0); } .gizlilik-politikasi-page .info-main { margin-left: 0; } } /* #endregion Gizlilik Politikası Sayfası Stilleri */ /* ======================================== */ /* BİLGİ SAYFALARI STİLLERİ SONU */ /* ======================================== */ /* #region la� Rehberi Modal Stilleri */ /* Modal ba�l�k d�zenlemesi */ .drug-modal-title { display: flex; align-items: center; gap: 12px; } .drug-modal-title h3 { margin: 0; font-size: 24px; font-weight: 600; color: var(--metin-ana); } /* Ana bilgi kartlar� */ .drug-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .drug-info-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--arka-plan-ana); border-radius: 12px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; } .drug-info-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-ana); } .drug-info-card.primary { border-left: 4px solid var(--primary-500); } .drug-info-card.success { border-left: 4px solid var(--success-500); } .drug-info-card.warning { border-left: 4px solid var(--warning-500); } .info-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .drug-info-card.primary .info-card-icon { background: rgba(var(--primary-rgb), 0.1); color: var(--primary-500); } .drug-info-card.success .info-card-icon { background: rgba(var(--success-rgb), 0.1); color: var(--success-500); } .drug-info-card.warning .info-card-icon { background: rgba(var(--warning-rgb), 0.1); color: var(--warning-500); } .info-card-content { flex: 1; align-items: flex-start; display: flex ; flex-direction: column; } .info-card-label { display: block; font-size: 12px; font-weight: 500; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .info-card-content h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } /* Detay b�l�mleri */ .drug-detail-section { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .drug-detail-section .section-header { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kenarlik-ana); } .section-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .section-content { color: var(--metin-ikincil); line-height: 1.6; } .section-content p { margin: 0; } /* Uyar�lar grid */ .drug-warnings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; } .warning-section { background: linear-gradient(135deg, rgba(var(--danger-rgb), 0.05) 0%, rgba(var(--danger-rgb), 0.02) 100%); border-color: rgba(var(--danger-rgb), 0.2); } /* Etkile�im etiketleri */ .interaction-section { background: linear-gradient(135deg, rgba(var(--info-rgb), 0.05) 0%, rgba(var(--info-rgb), 0.02) 100%); border-color: rgba(var(--info-rgb), 0.2); } .interaction-tags { display: flex; flex-wrap: wrap; gap: 8px; } .interaction-tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: 20px; font-size: 14px; font-weight: 500; color: var(--metin-ana); transition: all 0.2s ease; } .interaction-tag:hover { background: var(--primary-50); border-color: var(--primary-200); color: var(--primary-600); } .interaction-tag i { font-size: 12px; } /* �nemli notlar */ .important-notes { background: linear-gradient(135deg, rgba(var(--warning-rgb), 0.05) 0%, rgba(var(--warning-rgb), 0.02) 100%); border-color: rgba(var(--warning-rgb), 0.2); } .notes-list { list-style: none; padding: 0; margin: 0; } .notes-list li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; color: var(--metin-ikincil); } .notes-list li i { color: var(--success-500); font-size: 16px; margin-top: 2px; } /* Responsive d�zenlemeler */ @media (max-width: 768px) { .drug-info-cards { grid-template-columns: 1fr; } .drug-warnings-grid { grid-template-columns: 1fr; } .drug-modal-title { flex-direction: column; align-items: flex-start; } } /* #endregion */ /* #region la� Rehberi Modal Stilleri */ /* Modal ba�l�k d�zenlemesi */ .drug-modal-title { display: flex; align-items: center; gap: 12px; } .drug-modal-title h3 { margin: 0; font-size: 24px; font-weight: 600; color: var(--metin-ana); } /* Ana bilgi kartlar� */ .drug-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .drug-info-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--arka-plan-ana); border-radius: 12px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; } .drug-info-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-ana); } .drug-info-card.primary { border-left: 4px solid var(--primary-500); } .drug-info-card.success { border-left: 4px solid var(--success-500); } .drug-info-card.warning { border-left: 4px solid var(--warning-500); } .info-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .drug-info-card.primary .info-card-icon { background: rgba(var(--primary-rgb), 0.1); color: var(--primary-500); } .drug-info-card.success .info-card-icon { background: rgba(var(--success-rgb), 0.1); color: var(--success-500); } .drug-info-card.warning .info-card-icon { background: rgba(var(--warning-rgb), 0.1); color: var(--warning-500); } .info-card-content { flex: 1; } .info-card-label { display: block; font-size: 12px; font-weight: 500; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .info-card-content h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } /* Detay b�l�mleri */ .drug-detail-section { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .drug-detail-section .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kenarlik-ana); } .section-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .section-content { color: var(--metin-ikincil); line-height: 1.6; } .section-content p { margin: 0; } /* Uyar�lar grid */ .drug-warnings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; } .warning-section { background: linear-gradient(135deg, rgba(var(--danger-rgb), 0.05) 0%, rgba(var(--danger-rgb), 0.02) 100%); border-color: rgba(var(--danger-rgb), 0.2); } /* Etkile�im etiketleri */ .interaction-section { background: linear-gradient(135deg, rgba(var(--info-rgb), 0.05) 0%, rgba(var(--info-rgb), 0.02) 100%); border-color: rgba(var(--info-rgb), 0.2); } .interaction-tags { display: flex; flex-wrap: wrap; gap: 8px; } .interaction-tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: 20px; font-size: 14px; font-weight: 500; color: var(--metin-ana); transition: all 0.2s ease; } .interaction-tag:hover { background: var(--primary-50); border-color: var(--primary-200); color: var(--primary-600); } .interaction-tag i { font-size: 12px; } /* �nemli notlar */ .important-notes { background: linear-gradient(135deg, rgba(var(--warning-rgb), 0.05) 0%, rgba(var(--warning-rgb), 0.02) 100%); border-color: rgba(var(--warning-rgb), 0.2); } .notes-list { list-style: none; padding: 0; margin: 0; } .notes-list li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; color: var(--metin-ikincil); } .notes-list li i { color: var(--success-500); font-size: 16px; margin-top: 2px; } /* Responsive d�zenlemeler */ @media (max-width: 768px) { .drug-info-cards { grid-template-columns: 1fr; } .drug-warnings-grid { grid-template-columns: 1fr; } .drug-modal-title { flex-direction: column; align-items: flex-start; } } /* #endregion */ /* #region Hasta Tablosu Avatar Stilleri */ .patient-table-avatar { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .patient-table-avatar img { width: 24px; height: 24px; object-fit: contain; } .patient-table-info { display: flex; align-items: center; gap: 12px; } .patient-table-details h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--metin-ana); } .patient-table-details p { margin: 0; font-size: 12px; color: var(--metin-ucuncu); } .patient-table-avatar.dog { background: rgba(59, 130, 246, 0.1); } .patient-table-avatar.cat { background: rgba(139, 92, 246, 0.1); } .patient-table-avatar.bird { background: rgba(236, 72, 153, 0.1); } .patient-table-avatar.rabbit { background: rgba(251, 146, 60, 0.1); } .patient-table-avatar.chicken { background: rgba(234, 179, 8, 0.1); } .patient-table-avatar.frog { background: rgba(34, 197, 94, 0.1); } .patient-table-avatar.turtle { background: rgba(14, 165, 233, 0.1); } .patient-table-avatar.fish { background: rgba(6, 182, 212, 0.1); } .patient-table-avatar.parrot { background: rgba(168, 85, 247, 0.1); } .patient-table-avatar.snake { background: rgba(132, 204, 22, 0.1); } .patient-table-avatar.chameleon { background: rgba(16, 185, 129, 0.1); } .patient-table-avatar.other { background: rgba(148, 163, 184, 0.1); } /* #endregion */ /* #region Hasta Detaylar� Modal Stilleri */ .patient-modal-title { display: flex; align-items: center; gap: 16px; } .patient-modal-avatar { width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .patient-modal-avatar img { width: 36px; height: 36px; object-fit: contain; } .patient-modal-avatar.dog { background: rgba(59, 130, 246, 0.15); } .patient-modal-avatar.cat { background: rgba(139, 92, 246, 0.15); } .patient-modal-avatar.bird { background: rgba(236, 72, 153, 0.15); } .patient-modal-avatar.rabbit { background: rgba(251, 146, 60, 0.15); } .patient-modal-avatar.other { background: rgba(148, 163, 184, 0.15); } .patient-modal-info h3 { margin: 0; font-size: 24px; font-weight: 600; color: var(--metin-ana); } .patient-modal-info p { margin: 4px 0 0 0; font-size: 14px; color: var(--metin-ucuncu); } .modal-header-content { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 16px; } .patient-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .patient-info-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--arka-plan-ana); border-radius: 12px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; } /* .patient-info-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-ana); } */ .patient-info-card.primary { border-left: 4px solid var(--primary-500); } .patient-info-card.success { border-left: 4px solid var(--success-500); } .patient-info-card.warning { border-left: 4px solid var(--warning-500); } .patient-info-card .info-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .patient-info-card.primary .info-card-icon { background: rgba(var(--primary-rgb), 0.1); color: var(--primary-500); width: fit-content; } .patient-info-card.success .info-card-icon { background: rgba(var(--success-rgb), 0.1); color: var(--success-500); } .patient-info-card.warning .info-card-icon { background: rgba(var(--warning-rgb), 0.1); color: var(--warning-500); } .patient-detail-section { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .patient-detail-section .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kenarlik-ana); } .patient-detail-section .section-header i { font-size: 18px; color: var(--primary-500); } .patient-detail-section .section-header.info i { color: var(--info-500); } .patient-detail-section .section-header.warning i { color: var(--warning-500); } .patient-detail-section .section-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .detail-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .detail-label { font-size: 12px; font-weight: 500; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; } .detail-value { font-size: 14px; font-weight: 500; color: var(--metin-ana); } .contact-info { display: flex; flex-direction: column; gap: 12px; } .contact-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--arka-plan-ikincil); border-radius: 8px; } .contact-item i { color: var(--primary-500); font-size: 16px; } .contact-item span { color: var(--metin-ana); font-size: 14px; } .address-text { margin: 0; color: var(--metin-ikincil); line-height: 1.6; } .patient-detail-section.important-notes { background: linear-gradient(135deg, rgba(var(--warning-rgb), 0.05) 0%, rgba(var(--warning-rgb), 0.02) 100%); border-color: rgba(var(--warning-rgb), 0.2); } .patient-detail-section.important-notes p { margin: 0; color: var(--metin-ikincil); line-height: 1.6; } @media (max-width: 1024px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .patient-info-cards, .drug-info-cards { grid-template-columns: 1fr; } .detail-grid, .drug-warnings-grid { grid-template-columns: 1fr; } .patient-modal-title, .drug-modal-title { flex-direction: column; align-items: flex-start; } .modal-header-content { flex-direction: column; align-items: flex-start; } .patient-detail-section { padding: 16px; } .patient-detail-section .section-header { margin-bottom: 16px; padding-bottom: 12px; } } /* #endregion */ /* #region la� Rehberi Modal Stilleri */ .drug-modal-title { display: flex; align-items: center; gap: 12px; } .drug-modal-title h3 { margin: 0; font-size: 24px; font-weight: 600; color: var(--metin-ana); } .drug-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .drug-info-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--arka-plan-ana); border-radius: 12px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; } .drug-info-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-ana); } .drug-info-card.primary { border-left: 4px solid var(--primary-500); } .drug-info-card.success { border-left: 4px solid var(--success-500); } .drug-info-card.warning { border-left: 4px solid var(--warning-500); } .info-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .drug-info-card.primary .info-card-icon { background: rgba(var(--primary-rgb), 0.1); color: var(--primary-500); } .drug-info-card.success .info-card-icon { background: rgba(var(--success-rgb), 0.1); color: var(--success-500); } .drug-info-card.warning .info-card-icon { background: rgba(var(--warning-rgb), 0.1); color: var(--warning-500); } .info-card-content { flex: 1; } .info-card-label { display: block; font-size: 12px; font-weight: 500; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .info-card-content h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .drug-detail-section { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .drug-detail-section .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kenarlik-ana); } .section-header i { font-size: 20px; color: var(--primary-500); } .section-header.danger i { color: var(--danger-500); } .section-header.warning i { color: var(--warning-500); } .section-header.info i { color: var(--info-500); } .section-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .section-content { color: var(--metin-ikincil); line-height: 1.6; } .section-content p { margin: 0; } .drug-warnings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; } .warning-section { background: linear-gradient(135deg, rgba(var(--danger-rgb), 0.05) 0%, rgba(var(--danger-rgb), 0.02) 100%); border-color: rgba(var(--danger-rgb), 0.2); } .interaction-section { background: linear-gradient(135deg, rgba(var(--info-rgb), 0.05) 0%, rgba(var(--info-rgb), 0.02) 100%); border-color: rgba(var(--info-rgb), 0.2); } .interaction-tags { display: flex; flex-wrap: wrap; gap: 8px; } .interaction-tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ana); border-radius: 20px; font-size: 14px; font-weight: 500; color: var(--metin-ana); transition: all 0.2s ease; } .interaction-tag:hover { background: var(--primary-50); border-color: var(--primary-200); color: var(--primary-600); } .interaction-tag i { font-size: 12px; } .important-notes { background: linear-gradient(135deg, rgba(var(--warning-rgb), 0.05) 0%, rgba(var(--warning-rgb), 0.02) 100%); border-color: rgba(var(--warning-rgb), 0.2); } .notes-list { list-style: none; padding: 0; margin: 0; } .notes-list li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; color: var(--metin-ikincil); } .notes-list li i { color: var(--success-500); font-size: 16px; margin-top: 2px; } @media (max-width: 768px) { .drug-info-cards { grid-template-columns: 1fr; } .drug-warnings-grid { grid-template-columns: 1fr; } .drug-modal-title { flex-direction: column; align-items: flex-start; } } /* #endregion */ /* #region Hasta Tablosu ve Modal Stilleri */ .patient-table-avatar { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .patient-table-avatar img { width: 24px; height: 24px; object-fit: contain; } .patient-table-info { display: flex; align-items: center; gap: 12px; } .patient-table-details h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--metin-ana); } .patient-table-details p { margin: 0; font-size: 12px; color: var(--metin-ucuncu); } .patient-table-avatar.dog { background: rgba(59, 130, 246, 0.1); } .patient-table-avatar.cat { background: rgba(139, 92, 246, 0.1); } .patient-table-avatar.bird { background: rgba(236, 72, 153, 0.1); } .patient-table-avatar.rabbit { background: rgba(251, 146, 60, 0.1); } .patient-table-avatar.chicken { background: rgba(234, 179, 8, 0.1); } .patient-table-avatar.frog { background: rgba(34, 197, 94, 0.1); } .patient-table-avatar.turtle { background: rgba(14, 165, 233, 0.1); } .patient-table-avatar.fish { background: rgba(6, 182, 212, 0.1); } .patient-table-avatar.parrot { background: rgba(168, 85, 247, 0.1); } .patient-table-avatar.snake { background: rgba(132, 204, 22, 0.1); } .patient-table-avatar.chameleon { background: rgba(16, 185, 129, 0.1); } .patient-table-avatar.other { background: rgba(148, 163, 184, 0.1); } .patient-modal-title { display: flex; align-items: center; gap: 16px; } .patient-modal-avatar { width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .patient-modal-avatar img { width: 36px; height: 36px; object-fit: contain; } .patient-modal-avatar.dog { background: rgba(59, 130, 246, 0.15); } .patient-modal-avatar.cat { background: rgba(139, 92, 246, 0.15); } .patient-modal-avatar.bird { background: rgba(236, 72, 153, 0.15); } .patient-modal-avatar.rabbit { background: rgba(251, 146, 60, 0.15); } .patient-modal-avatar.other { background: rgba(148, 163, 184, 0.15); } .patient-modal-info h3 { margin: 0; font-size: 24px; font-weight: 600; color: var(--metin-ana); } .patient-modal-info p { margin: 4px 0 0 0; font-size: 14px; color: var(--metin-ucuncu); } .modal-header-content { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 16px; } .patient-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .patient-info-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--arka-plan-ana); border-radius: 12px; border: 1px solid var(--kenarlik-ana); transition: all 0.3s ease; } /* .patient-info-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--golge-ana); } */ .patient-info-card.primary { border-left: 4px solid var(--primary-500); } .patient-info-card.success { border-left: 4px solid var(--success-500); } .patient-info-card.warning { border-left: 4px solid var(--warning-500); } .patient-info-card .info-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .patient-info-card.primary .info-card-icon { background: rgba(var(--primary-rgb), 0.1); color: var(--primary-500); } .patient-info-card.success .info-card-icon { background: rgba(var(--success-rgb), 0.1); color: var(--success-500); } .patient-info-card.warning .info-card-icon { background: rgba(var(--warning-rgb), 0.1); color: var(--warning-500); } .patient-detail-section { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .patient-detail-section .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kenarlik-ana); } .patient-detail-section .section-header i { font-size: 18px; color: var(--primary-500); } .patient-detail-section .section-header.info i { color: var(--info-500); } .patient-detail-section .section-header.warning i { color: var(--warning-500); } .patient-detail-section .section-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--metin-ana); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .detail-item { display: flex; flex-direction: column; gap: 4px; } .detail-label { font-size: 12px; font-weight: 500; color: var(--metin-ucuncu); text-transform: uppercase; letter-spacing: 0.5px; } .detail-value { font-size: 14px; font-weight: 500; color: var(--metin-ana); } .contact-info { display: flex; flex-direction: column; gap: 12px; } .contact-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--arka-plan-ikincil); border-radius: 8px; } .contact-item i { color: var(--primary-500); font-size: 16px; } .contact-item span { color: var(--metin-ana); font-size: 14px; } .address-text { margin: 0; color: var(--metin-ikincil); line-height: 1.6; } .patient-detail-section.important-notes { background: linear-gradient(135deg, rgba(var(--warning-rgb), 0.05) 0%, rgba(var(--warning-rgb), 0.02) 100%); border-color: rgba(var(--warning-rgb), 0.2); } .patient-detail-section.important-notes p { margin: 0; color: var(--metin-ikincil); line-height: 1.6; } @media (max-width: 768px) { .patient-info-cards, .drug-info-cards { grid-template-columns: 1fr; } .detail-grid, .drug-warnings-grid { grid-template-columns: 1fr; } .patient-modal-title, .drug-modal-title { flex-direction: column; align-items: flex-start; } .modal-header-content { flex-direction: column; align-items: flex-start; } } /* #endregion */ /* #region Hasta Avatar Large - Modal i�in */ .patient-avatar-large { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .patient-avatar-large img { width: 48px; height: 48px; object-fit: contain; } .patient-avatar-large.dog { background: rgba(59, 130, 246, 0.15); } .patient-avatar-large.cat { background: rgba(139, 92, 246, 0.15); } .patient-avatar-large.bird, .patient-avatar-large.ku� { background: rgba(236, 72, 153, 0.15); } .patient-avatar-large.rabbit { background: rgba(251, 146, 60, 0.15); } .patient-avatar-large.chicken { background: rgba(234, 179, 8, 0.15); } .patient-avatar-large.frog { background: rgba(34, 197, 94, 0.15); } .patient-avatar-large.turtle { background: rgba(14, 165, 233, 0.15); } .patient-avatar-large.fish { background: rgba(6, 182, 212, 0.15); } .patient-avatar-large.parrot { background: rgba(168, 85, 247, 0.15); } .patient-avatar-large.snake { background: rgba(132, 204, 22, 0.15); } .patient-avatar-large.chameleon { background: rgba(16, 185, 129, 0.15); } /* #endregion */ /* #region Parrot Avatar Rengi */ /* .patient-avatar.parrot, .patient-billing-info .patient-avatar.parrot { background: rgba(168, 85, 247, 0.1); } */ /* #endregion */ /* #region Patient Species Badge */ .patient-species-badge { background: rgba(148, 163, 184, 0.12); padding: 6px 12px; border-radius: 6px; display: inline-flex; align-items: center; } .patient-species-badge span { color: var(--metin-ikincil); font-size: 13px; font-weight: 500; } /* #endregion */ /* #region Tablo T�r ve Irk Kolonlar� */ .patients-table .species-name { /* color: #374151; */ font-weight: 500; font-size: 14px; } .patients-table .breed-name { /* color: #6b7280; */ font-size: 14px; } /* #endregion */ /* #region Hastalar Sayfas� - Kay�t Say�s� Stat Item */ /* �ok spesifik se�ici - sadece hastalar sayfas�ndaki patient-card i�indeki modifier-info olmayan stat-item */ .hastalar-page .patients-section .patient-card .patient-stats .stat-item:not(.modifier-info) { background: var(--arka-plan-ucuncu); border-radius: 6px; cursor: default; } .hastalar-page .patients-section .patient-card .patient-stats .stat-item:not(.modifier-info) i { color: var(--metin-ikincil); } .hastalar-page .patients-section .patient-card .patient-stats .stat-item:not(.modifier-info) span { color: var(--baslik-ucuncu); font-weight: 500; color: var(--metin-ana); } .hastalar-page .patients-section .patient-card .patient-stats .stat-item:not(.modifier-info):hover { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ana); color: var(--metin-ana); } /* #endregion */ /* #region Search Clear Button */ .search-clear-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--metin-ikincil) !important; cursor: pointer; padding: 0; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; transition: all 0.2s ease; z-index: 10; line-height: 1; } .search-clear-btn .clear-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; } .search-clear-btn .clear-icon i { font-size: 12px; line-height: 1; margin: 0; padding: 0; } .search-clear-btn:hover { background: rgba(148, 163, 184, 0.15); color: var(--baslik-ucuncu) !important; } .search-clear-btn i { font-size: 12px; } .search-box input:not(:placeholder-shown) ~ .search-clear-btn { display: flex; } /* Input'a padding ekle clear button i�in */ /* #endregion */ /* #region Satış Detay Modal Stilleri */ #saleDetailModal .sale-detail-container { display: flex; flex-direction: column; gap: 24px; } #saleDetailModal .sale-detail-container .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } #saleDetailModal .sale-detail-container .detail-item span { margin: 0; padding: 0; } #saleDetailModal .detail-section { background: var(--arka-plan-ikincil); border-radius: 8px; padding: 20px; border: 1px solid var(--kenarlik-ikincil); } #saleDetailModal .detail-section h4 { font-size: 16px; font-weight: 600; color: var(--metin-ana); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } #saleDetailModal .detail-section h4 i { color: var(--ana-mavi); } #saleDetailModal .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } #saleDetailModal .detail-item { display: flex; align-items: flex-start; flex-direction: column; gap: 4px; padding-left: 20px; } #saleDetailModal .detail-label { font-size: 13px; color: var(--metin-ikincil); font-weight: 500; } #saleDetailModal .detail-value { font-size: 15px; color: var(--metin-ana); font-weight: 600; } #saleDetailModal .detail-table-wrapper { overflow-x: auto; border-radius: 6px; border: 1px solid var(--kenarlik-ikincil); } #saleDetailModal .detail-table { width: 100%; border-collapse: collapse; background: var(--kart-arka-plan); } #saleDetailModal .detail-table thead { background: var(--arka-plan-ucuncu); } #saleDetailModal .detail-table thead th { padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 600; color: var(--metin-ana); border-bottom: 2px solid var(--kenarlik-ikincil); } #saleDetailModal .detail-table tbody tr { border-bottom: 1px solid var(--kenarlik-ikincil); transition: background 0.2s ease; } #saleDetailModal .detail-table tbody tr:hover { background: var(--arka-plan-ikincil); } #saleDetailModal .detail-table tbody tr:last-child { border-bottom: none; } #saleDetailModal .detail-table tbody td { padding: 12px 16px; font-size: 14px; color: var(--metin-ana); } #saleDetailModal .detail-totals { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--kart-arka-plan); border-radius: 6px; border: 1px solid var(--kenarlik-ikincil); } #saleDetailModal .total-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--metin-ana); } #saleDetailModal .total-row.grand-total { padding-top: 12px; border-top: 2px solid var(--kenarlik-ikincil); font-size: 16px; font-weight: 700; color: var(--ana-mavi); } #saleDetailModal .discount-value { color: var(--kirmizi); } #saleDetailModal .detail-notes { padding: 12px; background: var(--kart-arka-plan); border-radius: 6px; border: 1px solid var(--kenarlik-ikincil); font-size: 14px; color: var(--metin-ana); line-height: 1.6; } /* Responsive */ @media (max-width: 768px) { #saleDetailModal .detail-grid { grid-template-columns: 1fr; } #saleDetailModal .detail-table { font-size: 12px; } #saleDetailModal .detail-table thead th, #saleDetailModal .detail-table tbody td { padding: 0 !important; flex-direction: row !important; justify-content: space-between !important; width: 100% !important; } .barcode-input-group { flex-direction: column !important; } } /* #endregion */ /* #region Radyoloji Modal Stilleri */ /* Image Viewer Modal */ #imageViewerModal .viewer-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; padding: 20px; background: var(--arka-plan-ikincil); border-radius: 12px; border: 1px solid var(--kenarlik-ikincil); } #imageViewerModal .info-item { display: flex; flex-direction: column; gap: 6px; } #imageViewerModal .info-item label { font-size: 12px; color: var(--metin-ikincil); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } #imageViewerModal .info-item span { font-size: 15px; color: var(--metin-ana); font-weight: 600; } /* Report View Modal */ #reportViewModal .report-patient-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ikincil); border-radius: 16px; /* margin-bottom: 24px; */ } #reportViewModal .patient-avatar { width: 70px; height: 70px; border-radius: 14px; display: flex; align-items: center; justify-content: center; /* background: var(--arka-plan-ucuncu); */ background: transparent; /* border: 2px solid var(--kenarlik-ikincil); */ flex-shrink: 0; padding: 10px; } #reportViewModal .patient-avatar img { width: 100%; height: 100%; object-fit: contain; } #reportViewModal .patient-details { flex: 1; min-width: 0; } #reportViewModal .patient-details h4 { /* margin: 0 0 4px 0; */ font-size: 20px; font-weight: 700; color: var(--metin-ana); } #reportViewModal .patient-details p { /* margin: 0 0 12px 0; */ font-size: 15px; color: var(--metin-ikincil); font-weight: 500; } #reportViewModal .patient-meta { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin: 0; } #reportViewModal .meta-tag { display: flex; align-items: center; gap: 6px; padding: 6px 12px; /* background: var(--arka-plan-ucuncu); */ border-radius: 20px; font-size: 13px; color: var(--metin-ikincil); border: 1px solid var(--kenarlik-ikincil); cursor: default; } #reportViewModal .meta-tag i { color: var(--ana-mavi); font-size: 12px; } #reportViewModal .report-type-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; /* background: var(--ana-mavi-acik); */ background: transparent; color: var(--ana-mavi); border-radius: 12px; border: 1px solid var(--ana-mavi); } #reportViewModal .report-type-badge i { font-size: 24px; } #reportViewModal .report-type-badge span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } #reportViewModal .report-content-grid { display: grid; gap: 20px; } #reportViewModal .report-section { background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ikincil); border-radius: 12px; overflow: hidden; margin: 0; box-shadow: none; } #reportViewModal .section-header { display: flex; align-items: center; gap: 12px; padding: 0 0 10px 0; margin: 0; /* background: var(--arka-plan-ucuncu); */ /* border-bottom: 2px solid var(--kenarlik-ikincil); */ } #reportViewModal .section-header i { color: var(--ana-mavi); font-size: 18px; } #reportViewModal .section-header h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--metin-ana); } #reportViewModal .section-content { padding: 20px; } #reportViewModal .section-content p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--metin-ana); } /* Responsive */ @media (max-width: 768px) { #imageViewerModal .viewer-info { grid-template-columns: 1fr; } #reportViewModal .report-patient-card { flex-direction: column; text-align: center; } #reportViewModal .patient-meta { justify-content: center; } } /* #endregion */ /* #region Patient Detail Modal (fallback id) */ /* Some deployments use #patientDetailModal id; mirror the same scoped styles */ #patientDetailModal .modal-header { background: var(--arka-plan-ikincil); border-bottom: 2px solid var(--kenarlik-ikincil); } #patientDetailModal .modal-header-content { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex: 1; } #patientDetailModal .patient-avatar { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--arka-plan-ucuncu); border: 2px solid var(--kenarlik-ikincil); flex-shrink: 0; padding: 8px; } #patientDetailModal .patient-avatar img { width: 100%; height: 100%; object-fit: contain; } #patientDetailModal .patient-header-info h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--metin-ana); line-height: 1.3; } #patientDetailModal .patient-header-info p { margin: 4px 0 0 0; font-size: 14px; color: var(--metin-ikincil); font-weight: 500; } #patientDetailModal .admission-info-section { padding: 0; margin-bottom: 24px; background: transparent; border-radius: 0; } #patientDetailModal .admission-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } #patientDetailModal .info-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--arka-plan-ikincil); border: 1px solid var(--kenarlik-ikincil); border-radius: 12px; } #patientDetailModal .info-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ana-mavi-acik); color: var(--ana-mavi); border-radius: 10px; flex-shrink: 0; } #patientDetailModal .info-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #patientDetailModal .info-label { font-size: 12px; color: var(--metin-ikincil); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; } #patientDetailModal .info-value { font-size: 15px; color: var(--metin-ana); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #patientDetailModal .admission-timeline { padding: 0; background: transparent; border-radius: 0; border: none; box-shadow: none; } #patientDetailModal .admission-timeline-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } #patientDetailModal .admission-timeline-item:last-child { margin-bottom: 0; } #patientDetailModal .admission-timeline-item i { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--arka-plan-ucuncu); color: var(--metin-ucuncu); flex-shrink: 0; } #patientDetailModal .admission-timeline-content { flex: 1; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ikincil); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } #patientDetailModal .admission-timeline-content span { font-size: 14px; font-weight: 600; color: var(--metin-ana); } #patientDetailModal .admission-timeline-content p { margin: 0; font-size: 13px; color: var(--metin-ikincil); } #patientDetailModal .admission-timeline-content time { font-size: 12px; color: var(--metin-ikincil); background: var(--arka-plan-ucuncu); border: 1px solid var(--kenarlik-ikincil); padding: 4px 10px; border-radius: 12px; width: fit-content; } #patientDetailModal .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--kenarlik-ikincil); background: var(--arka-plan-ana); color: var(--metin-ana); font-size: 12px; font-weight: 600; } #patientDetailModal .status-badge.active { border-color: var(--ana-mavi); color: var(--ana-mavi); } #patientDetailModal .modal-body p { margin: 0; padding: 0; color: var(--metin-ana); line-height: 1.6; } #patientDetailModal .modal-body span { margin: 0; padding: 0; color: var(--metin-ana); } #patientDetailModal .modal-body label { margin: 0; padding: 0; color: var(--metin-ikincil); font-weight: 600; } @media (max-width: 768px) { #patientDetailModal .admission-info-grid { grid-template-columns: 1fr; } #patientDetailModal .patient-avatar { width: 48px; height: 48px; } #patientDetailModal .patient-header-info h3 { font-size: 16px; } } /* Hasta detay modalı iyileştirmeleri */ #patientDetailModal .patient-detail-section { padding: 24px; margin-bottom: 20px; } #patientDetailModal .patient-detail-section .section-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--kenarlik-ana); justify-content: flex-start; } #patientDetailModal .patient-detail-section .section-header i { font-size: 20px; flex-shrink: 0; } /* Grid düzeni iyileştirmeleri */ #patientDetailModal .detail-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1024px) { #patientDetailModal .detail-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { #patientDetailModal .detail-grid { grid-template-columns: 1fr; } #patientDetailModal .patient-detail-section { padding: 16px; } #patientDetailModal .patient-detail-section .section-header { margin-bottom: 16px; padding-bottom: 12px; } } /* Detail item iyileştirmeleri */ #patientDetailModal .detail-item { padding: 16px; background: var(--arka-plan-ikincil); border-radius: 10px; border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; gap: 6px; display: flex; align-items: flex-start; flex-direction: column; } #patientDetailModal .detail-item:hover { background: var(--arka-plan-ana); border-color: var(--primary-500); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); cursor: default; } #patientDetailModal .detail-label { font-weight: 600; margin-bottom: 4px; } #patientDetailModal .detail-value { font-size: 15px; font-weight: 600; } /* Contact item iyileştirmeleri */ #patientDetailModal .contact-info { gap: 16px; display: flex; flex-direction: column; } #patientDetailModal .contact-item { padding: 16px; background: var(--arka-plan-ikincil); border-radius: 12px; border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; display: flex; align-items: center; gap: 12px; } #patientDetailModal .contact-item:hover { background: var(--arka-plan-ana); border-color: var(--primary-500); box-shadow: 0 2px 8px var(--golge-hover); } #patientDetailModal .contact-item i { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; color: var(--primary-500); } #patientDetailModal .contact-item span { font-size: 15px; font-weight: 500; color: var(--metin-ana); } /* Address text iyileştirmeleri */ #patientDetailModal .address-text { margin: 0; padding: 16px; background: var(--arka-plan-ikincil); border-radius: 12px; border: 1px solid var(--kenarlik-ana); color: var(--metin-ana); line-height: 1.6; font-size: 15px; font-weight: 500; transition: all 0.2s ease; } #patientDetailModal .address-text:hover { background: var(--arka-plan-ana); border-color: var(--primary-500); box-shadow: 0 2px 8px var(--golge-hover); } #patientDetailModal .section-content { margin-top: 16px; } /* Adres detayları için stil */ .hastalar-page #dynamicPatientDetailModal .address-details { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; } .hastalar-page #dynamicPatientDetailModal .address-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--arka-plan-ikincil); border-radius: 8px; border: 1px solid var(--kenarlik-ana); font-size: 14px; color: var(--metin-ana); } .hastalar-page #dynamicPatientDetailModal .address-item strong { color: var(--metin-ikincil); font-weight: 600; } .hastalar-page #dynamicPatientDetailModal .address-text { margin-bottom: 12px; line-height: 1.6; } .hastalar-page #dynamicPatientDetailModal .address-text strong { color: var(--metin-ana); font-weight: 600; margin-right: 6px; } /* #endregion */ /* #region Hukuki Destek Notlar Sistemi */ .hukuki-destek-page .request-notes-section { margin: 24px 0; padding: 20px; background: var(--arka-plan-ikincil); border-radius: 12px; border: 1px solid var(--kenarlik-ana); } .hukuki-destek-page .notes-section-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 1px solid var(--kenarlik-ikincil); } .hukuki-destek-page .notes-section-title i { color: var(--ana-mavi); } .hukuki-destek-page .notes-list { display: flex; flex-direction: column; gap: 12px; } .hukuki-destek-page .note-item { background: var(--arka-plan-ana); border-radius: 10px; padding: 14px 16px; border: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .hukuki-destek-page .note-item:hover { box-shadow: 0 2px 8px var(--golge-hover); border-color: var(--kenarlik-ikincil); } .hukuki-destek-page .note-item.general { border-left: 3px solid var(--durum-bilgi); } .hukuki-destek-page .note-item.important { border-left: 3px solid var(--durum-uyari); background: linear-gradient(90deg, var(--durum-uyari-acik) 0%, var(--arka-plan-ana) 3%); } .hukuki-destek-page .note-item.urgent { border-left: 3px solid var(--durum-hata); background: linear-gradient(90deg, var(--durum-hata-acik) 0%, var(--arka-plan-ana) 3%); } .hukuki-destek-page .note-item.internal { border-left: 3px solid var(--durum-koyu); background: linear-gradient(90deg, var(--arka-plan-ucuncu) 0%, var(--arka-plan-ana) 3%); } .hukuki-destek-page .note-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; } .hukuki-destek-page .note-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .hukuki-destek-page .note-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hukuki-destek-page .note-left i { color: var(--metin-ikincil); font-size: 14px; } .hukuki-destek-page .note-title { font-size: 14px; font-weight: 600; color: var(--baslik-ana); } .hukuki-destek-page .note-badge { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; cursor: default; } .hukuki-destek-page .note-badge.general { background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .hukuki-destek-page .note-badge.important { background: var(--durum-uyari-acik); color: var(--durum-uyari-metin); } .hukuki-destek-page .note-badge.urgent { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .hukuki-destek-page .note-badge.internal { background: var(--arka-plan-ucuncu); color: var(--metin-ikincil); } .hukuki-destek-page .note-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .hukuki-destek-page .note-right .note-badge { margin-right: 0; } .hukuki-destek-page .note-visibility { font-size: 11px; color: var(--metin-ucuncu); padding: 3px 8px; background: var(--arka-plan-ucuncu); border-radius: 6px; cursor: default; } .hukuki-destek-page .note-delete-btn { width: 24px; height: 24px; border: none; background: transparent; color: var(--metin-ucuncu); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; font-size: 12px; } .hukuki-destek-page .note-delete-btn:hover { background: var(--durum-hata-acik); color: var(--durum-hata-metin); } .hukuki-destek-page .note-content { font-size: 13px; color: var(--metin-ana); line-height: 1.6; margin-bottom: 10px; padding: 10px; background: var(--arka-plan-ikincil); border-radius: 8px; } .hukuki-destek-page .note-footer { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--metin-ucuncu); padding-top: 8px; border-top: 1px solid var(--kenarlik-ikincil); } .hukuki-destek-page .note-author, .hukuki-destek-page .note-date { display: flex; align-items: center; gap: 4px; } .hukuki-destek-page .note-author i, .hukuki-destek-page .note-date i { font-size: 10px; } @media (max-width: 768px) { .hukuki-destek-page .note-header { flex-direction: column; gap: 8px; } .hukuki-destek-page .note-left { width: 100%; } .hukuki-destek-page .note-right { width: 100%; justify-content: space-between; flex-wrap: wrap; } .hukuki-destek-page .note-right .note-badge, .hukuki-destek-page .note-right .note-visibility { flex: 1; text-align: center; } .hukuki-destek-page .note-footer { flex-direction: column; align-items: flex-start; gap: 6px; } } /* #endregion */ /* #region Arşiv Şifre Giriş Ekranı */ .hukuki-destek-page .archived-password-screen { display: flex; align-items: center; justify-content: center; min-height: 400px; background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); padding: 20px; } .hukuki-destek-page .password-screen-content { text-align: center; padding: 40px; max-width: 500px; width: 100%; margin: 0 auto; } .hukuki-destek-page .password-screen-content i { font-size: 48px; color: var(--ana-mavi); margin-bottom: 10px; display: block; } .hukuki-destek-page .password-screen-content h3 { font-size: 20px; font-weight: 700; color: var(--baslik-ana); /* margin: 0 0 12px 0; */ } .hukuki-destek-page .password-screen-content > p { font-size: 16px; color: var(--metin-ikincil); margin: 0 0 32px 0; } .hukuki-destek-page .password-input-group { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; } .hukuki-destek-page .password-input-group input { flex: 1; padding: 12px 16px; border: 1px solid var(--kenarlik-ana); border-radius: 10px; font-size: 15px; background: var(--arka-plan-ana); color: var(--metin-ana); height: 48px; box-sizing: border-box; } .hukuki-destek-page .password-input-group input:focus { outline: none; border-color: var(--ana-mavi); box-shadow: 0 0 0 3px var(--golge-odak); } .hukuki-destek-page .password-input-group button { padding: 12px 24px; border-radius: 10px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; box-sizing: border-box; white-space: nowrap; } .hukuki-destek-page .password-input-group button i { font-size: 16px; color: var(--ana-mavi); margin: 0; display: block; } #archivedPasswordInput { height: 48px; } .hukuki-destek-page .password-error { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--durum-hata-acik); color: var(--durum-hata-metin); border-radius: 10px; font-size: 14px; margin-top: 16px; } .hukuki-destek-page .password-error i { font-size: 16px; } /* Arşiv Tablosu */ .hukuki-destek-page .archive-table { width: 100%; border-collapse: collapse; background: var(--arka-plan-ana); border-radius: 12px; overflow: hidden; } .hukuki-destek-page .archive-table thead { background: var(--arka-plan-ikincil); } .hukuki-destek-page .archive-table th { padding: 16px; text-align: left; font-size: 13px; font-weight: 600; color: var(--metin-ikincil); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--kenarlik-ana); } .hukuki-destek-page .archive-table tbody tr { border-bottom: 1px solid var(--kenarlik-ikincil); transition: background-color 0.2s ease; } .hukuki-destek-page .archive-table tbody tr:hover { background: var(--arka-plan-ikincil); } .hukuki-destek-page .archive-table td { padding: 16px; font-size: 14px; color: var(--metin-ana); } .hukuki-destek-page .archive-table .archive-number { font-weight: 600; color: var(--ana-mavi); } .hukuki-destek-page .archive-table .archive-type { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; } .hukuki-destek-page .archive-table .archive-actions { display: flex; gap: 8px; } .hukuki-destek-page #archivedNoResult { display: none !important; } .hukuki-destek-page #archivedNoResult[style*="display: flex"] { display: flex !important; } .hukuki-destek-page .archive-type { padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--durum-bilgi-acik); color: var(--durum-bilgi-metin); } .hukuki-destek-page .status-badge.completed { background: var(--durum-basarili-acik); color: var(--durum-basarili-metin); } /* Boş Durum Mesajı */ .hukuki-destek-page .empty-state-message { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 40px; } .hukuki-destek-page .empty-state-content { text-align: center; padding: 40px; background: var(--arka-plan-ikincil); border-radius: 16px; border: 1px solid var(--kenarlik-ana); max-width: 500px; } .hukuki-destek-page .empty-state-content i { font-size: 64px; color: var(--metin-ucuncu); margin-bottom: 16px; opacity: 0.5; } .hukuki-destek-page .empty-state-content h4 { font-size: 20px; font-weight: 600; color: var(--baslik-ana); margin: 0 0 8px 0; } .hukuki-destek-page .empty-state-content p { font-size: 14px; color: var(--metin-ikincil); margin: 0; } /* Arşivlenen Dosya Detay Modal */ .hukuki-destek-page .archived-detail-info { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--arka-plan-ikincil); border-radius: 12px; } .hukuki-destek-page .archived-detail-info .detail-row { display: flex; align-items: center; justify-content: space-between; padding: 0 0 12px 0; border-bottom: 1px solid var(--kenarlik-ana); } .hukuki-destek-page .archived-detail-info .detail-row:last-child { border-bottom: none; } .hukuki-destek-page .archived-detail-info .detail-row label { font-size: 14px; font-weight: 600; color: var(--metin-ikincil); min-width: 150px; } .hukuki-destek-page .archived-detail-info .detail-row span { font-size: 14px; color: var(--metin-ana); text-align: right; } @media (max-width: 768px) { .hukuki-destek-page .password-input-group { flex-direction: column; } .hukuki-destek-page .password-screen-content { padding: 24px; } .hukuki-destek-page .archive-table { font-size: 12px; } .hukuki-destek-page .archive-table th, .hukuki-destek-page .archive-table td { padding: 12px 8px; } } /* #endregion */ /* #region Mesaj Önizleme Modal */ .preview-method-info { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-lg); margin-bottom: 24px; border: 1px solid var(--kenarlik-ana); } .preview-method-info i { font-size: 24px; color: var(--ana-mavi); } .preview-method-info span { font-size: 18px; font-weight: 600; color: var(--metin-ana); } .preview-method-header { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--arka-plan-ikincil); border-radius: var(--radius-md); margin-bottom: 20px; } .method-icon-wrapper { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--ana-mavi); border-radius: var(--radius-md); color: var(--metin-beyaz); font-size: 24px; } .method-info h4 { margin: 0 0 4px 0; font-size: 18px; font-weight: 600; color: var(--baslik-ana); } .method-info p { margin: 0; font-size: 14px; color: var(--metin-ikincil); } .preview-message-container { margin-top: 16px; } .preview-message-content { background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-lg); padding: 20px; min-height: 200px; max-height: 400px; overflow-y: auto; } .preview-message-text { white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; color: var(--metin-ana); font-size: 15px; } .preview-message-text a { color: var(--ana-mavi); text-decoration: underline; } .preview-message-text a:hover { color: var(--ana-mavi-koyu); } /* #endregion */ /* #region İlaç Autocomplete Stilleri */ .medication-autocomplete-wrapper { position: relative; width: 100%; } .medication-autocomplete-list { position: fixed; background: white; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); max-height: 280px; overflow-y: auto; z-index: 999999; box-shadow: 0 4px 16px rgba(0,0,0,0.2); display: none; pointer-events: auto; min-width: 320px; max-width: 500px; width: auto; } .medication-autocomplete-list.active { display: block; } .medication-autocomplete-list .autocomplete-item { padding: 14px 18px; cursor: pointer; border-bottom: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; display: flex; flex-direction: column; /* gap: 6px; */ } .medication-autocomplete-list .autocomplete-item:last-child { border-bottom: none; } .medication-autocomplete-list .autocomplete-item-name { font-weight: 600; color: var(--yazi-ana); font-size: 14px; } .medication-autocomplete-list .autocomplete-item-details { display: flex; gap: 12px; font-size: 12px; color: var(--yazi-soluk); flex-wrap: wrap; } .medication-autocomplete-list .autocomplete-item-details span { white-space: nowrap; } .medication-autocomplete-list .autocomplete-item-category { display: inline-flex; align-items: center; gap: 4px; } .medication-autocomplete-list .autocomplete-item-category::before { content: '•'; color: var(--ana-mavi); } .medication-autocomplete-list .autocomplete-item:hover, .medication-autocomplete-list .autocomplete-item.selected { background-color: var(--ana-mavi-cok-acik-v2); } /* .medication-autocomplete-list .autocomplete-item:hover .autocomplete-item-name, .medication-autocomplete-list .autocomplete-item.selected .autocomplete-item-name { color: white; } */ /* .medication-autocomplete-list .autocomplete-item:hover .autocomplete-item-details, .medication-autocomplete-list .autocomplete-item.selected .autocomplete-item-details { color: rgba(255, 255, 255, 0.9); } */ .medication-autocomplete-list .autocomplete-item:active { background-color: var(--ana-mavi); } .medication-autocomplete-list .no-results { padding: 16px; text-align: center; color: var(--yazi-soluk); font-size: 14px; } .medication-autocomplete-list .no-results i { display: block; margin-bottom: 8px; font-size: 24px; color: var(--yazi-cok-soluk); } /* Scrollbar stilleri */ .medication-autocomplete-list::-webkit-scrollbar { width: 6px; } .medication-autocomplete-list::-webkit-scrollbar-track { background: var(--bg-ikincil); border-radius: 3px; } .medication-autocomplete-list::-webkit-scrollbar-thumb { background: var(--kenarlik-ana); border-radius: 3px; } .medication-autocomplete-list::-webkit-scrollbar-thumb:hover { background: var(--yazi-soluk); } /* #endregion */ /* ======================================== LAB RESULT VIEW MODAL - TEMİZ STİL ======================================== */ /* #region Lab Result View Modal */ #labResultViewModal .modal-content { max-width: 600px; background: white; border-radius: 12px; border: 1px solid var(--kenarlik-ana); } #labResultViewModal .modal-header { padding: 24px 28px; border-bottom: 2px solid var(--kenarlik-ana); background: var(--arka-plan-ana); } #labResultViewModal .modal-header h3 { color: var(--yazi-ana); font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin: 0; } #labResultViewModal .modal-header h3 i { color: var(--ana-mavi); font-size: 20px; } #labResultViewModal .modal-close { background: transparent; color: var(--yazi-soluk); border: 1px solid var(--kenarlik-ana); width: 32px; height: 32px; border-radius: 8px; font-size: 20px; transition: all 0.2s ease; } #labResultViewModal .modal-close:hover { background: var(--arka-plan-ana); color: var(--yazi-ana); border-color: var(--ana-mavi); } #labResultViewModal .modal-body { padding: 28px; } #labResultViewModal .detail-list { display: grid; gap: 16px; } #labResultViewModal .detail-list p { display: grid; grid-template-columns: 140px 1fr; align-items: center; padding: 14px 18px; margin: 0; background: var(--arka-plan-ana); border: 1px solid var(--kenarlik-ana); border-left: 3px solid var(--ana-mavi); border-radius: 8px; font-size: 14px; line-height: 1.5; transition: all 0.2s ease; } #labResultViewModal .detail-list p:hover { border-left-color: var(--ana-mavi-acik); background: white; } #labResultViewModal .detail-list p strong { color: var(--yazi-ana); font-weight: 600; font-size: 13px; } #labResultViewModal .modal-footer { padding: 20px 28px; background: var(--arka-plan-ana); border-top: 1px solid var(--kenarlik-ana); border-radius: 0 0 12px 12px; display: flex; justify-content: flex-end; gap: 12px; } #labResultViewModal .btn-outline { background: white; color: var(--ana-mavi); border: 1px solid var(--ana-mavi); padding: 10px 24px; font-weight: 500; border-radius: 8px; font-size: 14px; transition: all 0.2s ease; } #labResultViewModal .btn-outline:hover { background: var(--ana-mavi-cok-acik-v2); color: var(--ana-mavi-koyu); border-color: var(--ana-mavi-koyu); } /* Staff hours - time slots - Spesifik hekim çalışma saatleri stilleri */ #staff-hours-section .time-slots { display: flex; flex-direction: column; gap: var(--spacing-md); width: 100%; } #staff-hours-section .day-schedule { align-items: center; } #staff-hours-section .time-slot { display: grid !important ; grid-template-columns: 130px auto max-content !important; align-items: center !important; gap: var(--spacing-md) !important; background: transparent; padding: 0; margin: 0; margin-bottom: 10px; align-items: flex-start; justify-content: flex-start; border: none; cursor: default; } #staff-hours-section .slot-label { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ikincil); } #staff-hours-section .time-inputs { display: flex; align-items: center; gap: var(--spacing-md); } #staff-hours-section .time-inputs input[type="time"] { padding: 8px 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: var(--text-base); width: 110px !important; } #staff-hours-section .time-slot .working-hours-toggle { justify-self: start; } .time-inputs { display: flex; align-items: center; gap: var(--spacing-md); } .time-inputs input[type="time"] { padding: 8px 12px; border: 1px solid var(--kenarlik-ana); border-radius: var(--radius-md); font-size: var(--text-base); width: fit-content !important; } .time-inputs input[type="time"]:disabled { background: var(--arka-plan-ucuncu); color: var(--metin-dorduncu); opacity: 0.5; cursor: not-allowed; pointer-events: none; } .time-inputs span { color: var(--metin-ucuncu); font-weight: 500; } /* Working Hours Toggle - Açık/Kapalı Toggle Butonu */ .working-hours-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; } .working-hours-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .working-hours-toggle .toggle-slider { position: relative; width: 60px; height: 32px; background: var(--arka-plan-ucuncu); border: 2px solid var(--kenarlik-ana); border-radius: 20px; transition: all 0.3s ease; } .working-hours-toggle .toggle-slider::before { content: ''; position: absolute; width: 24px; height: 24px; left: 4px; top: 50%; transform: translateY(-50%); background: var(--metin-ucuncu); border-radius: 50%; transition: all 0.3s ease; } .working-hours-toggle input[type="checkbox"]:checked + .toggle-slider { background: #4CAF50; border-color: #4CAF50; } .working-hours-toggle input[type="checkbox"]:checked + .toggle-slider::before { transform: translate(28px, -50%); background: var(--metin-beyaz); } .working-hours-toggle .toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--metin-ana); user-select: none; min-width: 45px; } .working-hours-toggle input[type="checkbox"]:checked ~ .toggle-label { color: #4CAF50; } .working-hours-toggle:hover .toggle-slider { box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); } .working-hours-toggle input[type="checkbox"]:disabled ~ .toggle-slider { opacity: 0.5; cursor: not-allowed; } /* Responsive */ @media (max-width: 768px) { #labResultViewModal .modal-content { max-width: 95%; } #labResultViewModal .modal-body { padding: 20px; } #labResultViewModal .detail-list p { grid-template-columns: 1fr; gap: 6px; padding: 12px 16px; } #labResultViewModal .detail-list p strong { font-size: 12px; color: var(--ana-mavi-koyu); } #labResultViewModal .modal-footer { flex-direction: column; gap: 10px; } #labResultViewModal .btn-outline { width: 100%; text-align: center; } } /* #endregion */ /* ================================================================================================ */ /* ===================================== RESPONSIVE TASARIM ======================================= */ /* ================================================================================================ */ /* Bu bölüm tüm projenin responsive tasarımını içerir. Breakpoint'ler: - Laptop: 1367px - 1920px (Büyük ekranlar) - Notebook: 1024px - 1366px (Orta boy ekranlar - 1366px dahil) - Mobil: 320px - 1023px (Tablet ve mobil cihazlar) */ /* ========================================= LAPTOP ============================================== */ /* Min: 1367px | Max: 1920px - Büyük ekran optimizasyonları */ /* ============================================================================================== */ @media (min-width: 1367px) and (max-width: 1920px) { /* #region LOGIN SAYFASI - Login Page (.login-page) */ /* Login sayfası laptop optimizasyonları - Varsayılan tasarım zaten laptop için optimize */ /* Ana container - 2 kolon düzeni korunuyor */ .login-page .login-container { display: flex; } /* Sol panel - Görsel alan */ .login-page .login-image-panel { flex: 1; min-width: 500px; } /* Sağ panel - Form alanı */ .login-page .login-form-panel { flex: 1; min-width: 500px; padding: 60px; } /* Form container genişliği */ .login-page .form-container { max-width: 480px; } /* Logo boyutları */ .login-page .logo-large img { height: 40px; } .login-page .logo-small img { height: 26px; } /* Başlıklar */ .login-page h1 { font-size: 36px !important; } .login-page .image-overlay h2 { font-size: 22px; } /* #endregion */ } /* ========================================= NOTEBOOK =========================================== */ /* Min: 1025px | Max: 1366px - Orta boy ekran optimizasyonları (1366px dahil) */ /* ============================================================================================== */ @media (min-width: 1025px) and (max-width: 1366px) { /* #region LOGIN SAYFASI - Login Page (.login-page) */ /* Login sayfası notebook optimizasyonları */ /* Sol panel boyutu - Görsel için yeterli alan */ .login-page .login-image-panel { flex: 1 !important; background-size: cover !important; background-position: center center !important; } .action-right { width: 100%; } /* Sağ panel */ .login-page .login-form-panel { flex: 1 !important; padding: 40px; } .login-form, .reset-form { gap: 12px; } /* Form container genişliği */ .login-page .form-container { max-width: 420px; } .login-page .login-header, .login-page .reset-header { margin-bottom: 12px; } /* Overlay içerik boyutu ve spacing düzenlemeleri */ .login-page .image-overlay { top: 50px !important; left: 50px !important; } /* Logo boyutları ve margin düzenlemesi */ .login-page .logo-large { margin-bottom: 20px !important; } .login-page .logo-large img { height: 30px !important; } .login-page .logo-small{ margin: 0; } .login-page .logo-small img { height: 24px; } /* Başlık boyutları ve margin düzenlemeleri */ .login-page h1 { font-size: 30px !important; } .login-page .image-overlay h2 { font-size: 17px !important; margin-bottom: 10px !important; } .login-page .image-overlay p { font-size: 14px !important; margin-bottom: 25px !important; line-height: 1.4 !important; } /* Feature/Security items daha kompakt */ .login-page .features-list, .login-page .security-features { gap: 18px; } .login-page .security-icon { width: 48px; height: 48px; font-size: 18px; } .login-page .security-text h4 { font-size: 16px; margin-bottom: 4px; } .login-page .security-text p { font-size: 13px; } /* Form elemanları */ .login-page .input-wrapper input { font-size: 14px !important; } .login-page .login-btn, .login-page .reset-btn { padding: 14px 20px !important; font-size: 15px !important; } .tedaviler-page .tab-header, .stok-page .tab-header { flex-direction: column; align-items: flex-start; gap: 10px; } .stok-page .stock-table td { padding: 10px 10px; } .radyoloji-page .tab-content .btn-primary, .radyoloji-page .tab-content .btn-secondary { width: fit-content; white-space: nowrap; } .radyoloji-page #reportsTab .patient-info { display: flex; flex-direction: column; gap: 10px; } .tedaviler-page .tab-header .filter-group { width: 100%; } .randevular-page .appointment-source-info { min-width: auto; max-width: fit-content; } .ilac-rehberi-page .btn-icon { padding: 12px 24px; height: 42px; width: auto; min-width: fit-content; max-width: fit-content; justify-content: center; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; } .ilac-rehberi-page .action-right select { width: fit-content; } .sales-add-section .form-row { grid-template-columns: 1fr 1fr; } .scanner-placeholder { display: flex; flex-direction: column; align-items: center; } .hukuki-destek-page .legal-layout { grid-template-columns: 1fr; } /* #endregion */ /* #region RANDEVULAR SAYFASI - Randevular Page (.randevular-page) */ /* Randevular sayfası notebook optimizasyonları - Liste görünümü */ .randevular-page .appointments-list { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; } .randevular-page .list-header, .randevular-page .list-row { min-width: 1200px !important; width: 100% !important; } .randevular-page .list-col { flex: 1 !important; min-width: 0 !important; padding: 0 8px !important; font-size: 12px !important; } .randevular-page .list-col:first-child { flex: 0 0 90px !important; min-width: 90px !important; } .randevular-page .list-col:nth-child(2) { flex: 0 0 70px !important; min-width: 70px !important; } .randevular-page .list-col:nth-child(3) { flex: 0 0 120px !important; min-width: 160px !important; } .randevular-page .list-col:nth-child(4) { flex: 0 0 120px !important; min-width: 120px !important; } .randevular-page .list-col:nth-child(5) { flex: 0 0 130px !important; min-width: 130px !important; } .randevular-page .list-col:nth-child(6) { flex: 0 0 100px !important; min-width: 100px !important; } .randevular-page .list-col:nth-child(7) { flex: 0 0 140px !important; min-width: 140px !important; } .randevular-page .list-col:nth-child(8) { flex: 0 0 100px !important; min-width: 100px !important; } .randevular-page .list-col:last-child { flex: 0 0 100px !important; min-width: 100px !important; } .randevular-page .list-row { padding: 16px 20px !important; } .randevular-page .list-header { padding: 14px 20px !important; font-size: 12px !important; } .randevular-page .patient-info-mini { gap: 6px !important; } .randevular-page .patient-info-mini img { width: 20px !important; height: 20px !important; } .randevular-page .patient-info-mini span { font-size: 12px !important; } .randevular-page .table-actions { gap: 4px !important; } .randevular-page .table-actions .action-btn { width: 28px !important; height: 28px !important; padding: 0 !important; } .randevular-page .table-actions .action-btn i { font-size: 12px !important; } /* #endregion */ .radyoloji-page .tab-btn { text-align: left !important; } } /* ========================================== MOBİL ============================================= */ /* Max: 1023px - Tablet ve mobil cihaz optimizasyonları */ /* ============================================================================================== */ @media (max-width: 1023px) { /* Genel genişlik sorunları - Sadece 481px-1023px için (480px'i ezmemesi için) */ @media (min-width: 481px) { /* Tablolar - Tablet'te yatay scroll */ .table-container, .table-wrapper, table { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; display: block !important; width: 100% !important; max-width: 100% !important; } table { min-width: 100% !important; } /* Form elemanları - Tablet'te tam genişlik */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], textarea, select, .form-input, .form-select, .form-textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Grid'ler - Tablet'te tek kolon (quick-actions-grid hariç) */ .grid-responsive, [class*="grid"]:not(.stats-grid):not(.dashboard-grid):not(.quick-actions-grid) { grid-template-columns: 1fr !important; padding: 10px; } /* Card'lar ve container'lar - Tablet'te tam genişlik */ .card, .card-body, .container, .content-section, section { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Modal'lar - Tablet'te tam genişlik */ .modal-content { width: 95% !important; max-width: 95% !important; margin: 1rem auto !important; } /* Button grupları - Tablet'te dikey */ .btn-group, .button-group { flex-direction: column !important; width: 100% !important; } .btn-group .btn, .button-group .btn { width: 100% !important; margin: 0.25rem 0 !important; } } /* 480px ve altı için genel kurallar - 1023px içinde ama 480px'i override edebilmek için */ @media (max-width: 480px) { /* Tablolar - Mobil'de yatay scroll */ .table-container, .table-wrapper, table { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; display: block !important; width: 100% !important; max-width: 100% !important; } table { min-width: 100% !important; } /* Form elemanları - Mobil'de tam genişlik */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], textarea, select, .form-input, .form-select, .form-textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Grid'ler - Mobil'de tek kolon (quick-actions-grid hariç) */ .grid-responsive, [class*="grid"]:not(.stats-grid):not(.dashboard-grid):not(.quick-actions-grid) { grid-template-columns: 1fr !important; padding: 0 !important; margin: 0 !important; } .hastalar-page .patients-section { margin: 0 !important; } /* Card'lar ve container'lar - Mobil'de tam genişlik */ .card, .card-body, .container, .content-section, section { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0 !important; } /* Modal'lar - Mobil'de tam genişlik */ .modal-content { width: 95% !important; max-width: 95% !important; margin: 1rem auto !important; } /* Button grupları - Mobil'de dikey */ .btn-group, .button-group { flex-direction: column !important; width: 100% !important; } .btn-group .btn, .button-group .btn { width: 100% !important; margin: 0.25rem 0 !important; } } /* Tab content - Mobil görünümde padding */ .tab-content { padding: 14px !important; } /* Ortak content-wrapper - Mobil görünümde padding: 0 */ /* .content-wrapper { padding: 0 !important; } */ /* Ortak view-toggle - Mobil görünümde margin: 0 */ .view-toggle { margin: 0 !important; } /* Ortak action-bar - Mobil görünümde */ .action-bar { margin: 0 !important; padding: 12px !important; } /* Ortak action-left - Mobil görünümde */ .action-left { width: 100% !important; flex-direction: column !important; gap: 0.5rem !important; } /* #region LOGIN SAYFASI - Login Page (.login-page) */ /* Login sayfası mobil optimizasyonları */ /* Ana container - Tek kolon düzeni */ .login-page .login-container { flex-direction: column; height: auto; min-height: 100vh; } /* Sol panel - Görsel alan tamamen gizleniyor mobilde */ .login-page .login-image-panel { display: none !important; } .login-page .overlay-content { width: 80%; } /* Sağ panel - Form alanı */ .login-page .login-form-panel { flex: 1; padding: 30px 20px !important; max-height: none !important; overflow-y: visible !important; } /* Form container */ .login-page .form-container { max-width: 100%; width: 100%; } /* Logo small */ .login-page .logo-small { margin-bottom: 20px; } .login-page .logo-small img { height: 22px; } /* Header/Reset header */ .login-page .login-header, .login-page .reset-header { margin-bottom: 30px; } /* Başlıklar */ .login-page h1 { font-size: 26px !important; margin-bottom: 6px !important; } .login-page .login-header p, .login-page .reset-header p { font-size: 14px !important; } /* Form elemanları */ .login-page .form-group { margin-bottom: 18px; } .login-page .input-wrapper input { padding: 13px 15px 13px 40px !important; font-size: 14px !important; } .login-page .input-wrapper i:not(.password-toggle i) { font-size: 14px !important; left: 14px !important; } .login-page .password-toggle { right: 12px !important; width: 28px !important; height: 28px !important; } .login-page .password-toggle i { font-size: 14px !important; } /* Form options */ .login-page .form-options { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .login-page .checkbox-wrapper .checkbox-label { font-size: 14px; } .login-page .forgot-password { font-size: 14px; } /* Butonlar */ .login-page .login-btn, .login-page .reset-btn, .login-page .login-redirect-btn { padding: 14px 20px !important; font-size: 15px !important; } /* Social login */ .login-page .social-btn { padding: 12px 20px !important; font-size: 14px !important; } /* Footer */ .login-page .login-footer, .login-page .reset-footer { margin-top: 25px; } .login-page .login-footer p { font-size: 14px !important; } .login-page .help-links { flex-wrap: wrap; gap: 12px; } .login-page .help-links a { font-size: 13px !important; } /* Version info */ .login-page .version-info { margin-top: 20px; padding-top: 15px; } .login-page .version-info span { font-size: 11px !important; } /* Back button */ .login-page .back-button { margin-bottom: 20px; } .login-page .back-link { font-size: 14px !important; } /* Success icon */ .login-page .success-icon { width: 64px !important; height: 64px !important; } .login-page .success-icon i { font-size: 28px !important; } .login-page .success-icon.large { width: 80px !important; height: 80px !important; } .login-page .success-icon.large i { font-size: 36px !important; } /* Confirmation content */ .login-page .inbox-illustration i { font-size: 48px !important; } .login-page .next-steps, .login-page .security-tips { padding: 20px; margin: 20px 0; } .login-page .next-steps h3, .login-page .security-tips h3 { font-size: 15px !important; margin-bottom: 12px !important; } .login-page .next-steps ol, .login-page .next-steps li, .login-page .security-tips ul, .login-page .security-tips li { font-size: 14px !important; } /* Resend section */ .login-page .resend-section { flex-direction: column; align-items: flex-start; gap: 12px; margin: 20px 0; } .login-page .resend-btn { width: 100%; padding: 12px 16px !important; } /* Troubleshoot */ .login-page .troubleshoot { margin: 20px 0; } .login-page .troubleshoot details { padding: 12px; } .login-page .troubleshoot summary { font-size: 14px !important; } .login-page .troubleshoot-content ul, .login-page .troubleshoot-content li { font-size: 13px !important; } /* Password requirements */ .login-page .password-requirements { padding: 12px; margin: 15px 0; } .login-page .password-requirements h4 { font-size: 13px !important; margin-bottom: 10px !important; } .login-page .requirement { font-size: 13px !important; margin-bottom: 6px !important; } /* Password strength */ .login-page .password-strength { margin-top: 8px; } .login-page .strength-text { font-size: 11px !important; } /* Success illustration */ .login-page .success-illustration i { font-size: 48px !important; } /* Loading overlay */ .login-page .loading-spinner p { font-size: 14px !important; } /* #endregion */ } /* ===================================== EXTRA KÜçÜK MOBİL ===================================== */ /* Max: 480px - Çok küçük mobil cihazlar için ek optimizasyonlar */ /* ============================================================================================== */ @media (max-width: 480px) { /* #region LOGIN SAYFASI - Login Page (.login-page) */ /* Login sayfası ekstra küçük mobil optimizasyonları */ /* Sol panel zaten mobilde gizli, ek stil gereksiz */ /* Sağ panel padding azaltılıyor */ .login-page .login-form-panel { padding: 20px 16px !important; } .login-page .login-image-panel { display: flex !important; background: url('../assets/m-login-hero-dark.png') center/cover no-repeat !important; max-height: 240px; } .login-page .overlay-content { width: 100%; } .login-page .image-overlay { position: static; padding: 24px; align-items: center; justify-content: center; text-align: center; display: none; } /* .login-page .logo-large { display: none !important; } */ .login-form, .reset-form { gap: 16px; } .login-page .form-options { margin: 0 !important; } /* Header */ .login-page .login-header, .login-page .reset-header { margin-bottom: 16px; } .login-page .logo-small { margin-bottom: 16px; } .login-page .logo-small img { height: 32px; } /* Başlıklar daha da küçük */ .login-page h1 { font-size: 22px !important; margin-bottom: 4px !important; } .login-page .login-header p, .login-page .reset-header p { font-size: 13px !important; } /* Form elemanları */ .login-page .form-group { margin-bottom: 16px; } .login-page .input-wrapper input { padding: 12px 12px 12px 36px !important; font-size: 14px !important; border-radius: 10px !important; } .login-page .input-wrapper i:not(.password-toggle i) { font-size: 13px !important; left: 12px !important; } /* Butonlar */ .login-page .login-btn, .login-page .reset-btn, .login-page .login-redirect-btn { padding: 13px 18px !important; font-size: 14px !important; border-radius: 10px !important; } /* Form options */ .login-page .form-options { gap: 10px; } .login-page .checkbox-wrapper .checkbox-label, .login-page .forgot-password { font-size: 13px; } /* Footer */ .login-page .login-footer, .login-page .reset-footer { margin-top: 20px; } .login-page .login-footer p { font-size: 13px !important; } .login-page .help-links { gap: 10px; } .login-page .help-links a { font-size: 12px !important; } .login-page .version-info { margin-top: 16px; padding-top: 12px; } .login-page .version-info span { font-size: 10px !important; } /* Back button */ .login-page .back-button { margin-bottom: 16px; } .login-page .back-link { font-size: 13px !important; } /* Success elements */ .login-page .success-icon { width: 56px !important; height: 56px !important; } .login-page .success-icon i { font-size: 24px !important; } .login-page .success-icon.large { width: 70px !important; height: 70px !important; } .login-page .success-icon.large i { font-size: 32px !important; } /* Content boxes */ .login-page .next-steps, .login-page .security-tips { padding: 16px; margin: 16px 0; border-radius: 10px; } .login-page .next-steps h3, .login-page .security-tips h3 { font-size: 14px !important; margin-bottom: 10px !important; } .login-page .next-steps ol, .login-page .next-steps li, .login-page .security-tips ul, .login-page .security-tips li { font-size: 13px !important; } /* Resend section */ .login-page .resend-section { margin: 16px 0; } .login-page .resend-section p { font-size: 13px !important; } .login-page .resend-btn { padding: 11px 14px !important; font-size: 13px !important; } /* Troubleshoot */ .login-page .troubleshoot { margin: 16px 0; } .login-page .troubleshoot details { padding: 10px; border-radius: 8px; } .login-page .troubleshoot summary { font-size: 13px !important; } .login-page .troubleshoot-content ul, .login-page .troubleshoot-content li { font-size: 12px !important; } /* Password requirements */ .login-page .password-requirements { padding: 10px; margin: 12px 0; border-radius: 8px; } .login-page .password-requirements h4 { font-size: 12px !important; margin-bottom: 8px !important; } .login-page .requirement { font-size: 12px !important; margin-bottom: 5px !important; gap: 6px !important; } .login-page .requirement i { font-size: 11px !important; } /* Password strength */ .login-page .password-strength { margin-top: 6px; } .login-page .strength-bar { height: 3px; } .login-page .strength-text { font-size: 10px !important; } /* Illustrations */ .login-page .inbox-illustration i, .login-page .success-illustration i { font-size: 40px !important; margin: 20px 0; } /* Loading */ .login-page .loading-spinner p { font-size: 13px !important; } .login-page .spinner { width: 35px; height: 35px; } /* #endregion */ } /* #endregion */ /* ================================================================================================ */ /* ================ INFO SAYFALARI (YARDIM, İLETİŞİM, GİZLİLİK) RESPONSIVE ====================== */ /* ================================================================================================ */ /* #region INFO SAYFALARI - Yardım, İletişim, Gizlilik Sayfaları Responsive */ /* ========================================= LAPTOP ============================================== */ /* Min: 1367px | Max: 1920px - Büyük ekran optimizasyonları */ /* ============================================================================================== */ @media (min-width: 1367px) and (max-width: 1920px) { /* Yardım, İletişim, Gizlilik sayfaları için ortak stiller */ .yardim-page .info-sidebar, .iletisim-page .info-sidebar, .gizlilik-politikasi-page .info-sidebar { width: 280px; } .yardim-page .info-main, .iletisim-page .info-main, .gizlilik-politikasi-page .info-main { margin-left: 280px; padding: 2.5rem; } .yardim-page .info-header, .iletisim-page .info-header, .gizlilik-politikasi-page .info-header { height: 75px; padding: 0 2.5rem; } .yardim-page .info-sidebar, .iletisim-page .info-sidebar, .gizlilik-politikasi-page .info-sidebar { top: 75px; height: calc(100vh - 75px); } .yardim-page .info-main, .iletisim-page .info-main, .gizlilik-politikasi-page .info-main { margin-top: 75px; } } /* ========================================= NOTEBOOK =========================================== */ /* Min: 1025px | Max: 1366px - Orta boy ekran optimizasyonları (1366px dahil) */ /* ============================================================================================== */ @media (min-width: 1025px) and (max-width: 1366px) { /* Yardım, İletişim, Gizlilik sayfaları için ortak stiller */ .yardim-page .info-sidebar, .iletisim-page .info-sidebar, .gizlilik-politikasi-page .info-sidebar { width: 240px !important; } .yardim-page .info-main, .iletisim-page .info-main, .gizlilik-politikasi-page .info-main { margin-left: 240px !important; padding: 1.75rem !important; } .yardim-page .info-header, .iletisim-page .info-header, .gizlilik-politikasi-page .info-header { height: 65px !important; padding: 0 1.75rem !important; } .yardim-page .info-sidebar, .iletisim-page .info-sidebar, .gizlilik-politikasi-page .info-sidebar { top: 65px !important; height: calc(100vh - 65px) !important; padding: 1.5rem 0 !important; } .yardim-page .info-main, .iletisim-page .info-main, .gizlilik-politikasi-page .info-main { margin-top: 65px !important; } /* Logo boyutu */ .yardim-page .info-header .logo, .iletisim-page .info-header .logo, .gizlilik-politikasi-page .info-header .logo { height: 30px !important; } /* Sidebar menü font boyutu */ .yardim-page .sidebar-menu a, .iletisim-page .sidebar-menu a, .gizlilik-politikasi-page .sidebar-menu a { font-size: 0.9rem !important; padding: 0.65rem 1.25rem !important; } /* Header butonları */ .yardim-page .header-btn, .iletisim-page .header-btn, .gizlilik-politikasi-page .header-btn { padding: 0.45rem 1rem !important; font-size: 0.85rem !important; } /* Başlık boyutları */ .yardim-page .page-title, .iletisim-page .page-title, .gizlilik-politikasi-page .page-title { font-size: 1.75rem !important; } .yardim-page .page-subtitle, .iletisim-page .page-subtitle, .gizlilik-politikasi-page .page-subtitle { font-size: 0.95rem !important; } /* FAQ ve içerik elemanları */ .yardim-page .faq-question, .iletisim-page .contact-form-group label, .gizlilik-politikasi-page .privacy-section h2 { font-size: 0.95rem !important; } } /* ========================================== MOBİL ============================================= */ /* Max: 1023px - Tablet ve mobil cihaz optimizasyonları */ /* ============================================================================================== */ @media (max-width: 1023px) { /* Yardım, İletişim, Gizlilik sayfaları için ortak stiller */ /* Sidebar gizle */ .yardim-page .info-sidebar, .iletisim-page .info-sidebar, .gizlilik-politikasi-page .info-sidebar { transform: translateX(-100%) !important; width: 260px !important; z-index: 2000 !important; box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important; } .yardim-page .info-sidebar.open, .iletisim-page .info-sidebar.open, .gizlilik-politikasi-page .info-sidebar.open { transform: translateX(0) !important; } /* Main content tam genişlik */ .yardim-page .info-main, .iletisim-page .info-main, .gizlilik-politikasi-page .info-main { margin-left: 0 !important; padding: 1.5rem !important; margin-top: 70px !important; } /* Header */ .yardim-page .info-header, .iletisim-page .info-header, .gizlilik-politikasi-page .info-header { padding: 0 1.25rem !important; height: 60px !important; } .yardim-page .info-sidebar, .iletisim-page .info-sidebar, .gizlilik-politikasi-page .info-sidebar { top: 60px !important; height: calc(100vh - 60px) !important; } .yardim-page .info-main, .iletisim-page .info-main, .gizlilik-politikasi-page .info-main { margin-top: 60px !important; } /* Logo küçült */ .yardim-page .info-header .logo, .iletisim-page .info-header .logo, .gizlilik-politikasi-page .info-header .logo { height: 28px !important; } /* Hamburger menü butonu - Bu sayfalarda gerek yok, kaldırıldı */ /* Header butonları - Sadece icon göster */ .yardim-page .header-btn, .iletisim-page .header-btn, .gizlilik-politikasi-page .header-btn { padding: 0 !important; width: 42px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; text-indent: -9999px !important; /* Text'i tamamen dışarı at */ position: relative !important; } /* Icon'ları tekrar görünür yap ve ortala */ .yardim-page .header-btn i, .iletisim-page .header-btn i, .gizlilik-politikasi-page .header-btn i { font-size: 1.1rem !important; margin: 0 !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; text-indent: 0 !important; } .yardim-page .header-right, .iletisim-page .header-right, .gizlilik-politikasi-page .header-right { gap: 0.5rem !important; justify-content: center; width: fit-content; } /* Başlıklar */ .yardim-page .page-title, .iletisim-page .page-title, .gizlilik-politikasi-page .page-title { font-size: 1.5rem !important; margin-bottom: 0.4rem !important; } .yardim-page .page-subtitle, .iletisim-page .page-subtitle, .gizlilik-politikasi-page .page-subtitle { font-size: 0.9rem !important; margin-bottom: 1.5rem !important; } /* Search box */ .yardim-page .search-box { padding: 0.65rem 0.85rem !important; margin-bottom: 1.5rem !important; width: 100% !important; box-sizing: border-box !important; } .yardim-page .search-box input { font-size: 0.9rem !important; width: 100% !important; } /* FAQ items */ .yardim-page .faq-question { padding: 1rem !important; font-size: 0.9rem !important; } .yardim-page .faq-answer { font-size: 0.85rem !important; padding: 0 1rem !important; } .yardim-page .faq-answer.active { padding: 0 1rem 1rem 1rem !important; } /* Quick links grid */ .yardim-page .quick-links { grid-template-columns: 1fr !important; gap: 0.75rem !important; } /* İletişim sayfası - Grid düzeni */ .iletisim-page .contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* İletişim kartları */ .iletisim-page .contact-detail { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; } /* Gizlilik sayfası */ .gizlilik-politikasi-page .privacy-content { padding: 0 !important; } .gizlilik-politikasi-page .privacy-section { padding: 1.25rem !important; } .gizlilik-politikasi-page .section-title { font-size: 1.1rem !important; } /* Overlay (sidebar açıkken arka plan) */ .yardim-page .info-sidebar.open::after, .iletisim-page .info-sidebar.open::after, .gizlilik-politikasi-page .info-sidebar.open::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: -1; } } /* ===================================== EXTRA KÜÇÜK MOBİL ===================================== */ /* Max: 480px - Çok küçük mobil cihazlar için ek optimizasyonlar */ /* ============================================================================================== */ @media (max-width: 480px) { /* Main content */ .yardim-page .info-main, .iletisim-page .info-main, .gizlilik-politikasi-page .info-main { padding: 1rem !important; } /* Header */ .yardim-page .info-header, .iletisim-page .info-header, .gizlilik-politikasi-page .info-header { padding: 0 1rem !important; height: 55px !important; } .yardim-page .info-sidebar, .iletisim-page .info-sidebar, .gizlilik-politikasi-page .info-sidebar { top: 55px !important; height: calc(100vh - 55px) !important; } .yardim-page .info-main, .iletisim-page .info-main, .gizlilik-politikasi-page .info-main { margin-top: 55px !important; } /* Logo */ .yardim-page .info-header .logo, .iletisim-page .info-header .logo, .gizlilik-politikasi-page .info-header .logo { height: 24px !important; } /* Header butonları sadece icon */ .yardim-page .header-btn, .iletisim-page .header-btn, .gizlilik-politikasi-page .header-btn { padding: 0.35rem 0.65rem !important; font-size: 0.75rem !important; } .yardim-page .header-right, .iletisim-page .header-right, .gizlilik-politikasi-page .header-right { gap: 0.5rem !important; } /* Başlıklar */ .yardim-page .page-title, .iletisim-page .page-title, .gizlilik-politikasi-page .page-title { font-size: 1.35rem !important; } .yardim-page .page-subtitle, .iletisim-page .page-subtitle, .gizlilik-politikasi-page .page-subtitle { font-size: 0.85rem !important; } /* FAQ */ .yardim-page .faq-question { padding: 0.85rem !important; font-size: 0.85rem !important; } .yardim-page .faq-answer { font-size: 0.8rem !important; } /* Section titles */ .yardim-page .section-title, .iletisim-page .contact-info-title, .gizlilik-politikasi-page .section-title { font-size: 1rem !important; } /* Quick link cards */ .yardim-page .quick-link-card { padding: 1.25rem !important; } .yardim-page .quick-link-card h3 { font-size: 1rem !important; } .yardim-page .quick-link-card p { font-size: 0.85rem !important; } } /* #endregion */ /* ================================================================================================ */ /* ======================== ANA SAYFA (ANASAYFA.HTML) RESPONSIVE ================================ */ /* ================================================================================================ */ /* #region ANA SAYFA - Dashboard/Anasayfa Responsive */ /* ========================================= LAPTOP ============================================== */ /* Min: 1367px | Max: 1920px - Büyük ekran optimizasyonları */ /* ============================================================================================== */ @media (min-width: 1367px) and (max-width: 1920px) { /* Ana sayfa için laptop optimizasyonları */ .anasayfa-page .app-container { grid-template-columns: 280px 1fr; gap: 0; } /* Anasayfa content-wrapper - Diğer sayfalarla aynı olmalı */ .anasayfa-page .content-wrapper { padding: 24px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .anasayfa-page .stats-grid { gap: 1.5rem; } /* .anasayfa-page .stat-card { padding: 1.75rem; } */ } /* ========================================= NOTEBOOK =========================================== */ /* Min: 1025px | Max: 1366px - Orta boy ekran optimizasyonları (1366px dahil) */ /* ============================================================================================== */ @media (min-width: 1025px) and (max-width: 1366px) { /* Sidebar header - Column düzeni */ .anasayfa-page .sidebar-header { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 0.5rem !important; } .date-display { font-size: 14px; } /* Progress text - Notebook'ta left (genel) */ .progress-text { text-align: left !important; } /* Stat breakdown - Notebook'ta flex-start */ .stat-breakdown { justify-content: flex-start !important; } /* Stat change - Notebook'ta flex-start */ .stat-change { justify-content: flex-start !important; } /* Ana sayfa için notebook optimizasyonları */ /* .anasayfa-page .app-container { grid-template-columns: 260px 1fr !important; gap: 0 !important; } */ /* Anasayfa content-wrapper - Özel stil yok, genel stil kullanılacak */ .anasayfa-page .content-wrapper { padding: 24px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Stats grid - Notebook'ta 4 kolon (tablet'teki 2x2'yi override et) */ .anasayfa-page .stats-grid { grid-template-columns: repeat(4, 1fr) ; gap: 1.25rem; } /* .anasayfa-page .stat-card { padding: 1.5rem !important; } */ .anasayfa-page .stat-card h3 { font-size: 1.75rem !important; } .anasayfa-page .stat-card p { font-size: 0.9rem !important; } /* Dashboard grid */ .anasayfa-page .dashboard-grid { gap: 1.25rem !important; } /* Dashboard card - Notebook'ta normal padding (tablet'teki 0.5rem'i override et) */ .anasayfa-page .dashboard-card { padding: 10px !important; } /* Card header - Notebook'ta normal düzen (tablet'teki column'u override et) */ .anasayfa-page .card-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 20px 24px !important; border-bottom: 2px solid var(--kenarlik-ana) !important; gap: 1rem !important; } .anasayfa-page .card-header h3 { font-size: 1.1rem !important; } /* Quick actions */ .anasayfa-page .quick-actions-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; } .anasayfa-page .quick-action-btn { padding: 1rem !important; font-size: 0.85rem !important; } .anasayfa-page .quick-action-btn i { font-size: 1.25rem !important; } /* Dashboard row - Notebook'ta tek kolon */ .anasayfa-page .dashboard-row { grid-template-columns: 1fr !important; } /* Card body - Notebook'ta padding */ .anasayfa-page .card-body { padding: 14px 0 0 0 !important; } /* Appointments table - Notebook'ta normal düzen (tablet'teki padding'i override et) */ .anasayfa-page .appointments-table .card-body { padding: 20px 24px !important; } .anasayfa-page .appointments-table { padding: 0 !important; } .anasayfa-page .appointments-table .table-header, .anasayfa-page .appointments-table .appointment-row { grid-template-columns: 80px 1fr 120px 140px 140px !important; gap: var(--spacing-lg) !important; padding: 16px !important; } .anasayfa-page .appointments-table .header-cell { font-size: 11px !important; } .anasayfa-page .appointments-table .cell { font-size: 0.9rem !important; } /* Progress text - Notebook'ta left */ .anasayfa-page .progress-text { text-align: left !important; } /* Hastalar sayfası - Notebook görünümü */ .hastalar-page .patients-section { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .hastalar-page .patients-grid { grid-template-columns: repeat(3, 1fr) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; gap: var(--spacing-lg) !important; } .hastalar-page .patient-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .hastalar-page .action-right { width: 100% !important; } .search-box { width: 100% !important; } .hastalar-page .view-toggle { margin: 0 !important; } .hastalar-page .patients-section { margin-bottom: 0; } .hastalar-page .patients-grid { margin-bottom: 0; } /* Raporlar sayfası - 1366px görünümde liste görünümü butonunu gizle */ .raporlar-page #listViewBtn, .raporlar-page #cardViewBtn { display: none !important; } .yatan-hastalar-page .vital-grid { grid-template-columns: 1fr 1fr !important; } .yatan-hastalar-page .table-actions { flex-direction: column !important; align-items: flex-start !important; } .muayene-page .rooms-grid { grid-template-columns: 1fr 1fr; } } /* ========================================== MOBİL ============================================= */ /* Max: 1023px - Tablet ve mobil cihaz optimizasyonları */ /* ============================================================================================== */ @media (max-width: 1023px) { /* App container mobil görünümde tek sütun */ .app-container { grid-template-columns: 1fr !important; } /* App layout mobil görünümde - Scroll'u engellemesin */ .app-layout { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: visible !important; /* Body scroll edeceği için layout scroll olmasın */ height: auto !important; min-height: 100vh !important; max-height: none !important; } /* Body ve HTML mobil görünümde - Fixed header kullanırken body scroll olmamalı */ body, html { overflow-x: hidden !important; overflow-y: hidden !important; /* Fixed header kullanırken body scroll olmamalı */ height: 100% !important; min-height: 100vh !important; /* Fallback - eski tarayıcılar için */ max-height: 100vh !important; } /* Mobil görünümde scrollbar zeminini TAMAMEN gizle */ body::-webkit-scrollbar, html::-webkit-scrollbar, *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } body::-webkit-scrollbar-track, html::-webkit-scrollbar-track, *::-webkit-scrollbar-track { display: none !important; background: transparent !important; } body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb { display: none !important; background: transparent !important; } body, html { -ms-overflow-style: none !important; /* IE ve Edge */ scrollbar-width: none !important; /* Firefox */ } /* Tüm elementler için scrollbar gizle */ * { -ms-overflow-style: none !important; scrollbar-width: none !important; } /* Hasta-sahipler-page için body scroll açık kalmalı */ body.hasta-sahipler-page { overflow-y: auto !important; max-height: none !important; height: auto !important; } /* Modern tarayıcılar için Small Viewport Height - Adres çubuğu her zaman görünür */ @supports (height: 100svh) { body, html { min-height: 100svh !important; /* Small viewport - adres çubuğu her zaman hesaba katılır */ } } /* App container mobil görünümde - İçeriğin kesilmemesi için */ .app-container { height: auto !important; min-height: 100vh !important; /* Fallback */ max-height: none !important; overflow-y: visible !important; overflow-x: hidden !important; } @supports (height: 100svh) { .app-container { min-height: 100svh !important; } } /* Page wrapper mobilde scroll'u engellemesin */ .page-wrapper { overflow-y: visible !important; overflow-x: hidden !important; height: auto !important; max-height: none !important; } /* Page header mobilde fixed olmalı - Sabit kalacak */ .page-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 90 !important; background-color: var(--kart-arka-plan) !important; border-bottom: 1px solid var(--kenarlik-ana) !important; } /* Hasta-sahipler-page için özel kural - static kalmalı */ .hasta-sahipler-page .page-header { position: static !important; } /* Main content mobilde (481px-1023px) - Sticky header kullanırken normal akış */ .main-content { padding-top: 0 !important; } /* Hasta-sahipler-page için özel ayarlar (481px-1023px) - Body scroll açık, main-content scroll kapalı */ .hasta-sahipler-page .main-content { padding-top: 0 !important; overflow-y: visible !important; height: auto !important; max-height: none !important; min-height: auto !important; } /* Hasta-sahipler-page için content-wrapper margin-top kaldır (481px-1023px) */ /* Main content mobilde (481px-1023px) - Fixed header kullanırken scroll ETMEMELİ */ /* Sadece content-wrapper scroll edecek */ @media (min-width: 481px) { .main-content { overflow-y: visible !important; /* Main-content scroll ETMEMELİ */ overflow-x: hidden !important; height: 100vh !important; max-height: 100vh !important; min-height: 100vh !important; padding-top: 0 !important; /* Padding-top yok, content-wrapper'a margin-top eklenecek */ } /* Modern tarayıcılar için Small Viewport Height */ @supports (height: 100svh) { .main-content { height: 100svh !important; max-height: 100svh !important; min-height: 100svh !important; } } } /* Content wrapper mobilde (481px-1023px) - Scroll container olarak çalışmalı */ /* Page-header yüksekliği dinamik olarak hesaplanıyor (--page-header-height) */ @media (min-width: 481px) { .content-wrapper { overflow-y: auto !important; /* Content wrapper içinde scroll */ overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; /* iOS için smooth scrolling */ margin-top: var(--page-header-height) !important; /* Dinamik olarak hesaplanan header yüksekliği */ height: calc(100vh - var(--page-header-height)) !important; /* Viewport - header yüksekliği */ max-height: calc(100vh - var(--page-header-height)) !important; min-height: calc(100vh - var(--page-header-height)) !important; padding-bottom: 0 !important; } /* Content-wrapper scrollbar GÖRÜNÜR OLMALI - Scrollbar gizleme kurallarını override et */ .content-wrapper::-webkit-scrollbar { display: block !important; width: 8px !important; height: 8px !important; background: transparent !important; } .content-wrapper::-webkit-scrollbar-track { display: block !important; background: var(--arka-plan-ucuncu) !important; border-radius: 4px !important; } .content-wrapper::-webkit-scrollbar-thumb { display: block !important; background: var(--arka-plan-besinci) !important; border-radius: 4px !important; } .content-wrapper::-webkit-scrollbar-thumb:hover { background: var(--metin-dorduncu) !important; } .content-wrapper { -ms-overflow-style: auto !important; /* IE ve Edge - scrollbar görünür */ scrollbar-width: thin !important; /* Firefox - scrollbar görünür */ } /* Modern tarayıcılar için Small Viewport Height */ @supports (height: 100svh) { .content-wrapper { height: calc(100svh - var(--page-header-height)) !important; max-height: calc(100svh - var(--page-header-height)) !important; min-height: calc(100svh - var(--page-header-height)) !important; } } } /* Content wrapper mobilde overflow-y hidden olanlar için */ .ayarlar-page .content-wrapper, .genel-tanimlar-page .content-wrapper { overflow-y: visible !important; height: auto !important; max-height: none !important; } /* Hamburger menü butonu görünür */ .mobile-menu-btn { display: block !important; z-index: 1001 !important; /* Sidebar'ın üstünde */ position: relative !important; } .d-none-desktop { display: block !important; } /* Sidebar overlay mobil görünümde - Sidebar'ın ARKASINDA olmalı */ .sidebar-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: var(--golge-dorduncu) !important; z-index: 9998 !important; /* Sidebar'ın (10000) altında olmalı - overlay sidebar'ın üstünde görünmemeli */ opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; } .sidebar-overlay.active { opacity: 1 !important; visibility: visible !important; } /* Mobil görünümde page-header düzeni: Üst satır (hamburger + logo + header-right), Alt satır (header-text) */ /* Tüm sayfalar için genel düzenleme - Hastalar sayfası yapısı */ .page-header { padding: 0.75rem 1rem !important; flex-direction: column !important; gap: 0.75rem !important; align-items: stretch !important; height: auto !important; min-height: auto !important; } /* Mobile header top ve bottom yapısı - Tüm sayfalar için */ .mobile-header-top, .mobile-header-bottom { display: block !important; width: 100%; } .mobile-header-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; } .mobile-header-top .header-left { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0.75rem !important; flex: 0 0 auto !important; position: static !important; padding-bottom: 0 !important; order: 0 !important; width: auto !important; } /* Logo pseudo-element'ini kaldır - Artık img elementi kullanılıyor */ .header-left::after { content: none !important; display: none !important; } .mobile-logo { display: flex !important; align-items: center !important; } .mobile-logo img { height: 24px; width: auto; } /* Header-right üst satırda, sağda - Sadece 481px-1023px için */ @media (min-width: 481px) { .mobile-header-top .header-right { display: flex !important; align-items: center !important; gap: 0.75rem !important; flex-wrap: wrap !important; order: 1 !important; margin-left: 0 !important; justify-self: flex-end !important; align-self: center !important; } .mobile-header-bottom .header-text { gap: 0.35rem !important; } /* Genel header-text font boyutları - 481px-1023px için */ .mobile-header-bottom .header-text h1 { font-size: 1.5rem !important; } .mobile-header-bottom .header-text p { font-size: 0.85rem !important; } } .mobile-header-top .header-right { display: flex !important; align-items: center !important; gap: 0.5rem !important; /* 480px için varsayılan */ flex-wrap: wrap !important; order: 1 !important; margin-left: 0 !important; justify-self: flex-end !important; align-self: center !important; } .mobile-header-bottom { width: 100%; } .mobile-header-bottom .header-text { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; /* 480px için varsayılan */ order: initial !important; flex: initial !important; position: static !important; bottom: auto !important; left: auto !important; width: 100% !important; } /* Genel header-text font boyutları - Sadece 481px-1023px için (480px'i ezmemesi için) */ @media (min-width: 481px) { .mobile-header-bottom .header-text h1 { font-size: 1.5rem !important; } .mobile-header-bottom .header-text p { font-size: 0.85rem !important; } } /* Eski yapı için override - header-left içindeki header-text */ .header-left .header-text { position: static !important; bottom: auto !important; left: auto !important; width: 100% !important; order: initial !important; } /* Teknik destek butonu - Tüm sayfalar için (sadece ikon, yazı yok) */ .mobile-header-top .header-right .technical-support-btn { order: 2 !important; padding: 0.5rem 0.75rem !important; font-size: 0.75rem !important; height: 44px !important; width: 44px !important; } .mobile-header-top .header-right .technical-support-btn span { display: none !important; } .mobile-header-top .header-right .notification-container { order: 3 !important; } .mobile-header-top .header-right .user-menu { order: 4 !important; } /* Hastalar sayfası - özel kurallar (genel kurallar yeterli, sadece özel durumlar) */ /* .hastalar-page .mobile-logo img { height: 32px; width: auto; } */ /* Sidebar header - Column düzeni (Tablet için) */ .anasayfa-page .sidebar-header { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 0.5rem !important; } /* Progress text - Tüm mobil/tablet ekranlarda left (genel) */ .progress-text { text-align: left !important; } /* Stat breakdown - Mobil/Tablet'te flex-start */ .stat-breakdown { justify-content: flex-start !important; } /* Stat change - Mobil/Tablet'te flex-start */ .stat-change { justify-content: flex-start !important; } /* Ana sayfa için mobil optimizasyonları */ .anasayfa-page .app-container { grid-template-columns: 1fr !important; } /* Main content */ .anasayfa-page .main-content { width: 100% !important; } /* Genel stats-grid - Sadece 481px-1023px için (480px'i ezmemesi için) */ @media (min-width: 481px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } .stat-card { padding: 1rem !important; flex-direction: column !important; align-items: flex-end !important; } .stat-card h3 { font-size: 1.5rem !important; text-align: left !important; } .stat-card p { font-size: 0.85rem !important; text-align: left !important; } .stat-icon { width: 64px !important; height: 64px !important; font-size: 20px !important; } } /* Anasayfa - özel kurallar (genel kurallar yeterli, sadece özel durumlar) */ /* Date display */ .anasayfa-page .date-display { font-size: 0.8rem !important; } .anasayfa-page .date-display .date-part { display: block !important; } .anasayfa-page .date-display .time-part { display: block !important; margin-top: 0 !important; } .anasayfa-page #currentDate { display: flex !important; align-items: center !important; justify-content: center !important; } /* Dashboard grid */ .anasayfa-page .dashboard-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .anasayfa-page .dashboard-card { padding: 1.25rem !important; } .anasayfa-page .card-header { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; margin-bottom: 1rem !important; } .anasayfa-page .card-body { padding: 0 !important; } .anasayfa-page .card-header h3 { font-size: 1.1rem !important; } /* Quick actions grid - Mobil için 2 kolon */ .anasayfa-page .quick-actions-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; } .anasayfa-page .quick-action-btn { padding: 0.85rem !important; font-size: 0.8rem !important; flex-direction: column !important; gap: 0.5rem !important; } .anasayfa-page .quick-action-btn i { font-size: 1.5rem !important; } .anasayfa-page .quick-action-btn span { font-size: 0.75rem !important; } /* Treatment list compact */ .anasayfa-page .treatment-list-compact { gap: 0.75rem !important; } .anasayfa-page .treatment-item-compact { padding: 0.85rem !important; } .anasayfa-page .treatment-item-compact h4 { font-size: 0.95rem !important; } .anasayfa-page .treatment-item-compact p { font-size: 0.8rem !important; } /* Room status */ .anasayfa-page .room-status-summary { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } /* Row layouts */ .anasayfa-page .row-1-1-1 { grid-template-columns: 1fr !important; } .anasayfa-page .row-2-1 { grid-template-columns: 1fr !important; } .anasayfa-page .dashboard-horizontal { grid-template-columns: 1fr !important; } /* Progress text - Mobil'de left */ .anasayfa-page .progress-text { text-align: left !important; } /* Appointments table - Mobil'de kart şeklinde 2 sütun */ .anasayfa-page .appointments-table { display: grid !important; grid-template-columns: 1fr !important; gap: 1rem !important; padding: 1rem !important; } .anasayfa-page .appointments-table .table-header { display: none !important; } .anasayfa-page .appointments-table .table-body { display: contents !important; } .anasayfa-page .appointments-table .appointment-row { display: flex !important; flex-direction: column !important; background: var(--kart-arka-plan) !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: var(--border-radius) !important; padding: 1rem !important; gap: 0.75rem !important; cursor: pointer !important; transition: all 0.2s ease !important; } .anasayfa-page .appointments-table .appointment-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; transform: translateY(-2px) !important; } .anasayfa-page .appointments-table .appointment-row .cell { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; padding: 0 !important; width: 100% !important; min-width: 0 !important; } .anasayfa-page .appointments-table .appointment-row .time-cell { order: 1 !important; font-weight: 600 !important; font-size: 0.9rem !important; color: var(--birincil-renk) !important; } .anasayfa-page .appointments-table .appointment-row .patient-cell { order: 2 !important; } .anasayfa-page .appointments-table .appointment-row .patient-info { flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; } .anasayfa-page .appointments-table .appointment-row .patient-info img { width: 48px !important; height: 48px !important; } .anasayfa-page .appointments-table .appointment-row .patient-info h4 { font-size: 1rem !important; margin: 0 !important; text-align: center !important; } .anasayfa-page .appointments-table .appointment-row .patient-info p { font-size: 0.85rem !important; margin: 0 !important; text-align: center !important; } .anasayfa-page .appointments-table .appointment-row .owner-cell { order: 3 !important; font-size: 0.85rem !important; } .anasayfa-page .appointments-table .appointment-row .procedure-cell { order: 4 !important; } .anasayfa-page .appointments-table .appointment-row .doctor-cell { order: 5 !important; font-size: 0.85rem !important; } .anasayfa-page .appointments-table .appointment-row .time-badge, .anasayfa-page .appointments-table .appointment-row .procedure-badge { display: inline-block !important; width: fit-content !important; } /* Overlay (sidebar açıkken) - Kart arka plan rengi */ /* Hızlı işlemler modalları - Mobil'de medium sınıfı */ #quickPatientModal .modal-content, #quickAppointmentModal .modal-content, #quickTreatmentModal .modal-content { width: 90% !important; max-width: 600px !important; } /* Patient type radio group - Mobil'de column */ .patient-type-radio-group { flex-direction: column !important; gap: 0 !important; } /* ========================================== HASTALAR SAYFASI - MOBİL ========================================== */ /* Hastalar sayfası için mobil optimizasyonları */ .hastalar-page .app-layout { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .hastalar-page .app-container { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } .hastalar-page .app-container > * { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Main content genişlik kontrolü */ .hastalar-page .main-content { width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; overflow-x: hidden !important; } .hastalar-page .main-content { width: 100% !important; } /* Page header */ /* Hasta sayfası için page-header düzeni - Genel düzenlemeyi override etme */ .hastalar-page .header-right .search-box { display: none !important; /* Header'daki search box mobilde gizli */ } .hastalar-page .action-right .search-box { width: 100% !important; max-width: 100% !important; } .hastalar-page .action-right .form-select { width: 100% !important; } .hastalar-page .action-right .view-toggle { width: 100% !important; justify-content: center !important; } /* Patients grid - Mobil'de tek kolon */ .hastalar-page .patients-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } /* Patient card - Mobil optimizasyonları */ .hastalar-page .patient-card { padding: 1rem !important; } /* Patient table - Mobil'de scroll */ .hastalar-page .patients-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .hastalar-page .patients-table table { min-width: 800px !important; } /* Bulk actions bar - Mobil'de column */ .hastalar-page .bulk-actions-bar { padding: 1rem !important; } .hastalar-page .bulk-actions-content { flex-direction: column !important; gap: 1rem !important; } .hastalar-page .bulk-actions-right { flex-direction: column !important; width: 100% !important; gap: 0.5rem !important; } .hastalar-page .bulk-actions-right button { width: 100% !important; } /* Overlay (sidebar açıkken) - Kart arka plan rengi */ } /* ========================================== TABLET =========================================== */ /* Min: 769px | Max: 1024px - Tablet görünümü optimizasyonları (1024px dahil) */ /* ============================================================================================== */ @media (min-width: 769px) and (max-width: 1024px) { /* Progress text - Tablet'te left (genel) */ .progress-text { text-align: left !important; } /* Stat breakdown - Tablet'te flex-start */ .stat-breakdown { justify-content: flex-start !important; } .search-box { width: auto !important; } /* Stat change - Tablet'te flex-start */ .stat-change { justify-content: flex-start !important; } /* Dashboard row - Tablet'te tek kolon */ .anasayfa-page .dashboard-row { grid-template-columns: 1fr !important; } .anasayfa-page .date-display { display: none !important; } /* Card body - Tablet'te padding */ .anasayfa-page .card-body { padding: 16px !important; } /* Appointments table - Tablet'te yatay scroll engelle (fontları koru) */ .anasayfa-page .appointments-table { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .anasayfa-page .appointments-table .card-body { padding: 16px !important; overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .anasayfa-page .appointments-table .table-header, .anasayfa-page .appointments-table .appointment-row { grid-template-columns: minmax(60px, 70px) minmax(0, 1fr) minmax(0, 100px) minmax(0, 110px) minmax(0, 110px) !important; gap: 0.5rem !important; padding: 12px 16px !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .anasayfa-page .appointments-table .table-body { overflow-x: hidden !important; overflow-y: auto !important; width: 100% !important; max-width: 100% !important; } /* Grid item'ların taşmasını engelle */ .anasayfa-page .appointments-table .table-header > *, .anasayfa-page .appointments-table .appointment-row > * { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } .anasayfa-page .appointments-table .cell { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; } .anasayfa-page .appointments-table .patient-info { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } .anasayfa-page .appointments-table .patient-info h4, .anasayfa-page .appointments-table .patient-info p { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .anasayfa-page .appointments-table .owner-cell, .anasayfa-page .appointments-table .doctor-cell { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Dashboard card overflow kontrolü */ .anasayfa-page .dashboard-card:has(.appointments-table) { overflow-x: hidden !important; } /* Quick actions grid - 2 kolon (480px için) */ .anasayfa-page .quick-actions-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; } /* Dashboard card padding ve overflow kontrolü */ .anasayfa-page .dashboard-card { padding: 0.5rem !important; overflow-x: hidden !important; max-width: 100% !important; } /* Card header - Column düzeni */ .anasayfa-page .card-header { padding: 12px 24px !important; border-bottom: 1px solid var(--kenarlik-ana) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; /* flex-direction: column !important; */ gap: 10px !important; } /* Row-1-1-1 - Tablet'te tek kolon */ .anasayfa-page .row-1-1-1 { grid-template-columns: 1fr !important; } /* Progress text - Tablet'te left */ .anasayfa-page .progress-text { text-align: left !important; } } /* ===================================== EXTRA KÜÇÜK MOBİL ===================================== */ /* Max: 480px - Çok küçük mobil cihazlar için ek optimizasyonlar */ /* ============================================================================================== */ @media (max-width: 480px) { /* Genel genişlik sorunları - 480px için ek düzeltmeler */ /* Tablolar - Daha kompakt */ .table-container, .table-wrapper { padding: 0 !important; margin: 0 !important; } table { font-size: 0.75rem !important; } table th, table td { padding: 0.5rem 0.25rem !important; font-size: 0.75rem !important; } /* Form elemanları - Daha kompakt */ input, textarea, select { font-size: 0.9rem !important; padding: 0.75rem !important; } /* Modal'lar - Daha küçük (Ortak stil - Tüm sayfalar için) */ .modal-content { width: 90% !important; max-width: 95% !important; padding: 20px !important; max-height: 90%; margin: 20px; width: auto; max-height: 90vh; } /* Tab content - 480px için padding */ .tab-content { padding: 14px !important; } /* Genel header-text font boyutları - 480px için */ .mobile-header-bottom .header-text h1 { font-size: 1.35rem !important; } .mobile-header-bottom .header-text p { font-size: 0.8rem !important; } /* Genel stats-grid - Tüm sayfalar için 2x2 grid */ .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; padding: 0 !important; } .stat-card .stat-icon { width: 2.5rem !important; height: 2.5rem !important; font-size: 1.1rem !important; } .stat-card h3 { font-size: 1.35rem !important; text-align: left !important; } .stat-card p { font-size: 0.8rem !important; text-align: left !important; } .stat-card .stat-change { font-size: 0.7rem !important; margin-top: 0.25rem !important; text-align: left; /* white-space: nowrap; */ } /* Ana sayfa için ekstra küçük mobil optimizasyonları */ .anasayfa-page .page-header { padding: 0.75rem 1rem !important; } /* Date display daha kompakt */ .anasayfa-page .date-display { font-size: 0.75rem !important; padding: 0 !important; } .mobile-menu-btn { padding: 0 !important; margin: 0; } .anasayfa-page .sidebar-header { padding: 40px 0 !important; } .anasayfa-page .sidebar-nav { padding: 14px; } .anasayfa-page .sidebar-nav li { margin-bottom: 3px !important; } /* Dashboard cards */ .anasayfa-page .dashboard-card { padding: 1rem !important; } .anasayfa-page .card-header h3 { font-size: 1rem !important; } /* Quick actions - 2 kolon (480px için) */ .anasayfa-page .quick-actions-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; } .anasayfa-page .appointments-table .appointment-row { display: flex !important; flex-direction: column !important; background: var(--kart-arka-plan) !important; border: none !important; border-radius: 10px!important; padding: 1rem !important; gap: 0.75rem !important; cursor: pointer !important; transition: all 0.2s ease !important; } .anasayfa-page .quick-action-btn { padding: 0.75rem !important; font-size: 0.75rem !important; } .anasayfa-page .quick-action-btn i { font-size: 1.35rem !important; } /* Treatment items */ .anasayfa-page .treatment-item-compact { padding: 0.75rem !important; } .anasayfa-page .treatment-item-compact h4 { font-size: 0.9rem !important; } .anasayfa-page .treatment-item-compact p { font-size: 0.75rem !important; } /* Room status - Tek kolon */ .anasayfa-page .room-status-summary { grid-template-columns: 1fr !important; } /* ========================================== HASTALAR SAYFASI - TABLET ========================================== */ /* Hastalar sayfası için tablet optimizasyonları */ /* NOT: Mobil görünümde (max-width: 1023px) app-container zaten 1fr olarak ayarlanmış */ /* Tablet görünümünde (769px - 1024px) sidebar gösterilir */ .hastalar-page .app-container { grid-template-columns: 1fr !important; } .hastalar-page .sidebar { width: 260px !important; } .hastalar-page .action-right .search-box { flex: 1 1 auto !important; } .hastalar-page .action-right .form-select { flex: 0 0 auto !important; min-width: 180px !important; } /* Patients grid - Tablet'te 2 kolon */ .hastalar-page .patients-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } /* Patient table - Tablet'te scroll */ .hastalar-page .patients-table { overflow-x: auto !important; } .hastalar-page .patients-table table { min-width: 900px !important; } /* Progress text - Extra küçük mobil'de left */ .anasayfa-page .progress-text { text-align: left !important; } .anasayfa-page #currentDate { display: none !important; } /* Stat breakdown - Extra küçük mobil'de flex-start */ .stat-breakdown { justify-content: flex-start !important; } /* Stat change - Extra küçük mobil'de flex-start */ .stat-change { justify-content: flex-start !important; } /* ========================================== HASTALAR SAYFASI - MOBİL (480px) ========================================== */ /* ========================================== HOSPİTALİZASYON SAYFASI - MOBİL (480px) ========================================== */ /* Hospitalizasyon sayfası için 480px optimizasyonları */ /* .yatan-hastalar-page .content-wrapper { padding: 1rem !important; } */ .yatan-hastalar-page .inpatient-card { padding: 0.85rem !important; } .yatan-hastalar-page .patient-details h4 { font-size: 1.1rem !important; } .yatan-hastalar-page .patient-details p { font-size: 0.85rem !important; } .yatan-hastalar-page .vital-grid { gap: 0.5rem !important; } .yatan-hastalar-page .vital-item { padding: 0.5rem !important; font-size: 0.8rem !important; } .yatan-hastalar-page .vital-value { font-size: 1rem !important; } .yatan-hastalar-page .vital-label { font-size: 0.7rem !important; } .yatan-hastalar-page .table-actions .buttons { grid-template-columns: 1fr !important; gap: 0.5rem !important; } .yatan-hastalar-page .table-actions .action-btn { padding: 0.65rem !important; font-size: 0.8rem !important; } .yatan-hastalar-page .patient-modal-title, .drug-modal-title { width: 100%; } .hastalar-page .header-right .search-box { display: none !important; /* Header'daki search box mobilde gizli */ } .hastalar-page .action-left button { width: 100% !important; justify-content: center !important; padding: 0.75rem !important; font-size: 0.85rem !important; } .hastalar-page .action-right { width: 100% !important; flex-direction: column !important; gap: 0.5rem !important; } .hastalar-page .action-right .search-box { width: 100% !important; } .hastalar-page .action-right .form-select { width: 100% !important; min-width: unset !important; } .hastalar-page .action-right .btn-outline { width: 100% !important; justify-content: center !important; } .hastalar-page .action-right .view-toggle { width: 100% !important; justify-content: center !important; display: none !important; } /* Patients grid - Mobil'de 1 kolon */ .hastalar-page .patients-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; } /* Patient card - Mobil'de daha kompakt */ .hastalar-page .patient-card { padding: 0.85rem !important; } .hastalar-page .patient-header { margin-bottom: 0.75rem !important; flex-direction: row !important; } .hastalar-page .patient-avatar { width: 3rem !important; height: 3rem !important; } .hastalar-page .patient-info h3 { font-size: 1.1rem !important; } .hastalar-page .patient-info .breed { font-size: 0.8rem !important; } .hastalar-page .patient-info .owner-info, .hastalar-page .patient-info .contact-info { font-size: 0.75rem !important; margin-top: 0.35rem !important; } .hastalar-page .patient-stats { margin-top: 0.75rem !important; padding-top: 0.75rem !important; gap: 0.5rem !important; } .hastalar-page .patient-stats .stat-item { font-size: 0.7rem !important; } .hastalar-page .table-actions { margin-top: 0.75rem !important; /* flex-direction: column !important; */ flex-direction: row !important; gap: 0.5rem !important; } .hastalar-page .table-actions .btn-small { width: 100% !important; justify-content: center !important; padding: 0.65rem !important; font-size: 0.8rem !important; } /* Patient table - Mobil'de scroll */ .hastalar-page .patients-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .hastalar-page .patients-table { min-width: 800px !important; } .hastalar-page .patients-table th, .hastalar-page .patients-table td { padding: 0.5rem !important; font-size: 0.75rem !important; } /* Bulk actions bar - Mobil'de dikey stack */ .hastalar-page .bulk-actions-bar { padding: 0.75rem !important; } .hastalar-page .bulk-actions-content { flex-direction: column !important; gap: 0.75rem !important; } .hastalar-page .bulk-actions-left { width: 100% !important; } .hastalar-page .bulk-actions-right { width: 100% !important; flex-wrap: wrap !important; gap: 0.5rem !important; } .hastalar-page .bulk-actions-right .btn-small { flex: 1 1 calc(50% - 0.25rem) !important; min-width: calc(50% - 0.25rem) !important; font-size: 0.75rem !important; padding: 0.5rem !important; } /* No result message */ .hastalar-page .no-result-message { padding: 2rem 1rem !important; } .hastalar-page .no-result-message i { font-size: 2.5rem !important; } .hastalar-page .no-result-message h4 { font-size: 1.1rem !important; } .hastalar-page .no-result-message p { font-size: 0.85rem !important; } .hastalar-page #dynamicPatientDetailModal .contact-info { justify-content: flex-start; } /* .hastalar-page #dynamicPatientDetailModal .patient-detail-section.admission-type-section { flex-direction: column; gap: 20px; } */ .hastalar-page #dynamicPatientDetailModal .patient-modal-title { align-items: center; width: 100%; } .hastalar-page #dynamicPatientDetailModal .patient-modal-info{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; gap: 0; } .hastalar-page #dynamicPatientDetailModal .patient-modal-info p { margin: 0 !important; } .hastalar-page #dynamicPatientDetailModal .address-details { gap: 5px; } #dynamicPatientDetailModal .modal-body p { display: flex; flex-direction: column; } .hastalar-page #dynamicPatientDetailModal .patient-modal-info h3 { margin: 0; font-size: 20px; align-items: center; justify-content: center; width: 100% !important; } .hastalar-page #dynamicPatientDetailModal .patient-detail-section.admission-type-section { padding: 12px; } .hastalar-page #dynamicPatientDetailModal .admission-type-badge { padding: 12px 20px; } /* ========================================== HOSPİTALİZASYON SAYFASI - MOBİL ========================================== */ /* Hospitalizasyon sayfası için mobil optimizasyonları */ .yatan-hastalar-page .app-layout { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .yatan-hastalar-page .app-container { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } .yatan-hastalar-page .main-content { width: 100% !important; } /* .yatan-hastalar-page .content-wrapper { padding: 1.25rem !important; } */ .yatan-hastalar-page .action-right .filter-group { flex-direction: column !important; width: 100% !important; gap: 0.75rem !important; } .yatan-hastalar-page .action-right .filter-select { width: 100% !important; } .yatan-hastalar-page .action-right .btn-outline { width: 100% !important; justify-content: center !important; } /* Inpatients layout - Mobil'de tek kolon */ .yatan-hastalar-page .inpatients-layout { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* Tab buttons - Mobil'de column */ .yatan-hastalar-page .tab-buttons { flex-direction: column !important; gap: 0.5rem !important; padding: 10px; } .yatan-hastalar-page .tab-btn { width: 100% !important; justify-content: space-between !important; padding: 16px 0.85rem !important; font-size: 15px !important; } /* Tab header - Mobil'de column */ .yatan-hastalar-page .tab-header { flex-direction: column !important; gap: 1rem !important; align-items: stretch !important; } .yatan-hastalar-page .tab-header h3 { font-size: 1.25rem !important; } .yatan-hastalar-page .tab-header .standard-search-box { width: 100% !important; max-width: 100% !important; } /* Inpatient card - Mobil optimizasyonları */ .yatan-hastalar-page .inpatient-card { padding: 1rem !important; margin-bottom: 1rem !important; } .yatan-hastalar-page .patient-header { display: flex; flex-direction: column !important; gap: 1rem !important; align-items: flex-start !important; } .yatan-hastalar-page .patient-basic-info { width: 100% !important; justify-content: space-between; flex-direction: row-reverse; } .yatan-hastalar-page .vital-summary { padding: 0; } .yatan-hastalar-page .admission-info { width: 100% !important; justify-content: flex-start !important; } .yatan-hastalar-page .patient-details h4 { font-size: 1.25rem !important; } .yatan-hastalar-page .patient-details p { font-size: 0.9rem !important; } .yatan-hastalar-page .owner-name { font-size: 0.85rem !important; } /* Vital grid - Mobil'de 2 kolon */ .yatan-hastalar-page .vital-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } .yatan-hastalar-page .vital-item { padding: 0.75rem !important; font-size: 0.85rem !important; } .yatan-hastalar-page .vital-value { font-size: 1.1rem !important; } .yatan-hastalar-page .vital-label { font-size: 0.75rem !important; } .yatan-hastalar-page .vital-status { font-size: 0.7rem !important; padding: 0.2rem 0.5rem !important; } .yatan-hastalar-page .last-update { font-size: 0.75rem !important; margin-top: 0.75rem !important; } /* Treatment summary - Mobil optimizasyonları */ .yatan-hastalar-page .treatment-summary { margin-top: 1rem !important; padding-top: 1rem !important; } .yatan-hastalar-page .treatment-summary h5 { font-size: 0.95rem !important; margin-bottom: 0.75rem !important; } .yatan-hastalar-page .medication-list { gap: 0.5rem !important; } .yatan-hastalar-page .medication-item { padding: 0.75rem !important; font-size: 0.85rem !important; flex-wrap: wrap !important; } /* Table actions - Mobil'de column */ .yatan-hastalar-page .table-actions { flex-direction: column !important; gap: 0.75rem !important; margin-top: 1rem !important; padding-top: 1rem !important; border-top: 1px solid var(--kenarlik-ana) !important; } .yatan-hastalar-page .table-actions .buttons { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; width: 100% !important; } .yatan-hastalar-page .table-actions .action-btn { width: 100% !important; justify-content: center !important; padding: 0.75rem !important; font-size: 0.85rem !important; } .yatan-hastalar-page .table-actions .action-btn span { display: block !important; } .yatan-hastalar-page .modifier-info { width: 100% !important; justify-content: center !important; } .tedaviler-page .patient-info-mini img { margin: 0 !important; } } /* ================================================================================================ */ /* ========================== RANDEVULAR SAYFASI RESPONSIVE ====================================== */ /* ================================================================================================ */ @media (max-width: 1023px) { .randevular-page .app-layout { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .randevular-page .app-container { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } .randevular-page .main-content { width: 100% !important; } /* Dışa Aktar butonunu gizle */ .randevular-page .action-right button[onclick="exportAppointments()"] { display: none !important; } .randevular-page .view-toggle { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; width: 100% !important; } .randevular-page .view-btn { width: 100% !important; justify-content: center !important; padding: 0.75rem !important; font-size: 0.85rem !important; } .randevular-page .appointment-section { margin-top: 1.5rem !important; } .randevular-page .calendar-header { flex-wrap: wrap !important; gap: 0.75rem !important; padding: 1rem !important; } .randevular-page .calendar-title { font-size: 1.25rem !important; flex: 1 1 100% !important; text-align: center !important; order: 1 !important; } .randevular-page .calendar-nav { order: 2 !important; } .randevular-page .today-btn { order: 3 !important; flex: 1 1 100% !important; width: 100% !important; justify-content: center !important; margin-top: 0.5rem !important; } .randevular-page .month-calendar-grid { gap: 0.25rem !important; } .randevular-page .calendar-day { padding: 0.5rem 0.25rem !important; font-size: 0.75rem !important; min-height: 60px !important; } .randevular-page .calendar-day-number { font-size: 0.85rem !important; } .randevular-page .appointment-badge { font-size: 0.65rem !important; padding: 0.15rem 0.35rem !important; margin: 0.15rem 0 !important; } .randevular-page .week-view-container { overflow-x: auto !important; } .randevular-page .week-grid { min-width: 600px !important; } .randevular-page .appointment-list { gap: 0.75rem !important; } .randevular-page .appointment-item { padding: 1rem !important; } .randevular-page .appointment-item-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; } .randevular-page .appointment-item-actions { width: 100% !important; margin-top: 0.75rem !important; flex-direction: row !important; gap: 0.5rem !important; } .randevular-page .appointment-item-actions .btn-small { flex: 1 !important; } /* Liste görünümü - Kart şeklinde */ .randevular-page .list-header { display: none !important; } .randevular-page .list-body { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 1rem !important; } .randevular-page .list-row { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--kart-arka-plan) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; gap: 0.75rem !important; align-items: stretch !important; } .randevular-page .list-row::before { display: none !important; } .randevular-page .list-col { display: flex !important; flex-direction: row !important; justify-content: space-between !important; padding: 0 !important; flex: 1 1 auto !important; gap: 0.25rem !important; } /* Kart görünümü için label'lar - Her kolon için */ .randevular-page .list-row .list-col:first-child::before { content: "Tarih: " !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .randevular-page .list-row .list-col:nth-child(2)::before { content: "Saat: " !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .randevular-page .list-row .list-col:nth-child(3)::before { content: "Randevu Kaynağı: " !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .randevular-page .list-row .list-col:nth-child(4)::before { content: "Hasta: " !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .randevular-page .list-row .list-col:nth-child(5)::before { content: "Sahip: " !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .randevular-page .list-row .list-col:nth-child(6)::before { content: "İşlem Türü: " !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .randevular-page .list-row .list-col:nth-child(7)::before { content: "Doktor: " !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .randevular-page .list-row .list-col:nth-child(8)::before { content: "Durum: " !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .randevular-page .list-row .list-col:last-child::before { content: "İşlemler: " !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .randevular-page .list-col:last-child { margin-top: 0.5rem !important; padding-top: 0.75rem !important; border-top: 1px solid var(--kenarlik-ana) !important; } /* Aylık görünüm - Day header'ları gizle */ .randevular-page .month-calendar-grid .day-header { display: none !important; } /* Haftalık görünüm - Time column'u gizle */ .randevular-page .week-calendar-grid .time-column { display: none !important; } .randevular-page .day-calendar-grid .time-column { display: none !important; } /* Randevu Detay Modal - Mobil görünüm */ #appointmentDetailModal .modal-content { width: 95% !important; max-width: 95% !important; max-height: 90vh !important; margin: 1rem auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #appointmentDetailModal .modal-header { flex-shrink: 0 !important; padding: 1rem !important; } #appointmentDetailModal .modal-header-content { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; text-align: center !important; } #appointmentDetailModal .modal-header h3 { font-size: 1.1rem !important; margin: 0 !important; } #appointmentDetailModal .modal-body { flex: 1 !important; overflow-y: auto !important; padding: 1rem !important; min-height: 0 !important; } #appointmentDetailModal .appointment-detail-content { width: 100% !important; } #appointmentDetailModal .modal-footer { flex-shrink: 0 !important; flex-direction: column !important; gap: 1rem !important; padding: 1rem !important; border-top: 1px solid var(--kenarlik-ana) !important; background: var(--arka-plan-ana) !important; position: relative !important; z-index: 1000 !important; } #appointmentDetailModal .modal-footer-left { width: 100% !important; justify-content: center !important; order: 2 !important; } #appointmentDetailModal .modal-footer-right { width: 100% !important; flex-direction: column !important; gap: 0.75rem !important; order: 1 !important; } #appointmentDetailModal .modal-footer-right .btn { width: 100% !important; padding: 0.75rem 1rem !important; font-size: 0.9rem !important; position: relative !important; z-index: 1001 !important; pointer-events: auto !important; } #appointmentDetailModal .modal-close { position: absolute !important; top: 1rem !important; right: 1rem !important; z-index: 1002 !important; width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; } } @media (max-width: 480px) { .randevular-page .view-toggle { grid-template-columns: 1fr 1fr 1fr !important; /* padding: 20px 0 !important; */ } .randevular-page .view-btn { height: 48px; } .randevular-page .calendar-header { padding: 0.75rem !important; justify-content: center; } .randevular-page .calendar-title { font-size: 1.1rem !important; } .randevular-page .calendar-day { min-height: 50px !important; padding: 0.35rem 0.15rem !important; } .randevular-page .appointment-badge { font-size: 0.6rem !important; padding: 0.1rem 0.25rem !important; } .randevular-page .appointment-item { padding: 0.85rem !important; } .randevular-page .appointment-item-header h4 { font-size: 0.95rem !important; } .randevular-page .appointment-item-header p { font-size: 0.75rem !important; } .randevular-page #appointmentDetailModal .modal-header-content { flex-direction: row !important; } .randevular-page #appointmentDetailModal .modal-footer-right { flex-direction: column-reverse !important; } .randevular-page .detail-row { padding: 7px 0px; } .page-wrapper-randevular .action-bar { gap: 0 !important; } .randevular-page .appointment-section { margin-top: 10px !important; } .week-calendar-grid { padding: 0 !important; margin: 0 12px 12px 12px; } .week-calendar-grid .day-appointments { border-radius: 10px; } /* Randevu Detay Modal - 480px için ek düzenlemeler */ #appointmentDetailModal .modal-content { width: 95% !important; max-width: 95% !important; max-height: 85vh !important; padding: 0.75rem !important; } #appointmentDetailModal .modal-header { padding: 0.75rem !important; } #appointmentDetailModal .modal-header h3 { font-size: 1rem !important; flex-direction: column; align-items: flex-start; gap: 0; } #appointmentDetailModal .modal-body { padding: 0.75rem !important; font-size: 0.9rem !important; } #appointmentDetailModal .modal-footer { padding: 0.75rem !important; gap: 0.75rem !important; } #appointmentDetailModal .modal-footer-right .btn { padding: 0.65rem 0.85rem !important; font-size: 0.85rem !important; } #appointmentDetailModal .modal-close { top: 0.75rem !important; right: 0.75rem !important; width: 28px !important; height: 28px !important; font-size: 1.2rem !important; } } /* ================================================================================================ */ /* ========================== MUAYENE SAYFASI RESPONSIVE ========================================== */ /* ================================================================================================ */ @media (max-width: 1023px) { .muayene-page .app-layout { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .muayene-page .app-container { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } .muayene-page .main-content { width: 100% !important; } .muayene-page .rooms-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .muayene-page .room-card { padding: 1rem !important; } .muayene-page .room-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; } .muayene-page .room-status { width: 100% !important; justify-content: flex-start !important; } .muayene-page .room-actions { width: 100% !important; flex-direction: column !important; gap: 0.5rem !important; } .muayene-page .room-actions .btn { width: 100% !important; justify-content: center !important; } } @media (max-width: 480px) { .muayene-page .rooms-grid { gap: 0.75rem !important; } .muayene-page .room-card { padding: 0.85rem !important; } .muayene-page .room-header h3 { font-size: 1.1rem !important; } .muayene-page .room-info { font-size: 0.85rem !important; width: 100% !important; margin-bottom: 10px !important; align-items: center; justify-content: center; } .muayene-page .room-list-item { flex-direction: column; } .muayene-page .room-list-item .room-actions { flex-direction: row !important; } .muayene-page .room-status { padding: 0 !important; } .muayene-page .queue-item .queue-actions { width: 100% !important; } .muayene-page .queue-item:hover { border-color: transparent; box-shadow: none !important; } .muayene-page .room-queue-item { padding: 0 !important; } .muayene-page .room-queue-item .patient-name { font-size: 14px !important; } .muayene-page .setting-item { gap: 10px; } .muayene-page .setting-item input[type="number"] { max-width: fit-content !important; } .muayene-page .room-header { align-items: center !important; } .muayene-page .room-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 10px; } .muayene-page .room-actions { flex-direction: row !important; } } /* #endregion */ /* ================================================================================================ */ /* ======================== GENEL SAYFALAR RESPONSIVE (Tüm Kalan Sayfalar) ====================== */ /* ================================================================================================ */ /* Tedaviler, Radyoloji, Stok, Faturalama, İlaç Rehberi, Sıcak Satış, Toplu Bildirimler, Raporlar, Ayarlar, Genel Tanımlar, Onam Sistemi, Hukuki Destek, Yardım, İletişim */ @media (max-width: 1023px) { .tedaviler-page .app-layout, .radyoloji-page .app-layout, .stok-page .app-layout, .faturalama-page .app-layout, .ilac-rehberi-page .app-layout, .sicak-satis-page .app-layout, .toplu-bildirimler-page .app-layout, .raporlar-page .app-layout, .ayarlar-page .app-layout, .genel-tanimlar-page .app-layout, .onam-sistemi-page .app-layout, .hukuki-destek-page .app-layout, .yardim-page .app-layout, .iletisim-page .app-layout { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .tedaviler-page .app-container, .radyoloji-page .app-container, .stok-page .app-container, .faturalama-page .app-container, .ilac-rehberi-page .app-container, .sıcak-satis-page .app-container, .sicak-satis-page .app-container, .toplu-bildirimler-page .app-container, .raporlar-page .app-container, .ayarlar-page .app-container, .genel-tanimlar-page .app-container, .onam-sistemi-page .app-container, .hukuki-destek-page .app-container, .yardim-page .app-container, .iletisim-page .app-container { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } .tedaviler-page .main-content, .radyoloji-page .main-content, .stok-page .main-content, .faturalama-page .main-content, .ilac-rehberi-page .main-content, .sıcak-satis-page .main-content, .sicak-satis-page .main-content, .toplu-bildirimler-page .main-content, .raporlar-page .main-content, .ayarlar-page .main-content, .genel-tanimlar-page .main-content, .onam-sistemi-page .main-content, .hukuki-destek-page .main-content, .hasta-sahipler-page .main-content, .yardim-page .main-content, .iletisim-page .main-content { width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; } .tedaviler-page .action-left .btn, .radyoloji-page .action-left .btn, .stok-page .action-left .btn, .faturalama-page .action-left .btn, .ilac-rehberi-page .action-left .btn, .sicak-satis-page .action-left .btn, .toplu-bildirimler-page .action-left .btn, .raporlar-page .action-left .btn, .ayarlar-page .action-left .btn, .genel-tanimlar-page .action-left .btn, .onam-sistemi-page .action-left .btn, .hukuki-destek-page .action-left .btn, .yardim-page .action-left .btn, .iletisim-page .action-left .btn { width: 100% !important; justify-content: center !important; } .tedaviler-page .action-right, .radyoloji-page .action-right, .stok-page .action-right, .faturalama-page .action-right, .ilac-rehberi-page .action-right, .sicak-satis-page .action-right, .toplu-bildirimler-page .action-right, .raporlar-page .action-right, .ayarlar-page .action-right, .genel-tanimlar-page .action-right, .onam-sistemi-page .action-right, .hukuki-destek-page .action-right, .yardim-page .action-right, .iletisim-page .action-right { width: 100% !important; } /* Tedaviler sayfası - Tab header mobil görünümde column */ .tedaviler-page .tab-header { flex-direction: column !important; } /* Tedaviler sayfası - Bugünkü Tedaviler sekmesi mobil görünümde düzenleme */ .tedaviler-page .today-schedule .schedule-timeline { gap: 1.5rem !important; } .tedaviler-page .today-schedule .schedule-hour { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .tedaviler-page .today-schedule .hour-label { display: none !important; } .tedaviler-page .today-schedule .hour-treatments { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex: 1 !important; } .tedaviler-page .today-schedule .schedule-item { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--kart-arka-plan) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; gap: 0.75rem !important; align-items: stretch !important; } .tedaviler-page .today-schedule .schedule-time { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; min-width: auto !important; padding: 0 !important; background: transparent !important; text-align: left !important; margin-bottom: 0.25rem !important; } .tedaviler-page .today-schedule .schedule-content { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; flex: 1 !important; } .tedaviler-page .today-schedule .schedule-patient { display: flex !important; align-items: center !important; gap: 0.5rem !important; font-weight: 600 !important; } .tedaviler-page .today-schedule .schedule-doctor { font-size: 0.85rem !important; color: var(--metin-ikincil) !important; } .tedaviler-page .today-schedule .schedule-status { align-self: flex-start !important; margin-top: 0 !important; } .tedaviler-page .today-schedule .schedule-actions { display: flex !important; gap: 0.5rem !important; flex-wrap: wrap !important; margin-top: 0.5rem !important; padding-top: 0.75rem !important; border-top: 1px solid var(--kenarlik-ana) !important; } /* Tedaviler sayfası - Tamamlanan Tedaviler tablosunu kart görünümüne çevir */ .tedaviler-page .completed-treatments .treatments-table { display: block !important; } .tedaviler-page .completed-treatments .treatments-table thead { display: none !important; } .tedaviler-page .completed-treatments .treatments-table tbody { display: block !important; } .tedaviler-page .completed-treatments .treatments-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--kart-arka-plan) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; margin-bottom: 1rem !important; gap: 0 !important; } .tedaviler-page .completed-treatments .treatments-table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0.5rem 0 !important; border: none !important; gap: 0.5rem !important; } .tedaviler-page .completed-treatments .treatments-table tbody td::before { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; flex-shrink: 0 !important; } .tedaviler-page .completed-treatments .treatments-table tbody td:nth-child(1)::before { content: "Hasta: " !important; } .tedaviler-page .completed-treatments .treatments-table tbody td:nth-child(2)::before { content: "Tedavi Türü: " !important; } .tedaviler-page .completed-treatments .treatments-table tbody td:nth-child(3)::before { content: "Başlangıç: " !important; } .tedaviler-page .completed-treatments .treatments-table tbody td:nth-child(4)::before { content: "Bitiş: " !important; } .tedaviler-page .completed-treatments .treatments-table tbody td:nth-child(5)::before { content: "Doktor: " !important; } .tedaviler-page .completed-treatments .treatments-table tbody td:nth-child(6)::before { content: "Sonuç: " !important; } .tedaviler-page .completed-treatments .treatments-table tbody td:last-child::before { content: "İşlemler: " !important; } .tedaviler-page .completed-treatments .treatments-table tbody td:last-child { margin-top: 0.5rem !important; padding-top: 0.75rem !important; border-top: 1px solid var(--kenarlik-ana) !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; } /* Diğer sayfalardaki tabloları kart görünümüne çevir (anasayfa, tedaviler, hastalar, randevular hariç) */ /* Radyoloji sayfası */ .radyoloji-page .reports-table table { display: block !important; } .radyoloji-page .reports-table table thead { display: none !important; } .radyoloji-page .reports-table table tbody { display: block !important; } .radyoloji-page .reports-table table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--kart-arka-plan) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; margin-bottom: 1rem !important; gap: 0.75rem !important; } .radyoloji-page .reports-table table tbody td { display: flex !important; flex-direction: column !important; padding: 0 !important; border: none !important; gap: 0.25rem !important; } .radyoloji-page .reports-table table tbody td::before { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .radyoloji-page .reports-table table tbody td:nth-child(1)::before { content: "Hasta: " !important; } .radyoloji-page .reports-table table tbody td:nth-child(2)::before { content: "Görüntü Türü: " !important; } .radyoloji-page .reports-table table tbody td:nth-child(3)::before { content: "Tarih: " !important; } .radyoloji-page .reports-table table tbody td:nth-child(4)::before { content: "Doktor: " !important; } .radyoloji-page .reports-table table tbody td:nth-child(5)::before { content: "Aciliyet: " !important; } .radyoloji-page .reports-table table tbody td:last-child::before { content: "İşlemler: " !important; } .radyoloji-page .reports-table table tbody td:last-child { margin-top: 0.5rem !important; padding-top: 0.75rem !important; border-top: 1px solid var(--kenarlik-ana) !important; } /* Raporlar sayfası */ .raporlar-page .reports-table { display: block !important; } .raporlar-page .reports-table thead { display: none !important; } .raporlar-page .reports-table tbody { display: block !important; } .raporlar-page .reports-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--kart-arka-plan) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; margin-bottom: 1rem !important; gap: 0.75rem !important; } .raporlar-page .reports-table tbody td { display: flex !important; flex-direction: column !important; padding: 0 !important; border: none !important; gap: 0.25rem !important; } .raporlar-page .reports-table tbody td::before { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .raporlar-page .reports-table tbody td:nth-child(1)::before { content: "Rapor Adı: " !important; } .raporlar-page .reports-table tbody td:nth-child(2)::before { content: "Tür: " !important; } .raporlar-page .reports-table tbody td:nth-child(3)::before { content: "Tarih: " !important; } .raporlar-page .reports-table tbody td:nth-child(4)::before { content: "Oluşturan: " !important; } .raporlar-page .reports-table tbody td:last-child::before { content: "İşlemler: " !important; } .raporlar-page .reports-table tbody td:last-child { margin-top: 0.5rem !important; padding-top: 0.75rem !important; border-top: 1px solid var(--kenarlik-ana) !important; } /* Ayarlar sayfası - Kullanıcılar tablosu */ .ayarlar-page .users-table { display: block !important; } .ayarlar-page .users-table thead { display: none !important; } .ayarlar-page .users-table tbody { display: block !important; } .ayarlar-page .users-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--kart-arka-plan) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; margin-bottom: 1rem !important; gap: 0.75rem !important; } .ayarlar-page .users-table tbody td { display: flex !important; flex-direction: column !important; padding: 0 !important; border: none !important; gap: 0.25rem !important; } .ayarlar-page .users-table tbody td::before { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } /* .ayarlar-page .users-table tbody td:nth-child(1)::before { content: "Kullanıcı: " !important; } */ .ayarlar-page .users-table tbody td:nth-child(2)::before { content: "Rol: " !important; } .ayarlar-page .users-table tbody td:nth-child(3)::before { content: "E-posta: " !important; } .ayarlar-page .users-table tbody td:nth-child(4)::before { content: "Durum: " !important; } .ayarlar-page .users-table tbody td:last-child::before { content: "İşlemler: " !important; } .ayarlar-page .users-table tbody td:last-child { margin-top: 0.5rem !important; padding-top: 0.75rem !important; border-top: 1px solid var(--kenarlik-ana) !important; } /* Ayarlar sayfası - İzinler tablosu */ .ayarlar-page .permissions-table { display: block !important; } .ayarlar-page .permissions-table thead { display: none !important; } .ayarlar-page .permissions-table tbody { display: block !important; } .ayarlar-page .permissions-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--kart-arka-plan) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; margin-bottom: 1rem !important; gap: 0.75rem !important; } .ayarlar-page .permissions-table tbody td { display: flex !important; flex-direction: column !important; padding: 0 !important; border: none !important; gap: 0.25rem !important; } .ayarlar-page .permissions-table tbody td::before { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-bottom: 0.25rem !important; } .ayarlar-page .permissions-table tbody td:nth-child(1)::before { content: "Sayfa/Modül: " !important; } .ayarlar-page .permissions-table tbody td:nth-child(2)::before { content: "Super Admin: " !important; } .ayarlar-page .permissions-table tbody td:nth-child(3)::before { content: "Admin: " !important; } .ayarlar-page .permissions-table tbody td:nth-child(4)::before { content: "Veteriner: " !important; } .ayarlar-page .permissions-table tbody td:nth-child(5)::before { content: "Sekreter: " !important; } .ayarlar-page .permissions-table tbody td:nth-child(6)::before { content: "Muhasebe: " !important; } .tedaviler-page .action-right .btn, .radyoloji-page .action-right .btn, .stok-page .action-right .btn, .faturalama-page .action-right .btn, .ilac-rehberi-page .action-right .btn, .sicak-satis-page .action-right .btn, .toplu-bildirimler-page .action-right .btn, .raporlar-page .action-right .btn, .ayarlar-page .action-right .btn, .genel-tanimlar-page .action-right .btn, .onam-sistemi-page .action-right .btn, .hukuki-destek-page .action-right .btn, .yardim-page .action-right .btn, .iletisim-page .action-right .btn, .tedaviler-page .action-right .form-select, .radyoloji-page .action-right .form-select, .stok-page .action-right .form-select, .faturalama-page .action-right .form-select, .ilac-rehberi-page .action-right .form-select, .sicak-satis-page .action-right .form-select, .toplu-bildirimler-page .action-right .form-select, .raporlar-page .action-right .form-select, .ayarlar-page .action-right .form-select, .genel-tanimlar-page .action-right .form-select, .onam-sistemi-page .action-right .form-select, .hukuki-destek-page .action-right .form-select, .yardim-page .action-right .form-select, .iletisim-page .action-right .form-select { width: 100% !important; justify-content: center !important; } /* #region RADYOLOJI SAYFASI - Responsive Stiller (1023px) */ /* Tab buttons - Mobil'de yatay scroll */ .radyoloji-page .radiology-tabs .tab-buttons { display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; gap: 0.5rem !important; padding: 0.5rem !important; flex-wrap: nowrap !important; } .radyoloji-page .radiology-tabs .tab-btn { flex: 0 0 auto !important; min-width: fit-content !important; padding: 0.75rem 1rem !important; font-size: 0.85rem !important; white-space: nowrap !important; } .radyoloji-page .radiology-tabs .tab-btn i { font-size: 0.9rem !important; } /* Tab header - Mobil'de dikey */ .radyoloji-page .radiology-tabs .tab-header { flex-direction: column !important; gap: 1rem !important; align-items: stretch !important; } .radyoloji-page .radiology-tabs .tab-header h3 { font-size: 1.1rem !important; } .radyoloji-page .radiology-tabs .tab-actions { width: 100% !important; flex-direction: column !important; gap: 0.75rem !important; } .radyoloji-page .radiology-tabs .tab-actions .search-box { width: 100% !important; } .radyoloji-page .radiology-tabs .tab-actions .btn-primary, .radyoloji-page .radiology-tabs .tab-actions .btn-secondary { width: 100% !important; } /* Lab requests list - Mobil'de kart formatı */ .radyoloji-page .lab-requests-list { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .radyoloji-page .lab-request-item { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 1rem !important; border-radius: 12px !important; border: 1px solid var(--kenarlik-ana) !important; background: var(--arka-plan-ana) !important; } .radyoloji-page .lab-request-item .request-priority { align-self: flex-start !important; } .radyoloji-page .lab-request-item .request-info { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .radyoloji-page .lab-request-item .request-status { align-self: flex-start !important; } .radyoloji-page .lab-request-item .request-actions { display: flex !important; gap: 0.5rem !important; justify-content: flex-end !important; } /* Lab results list - Mobil'de kart formatı */ .radyoloji-page .lab-results-list { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .radyoloji-page .lab-result-item { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 1rem !important; border-radius: 12px !important; border: 1px solid var(--kenarlik-ana) !important; background: var(--arka-plan-ana) !important; } .radyoloji-page .lab-result-item .result-info { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .radyoloji-page .lab-result-item .result-status { align-self: flex-start !important; } .radyoloji-page .lab-result-item .result-actions { display: flex !important; gap: 0.5rem !important; justify-content: flex-end !important; } /* X-ray requests list - Mobil'de kart formatı */ .radyoloji-page .xray-requests-list { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .radyoloji-page .xray-request-item { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 1rem !important; border-radius: 12px !important; border: 1px solid var(--kenarlik-ana) !important; background: var(--arka-plan-ana) !important; } .radyoloji-page .xray-request-item .request-priority { align-self: flex-start !important; } .radyoloji-page .xray-request-item .request-info { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .radyoloji-page .xray-request-item .request-status { align-self: flex-start !important; } .radyoloji-page .xray-request-item .request-actions { display: flex !important; gap: 0.5rem !important; justify-content: flex-end !important; } /* Pending list - Mobil'de kart formatı */ .radyoloji-page .pending-list { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .radyoloji-page .pending-item { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 1rem !important; } .radyoloji-page .pending-item .pending-priority { align-self: flex-start !important; } .radyoloji-page .pending-item .pending-info { width: 100% !important; } .radyoloji-page .pending-item .pending-doctor { align-items: flex-start !important; align-self: flex-start !important; } .radyoloji-page .pending-item .pending-actions { align-self: flex-start !important; } /* Reports table - Mobil'de kart formatı (zaten yapılmış olabilir ama kontrol et) */ .radyoloji-page .reports-table { overflow-x: auto !important; } .radyoloji-page .reports-table table thead { display: none !important; } .radyoloji-page .reports-table table tbody tr { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; padding: 1rem !important; margin-bottom: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--arka-plan-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; } .radyoloji-page .reports-table table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0.5rem 0 !important; border: none !important; gap: 0.5rem !important; } .radyoloji-page .reports-table table tbody td::before { content: attr(data-label) !important; font-weight: 600 !important; color: var(--metin-ana) !important; flex-shrink: 0 !important; } .radyoloji-page .reports-table table tbody td:first-child::before { content: "Hasta:" !important; } .radyoloji-page .reports-table table tbody td:nth-child(2)::before { content: "Görüntü Türü:" !important; } .radyoloji-page .reports-table table tbody td:nth-child(3)::before { content: "Tarih:" !important; } .radyoloji-page .reports-table table tbody td:nth-child(4)::before { content: "Doktor:" !important; } .radyoloji-page .reports-table table tbody td:nth-child(5)::before { content: "Aciliyet:" !important; } .radyoloji-page .reports-table table tbody td:last-child { width: 100% !important; border-top: 1px solid var(--kenarlik-ana) !important; padding-top: 0.75rem !important; margin-top: 0.5rem !important; } .radyoloji-page .reports-table table tbody td:last-child::before { content: "İşlemler:" !important; } /* Images gallery - Mobil'de tek kolon */ .radyoloji-page .gallery-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .radyoloji-page .image-card { width: 100% !important; } .radyoloji-page .gallery-controls { width: 100% !important; flex-direction: column !important; gap: 0.75rem !important; } .radyoloji-page .gallery-btn { width: 100% !important; justify-content: center !important; } /* PACS viewer - Mobil'de dikey */ .radyoloji-page .pacs-viewer { display: flex !important; flex-direction: column !important; } .radyoloji-page .pacs-toolbar { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; padding: 0.75rem !important; } .radyoloji-page .pacs-toolbar .action-btn { flex: 1 1 auto !important; min-width: calc(50% - 0.25rem) !important; } .radyoloji-page .pacs-image-container { width: 100% !important; min-height: 300px !important; } /* Search box - Mobil'de tam genişlik */ .radyoloji-page .search-box { width: 100% !important; max-width: 100% !important; } /* Form group - Mobil'de margin */ /* .radyoloji-page .form-group { margin-bottom: 0 !important; } */ /* Modal body - Mobil'de padding */ .modal-body { padding: 12px 0 !important; } .form-row { gap: 0 !important; } /* AI Diagnosis body - Mobil'de padding */ .ai-diagnosis-body { padding: 12px 0 !important; } /* AI Radiology Modal - Mobil'de padding */ #aiRadiologyModal .ai-input-section { padding: 24px !important; } /* Image Viewer Modal - Mobil'de toolbar butonları */ #imageViewerModal .viewer-toolbar { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; padding: 0.75rem !important; } #imageViewerModal .viewer-toolbar .viewer-btn { flex: 1 1 auto !important; min-width: calc(50% - 0.25rem) !important; padding: 0.75rem !important; font-size: 0.85rem !important; } /* Image Viewer Modal - Mobil'de canvas büyük görünüm */ #imageViewerModal .viewer-canvas { width: 100% !important; min-height: 40vh !important; max-height: 40vh !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; padding: 1rem !important; } #imageViewerModal .viewer-canvas img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } /* Image Viewer Modal - Mobil'de modal body padding azalt */ #imageViewerModal .modal-body { padding: 0.5rem 0 !important; } /* Image Viewer Modal - Mobil'de viewer info daha kompakt */ #imageViewerModal .viewer-info { padding: 1rem !important; margin-top: 0.5rem !important; } /* #endregion */ /* #region STOK SAYFASI - Responsive Stiller (1023px) */ /* Tab buttons - Mobil'de yatay scroll */ .stok-page .stock-tabs .tab-buttons { display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; gap: 0.5rem !important; padding: 0.5rem !important; flex-wrap: nowrap !important; } .stok-page .stock-tabs .tab-btn { flex: 0 0 auto !important; min-width: fit-content !important; padding: 0.75rem 1rem !important; font-size: 0.85rem !important; white-space: nowrap !important; } .stok-page .stock-tabs .tab-btn i { font-size: 0.9rem !important; } /* Tab header - Mobil'de dikey */ .stok-page .stock-tabs .tab-header { flex-direction: column !important; gap: 1rem !important; align-items: stretch !important; } .stok-page .stock-tabs .tab-header h3 { font-size: 1.1rem !important; } .stok-page .stock-tabs .tab-header .action-right { width: 100% !important; flex-direction: column !important; gap: 0.75rem !important; } .stok-page .stock-tabs .tab-header .search-box { width: 100% !important; max-width: 100% !important; } /* Filter group - Mobil'de dikey */ .stok-page .filter-group { width: 100% !important; flex-direction: column !important; gap: 0.75rem !important; } .stok-page .filter-group .filter-select { width: 100% !important; } .stok-page .filter-group .btn-outline { width: 100% !important; } /* Bulk actions - Mobil'de dikey */ .stok-page .bulk-actions { flex-direction: column !important; gap: 1rem !important; padding: 1rem !important; } .stok-page .bulk-actions .bulk-info { width: 100% !important; flex-direction: column !important; gap: 0.75rem !important; align-items: flex-start !important; } .stok-page .bulk-actions .bulk-buttons { width: 100% !important; flex-direction: column !important; gap: 0.75rem !important; } .stok-page .bulk-actions .bulk-buttons .btn-outline { width: 100% !important; justify-content: center !important; } /* Stock table - Mobil'de tablo gizli, kartlar görünür */ .stok-page .stock-table-container .stock-table.d-none-mobile { display: none !important; } .stok-page .stock-table-container .table-mobile-cards.d-none-desktop { display: flex !important; flex-direction: column !important; gap: 1rem !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .stok-page .stock-table-container .table-mobile-cards.d-none-desktop > *:last-child { margin-bottom: 0 !important; } /* Table cards - Mobil'de düzenleme */ .stok-page .table-card { background: var(--arka-plan-ana) !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 16px !important; padding: 1rem !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; margin-bottom: 0 !important; } .stok-page .table-card:last-child { margin-bottom: 0 !important; } .stok-page .table-card-header { display: flex !important; flex-direction: column !important; gap: 0 !important; align-items: flex-start !important; width: 100% !important; padding-bottom: 0.75rem !important; border-bottom: 1px solid var(--kenarlik-ana) !important; } .stok-page .table-card-title { width: 100% !important; } .stok-page .table-card-header .product-info { display: flex !important; align-items: center !important; gap: 0.75rem !important; width: 100% !important; } .stok-page .table-card-header .product-avatar { width: 48px !important; height: 48px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.25rem !important; color: var(--arka-plan-ana) !important; flex-shrink: 0 !important; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%) !important; } .stok-page .table-card-header .product-avatar.medicine, .stok-page .table-card-header .product-avatar.medicines { background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-daha-koyu) 100%) !important; } .stok-page .table-card-header .product-avatar.vaccine, .stok-page .table-card-header .product-avatar.vaccines { background: linear-gradient(135deg, var(--ana-yesil) 0%, var(--durum-basarili-koyu) 100%) !important; } .stok-page .table-card-header .product-avatar.supplies { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%) !important; } .stok-page .table-card-header .product-avatar.cleaning { background: linear-gradient(135deg, var(--ana-sari) 0%, var(--durum-uyari-koyu) 100%) !important; } .stok-page .table-card-header .product-avatar.food, .stok-page .table-card-header .product-avatar.foods { background: linear-gradient(135deg, var(--ana-kirmizi) 0%, var(--ana-kirmizi-koyu) 100%) !important; } .stok-page .table-card-header .product-avatar.accessories, .stok-page .table-card-header .product-avatar.accessory { background: linear-gradient(135deg, var(--ana-mor) 0%, var(--ana-mor-koyu) 100%) !important; } .stok-page .table-card-header .product-details { flex: 1 !important; } .stok-page .table-card-header .product-details h4 { font-size: 1rem !important; font-weight: 600 !important; color: var(--baslik-ana) !important; margin: 0 0 0.25rem 0 !important; } .stok-page .table-card-header .product-details p { font-size: 0.8rem !important; color: var(--metin-ucuncu) !important; margin: 0 !important; } .stok-page .table-card-header .product-details .product-code { font-size: 0.75rem !important; color: var(--metin-ikincil) !important; font-weight: 500 !important; margin: 0.25rem 0 0 0 !important; width: fit-content !important; } .stok-page .table-card-actions { align-self: flex-end !important; } .stok-page .table-card-body { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .stok-page .table-card-row { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 0.75rem !important; padding: 0 !important; width: 100% !important; } .stok-page .table-card-label { display: flex !important; align-items: center !important; gap: 0.5rem !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; flex-shrink: 0 !important; } .stok-page .table-card-value { color: var(--metin-ana) !important; font-size: 0.9rem !important; font-weight: 600 !important; text-align: right !important; flex: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-direction: row !important; gap: 0.5rem !important; } .stok-page .table-card-value .stock-quantity { display: flex !important; align-items: baseline !important; gap: 0.25rem !important; justify-content: flex-end !important; } .stok-page .table-card-value .stock-quantity .quantity { font-size: 1rem !important; font-weight: 600 !important; color: var(--metin-ana) !important; } .stok-page .table-card-value .stock-quantity .unit { font-size: 0.75rem !important; color: var(--metin-ikincil) !important; } .stok-page .table-card-value .stock-alert { display: flex !important; align-items: center !important; gap: 0.35rem !important; font-size: 0.75rem !important; padding: 0.25rem 0.5rem !important; border-radius: 4px !important; width: fit-content !important; margin: 0 !important; } .stok-page .table-card-value .stock-alert.normal { background: var(--durum-basarili-acik) !important; color: var(--durum-basarili-metin) !important; } .stok-page .table-card-value .stock-alert.warning { background: var(--durum-uyari-acik) !important; color: var(--durum-uyari-metin) !important; } .stok-page .table-card-value .stock-alert.critical { background: var(--durum-hata-acik) !important; color: var(--durum-hata-metin) !important; } .stok-page .table-card-value .stock-alert i { font-size: 0.7rem !important; } .stok-page .table-card-value .category-badge { margin-left: auto !important; } .stok-page .table-card-value .action-buttons { display: flex !important; gap: 0.5rem !important; margin-left: auto !important; } /* Mobil görünümde durum ve işlemler alanlarının görünür olduğundan emin ol */ .stok-page .table-card-body .table-card-row { display: flex !important; } /* Durum badge'inin görünür olduğundan emin ol */ .stok-page .table-card-body .status-badge { display: inline-flex !important; } /* İşlem butonlarının görünür olduğundan emin ol */ .stok-page .table-card-body .action-buttons { display: flex !important; visibility: visible !important; opacity: 1 !important; } .stok-page .expiry-countdown { padding: 16px 10px !important; } .stok-page .expiry-countdown .label { text-align: center !important; width: 90% !important; } .stok-page .expiring-stock-card { padding: 12px !important; } /* Modal header h3 genişlik */ .modal-header h3 { width: 80% !important; } /* Stok geçmişi tablosu - Mobil'de kart formatı */ .history-table-container .history-table { display: block !important; } .history-table-container .history-table thead { display: none !important; } .history-table-container .history-table tbody { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .history-table-container .history-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 8px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.5rem !important; } .history-table-container .history-table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0.5rem 0 !important; border: none !important; gap: 0.5rem !important; } .history-table-container .history-table tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; flex-shrink: 0 !important; } /* Barkod okuyucu modalı - product-quantity ve btn-sm btn-outline yanyana */ .scanned-product-item .product-quantity-wrapper { display: flex !important; align-items: center !important; gap: 0.75rem !important; width: 100% !important; justify-content: space-between !important; } /* Lot table - Mobil'de kart formatı */ .lot-table-wrapper { width: 100% !important; max-width: 100% !important; overflow-x: visible !important; } .lot-table-wrapper .lot-table { width: 100% !important; max-width: 100% !important; overflow-x: visible !important; } .lot-table-wrapper .lot-table thead { display: none !important; } .lot-table-wrapper .lot-table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; width: 100% !important; } .lot-table-wrapper .lot-table tbody tr { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; padding: 1rem !important; margin-bottom: 0 !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--arka-plan-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .lot-table-wrapper .lot-table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0.5rem 0 !important; border: none !important; gap: 0.5rem !important; width: 100% !important; box-sizing: border-box !important; } .lot-table-wrapper .lot-table tbody td::before { content: attr(data-label) !important; font-weight: 600 !important; color: var(--metin-ana) !important; flex-shrink: 0 !important; min-width: fit-content !important; } .lot-table-wrapper .lot-table tbody td:first-child::before { content: "Lot No:" !important; } .lot-table-wrapper .lot-table tbody td:nth-child(2)::before { content: "SKT:" !important; } .lot-table-wrapper .lot-table tbody td:nth-child(3)::before { content: "Miktar:" !important; } .lot-table-wrapper .lot-table tbody td:nth-child(4)::before { content: "Kalan:" !important; } .lot-table-wrapper .lot-table tbody td:last-child { border-top: 1px solid var(--kenarlik-ana) !important; padding-top: 0.75rem !important; margin-top: 0.5rem !important; width: 100% !important; } .lot-table-wrapper .lot-table tbody td:last-child::before { content: "İşlemler:" !important; } .lot-table-wrapper .lot-table tbody td { padding: 0 !important; } /* #endregion */ } @media (max-width: 480px) { /* Ortak action-bar - Mobil görünümde (480px) */ .action-bar { margin: 0 !important; /* gap: 0 !important; */ } .tab-btn { padding: 0.65rem 0.85rem !important; font-size: 15px !important; justify-content: space-between !important; flex-direction: row-reverse !important; } /* #region RADYOLOJI SAYFASI - Responsive Stiller (480px) */ .radyoloji-page .radiology-tabs .tab-btn { padding: 0.65rem 0.85rem !important; font-size: 15px !important; } .radyoloji-page .radiology-tabs .tab-header h3 { font-size: 1rem !important; } .radyoloji-page .lab-request-item, .radyoloji-page .lab-result-item, .radyoloji-page .xray-request-item, .radyoloji-page .pending-item { padding: 0.85rem !important; } .radyoloji-page .gallery-grid { gap: 1rem !important; } .radyoloji-page .image-report-status { width: fit-content; } .radyoloji-page #labRequestsTab .request-info, .radyoloji-page #labResultsTab .result-info, .radyoloji-page #xrayRequestsTab .request-info { align-items: flex-start !important; gap: 5px !important; } .radyoloji-page .lab-request-item .patient-info { display: flex; align-items: flex-start; gap: 3px; } #labRequestViewModal .detail-list p, #xrayRequestViewModal .detail-list p { justify-content: flex-start !important; } .radyoloji-page .lab-request-item .request-date, .radyoloji-page .lab-request-item .request-doctor { border: 1px solid var(--kenarlik-ana); padding: 5px; border-radius: 5px; } .radyoloji-page .request-priority { width: 88px !important; height: 8px !important; border-radius: 80px !important; } .radyoloji-page #labRequestsTab .request-details, .radyoloji-page #xrayRequestsTab .request-details { display: flex !important; gap: 5px !important; align-items: center; } .radyoloji-page .patient-info img[src*="pet-icons"] { margin-right: 0 !important; } .radyoloji-page .patient-name-wrapper { display: flex; align-items: center; gap: 10px; } .radyoloji-page .images-gallery { padding: 14px !important; } #aiRadiologyModal .ai-input-section { padding: 16px !important; } /* #endregion */ /* #region STOK SAYFASI - Responsive Stiller (480px) */ .stok-page .stock-tabs .tab-btn { padding: 0.65rem 0.85rem !important; font-size: 15px !important; } .stok-page .stock-tabs .tab-header h3 { font-size: 1rem !important; } .stok-page .table-card { padding: 0.85rem !important; } .tedaviler-page .treatment-footer { flex-direction: column; } .tedaviler-page .medication-row { flex-direction: column; } .tedaviler-page .standard-search-box { width: 100%; } .tedaviler-page .tab-header .filter-group { gap: 5px; } .tedaviler-page .treatments-tabs { box-shadow: none !important; } .tedaviler-page .treatment-card{ box-shadow: none !important; } .tedaviler-page .modal-title-wrapper { width: 100%; } .ai-input-section { padding: 16px !important; } /* Barkod tarama modalı - scanned-product-item kart görünümü */ .scanned-product-item { flex-direction: column !important; align-items: flex-start !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 8px !important; margin-bottom: 0.75rem !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.75rem !important; } .scanned-product-item:last-child { border-bottom: 1px solid var(--kenarlik-ana) !important; margin-bottom: 0 !important; } .scanned-product-item .product-info { width: 100% !important; flex: none !important; flex-direction: column; gap: 0; align-items: flex-start; } .scanned-product-item .product-info h5 { margin-bottom: 0.5rem !important; font-size: 1rem !important; } .scanned-product-item .product-code { margin-bottom: 0.25rem !important; } .scanned-product-item .product-quantity { width: 100% !important; min-width: 100% !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0.5rem !important; border-radius: 6px !important; } .scanned-product-item .product-actions { width: auto !important; justify-content: flex-end !important; } .scanned-product-item .product-quantity-wrapper { display: flex !important; align-items: center !important; gap: 0.75rem !important; width: 100% !important; justify-content: space-between !important; } .stok-page .table-card-header .product-details .product-code { margin-bottom: 5px !important; } #stockHistoryModal .history-table td { margin: 0 !important; padding: 0 !important; min-height: auto !important; } #stockHistoryModal .history-table td:last-child { width: 100% !important; } .modal-close { top: 9px; right: 0; } .modal-header { padding-left: 0; } /* Modal footer butonlarını ters sırala (KAYDET - İPTAL) */ .modal-footer { flex-direction: column-reverse !important; } /* Teknik destek paneli - Responsive */ .quick-support-panel { width: 100% !important; right: -100% !important; max-width: 100% !important; overflow: hidden !important; /* Panel scroll etmemeli, sadece body scroll edecek */ display: flex !important; flex-direction: column !important; } .quick-support-panel.open { right: 0 !important; } .quick-support-header { padding: 16px !important; flex-shrink: 0 !important; /* Header sabit kalmalı */ } .quick-support-header h3 { font-size: 1.1rem !important; } .quick-support-close { width: 32px !important; height: 32px !important; font-size: 16px !important; } .quick-support-body { flex: 1 1 auto !important; /* Flex item olarak genişleyebilmeli */ padding: 16px !important; overflow-y: scroll !important; overflow-x: hidden !important; min-height: 0 !important; /* Flex item'ın scroll edebilmesi için - KRİTİK! */ -webkit-overflow-scrolling: touch !important; /* iOS için smooth scrolling */ /* max-height: calc(100vh - 140px) !important; */ max-height: fit-content !important; } .quick-support-footer { flex-shrink: 0 !important; /* Footer sabit kalmalı */ } .support-user-card { padding: 16px !important; /* flex-direction: column !important; */ text-align: center !important; gap: 20px !important; } .support-user-avatar { width: 80px !important; height: 80px !important; } .support-user-info { text-align: center !important; text-align: center !important; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; } .support-user-info h4 { font-size: 1rem !important; margin-bottom: 0 !important; } .support-user-info p { font-size: 0.85rem !important; margin: 0.25rem 0 !important; } .quick-support-info { padding: 12px !important; margin-bottom: 16px !important; } .quick-support-info p { font-size: 0.85rem !important; } .quick-support-form .form-group { margin-bottom: 16px !important; } .quick-support-form label { font-size: 0.9rem !important; margin-bottom: 6px !important; } .quick-support-form input, .quick-support-form select, .quick-support-form textarea { padding: 10px 12px !important; font-size: 0.9rem !important; } .quick-support-form textarea { min-height: 100px !important; } .quick-support-footer { padding: 16px !important; flex-direction: column-reverse !important; gap: 10px !important; } .quick-support-footer .btn-primary, .quick-support-footer .btn-secondary { width: 100% !important; padding: 12px !important; font-size: 0.95rem !important; } .support-success-message { padding: 30px 16px !important; } .support-success-icon { width: 60px !important; height: 60px !important; margin-bottom: 16px !important; } .support-success-message h4 { font-size: 1.1rem !important; margin-bottom: 0.5rem !important; } .support-success-message p { font-size: 0.9rem !important; } /* #endregion */ /* #region FATURALANDIRMA SAYFASI - Responsive Stiller */ /* İlaç Rehberi sayfası - Action left ve right */ .ilac-rehberi-page .action-left, .ilac-rehberi-page .action-right { flex-direction: column !important; width: 100% !important; gap: 0.5rem !important; } /* İlaç Rehberi sayfası - Button icon */ .ilac-rehberi-page .btn-icon { width: 100% !important; min-width: fit-content !important; height: auto !important; padding: 0.75rem 1rem !important; justify-content: center !important; gap: 0.5rem !important; width: fit-content !important; } .category-table th:last-child { width: 30% !important; } .ilac-rehberi-page .btn-icon i { flex-shrink: 0 !important; } .ilac-rehberi-page .btn-icon span { font-size: 0.9rem !important; font-weight: 500 !important; } /* İlaç Rehberi sayfası - Search box */ .ilac-rehberi-page .search-box { max-width: 100% !important; } /* İlaç Rehberi sayfası - Action bar */ .ilac-rehberi-page .action-bar { gap: 20px !important; margin-bottom: 20px !important; } .ilac-rehberi-page .category-table td:first-child { padding-left: 10px !important; } /* İlaç Rehberi sayfası - Autocomplete listesini gizle */ .ilac-rehberi-page .medication-autocomplete-list { display: none !important; } /* Sıcak Satış sayfası - Satış Geçmişi tablosunu kart görünümüne çevir (hem .sıcak-satis-page hem .sicak-satis-page için) */ .sıcak-satis-page .table-container table, .sicak-satis-page .table-container table { display: block !important; } .sicak-satis-page .table-container table thead, .sıcak-satis-page .table-container table thead { display: none !important; } .sicak-satis-page .table-container table tbody, .sıcak-satis-page .table-container table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .sicak-satis-page .table-container table tbody tr, .sıcak-satis-page .table-container table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.75rem !important; } .sicak-satis-page .table-container table tbody td, .sıcak-satis-page .table-container table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 !important; border: none !important; gap: 0.5rem !important; min-width: 100% !important; } .sicak-satis-page .table-container table tbody td::before, .sıcak-satis-page .table-container table tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; text-align: center !important; width: fit-content !important; margin: 0 !important; } .sicak-satis-page .table-container table tbody td:first-child::before, .sıcak-satis-page .table-container table tbody td:first-child::before { content: 'Tarih:' !important; } .sicak-satis-page .table-container table tbody td:nth-child(2)::before, .sıcak-satis-page .table-container table tbody td:nth-child(2)::before { content: 'Fatura No:' !important; } .sicak-satis-page .table-container table tbody td:nth-child(3)::before, .sıcak-satis-page .table-container table tbody td:nth-child(3)::before { content: 'Veteriner:' !important; } .sicak-satis-page .table-container table tbody td:nth-child(4)::before, .sıcak-satis-page .table-container table tbody td:nth-child(4)::before { content: 'Ürünler:' !important; } .sicak-satis-page .table-container table tbody td:nth-child(5)::before, .sıcak-satis-page .table-container table tbody td:nth-child(5)::before { content: 'Kalem Sayısı:' !important; } .sicak-satis-page .table-container table tbody td:nth-child(6)::before, .sıcak-satis-page .table-container table tbody td:nth-child(6)::before { content: 'Toplam Tutar:' !important; } .sicak-satis-page .table-container table tbody td:nth-child(7)::before, .sıcak-satis-page .table-container table tbody td:nth-child(7)::before { content: 'Durum:' !important; } .sicak-satis-page .table-container table tbody td:last-child::before, .sıcak-satis-page .table-container table tbody td:last-child::before { content: 'İşlemler:' !important; } .sicak-satis-page .table-container table tbody td:last-child, .sıcak-satis-page .table-container table tbody td:last-child { width: 100% !important; align-items: center !important; } .sicak-satis-page .table-container table tbody td:last-child .action-buttons, .sıcak-satis-page .table-container table tbody td:last-child .action-buttons { width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0.5rem !important; } /* Sıcak Satış sayfası - Satış Detay Modalı tablosunu kart görünümüne çevir (hem .sıcak-satis-page hem .sicak-satis-page için) */ .sıcak-satis-page .detail-table-wrapper .detail-table, .sicak-satis-page .detail-table-wrapper .detail-table { display: block !important; } .sicak-satis-page .detail-table-wrapper .detail-table thead, .sıcak-satis-page .detail-table-wrapper .detail-table thead { display: none !important; } .sicak-satis-page .detail-table-wrapper .detail-table tbody, .sıcak-satis-page .detail-table-wrapper .detail-table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .sicak-satis-page .detail-table-wrapper .detail-table tbody tr, .sıcak-satis-page .detail-table-wrapper .detail-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.75rem !important; } .sicak-satis-page .detail-table-wrapper .detail-table tbody td, .sıcak-satis-page .detail-table-wrapper .detail-table tbody td { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 0.5rem 0 !important; border: none !important; gap: 0.5rem !important; width: 100% !important; } .sicak-satis-page .detail-table-wrapper .detail-table tbody td::before, .sıcak-satis-page .detail-table-wrapper .detail-table tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; text-align: center !important; /* width: 100% !important; */ margin: 0 !important; } .sicak-satis-page .detail-table-wrapper .detail-table tbody td:first-child::before, .sıcak-satis-page .detail-table-wrapper .detail-table tbody td:first-child::before { content: 'Ürün Adı:' !important; text-align: left !important;} .sicak-satis-page .detail-table-wrapper .detail-table tbody td:nth-child(2)::before, .sıcak-satis-page .detail-table-wrapper .detail-table tbody td:nth-child(2)::before { content: 'Miktar:' !important; } .sicak-satis-page .detail-table-wrapper .detail-table tbody td:nth-child(3)::before, .sıcak-satis-page .detail-table-wrapper .detail-table tbody td:nth-child(3)::before { content: 'Birim Fiyat:' !important; } .sicak-satis-page .detail-table-wrapper .detail-table tbody td:nth-child(4)::before, .sıcak-satis-page .detail-table-wrapper .detail-table tbody td:nth-child(4)::before { content: 'İndirim:' !important; } .sicak-satis-page .detail-table-wrapper .detail-table tbody td:nth-child(5)::before, .sıcak-satis-page .detail-table-wrapper .detail-table tbody td:nth-child(5)::before { content: 'KDV:' !important; } .sicak-satis-page .detail-table-wrapper .detail-table tbody td:last-child::before, .sıcak-satis-page .detail-table-wrapper .detail-table tbody td:last-child::before { content: 'Toplam:' !important; } /* Sıcak Satış sayfası - Sol boşluk ve yatay scroll düzeltmesi (hem .sıcak-satis-page hem .sicak-satis-page için) */ .sıcak-satis-page .app-layout, .sicak-satis-page .app-layout { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; } .sıcak-satis-page .page-wrapper, .sicak-satis-page .page-wrapper { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; background: var(--arka-plan-ana) !important; } .sıcak-satis-page .main-content, .sicak-satis-page .main-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } .sıcak-satis-page .dashboard-card, .sicak-satis-page .dashboard-card { margin-bottom: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* Sıcak Satış sayfası - Card header düzeni (genel .card-header stilinden sonra, daha spesifik) */ .sıcak-satis-page .dashboard-card .card-header, .sicak-satis-page .dashboard-card .card-header { flex-direction: column !important; align-items: flex-start !important; gap: var(--mobile-spacing-md) !important; /* padding: 0 !important; */ margin: 0 !important; } .sıcak-satis-page .card-body, .sicak-satis-page .card-body { padding: 14px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } .sıcak-satis-page .stats-section, .sicak-satis-page .stats-section { padding: 0 !important; margin: 0 0 1rem 0 !important; width: 100% !important; max-width: 100% !important; } .sıcak-satis-page .stats-grid, .sicak-satis-page .stats-grid { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } .sıcak-satis-page section, .sicak-satis-page section, .sıcak-satis-page .section, .sicak-satis-page .section { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Sıcak Satış sayfası - Form düzeni (hem .sıcak-satis-page hem .sicak-satis-page için) */ .sıcak-satis-page .sales-main-layout, .sicak-satis-page .sales-main-layout { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; grid-template-columns: 1fr !important; } .sıcak-satis-page .sales-add-section, .sicak-satis-page .sales-add-section { width: 100% !important; max-width: 100% !important; padding: 16px !important; box-sizing: border-box !important; } .sıcak-satis-page .sales-summary-section, .sicak-satis-page .sales-summary-section { width: 100% !important; max-width: 100% !important; padding: 16px !important; box-sizing: border-box !important; position: relative !important; } .sıcak-satis-page .form-row, .sicak-satis-page .form-row, .sıcak-satis-page .sales-add-section .form-row, .sicak-satis-page .sales-add-section .form-row { display: flex !important; flex-direction: column !important; gap: 1rem !important; grid-template-columns: 1fr !important; } .sıcak-satis-page .form-group, .sicak-satis-page .form-group { width: 100% !important; max-width: 100% !important; margin-bottom: 0 !important; } #saleDetailModal .detail-table thead th, #saleDetailModal .detail-table tbody td { text-align: right; } .cart-item-price { min-width: fit-content !important; } .sıcak-satis-page .form-group-wide, .sicak-satis-page .form-group-wide { width: 100% !important; max-width: 100% !important; } .sıcak-satis-page .form-actions, .sicak-satis-page .form-actions { flex-direction: column !important; gap: 0.75rem !important; } .sıcak-satis-page .form-actions .btn, .sicak-satis-page .form-actions .btn { width: 100% !important; } .sıcak-satis-page .sales-form-actions, .sicak-satis-page .sales-form-actions { flex-direction: column !important; gap: 0.5rem !important; } .sıcak-satis-page .sales-form-actions .btn, .sicak-satis-page .sales-form-actions .btn { width: 100% !important; } .sıcak-satis-page .form-section, .sicak-satis-page .form-section { padding: 12px !important; margin-bottom: 16px !important; } .sıcak-satis-page .form-section h4, .sıcak-satis-page .form-section h5, .sicak-satis-page .form-section h4, .sicak-satis-page .form-section h5 { font-size: 0.95rem !important; margin-bottom: 12px !important; } .sıcak-satis-page input[type="text"], .sıcak-satis-page input[type="number"], .sıcak-satis-page input[type="datetime-local"], .sıcak-satis-page select, .sıcak-satis-page textarea, .sicak-satis-page input[type="text"], .sicak-satis-page input[type="number"], .sicak-satis-page input[type="datetime-local"], .sicak-satis-page select, .sicak-satis-page textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .sıcak-satis-page .card-header-actions, .sicak-satis-page .card-header-actions { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .sıcak-satis-page .card-header-actions .search-box, .sicak-satis-page .card-header-actions .search-box { width: 100% !important; max-width: 100% !important; } .sıcak-satis-page .cart-header, .sicak-satis-page .cart-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; } .sıcak-satis-page .cart-items, .sicak-satis-page .cart-items { max-height: 400px !important; } .sıcak-satis-page .detail-grid, .sicak-satis-page .detail-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .sıcak-satis-page .detail-totals, .sicak-satis-page .detail-totals { padding: 1rem !important; } #barcodeModal .modal-body p { display: flex !important; justify-content: center !important; } #salesHistoryTable .product-item { flex-direction: column !important; align-items: flex-end !important; border: none; background: none; padding: 0; gap: 3px; } #salesHistoryTable .product-item .product-name { margin: 0; } /* Toplu Bildirimler sayfası - Dashboard grid tek kolon */ .toplu-bildirimler-page .dashboard-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; display: flex !important; flex-direction: column !important; margin: 16px 0 !important; } /* Toplu Bildirimler sayfası - Mobilde sıralama: Hızlı Şablonlar üstte */ .toplu-bildirimler-page .dashboard-right { order: -1 !important; } .toplu-bildirimler-page .dashboard-left { order: 1 !important; } /* Toplu Bildirimler sayfası - Form düzeni */ .toplu-bildirimler-page .form-row { display: flex !important; flex-direction: column !important; gap: 1rem !important; grid-template-columns: 1fr !important; } .toplu-bildirimler-page .form-group { width: 100% !important; max-width: 100% !important; } .toplu-bildirimler-page .customer-group-container { flex-direction: column !important; gap: 0.75rem !important; } .toplu-bildirimler-page .customer-group-container .btn-outline { width: 100% !important; } .toplu-bildirimler-page .notification-type-radio-group { flex-direction: column !important; gap: 0.75rem !important; } .toplu-bildirimler-page .notification-type-radio-option { width: 100% !important; margin: 0; justify-content: space-between; } .toplu-bildirimler-page .notification-detail { padding: 0 !important; } .toplu-bildirimler-page .form-actions { flex-direction: column !important; gap: 0.75rem !important; } .toplu-bildirimler-page .form-actions .btn { width: 100% !important; } /* Toplu Bildirimler sayfası - Card actions düzeni */ .toplu-bildirimler-page .card-actions { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .toplu-bildirimler-page .card-actions .filter-group { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .toplu-bildirimler-page .card-actions .filter-group select, .toplu-bildirimler-page .card-actions .filter-group .btn-outline { width: 100% !important; } .toplu-bildirimler-page .card-actions .btn-outline { width: 100% !important; } /* Toplu Bildirimler sayfası - Tabloyu kart görünümüne çevir */ .toplu-bildirimler-page .table-container table { display: block !important; } .toplu-bildirimler-page .table-container table thead { display: none !important; } .toplu-bildirimler-page .table-container table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .toplu-bildirimler-page .table-container table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.75rem !important; } .toplu-bildirimler-page .table-container table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 !important; border: none !important; gap: 0.5rem !important; min-width: 100% !important; } .toplu-bildirimler-page .modal-content.large { height: fit-content !important; } /* Banka havalesi modalı - creditModal'ın üstünde görünmeli */ #bankTransferModal { z-index: 9999 !important; } /* CreditModal z-index'i düşür (bankTransferModal açıldığında) */ #creditModal { z-index: 1000 !important; } .toplu-bildirimler-page .table-container table tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; width: fit-content !important; margin: 0 !important; } .toplu-bildirimler-page .table-container table tbody td:first-child::before { content: 'Durum:' !important; } .toplu-bildirimler-page .table-container table tbody td:nth-child(2)::before { content: 'Bildirim Başlığı:' !important; } .toplu-bildirimler-page .table-container table tbody td:nth-child(3)::before { content: 'Grup:' !important; } .toplu-bildirimler-page .table-container table tbody td:nth-child(4)::before { content: 'Müşteri Grubu:' !important; } .toplu-bildirimler-page .table-container table tbody td:nth-child(5)::before { content: 'Gönderim Türü:' !important; } .toplu-bildirimler-page .table-container table tbody td:nth-child(6)::before { content: 'Alıcı Sayısı:' !important; } .toplu-bildirimler-page .table-container table tbody td:nth-child(7)::before { content: 'Gönderim Tarihi:' !important; } .toplu-bildirimler-page .table-container table tbody td:last-child::before { content: 'İşlemler:' !important; } .toplu-bildirimler-page .table-container table tbody td:last-child { width: 100% !important; align-items: center !important; } .toplu-bildirimler-page .table-container table tbody td:last-child .table-actions { width: 100% !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 0.5rem !important; } /* Toplu Bildirimler sayfası - Credit overview düzeni */ .toplu-bildirimler-page .credit-overview { flex-direction: column !important; gap: 1rem !important; } .toplu-bildirimler-page .credit-item { width: 100% !important; } /* Toplu Bildirimler sayfası - Template list düzeni */ .toplu-bildirimler-page .template-list { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .toplu-bildirimler-page .template-card-item { width: 100% !important; } .toplu-bildirimler-page .dashboard-card { margin-bottom: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } .toplu-bildirimler-page .dc-yeni-bildirim-alan { padding: 14px !important; } .toplu-bildirimler-page .card-body { padding: 14px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } .toplu-bildirimler-page .stats-section { padding: 0 !important; margin: 0 0 1rem 0 !important; width: 100% !important; max-width: 100% !important; } .toplu-bildirimler-page .stats-grid { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Toplu Bildirimler sayfası - Table container padding düzeltmesi */ .toplu-bildirimler-page .table-container { padding: 10px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Toplu Bildirimler sayfası - Card header düzeni */ .toplu-bildirimler-page .dashboard-card .card-header { flex-direction: column !important; align-items: flex-start !important; gap: var(--mobile-spacing-md) !important; padding: var(--mobile-spacing-md) var(--mobile-spacing-lg) !important; margin: 0 !important; } .toplu-bildirimler-page .dc-yeni-bildirim-alan .card-header { margin: 0 !important; padding: 0 0 10px 0 !important; } .toplu-bildirimler-page .dashboard-card.full-width { margin-bottom: var(--spacing-lg) !important; } /* Toplu Bildirimler sayfası - Main content düzeni */ .toplu-bildirimler-page .main-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* Modern tarayıcılar için Small Viewport Height */ @supports (height: 100svh) { .onam-sistemi-page .content-wrapper { min-height: calc(100svh - 120px) !important; } } /* Dynamic viewport height desteği (fallback - svh desteklemeyen tarayıcılar için) */ @supports (height: 100dvh) { @supports not (height: 100svh) { .onam-sistemi-page .content-wrapper { min-height: calc(100dvh - 120px) !important; } } } .onam-sistemi-page .main-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; } .onam-sistemi-page .stats-section { padding: 0 !important; margin: 0 0 1rem 0 !important; width: 100% !important; max-width: 100% !important; } .onam-sistemi-page .stats-grid { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Onam Sistemi sayfası - Tab butonları responsive */ .onam-sistemi-page .consent-tabs { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; padding: 12px !important; } .onam-sistemi-page .tab-buttons { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; width: 100% !important; margin-bottom: 50px; } .onam-sistemi-page .consent-tab-btn { width: 100% !important; justify-content: space-between !important; flex-direction: row-reverse !important; padding: 0.75rem 1rem !important; border-bottom: 2px solid transparent; } .onam-sistemi-page .consent-tab-btn.active { border-bottom: 2px solid var(--ana-mavi) !important; } .onam-sistemi-page .consent-actions-right { flex-direction: column; align-items: flex-start; width: 100%; } /* Onam Sistemi sayfası - Tab içerikleri */ .onam-sistemi-page .tab-content { width: 100% !important; max-width: 100% !important; padding: 1rem !important; } .onam-sistemi-page .tab-content.active { display: block !important; visibility: visible !important; opacity: 1 !important; padding: 10px !important; } .onam-sistemi-page .tab-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; margin-bottom: 1rem !important; } .onam-sistemi-page .tab-actions { width: 100% !important; } .onam-sistemi-page .tab-actions .search-box { width: 100% !important; max-width: 100% !important; } /* Onam Sistemi sayfası - Form adımları */ .onam-sistemi-page .consent-creation-form { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .onam-sistemi-page .form-step { width: 100% !important; max-width: 100% !important; /* padding: 12px !important; */ box-sizing: border-box !important; } .onam-sistemi-page .step-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; } .onam-sistemi-page .step-actions { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .onam-sistemi-page .step-actions .btn { width: 100% !important; } /* Onam Sistemi sayfası - Template kartları */ .onam-sistemi-page .form-templates { display: flex !important; flex-direction: column !important; gap: 1rem !important; width: 100% !important; } .onam-sistemi-page .template-card { width: 100% !important; max-width: 100% !important; } .onam-sistemi-page .template-actions { flex-direction: column !important; gap: 0.5rem !important; width: 100% !important; } .onam-sistemi-page .template-actions .btn { width: 100% !important; } /* Onam Sistemi sayfası - Hasta seçimi */ .onam-sistemi-page .patient-selection { width: 100% !important; max-width: 100% !important; } .onam-sistemi-page .patient-selection .search-box { width: 100% !important; max-width: 100% !important; } .onam-sistemi-page .patient-list { width: 100% !important; max-width: 100% !important; } /* Onam Sistemi sayfası - Hasta listesi öğeleri */ .onam-sistemi-page .patient-item { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; padding: 1rem !important; } .onam-sistemi-page .patient-item .patient-info { width: 100% !important; } .onam-sistemi-page .patient-item .patient-contact { display: flex !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; margin-left: 0 !important; margin-top: 0.5rem !important; padding-top: 0.5rem !important; border-top: 1px solid var(--kenarlik-ana) !important; visibility: visible !important; opacity: 1 !important; } .onam-sistemi-page .patient-item .patient-contact i { font-size: 1rem !important; display: inline-block !important; visibility: visible !important; } .onam-sistemi-page .patient-item .patient-contact span { font-size: 0.9rem !important; color: var(--metin-ana) !important; display: inline-block !important; visibility: visible !important; } /* Onam Sistemi sayfası - Gönderim yöntemleri */ .onam-sistemi-page .send-methods { display: flex; flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .onam-sistemi-page .send-method-option { width: 100% !important; } /* Onam Sistemi sayfası - Tablo responsive (kart görünümüne çevir) */ .onam-sistemi-page .simple-table { display: block !important; } .onam-sistemi-page .simple-table thead { display: none !important; } .onam-sistemi-page .simple-table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .onam-sistemi-page .simple-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.75rem !important; } .onam-sistemi-page .simple-table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 !important; border: none !important; gap: 0.5rem !important; min-width: 100% !important; } .onam-sistemi-page .simple-table tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; width: fit-content !important; margin: 0 !important; } .onam-sistemi-page .simple-table tbody td:first-child::before { content: 'Belge No:' !important; } .onam-sistemi-page .simple-table tbody td:nth-child(2)::before { content: 'Hasta/Sahip:' !important; } .onam-sistemi-page .simple-table tbody td:nth-child(3)::before { content: 'Onam Türü:' !important; } .onam-sistemi-page .simple-table tbody td:nth-child(4)::before { content: 'İmza Tarihi:' !important; } .onam-sistemi-page .simple-table tbody td:nth-child(5)::before { content: 'İmza Türü:' !important; } .onam-sistemi-page .simple-table tbody td:last-child::before { content: 'İşlemler:' !important; } .onam-sistemi-page .simple-table tbody td:last-child { width: 100% !important; align-items: center !important; } .onam-sistemi-page .simple-table tbody td:last-child .action-buttons, .onam-sistemi-page .simple-table tbody td:last-child .table-actions { width: 100% !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 0.5rem !important; } /* Onam Sistemi sayfası - Reddedilen onamlar listesi */ .onam-sistemi-page .rejected-consents-list { display: flex !important; flex-direction: column !important; gap: 1rem !important; width: 100% !important; padding: 0 !important; } .onam-sistemi-page .rejected-consent-card { width: 100% !important; max-width: 100% !important; } /* Onam Sistemi sayfası - Template yönetimi */ .onam-sistemi-page .template-management { width: 100% !important; max-width: 100% !important; } .onam-sistemi-page .template-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; width: 100% !important; } .onam-sistemi-page .template-header .btn-primary { width: 100% !important; } .raporlar-page .main-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } .raporlar-page .stats-section { padding: 0 !important; margin: 0 0 1rem 0 !important; width: 100% !important; max-width: 100% !important; } .raporlar-page .stats-grid { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Raporlar sayfası - Action bar responsive */ .raporlar-page .action-bar { flex-direction: column !important; gap: 1rem !important; width: 100% !important; } .raporlar-page .action-left { width: 100% !important; } .raporlar-page .action-left .btn-primary { width: 100% !important; } .raporlar-page .action-right { width: 100% !important; } .raporlar-page .action-right .filter-group { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .raporlar-page .action-right .filter-group select, .raporlar-page .action-right .filter-group .btn-outline { width: 100% !important; } /* Raporlar sayfası - Reports layout responsive */ .raporlar-page .reports-layout { display: flex !important; flex-direction: column-reverse !important; gap: 1.5rem !important; } .raporlar-page .reports-sidebar { width: 100% !important; max-width: 100% !important; order: 2 !important; position: static; } .raporlar-page .category-title { width: 100%; align-items: center; } .raporlar-page .report-content-area { grid-template-columns: 1fr; } .raporlar-page #reportChart { max-width: 100%; } .raporlar-page .report-chart-container { min-height: fit-content; } .raporlar-page .report-meta { flex-direction: column; align-items: flex-start; gap: 10px; } .raporlar-page .report-info-bar { flex-direction: column; gap: 20px; } .raporlar-page .report-card.financial { padding: 16px !important; } .raporlar-page .report-actions-modal { width: 100%; } .raporlar-page .reports-main { width: 100% !important; max-width: 100% !important; order: 1 !important; } .raporlar-page .reports-main-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; margin-bottom: 1rem !important; } .raporlar-page .sort-controls { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .raporlar-page .sort-controls .filter-select { width: 100% !important; } /* Raporlar sayfası - Category list */ .raporlar-page .category-list { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } .raporlar-page .category-item { width: 100% !important; } /* Raporlar sayfası - Tablo responsive (kart görünümüne çevir) */ .raporlar-page .reports-table-container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .raporlar-page .reports-table { display: block !important; } .raporlar-page .reports-table thead { display: none !important; } .raporlar-page .reports-table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 16px; } .raporlar-page .reports-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.75rem !important; } .raporlar-page .reports-table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 !important; border: none !important; gap: 0.5rem !important; min-width: 100% !important; } .raporlar-page .reports-table tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; width: fit-content !important; margin: 0 !important; } .raporlar-page .reports-table tbody td:first-child::before { content: none !important; } .raporlar-page .reports-table tbody td:nth-child(2)::before { content: 'Kategori:' !important; } .raporlar-page .reports-table tbody td:nth-child(3)::before { content: 'Son Güncelleme:' !important; } .raporlar-page .reports-table tbody td:nth-child(4)::before { content: 'İndirme:' !important; } .raporlar-page .reports-table tbody td:nth-child(5)::before { content: 'Durum:' !important; } .raporlar-page .reports-table tbody td:last-child::before { content: 'İşlemler:' !important; } .raporlar-page .reports-table tbody td:last-child { width: 100% !important; align-items: center !important; } .raporlar-page .reports-table tbody td:last-child .table-actions { width: 100% !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 0.5rem !important; } /* Raporlar sayfası - Report list info */ .raporlar-page .report-list-info { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; width: 100% !important; } .raporlar-page .report-card-actions { padding: 0; } .onam-sistemi-page .consent-actions-left { width: 100%; align-items: flex-start !important; flex-direction: column; } .onam-sistemi-page .onam-sistemi-page .patient-avatar { width: 32px; height: 32px; } .onam-sistemi-page .consent-actions { justify-content: center; flex-direction: column-reverse; } .hukuki-destek-page .main-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } .hukuki-destek-page .stats-section { padding: 0 !important; margin: 0 0 1rem 0 !important; width: 100% !important; max-width: 100% !important; } .hukuki-destek-page .document-category { padding: 16px !important; } .hukuki-destek-page .document-item { flex-direction: column !important; gap: 10px; } .hukuki-destek-page .stats-grid { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Hukuki Destek sayfası - Action bar responsive */ .hukuki-destek-page .action-bar { flex-direction: column !important; gap: 1rem !important; width: 100% !important; } .hukuki-destek-page .action-left { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .hukuki-destek-page .action-left .btn { width: 100% !important; } .hukuki-destek-page .action-right { width: 100% !important; } .hukuki-destek-page .action-right .filter-group { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .hukuki-destek-page .action-right .filter-group select, .hukuki-destek-page .action-right .filter-group .btn-outline { width: 100% !important; } /* Hukuki Destek sayfası - Tablo responsive (kart görünümüne çevir) */ .hukuki-destek-page .archive-table, .hukuki-destek-page .legal-table { display: block !important; } .hukuki-destek-page .archive-table thead, .hukuki-destek-page .legal-table thead { display: none !important; } .hukuki-destek-page .archive-table tbody, .hukuki-destek-page .legal-table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .hukuki-destek-page .archive-table tbody tr, .hukuki-destek-page .legal-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.75rem !important; } .hukuki-destek-page .archive-table tbody td, .hukuki-destek-page .legal-table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0.5rem 0 !important; border: none !important; gap: 0.5rem !important; min-width: 100% !important; } .hukuki-destek-page .archive-table tbody td::before, .hukuki-destek-page .legal-table tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; width: fit-content !important; margin: 0 !important; } .hukuki-destek-page .archive-table tbody td:first-child::before, .hukuki-destek-page .legal-table tbody td:first-child::before { content: 'Dosya No:' !important; } .hukuki-destek-page .archive-table tbody td:nth-child(2)::before, .hukuki-destek-page .legal-table tbody td:nth-child(2)::before { content: 'Talep Türü:' !important; } .hukuki-destek-page .archive-table tbody td:nth-child(3)::before, .hukuki-destek-page .legal-table tbody td:nth-child(3)::before { content: 'Hasta/Sahip:' !important; } .hukuki-destek-page .archive-table tbody td:nth-child(4)::before, .hukuki-destek-page .legal-table tbody td:nth-child(4)::before { content: 'Tarih:' !important; } .hukuki-destek-page .archive-table tbody td:nth-child(5)::before, .hukuki-destek-page .legal-table tbody td:nth-child(5)::before { content: 'Durum:' !important; } .hukuki-destek-page .archive-table tbody td:nth-child(6)::before, .hukuki-destek-page .legal-table tbody td:nth-child(6)::before { content: 'Avukat:' !important; } .hukuki-destek-page .archive-table tbody td:last-child::before, .hukuki-destek-page .legal-table tbody td:last-child::before { content: 'İşlemler:' !important; } .hukuki-destek-page .archive-table tbody td:last-child, .hukuki-destek-page .legal-table tbody td:last-child { width: 100% !important; align-items: center !important; } .hukuki-destek-page .archive-table tbody td:last-child .table-actions, .hukuki-destek-page .legal-table tbody td:last-child .table-actions { width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0.5rem !important; } /* Hukuki Destek sayfası - Layout ve container genişlik düzeltmesi */ .hukuki-destek-page .legal-layout { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; margin-bottom: 0 !important; } .hukuki-destek-page .legal-sidebar { width: 100% !important; max-width: 100% !important; position: static !important; order: 2 !important; } .hukuki-destek-page .legal-requests-container, .hukuki-destek-page .legal-main, .hukuki-destek-page .legal-requests-list { width: 100% !important; max-width: 100% !important; order: 1 !important; box-sizing: border-box !important; overflow-x: hidden !important; } .hukuki-destek-page .legal-requests-list { padding: 0 !important; } .hukuki-destek-page .legal-request-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 16px; } .hukuki-destek-page .password-screen-content > p { font-size: 12px; } .hukuki-destek-page .archive-table .btn-small.outline { width: fit-content; } .hukuki-destek-page .archive-table tbody td, .hukuki-destek-page .legal-table tbody td { padding: 0 !important; } .hukuki-destek-page .table-wrapper { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .hukuki-destek-page .archive-section { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .hukuki-destek-page .archived-detail-info { padding: 10px; } .hukuki-destek-page .archived-detail-info .detail-row span { white-space: nowrap; } .lawyer-info-simple { flex-direction: column; } .hukuki-destek-page .detail-item { flex-direction: column !important; } .hukuki-destek-page .request-timeline { padding: 12px; } .hukuki-destek-page .timeline-item { gap: 5px !important; } .hukuki-destek-page .archived-detail-info .detail-row label { min-width: auto; } /* Hukuki Destek sayfası - Legal tabs mobil */ .hukuki-destek-page .legal-tabs { width: 100% !important; } /* Hukuki Destek sayfası - Request header mobil */ .hukuki-destek-page .request-header { flex-direction: column !important; gap: 20px; } /* Hukuki Destek sayfası - Request status mobil */ .hukuki-destek-page .request-status { align-items: flex-start !important; width: 100%; align-items: center !important; } .request-info { align-items: center !important; width: 100% !important; } /* Hukuki Destek sayfası - Case details mobil */ .hukuki-destek-page .case-details { padding: 10px !important; grid-template-columns: 1fr; } /* Hukuki Destek sayfası - Contact info mobil */ .hukuki-destek-page .legal-modal .contact-option .contact-info { align-items: center !important; } /* Hukuki Destek sayfası - Lawyer details mobil */ .hukuki-destek-page .legal-modal .lawyer-contact-info .lawyer-details { display: flex !important; flex-direction: column !important; align-items: center !important; } /* Hukuki Destek sayfası - Emergency modal mobil */ .hukuki-destek-page #emergencyLegalModal .emergency-options { gap: 1rem !important; } .hukuki-destek-page #emergencyLegalModal .emergency-option { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 1rem !important; } .hukuki-destek-page #emergencyLegalModal .emergency-option .option-info { width: 100% !important; margin-bottom: 0.5rem !important; } .hukuki-destek-page #emergencyLegalModal .emergency-option button { width: 100% !important; } .hukuki-destek-page #emergencyLegalModal .modal-body p { justify-content: center !important; } .hukuki-destek-page .malpractice-info, .hukuki-destek-page .insurance-info { flex-direction: column; justify-content: center; } .hukuki-destek-page .malpractice-content, .hukuki-destek-page .insurance-content { text-align: center !important; } .hukuki-destek-page .malpractice-actions, .hukuki-destek-page .insurance-actions { flex-direction: column; } /* Genel Tanımlar sayfası - Ortak alanlar */ .genel-tanimlar-page .content-wrapper { padding: 14px !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .genel-tanimlar-page .settings-table tbody td::before { text-align: left; } .genel-tanimlar-page .settings-table th:nth-child(2), .genel-tanimlar-page .settings-table td:nth-child(2) { text-align: right; } .genel-tanimlar-page .modal-content input[type="color"] { padding: 5px !important; } .genel-tanimlar-page .modal-footer { background: none; } .genel-tanimlar-page .main-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* Genel Tanımlar sayfası - Settings container responsive */ .genel-tanimlar-page .settings-container { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; } .genel-tanimlar-page .settings-sidebar { width: 100% !important; max-width: 100% !important; order: 2 !important; } .genel-tanimlar-page .settings-content { width: 100% !important; max-width: 100% !important; order: 1 !important; } .genel-tanimlar-page .settings-nav { width: 100% !important; } .genel-tanimlar-page .settings-nav ul { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } .genel-tanimlar-page .settings-nav-link { width: 100% !important; justify-content: flex-start !important; } .genel-tanimlar-page .section-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; } .genel-tanimlar-page .section-header .btn-primary { width: 100% !important; } /* Genel Tanımlar sayfası - Tablo responsive (kart görünümüne çevir) */ .genel-tanimlar-page .table-container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .genel-tanimlar-page .settings-table { display: block !important; } .genel-tanimlar-page .settings-table thead { display: none !important; } .genel-tanimlar-page .settings-table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 10px; } .genel-tanimlar-page .settings-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.75rem !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .genel-tanimlar-page .settings-card { padding: 12px !important; } .genel-tanimlar-page .settings-table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; padding: 6px 0 !important; border: none !important; border-bottom: 1px solid var(--kenarlik-ana) !important; gap: 0.75rem !important; width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; box-sizing: border-box !important; } .genel-tanimlar-page .settings-table tbody tr td:last-child { border-bottom: none !important; flex-direction: row !important; width: 100% !important; align-items: center !important; } .genel-tanimlar-page .settings-table tbody td::before { content: attr(data-label) !important; font-weight: 600 !important; color: var(--metin-ana) !important; font-size: 0.875rem !important; width: auto !important; min-width: 100px !important; max-width: 120px !important; flex-shrink: 0 !important; margin: 0 !important; margin-right: 0.75rem !important; display: block !important; } /* Genel Tanımlar - Görev Tipleri Tablosu (5 sütun) */ .genel-tanimlar-page #gorev-tipleri-section .settings-table tbody td:nth-child(1)::before { content: 'Görev Tipi:' !important; } .genel-tanimlar-page #gorev-tipleri-section .settings-table tbody td:nth-child(2)::before { content: 'Açıklama:' !important; } .genel-tanimlar-page #gorev-tipleri-section .settings-table tbody td:nth-child(3)::before { content: 'Renk:' !important; } .genel-tanimlar-page #gorev-tipleri-section .settings-table tbody td:nth-child(4)::before { content: 'Durum:' !important; } .genel-tanimlar-page #gorev-tipleri-section .settings-table tbody td:nth-child(5)::before { content: 'İşlemler:' !important; } /* Genel Tanımlar - Meslekler Tablosu (4 sütun) */ .genel-tanimlar-page #meslekler-section .settings-table tbody td:nth-child(1)::before { content: 'Meslek Adı:' !important; } .genel-tanimlar-page #meslekler-section .settings-table tbody td:nth-child(2)::before { content: 'Açıklama:' !important; } .genel-tanimlar-page #meslekler-section .settings-table tbody td:nth-child(3)::before { content: 'Durum:' !important; } .genel-tanimlar-page #meslekler-section .settings-table tbody td:nth-child(4)::before { content: 'İşlemler:' !important; } /* Genel Tanımlar - Bölümler Tablosu (4 sütun) */ .genel-tanimlar-page #bolumler-section .settings-table tbody td:nth-child(1)::before { content: 'Bölüm Adı:' !important; } .genel-tanimlar-page #bolumler-section .settings-table tbody td:nth-child(2)::before { content: 'Açıklama:' !important; } .genel-tanimlar-page #bolumler-section .settings-table tbody td:nth-child(3)::before { content: 'Durum:' !important; } .genel-tanimlar-page #bolumler-section .settings-table tbody td:nth-child(4)::before { content: 'İşlemler:' !important; } /* Genel Tanımlar - Odalar Tablosu (5 sütun) */ .genel-tanimlar-page #odalar-section .settings-table tbody td:nth-child(1)::before { content: 'Oda Adı:' !important; } .genel-tanimlar-page #odalar-section .settings-table tbody td:nth-child(2)::before { content: 'Bölüm:' !important; } .genel-tanimlar-page #odalar-section .settings-table tbody td:nth-child(3)::before { content: 'Kapasite:' !important; } .genel-tanimlar-page #odalar-section .settings-table tbody td:nth-child(4)::before { content: 'Durum:' !important; } .genel-tanimlar-page #odalar-section .settings-table tbody td:nth-child(5)::before { content: 'İşlemler:' !important; } /* Genel Tanımlar - Birimler Tablosu (5 sütun) */ .genel-tanimlar-page #birimler-section .settings-table tbody td:nth-child(1)::before { content: 'Birim Adı:' !important; } .genel-tanimlar-page #birimler-section .settings-table tbody td:nth-child(2)::before { content: 'Kısaltma:' !important; } .genel-tanimlar-page #birimler-section .settings-table tbody td:nth-child(3)::before { content: 'Tip:' !important; } .genel-tanimlar-page #birimler-section .settings-table tbody td:nth-child(4)::before { content: 'Durum:' !important; } .genel-tanimlar-page #birimler-section .settings-table tbody td:nth-child(5)::before { content: 'İşlemler:' !important; } .genel-tanimlar-page .settings-table tbody td:last-child, .genel-tanimlar-page .settings-table tbody td[data-action="true"] { width: 100% !important; align-items: flex-start !important; flex-direction: column !important; gap: 0.5rem !important; } .genel-tanimlar-page .settings-table tbody td:last-child::before, .genel-tanimlar-page .settings-table tbody td[data-action="true"]::before { width: 100% !important; margin-bottom: 0.25rem !important; margin-right: 0 !important; text-align: left !important; } .genel-tanimlar-page .settings-table tbody td:last-child .table-actions { width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0.5rem !important; flex: 1 1 100% !important; } /* Action butonları için düzeltmeler */ .genel-tanimlar-page .settings-table .action-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border-radius: 8px !important; } .genel-tanimlar-page .settings-table .action-btn i { font-size: 14px !important; } /* İçerik alanlarının genişlik sorununu düzelt */ .genel-tanimlar-page .settings-table tbody td > * { /* flex: 1 1 auto !important; */ min-width: 0 !important; max-width: 100% !important; overflow-wrap: break-word !important; word-wrap: break-word !important; box-sizing: border-box !important; justify-content: flex-end !important; } .genel-tanimlar-page .settings-table tbody td::before { flex: 0 0 auto !important; } /* Tablo container genişlik düzeltmesi */ .genel-tanimlar-page .table-container { width: 100% !important; overflow-x: visible !important; overflow-y: visible !important; } .genel-tanimlar-page .settings-table { width: 100% !important; min-width: 0 !important; table-layout: auto !important; } .ayarlar-page .main-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* Ayarlar sayfası - Settings container responsive */ .ayarlar-page .settings-container { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; } .ayarlar-page .invoice-actions { width: 100% !important; } .ayarlar-page .invoice-details { align-items: center; justify-content: space-between; width: 100%; } .ayarlar-page .settings-sidebar { width: 100% !important; max-width: 100% !important; order: 2 !important; } .ayarlar-page .settings-content { width: 100% !important; max-width: 100% !important; order: 1 !important; } .ayarlar-page .settings-nav { width: 100% !important; } .ayarlar-page .settings-nav ul { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } .ayarlar-page .settings-nav-link { width: 100% !important; justify-content: flex-start !important; } .ayarlar-page .section-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; } .ayarlar-page .section-header .btn-primary { width: 100% !important; } /* Ayarlar sayfası - Tablo responsive (kart görünümüne çevir) */ .ayarlar-page .table-container, .ayarlar-page .users-table-container, .ayarlar-page .permissions-table-container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .ayarlar-page .users-table, .ayarlar-page .permissions-table, .ayarlar-page .data-table { display: block !important; } .ayarlar-page .users-table thead, .ayarlar-page .permissions-table thead, .ayarlar-page .data-table thead { display: none !important; } .ayarlar-page .users-table tbody, .ayarlar-page .permissions-table tbody, .ayarlar-page .data-table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .ayarlar-page .users-table tbody tr, .ayarlar-page .permissions-table tbody tr, .ayarlar-page .data-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 10px !important; margin: 0 !important; } .ayarlar-page .invoice-filters .form-row .form-group { width: 100%; } .ayarlar-page .invoice-item { flex-direction: column; gap: 10px; align-items: flex-start; } .ayarlar-page .plan-header { flex-direction: column; } .ayarlar-page .invoice-info { width: 100%; } .ayarlar-page .modal-body p { flex-direction: column; } #staff-hours-section .day-schedule { grid-template-columns: 1fr; } .ayarlar-page #staff-hours-section .time-slot { /* grid-template-columns: 1fr 1fr !important; */ height: 100%; margin: 0 !important; } .ayarlar-page .invoice-number { justify-content: space-between; width: 100%; } .ayarlar-page.day-schedule { grid-template-columns: 1fr; } .ayarlar-page .settings-section .form-row .form-group { margin-bottom: 0 !important; } .working-hours-toggle .toggle-slider::before { left: 4px; } .ayarlar-page .users-table tbody td, .ayarlar-page .permissions-table tbody td, .ayarlar-page .data-table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 !important; border: none !important; gap: 0.5rem !important; min-width: 100% !important; } .ayarlar-page .users-table tbody td::before, .ayarlar-page .permissions-table tbody td::before, .ayarlar-page .data-table tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; width: fit-content !important; margin: 0 !important; } .ayarlar-page .users-table tbody td:first-child::before { display: none;} .ayarlar-page .users-table tbody td:nth-child(2)::before { content: 'Rol:' !important; } .ayarlar-page .users-table tbody td:last-child::before { content: 'İşlemler:' !important; } .ayarlar-page .permissions-table tbody td:first-child::before { content: 'Sayfa/Modül:' !important; } .ayarlar-page .permissions-table tbody td:last-child::before { content: 'İşlemler:' !important; } .ayarlar-page .data-table tbody td:first-child::before { content: 'Kullanıcı:' !important; } .ayarlar-page .data-table tbody td:nth-child(2)::before { content: 'E-posta:' !important; } .ayarlar-page .data-table tbody td:last-child::before { content: 'İşlemler:' !important; } .ayarlar-page .users-table tbody td:last-child, .ayarlar-page .permissions-table tbody td:last-child, .ayarlar-page .data-table tbody td:last-child { width: 100% !important; align-items: center !important; } .ayarlar-page .users-table tbody td:last-child .table-actions, .ayarlar-page .permissions-table tbody td:last-child .table-actions, .ayarlar-page .data-table tbody td:last-child .table-actions { width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0.5rem !important; } .onam-sistemi-page #pendingTab .consent-actions-right { flex-direction: row !important; } /* Mobil görünümde page-header sticky olmalı - Daha basit ve doğal davranış */ .page-header { position: sticky !important; top: 0 !important; z-index: 90 !important; background-color: var(--kart-arka-plan) !important; border-bottom: 1px solid var(--kenarlik-ana) !important; } /* Hasta-sahipler-page için özel kural - static kalmalı */ .hasta-sahipler-page .page-header { position: static !important; } .todo-sidebar { position: static !important; } .raporlar-page .reports-sidebar { position: static !important; } .raporlar-page .report-meta { align-items: center !important; } .raporlar-page .report-summary { padding: 16px !important; } .ayarlar-page .settings-sidebar { position: static !important; } .genel-tanimlar-page .settings-sidebar { position: static !important; } /* Genel settings-sidebar için de static yap */ .settings-sidebar { position: static !important; } .documents-table thead { position: static !important; } .table thead, .table th { position: static !important; } .sales-summary-section { position: static !important; } /* Stat-change boş alanları gizle */ .stat-change:empty { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Stat-change içinde sadece "-" veya boşluk varsa gizle */ .stat-card .stat-change { min-height: 0 !important; } .stat-card .stat-change:empty { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Stat-change içinde sadece "-" içeren span varsa gizle */ .stat-change:has(span:only-child:empty), .stat-change:has(span:only-child:contains("-")) { display: none !important; } /* Stat-change içinde sadece boş span varsa gizle (daha güvenli yöntem) */ .stat-change span:only-child { min-height: 0 !important; } .stat-change:has(> span:only-child:empty) { display: none !important; } .onam-sistemi-page .template-name { width: fit-content; } /* Hamburger menü mobil görünümde görünür olmalı */ .onam-sistemi-page .mobile-menu-btn.d-none-desktop { display: flex !important; } .onam-sistemi-page .pending-consents-list .consent-status { margin: 0; } .onam-sistemi-page #viewTemplateModal .template-preview { padding: 12px !important; } /* Faturalandırma sayfası - Invoice item form row */ .invoice-item .form-row { display: flex !important; flex-direction: column !important; gap: 1rem !important; width: 100% !important; } .invoice-item .form-row .form-group { width: 100% !important; max-width: 100% !important; } /* Faturalandırma sayfası - Tab container */ .faturalama-page .invoice-table-container { width: 100% !important; max-width: 100% !important; overflow-x: visible !important; } .faturalama-page .invoice-item .form-row .form-group { margin: 0 !important; } /* Faturalandırma sayfası - Desktop tablosunu mobilde kart formatına çevir */ .faturalama-page .invoice-table-container .invoice-table.d-none-mobile { display: block !important; } .faturalama-page .pending-invoices-list { padding: 0 !important; } /* Faturalandırma sayfası - Mobil kart görünümü */ .faturalama-page .invoice-table-container .table-mobile-cards.d-none-desktop { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 0 !important; } /* Faturalandırma sayfası - Desktop tablosunu mobilde kart formatına çevir */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile { display: block !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile thead { display: none !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody tr, .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody tr.invoice-row { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; /* gap: 0.75rem !important; */ } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 0.5rem 0 !important; border: none !important; gap: 0.5rem !important; width: 100% !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; text-align: center !important; width: 100% !important; margin: 0 !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td > * { width: fit-content !important; display: flex !important; justify-content: center !important; align-items: center !important; } /* Faturalandırma sayfası - İlk sütun (checkbox) gizle */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:first-child { display: none !important; } /* Faturalandırma sayfası - Fatura No sütunu */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(2)::before { content: 'Fatura No:' !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(2) .invoice-number { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; justify-content: center !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(2) .invoice-number .invoice-code { font-weight: 600 !important; font-size: 0.95rem !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(2) .invoice-number .invoice-date-short { font-size: 0.8rem !important; color: var(--metin-ikincil) !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(2) .invoice-number .einvoice-badge { margin: 0 !important; } /* Faturalandırma sayfası - Hasta/Sahip sütunu */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(3)::before { content: 'Hasta/Sahip:' !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(3) .patient-billing-info { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; width: 100% !important; justify-content: center !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(3) .patient-avatar { width: 40px !important; height: 40px !important; flex-shrink: 0 !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(3) .billing-details { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; flex: 1 !important; align-items: center !important; justify-content: center !important; width: 100% !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(3) .billing-details h4 { font-size: 0.95rem !important; font-weight: 600 !important; margin: 0 !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(3) .billing-details p { font-size: 0.8rem !important; margin: 0 !important; color: var(--metin-ikincil) !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(3) .billing-details .phone { font-size: 0.75rem !important; color: var(--metin-ikincil) !important; } /* Faturalandırma sayfası - Tarih sütunu */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(4)::before { content: 'Tarih:' !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(4) > * { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; justify-content: center !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(4) .invoice-date { font-size: 0.9rem !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(4) .invoice-time { font-size: 0.8rem !important; color: var(--metin-ikincil) !important; background: var(--arka-plan-ikincil) !important; padding: 0.25rem 0.5rem !important; border-radius: 4px !important; width: fit-content !important; } /* Faturalandırma sayfası - Hizmetler sütunu */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(5)::before { content: 'Hizmetler:' !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(5) .services-summary { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; width: 100% !important; align-items: center !important; justify-content: center !important; width: fit-content !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(5) .service-item { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0 !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(5) .service-count { align-self: flex-start !important; } /* Faturalandırma sayfası - Tutar sütunu */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(6)::before { content: 'Tutar:' !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(6) .invoice-amount { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.25rem !important; width: 100% !important; } .faturalama-page .invoice-number { flex-direction: column !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(6) .amount { font-size: 1.1rem !important; font-weight: 600 !important; color: var(--durum-basarili) !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(6) .amount-detail { font-size: 0.75rem !important; color: var(--metin-ikincil) !important; background: var(--durum-basarili-acik) !important; padding: 0.25rem 0.5rem !important; border-radius: 4px !important; } /* Faturalandırma sayfası - Durum sütunu */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(7)::before { content: 'Durum:' !important; } /* Faturalandırma sayfası - Ödeme sütunu */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(8)::before { content: 'Ödeme:' !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(8) .payment-info { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.25rem !important; width: 100% !important; justify-content: center !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(8) .payment-method { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; font-size: 0.85rem !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:nth-child(8) .payment-date { font-size: 0.75rem !important; color: var(--metin-ikincil) !important; } /* Faturalandırma sayfası - İşlemler sütunu */ .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:last-child::before { content: 'İşlemler:' !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:last-child { width: 100% !important; align-items: center !important; flex-direction: column !important; justify-content: center !important; } .faturalama-page .invoice-table-container.table-view .invoice-table.d-none-mobile tbody td:last-child .action-buttons { width: 100% !important; display: flex !important; /* flex-direction: column !important; */ align-items: center !important; justify-content: center !important; gap: 0.5rem !important; } /* Faturalandırma sayfası - Tahsil Edilen Faturalar sekmesi (paid-invoices-table) */ .faturalama-page .paid-invoices-table .simple-table { display: block !important; } .faturalama-page .paid-invoices-table .simple-table thead { display: none !important; } .faturalama-page .paid-invoices-table .simple-table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .faturalama-page .paid-invoices-table .simple-table tbody tr { display: flex !important; flex-direction: column !important; padding: 1rem !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 12px !important; background: var(--zemin-ana) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; gap: 0.75rem !important; } .faturalama-page .paid-invoices-table .simple-table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; padding: 0 !important; border: none !important; gap: 0.5rem !important; } .faturalama-page .paid-invoices-table .simple-table tbody td::before { content: attr(data-label) !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; font-size: 0.8rem !important; flex-shrink: 0 !important; /* min-width: 100px !important; */ } .faturalama-page .paid-invoices-table .simple-table tbody td:nth-child(1)::before { content: 'Fatura No:' !important; } .faturalama-page .paid-invoices-table .simple-table tbody td:nth-child(2)::before { content: 'Hasta/Sahip:' !important; } .faturalama-page .paid-invoices-table .simple-table tbody td:nth-child(3)::before { content: 'Ödeme Tarihi:' !important; } .faturalama-page .paid-invoices-table .simple-table tbody td:nth-child(4)::before { content: 'Tutar:' !important; } .faturalama-page .paid-invoices-table .simple-table tbody td:nth-child(5)::before { content: 'Ödeme Yöntemi:' !important; } .faturalama-page .paid-invoices-table .simple-table tbody td:nth-child(5) { /* justify-content: flex-end !important; */ flex-wrap: wrap !important; } .faturalama-page .paid-invoices-table .simple-table tbody td:nth-child(5) i { margin-right: 0.5rem !important; flex-shrink: 0 !important; display: none; } .faturalama-page .paid-invoices-table .simple-table tbody td:nth-child(5) > *:not(i) { display: inline !important; } .faturalama-page .paid-invoices-table .simple-table tbody td:nth-child(6)::before { content: 'İşlemler:' !important; } .faturalama-page .paid-invoices-table .simple-table tbody td:last-child { width: 100% !important; align-items: center !important; } #invoiceDetailModal .invoice-detail-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; padding: 1rem !important; } #invoiceDetailModal .modal-footer { flex-direction: column !important; } #invoiceDetailModal .invoice-header-left { width: 100% !important; } #invoiceDetailModal .invoice-header-left p { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; white-space: normal !important; } #invoiceDetailModal .invoice-header-left p.invoice-date { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; flex-wrap: wrap !important; } #invoiceDetailModal #detailInvoiceDate { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; white-space: normal !important; line-height: 1.5 !important; } #invoiceDetailModal .invoice-detail-section { margin-bottom: 20px !important; padding: 1rem !important; } #invoiceDetailModal .invoice-header-right { width: 100% !important; margin-top: 1rem !important; } #invoiceDetailModal .invoice-amount-large { align-items: flex-start !important; } #invoiceDetailModal { flex-direction: column !important; } .faturalama-page .paid-invoices-table .simple-table tbody td:last-child .action-buttons { width: 100% !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 0.5rem !important; } .faturalama-page .invoice-table-container.cards-view .table-mobile-cards { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 0 !important; grid-template-columns: 1fr !important; } /* Faturalandırma sayfası - Kart stilleri */ .faturalama-page .invoice-table-container .table-mobile-cards .table-card, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .table-card { padding: 1rem !important; border-radius: 12px !important; gap: 1rem !important; } .faturalama-page .invoice-table-container .table-mobile-cards .table-card-header, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .table-card-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; padding-bottom: 0.75rem !important; } .faturalama-page .invoice-table-container .table-mobile-cards .table-card-body, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .table-card-body { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; grid-template-columns: 1fr !important; } .faturalama-page .invoice-table-container .table-mobile-cards .table-card-row, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .table-card-row { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 0.5rem !important; padding: 0.5rem 0 !important; } .faturalama-page .invoice-table-container .table-mobile-cards .table-card-label, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .table-card-label { font-size: 0.8rem !important; font-weight: 500 !important; color: var(--metin-ikincil) !important; flex-shrink: 0 !important; } .faturalama-page .invoice-table-container .table-mobile-cards .table-card-value, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .table-card-value { font-size: 0.9rem !important; font-weight: 600 !important; text-align: right !important; flex: 1 !important; } /* Faturalandırma sayfası - Hasta bilgileri */ .faturalama-page .invoice-table-container .table-mobile-cards .patient-billing-info, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .patient-billing-info { width: 100% !important; justify-content: flex-start !important; } .faturalama-page .invoice-table-container .table-mobile-cards .patient-avatar, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .patient-avatar { width: 48px !important; height: 48px !important; } .faturalama-page .invoice-table-container .table-mobile-cards .patient-avatar img, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .patient-avatar img { width: 32px !important; height: 32px !important; } /* Faturalandırma sayfası - İşlem butonları */ .faturalama-page .invoice-table-container .table-mobile-cards .table-card-actions, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .table-card-actions { width: 100% !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 0.5rem !important; } /* Faturalandırma sayfası - Tutar bilgisi */ .faturalama-page .invoice-table-container .table-mobile-cards .invoice-amount, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .invoice-amount { padding: 0.75rem !important; border-radius: 8px !important; } .faturalama-page .invoice-table-container .table-mobile-cards .amount, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .amount { font-size: 1.25rem !important; } /* Faturalandırma sayfası - Tab yapısı */ .faturalama-page .tab-buttons { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; } .faturalama-page .tab-btn { flex-shrink: 0 !important; padding: 0.75rem 1rem !important; justify-content: space-between; flex-direction: row-reverse; } .faturalama-page .tab-header { flex-direction: column !important; gap: 1rem !important; } /* Faturalandırma sayfası - Hizmetler listesi */ .faturalama-page .invoice-table-container .table-mobile-cards .services-summary, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .services-summary { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } .faturalama-page .invoice-table-container .table-mobile-cards .service-item, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .service-item { padding: 0.5rem 0.75rem !important; font-size: 0.85rem !important; } /* Faturalandırma sayfası - Durum badge */ .faturalama-page .invoice-table-container .table-mobile-cards .status-badge, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .status-badge { font-size: 0.75rem !important; padding: 0.35rem 0.65rem !important; } /* Faturalandırma sayfası - E-Fatura badge */ .faturalama-page .invoice-table-container .table-mobile-cards .einvoice-badge, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .einvoice-badge { font-size: 0.7rem !important; padding: 0.25rem 0.5rem !important; } /* Faturalandırma sayfası - Bulk actions bar */ .faturalama-page .bulk-actions-bar { margin: 0 !important; border-radius: 0 !important; } .faturalama-page .bulk-actions-content { flex-direction: column !important; gap: 1rem !important; padding: 1rem !important; } .faturalama-page .bulk-actions-left { width: 100% !important; } .faturalama-page .bulk-actions-right { width: 100% !important; flex-direction: column !important; gap: 0.5rem !important; } .faturalama-page .bulk-actions-right .btn-small { width: 100% !important; justify-content: center !important; } /* Faturalandırma sayfası - Search box */ .faturalama-page .tab-actions .search-box { width: 100% !important; max-width: 100% !important; } /* Faturalandırma sayfası - Invoice info */ .faturalama-page .invoice-table-container .table-mobile-cards .invoice-info, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .invoice-info { width: 100% !important; } .faturalama-page .invoice-table-container .table-mobile-cards .invoice-details, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .invoice-details { flex: 1 !important; } .faturalama-page .invoice-table-container .table-mobile-cards .invoice-details h4, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .invoice-details h4 { font-size: 1rem !important; margin-bottom: 0.25rem !important; } .faturalama-page .invoice-table-container .table-mobile-cards .invoice-details p, .faturalama-page .invoice-table-container.cards-view .table-mobile-cards .invoice-details p { font-size: 0.85rem !important; margin: 0 !important; } .faturalama-page .tab-actions { width: 100%; } .faturalama-page .einvoice-settings .form-row { grid-template-columns: 1fr; gap: 16px; } } /* .faturalama-page .tab-actions { width: 100%; } */ .faturalama-page .paid-invoices-summary { padding: 0; gap: 8px; } .faturalama-page .paid-invoices-table { padding: 0; } /* #endregion */ /* #endregion */ /* ================================================================================================ */ /* ================================ 768px BREAKPOINT ============================================= */ /* ================================================================================================ */ @media (max-width: 768px) { .modal-close { background: var(--arka-plan-ucuncu) !important; } } /* ================================================================================================ */ /* ================================ RESPONSIVE TASARIM SONU ====================================== */ /* ================================================================================================ */ /* #region Hasta Sahipleri Sayfası Stilleri - Owners Page Styles */ .hasta-sahipler-page .form-select { width: fit-content !important; } .hasta-sahipler-page .owners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-top: 24px; } .hasta-sahipler-page .owner-card { background: var(--arka-plan-ana); border-radius: var(--radius-3xl); padding: 24px; border: 1px solid var(--kenarlik-ana); box-shadow: 0 4px 12px var(--golge-hover); transition: all 0.3s ease; position: relative; } .hasta-sahipler-page .owner-card:hover { transform: translateY(-4px); box-shadow: 0 12px 35px var(--golge-ana); border-color: var(--kenarlik-ana); } .hasta-sahipler-page .owner-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .hasta-sahipler-page .owner-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-koyu) 100%); display: flex; align-items: center; justify-content: center; color: var(--arka-plan-ana); font-size: 24px; flex-shrink: 0; } .hasta-sahipler-page .owner-balance-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; } .hasta-sahipler-page .owner-balance-badge.positive { background: var(--durum-basarili-acik); color: var(--durum-basarili); } .hasta-sahipler-page .owner-balance-badge.negative { background: var(--durum-hata-acik); color: var(--durum-hata); } .hasta-sahipler-page .owner-balance-badge.neutral { background: var(--arka-plan-ikincil); color: var(--metin-ikincil); } .hasta-sahipler-page .owner-info h3 { font-size: 20px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 12px; } .hasta-sahipler-page .owner-contact { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .hasta-sahipler-page .contact-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--metin-ikincil); } .hasta-sahipler-page .contact-item i { width: 16px; color: var(--ana-mavi); } .hasta-sahipler-page .owner-stats { display: flex; gap: 16px; margin-bottom: 16px; padding: 12px 0; border-top: 1px solid var(--kenarlik-ana); border-bottom: 1px solid var(--kenarlik-ana); } .hasta-sahipler-page .stat-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--metin-ikincil); } .hasta-sahipler-page .stat-item.warning { color: var(--durum-uyari); } .hasta-sahipler-page .stat-item i { color: var(--ana-mavi); } .hasta-sahipler-page .stat-item.warning i { color: var(--durum-uyari); } .hasta-sahipler-page .owner-pets-preview { margin-bottom: 16px; } .hasta-sahipler-page .pets-header { font-size: 13px; font-weight: 600; color: var(--metin-ikincil); margin-bottom: 8px; } .hasta-sahipler-page .pets-list { display: flex; flex-wrap: wrap; gap: 8px; } .hasta-sahipler-page .pet-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--arka-plan-ikincil); border-radius: var(--radius-md); font-size: 12px; color: var(--metin-ana); } .hasta-sahipler-page .pet-badge img { width: 16px; height: 16px; } .hasta-sahipler-page .pet-badge.more { background: var(--ana-mavi-acik); color: var(--ana-mavi); font-weight: 600; } /* Owner Table Styles - Hastalar sayfası gibi */ .hasta-sahipler-page .owners-table-container, .hasta-sahipler-page .patients-table-container { background: var(--arka-plan-ana); border-radius: 16px; border: 1px solid var(--kenarlik-ana); overflow: hidden; margin-top: 24px; } .hasta-sahipler-page .owners-table, .hasta-sahipler-page .patients-table { width: 100%; border-collapse: collapse; font-size: 14px; } .hasta-sahipler-page .owners-table thead, .hasta-sahipler-page .patients-table thead { background: var(--arka-plan-ikincil); border-bottom: 2px solid var(--kenarlik-ana); } .hasta-sahipler-page .owners-table th, .hasta-sahipler-page .patients-table th { padding: 16px 12px; text-align: left; font-weight: 600; color: var(--metin-ana); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border-right: 1px solid var(--kenarlik-ana); } .hasta-sahipler-page .owners-table th:last-child, .hasta-sahipler-page .patients-table th:last-child { border-right: none; text-align: center; } .hasta-sahipler-page .owners-table tbody tr, .hasta-sahipler-page .patients-table tbody tr { border-bottom: 1px solid var(--kenarlik-ana); transition: all 0.2s ease; } .hasta-sahipler-page .owners-table tbody tr:hover, .hasta-sahipler-page .patients-table tbody tr:hover { background: var(--arka-plan-ikincil); } .hasta-sahipler-page .owners-table tbody tr:last-child, .hasta-sahipler-page .patients-table tbody tr:last-child { border-bottom: none; } .hasta-sahipler-page .owners-table td, .hasta-sahipler-page .patients-table td { padding: 16px 12px; vertical-align: middle; border-right: 1px solid var(--kenarlik-ana); } .hasta-sahipler-page .owners-table td:last-child, .hasta-sahipler-page .patients-table td:last-child { border-right: none; } /* Hasta Sahipleri Tablo İşlemler Butonları - Hastalar sayfası gibi */ .hasta-sahipler-page .table-actions { display: flex; gap: 8px; align-items: center; justify-content: center; } .hasta-sahipler-page .owner-name-cell { display: flex; align-items: center; gap: 12px; } .hasta-sahipler-page .owner-avatar-small { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--ana-mavi) 0%, var(--ana-mavi-koyu) 100%); display: flex; align-items: center; justify-content: center; color: var(--metin-beyaz); font-size: 16px; flex-shrink: 0; } .hasta-sahipler-page .patient-table-details h4 { font-weight: 600; color: var(--metin-ana); margin: 0; font-size: 15px; } .hasta-sahipler-page .contact-cell { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .hasta-sahipler-page .contact-cell div { display: flex; align-items: center; gap: 6px; color: var(--metin-ikincil); } .hasta-sahipler-page .pet-count-badge { display: inline-block; padding: 4px 10px; background: var(--ana-mavi-acik); color: var(--ana-mavi); border-radius: var(--radius-md); font-weight: 600; font-size: 13px; } /* Pet listesi tablo içinde */ .hasta-sahipler-page .pets-list-table { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hasta-sahipler-page .pet-badge-table { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--arka-plan-ikincil); border-radius: var(--radius-md); font-size: 12px; color: var(--metin-ana); border: 1px solid var(--kenarlik-ana); } .hasta-sahipler-page .pet-badge-table img { width: 18px; height: 18px; flex-shrink: 0; } .hasta-sahipler-page .pet-badge-table span { font-weight: 500; } .hasta-sahipler-page .no-pets { color: var(--metin-ikincil); font-size: 13px; font-style: italic; } .hasta-sahipler-page .balance-badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-md); font-weight: 600; font-size: 13px; } .hasta-sahipler-page .balance-badge.positive { background: var(--durum-basarili-acik); color: var(--durum-basarili); } .hasta-sahipler-page .balance-badge.negative { background: var(--durum-hata-acik); color: var(--durum-hata); } .hasta-sahipler-page .balance-badge.neutral { background: var(--arka-plan-ikincil); color: var(--metin-ikincil); } .hasta-sahipler-page .invoice-info { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; } .hasta-sahipler-page .invoice-info .unpaid { color: var(--durum-uyari); font-weight: 600; } /* No Result Message */ #ownersTableNoResult { display: flex; } /* Owner Detail Modal Styles */ .owner-detail-content { display: flex; flex-direction: column; gap: 24px; } /* ownerDetailModal içindeki tüm alanlardan box-shadow kaldır */ #ownerDetailModal .owner-detail-content *, #ownerDetailModal .owner-detail-content *:hover { box-shadow: none !important; } .owner-detail-content .detail-section { background: var(--arka-plan-ikincil); padding: 20px; border-radius: var(--radius-xl); border: 1px solid var(--kenarlik-ana); box-shadow: none !important; } .owner-detail-content .detail-section h4 { font-size: 18px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .owner-detail-content .detail-section h4 i { color: var(--ana-mavi); } .owner-detail-content .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; box-shadow: none !important; } .owner-detail-content .detail-item { display: flex; flex-direction: column; gap: 4px; box-shadow: none !important; } .owner-detail-content .detail-item.full-width { grid-column: 1 / -1; } .owner-detail-content .detail-item label { font-size: 13px; font-weight: 600; color: var(--metin-ikincil); } .owner-detail-content .detail-item span { font-size: 15px; color: var(--metin-ana); } .owner-detail-content .pets-detail-list { display: flex; flex-direction: column; gap: 12px; } .owner-detail-content .pet-detail-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--arka-plan-ana); border-radius: var(--radius-md); border: 1px solid var(--kenarlik-ana); cursor: pointer; transition: all 0.2s ease; box-shadow: none !important; } .owner-detail-content .pet-detail-item:hover { background: var(--arka-plan-ikincil); border-color: var(--ana-mavi); transform: translateX(4px); box-shadow: none !important; } .owner-detail-content .pet-detail-item .pet-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .owner-detail-content .pet-detail-item .pet-avatar img { width: 100%; height: 100%; object-fit: contain; max-width: 40px; max-height: 40px; } .owner-detail-content .pet-detail-item .pet-info { flex: 1; } .owner-detail-content .pet-detail-item .pet-info h5 { font-size: 16px; font-weight: 600; color: var(--baslik-ana); margin-bottom: 4px; } .owner-detail-content .pet-detail-item .pet-info p { font-size: 13px; color: var(--metin-ikincil); } .owner-detail-content .pet-detail-item i { color: var(--metin-ikincil); } /* Responsive */ @media (max-width: 768px) { .hasta-sahipler-page .owners-grid { grid-template-columns: 1fr; } .hasta-sahipler-page .owner-stats { flex-wrap: wrap; } .owner-detail-content .detail-grid { grid-template-columns: 1fr; } .hasta-sahipler-page .owners-table-container { overflow-x: scroll; } } /* Dark Theme */ /* [data-theme="dark"] .hasta-sahipler-page .owner-card { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ikincil); } [data-theme="dark"] .hasta-sahipler-page .owner-card:hover { border-color: var(--kenarlik-odak); } [data-theme="dark"] .hasta-sahipler-page .owners-table { background: var(--arka-plan-ikincil); } [data-theme="dark"] .hasta-sahipler-page .owners-table thead { background: var(--arka-plan-ucuncu); } [data-theme="dark"] .owner-detail-content .detail-section { background: var(--arka-plan-ucuncu); border-color: var(--kenarlik-ikincil); } [data-theme="dark"] .owner-detail-content .pet-detail-item { background: var(--arka-plan-ikincil); border-color: var(--kenarlik-ikincil); } [data-theme="dark"] .owner-detail-content .pet-detail-item:hover { background: var(--arka-plan-ucuncu); border-color: var(--ana-mavi); } */ /* #endregion */ /* ========================================== STOK SAYFASI MOBİL ============================================= */ @media (max-width: 480px) { .stok-page .main-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; } .stok-page .stats-section { padding: 0 !important; margin: 0 0 1rem 0 !important; width: 100% !important; max-width: 100% !important; } .stok-page .stats-grid { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Stok sayfası - Tab butonları responsive */ .stok-page .stock-tabs { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; padding: 12px !important; } .stok-page .tab-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; margin-bottom: 1rem !important; } .stok-page .tab-actions { width: 100% !important; flex-direction: column !important; gap: 0.75rem !important; } .stok-page .tab-actions .search-box { width: 100% !important; max-width: 100% !important; } .stok-page .tab-actions .btn { width: 100% !important; } /* Stok sayfası - Tablo responsive (kart görünümüne çevir) */ .stok-page .table-container, .stok-page .stock-table-container { padding: 0 !important; margin: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; height: auto !important; min-height: auto !important; max-height: none !important; } .stok-page .stock-table-container .table-mobile-cards { margin-bottom: 0 !important; padding-bottom: 0 !important; } .stok-page .stock-table-container .table-mobile-cards .table-card:last-child { margin-bottom: 0 !important; } .stok-page .stock-table-container > *, .stok-page .table-container > * { margin-bottom: 0 !important; } .stok-page .stock-table-container > *:last-child, .stok-page .table-container > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } .stok-page .stock-table, .stok-page table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; padding-bottom: 0 !important; } .stok-page .stock-table thead, .stok-page table thead { display: none !important; margin: 0 !important; padding: 0 !important; } .stok-page .stock-table tbody, .stok-page table tbody { margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; padding-bottom: 0 !important; display: block !important; } .stok-page .stock-table tbody tr, .stok-page table tbody tr { display: block !important; width: 100% !important; margin-bottom: 1rem !important; padding: 1rem !important; background: var(--kart-arka-plan) !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 2px 8px var(--golge-hover) !important; } .stok-page .stock-table tbody tr:last-child, .stok-page table tbody tr:last-child { margin-bottom: 0 !important; } .stok-page .stock-table-container::after, .stok-page .table-container::after { display: none !important; content: none !important; } .stok-page .stock-table tbody td, .stok-page table tbody td { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0.5rem 0 !important; border: none !important; text-align: left !important; min-height: 2.5rem !important; } .stok-page .stock-table tbody td::before, .stok-page table tbody td::before { content: attr(data-label) !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-right: 1rem !important; width: fit-content !important; } /* Stok sayfası - Action bar */ .stok-page .action-bar, .stok-page .filter-bar { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .stok-page .action-bar .btn, .stok-page .filter-bar .btn { width: 100% !important; } .stok-page .critical-stock-card { padding: 12px !important; } /* Stok sayfası - Stock layout */ .stok-page .stock-layout { width: 100% !important; max-width: 100% !important; flex-direction: column !important; margin-bottom: 0 !important; } .stok-page .stock-layout > *:last-child { margin-bottom: 0 !important; } .stok-page .tab-content { margin-bottom: 0 !important; padding-bottom: 0 !important; } .stok-page .tab-content > *:last-child { margin-bottom: 0 !important; } /* Stok sayfası - Page header static */ .stok-page .page-header { position: static !important; } .stok-page #expiringTab { padding: 16px 0 !important; } .stok-page .critical-header { align-items: flex-start !important; flex-direction: column !important; gap: 10px !important; } } /* ========================================== HASTA SAHİPLERİ SAYFASI MOBİL ============================================= */ @media (max-width: 480px) { /* Hasta Sahipleri sayfası - Ortak alanlar */ .hasta-sahipler-page .main-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: hidden !important; height: auto !important; min-height: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .hasta-sahipler-page .app-layout, .hasta-sahipler-page .app-container { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: hidden !important; } .hasta-sahipler-page .stats-section { padding: 0 !important; margin: 0 0 1rem 0 !important; width: 100% !important; max-width: 100% !important; } .hasta-sahipler-page .stats-grid { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Hasta Sahipleri sayfası - Owners section */ .hasta-sahipler-page .owners-section { width: 100% !important; max-width: 100% !important; margin-top: 1rem !important; padding: 0 !important; } /* Hasta Sahipleri sayfası - Action bar responsive */ .hasta-sahipler-page .action-bar { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; align-items: stretch !important; } .hasta-sahipler-page .action-bar .action-left, .hasta-sahipler-page .action-bar .action-right { flex-direction: column !important; width: 100% !important; gap: 0.75rem !important; } .hasta-sahipler-page .action-bar .btn, .hasta-sahipler-page .action-bar .form-select, .hasta-sahipler-page .action-bar .search-box { width: 100% !important; max-width: 100% !important; } .hasta-sahipler-page .action-bar { margin-bottom: 1rem !important; } /* Hasta Sahipleri sayfası - Tablo responsive (kart görünümüne çevir) */ .hasta-sahipler-page .owners-table-container, .hasta-sahipler-page .patients-table-container { padding: 0 !important; margin: 1rem 0 0 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; border: none !important; border-radius: 0 !important; display: block !important; visibility: visible !important; } .hasta-sahipler-page .owners-table, .hasta-sahipler-page .patients-table { width: 100% !important; border-collapse: collapse !important; display: block !important; } .hasta-sahipler-page .owners-table thead, .hasta-sahipler-page .patients-table thead { display: none !important; } .hasta-sahipler-page .owners-table tbody, .hasta-sahipler-page .patients-table tbody { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .hasta-sahipler-page .owners-table tbody tr, .hasta-sahipler-page .patients-table tbody tr { display: block !important; width: 100% !important; margin-bottom: 0 !important; padding: 1rem !important; background: var(--kart-arka-plan) !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 2px 8px var(--golge-hover) !important; } .hasta-sahipler-page .owners-table tbody td, .hasta-sahipler-page .patients-table tbody td { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 0.5rem 0 !important; border: none !important; border-right: none !important; text-align: left !important; min-height: 2.5rem !important; width: 100% !important; } .hasta-sahipler-page .owners-table tbody td::before, .hasta-sahipler-page .patients-table tbody td::before { content: attr(data-label) !important; font-weight: 600 !important; color: var(--metin-ikincil) !important; margin-right: 1rem !important; width: fit-content !important; flex-shrink: 0 !important; } /* Hasta Sahipleri sayfası - Tablo sütun etiketleri */ .hasta-sahipler-page .owners-table tbody td:nth-child(1)::before { content: 'Sahip Adı:' !important; } .hasta-sahipler-page .owners-table tbody td:nth-child(2)::before { content: 'İletişim:' !important; } .hasta-sahipler-page .owners-table tbody td:nth-child(3)::before { content: 'Adres:' !important; } .hasta-sahipler-page .owners-table tbody td:nth-child(4)::before { content: 'Petler:' !important; } .hasta-sahipler-page .owners-table tbody td:nth-child(5)::before { content: 'Bakiye:' !important; } .hasta-sahipler-page .owners-table tbody td:nth-child(6)::before { content: 'Faturalar:' !important; } .hasta-sahipler-page .owners-table tbody td:nth-child(7)::before { content: 'Son Ziyaret:' !important; } .hasta-sahipler-page .owners-table tbody td:nth-child(8)::before { content: 'İşlemler:' !important; } /* Hasta Sahipleri sayfası - İşlemler sütunu */ .hasta-sahipler-page .owners-table tbody td:last-child, .hasta-sahipler-page .patients-table tbody td:last-child { width: 100% !important; min-width: 100% !important; max-width: 100% !important; justify-content: center !important; padding-top: 0.75rem !important; border-top: 1px solid var(--kenarlik-ana) !important; } .hasta-sahipler-page .owners-table tbody td:last-child .table-actions, .hasta-sahipler-page .patients-table tbody td:last-child .table-actions { width: 100% !important; justify-content: flex-end !important; } /* Hasta Sahipleri sayfası - Page header static */ .hasta-sahipler-page .page-header { position: static !important; } /* Hasta Sahipleri sayfası - Owner name cell responsive */ .hasta-sahipler-page .owner-name-cell { flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; } .hasta-sahipler-page .owner-avatar-small { width: 24px; height: 24px; font-size: 10px; border-radius: 8px; } /* Hasta Sahipleri sayfası - Contact cell responsive */ .hasta-sahipler-page .contact-cell { align-items: flex-start !important; } /* Hasta Sahipleri sayfası - Pets list responsive */ .hasta-sahipler-page .pets-list-table { flex-wrap: wrap !important; gap: 0.5rem !important; } } /* ========================================== GENEL TANIMLAR VE AYARLAR SAYFALARI MOBİL ============================================= */ @media (max-width: 768px) { /* Genel Tanımlar ve Ayarlar - Page Wrapper ve Content Wrapper */ .genel-tanimlar-page .page-wrapper, .ayarlar-page .page-wrapper { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; max-height: none !important; } .genel-tanimlar-page .content-wrapper, .ayarlar-page .content-wrapper { overflow-y: visible !important; overflow-x: hidden !important; height: auto !important; max-height: none !important; padding-bottom: 24px !important; } /* Genel Tanımlar ve Ayarlar - Container */ .genel-tanimlar-page .settings-container, .ayarlar-page .settings-container { display: flex !important; flex-direction: column !important; align-items: center !important; grid-template-columns: 1fr !important; gap: 16px !important; height: auto !important; overflow: visible !important; min-height: auto !important; } /* Sidebar - Mobilde üstte, yatay scroll */ .genel-tanimlar-page .settings-sidebar, .ayarlar-page .settings-sidebar { order: 1 !important; width: 100% !important; max-width: 100% !important; padding: 16px 0 !important; border-radius: 12px !important; position: sticky !important; top: 0 !important; z-index: 10 !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; background: var(--arka-plan-ana) !important; } /* Content - Mobilde altta */ .genel-tanimlar-page .settings-content, .ayarlar-page .settings-content { order: 2 !important; } /* Sidebar Nav - Yatay scroll */ .genel-tanimlar-page .settings-nav ul, .ayarlar-page .settings-nav ul { display: flex !important; flex-direction: row !important; gap: 8px !important; padding: 0 16px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; } /* Nav Link - Mobilde daha kompakt */ .genel-tanimlar-page .settings-nav-link, .ayarlar-page .settings-nav-link { white-space: nowrap !important; padding: 10px 16px !important; border-left: none !important; border-bottom: 3px solid transparent !important; border-radius: 8px !important; min-width: fit-content !important; flex-shrink: 0 !important; } .genel-tanimlar-page .settings-nav-link.active, .ayarlar-page .settings-nav-link.active { border-left: none !important; border-bottom-color: var(--ana-mavi) !important; } /* Content - Mobilde tam genişlik */ .genel-tanimlar-page .settings-content, .ayarlar-page .settings-content { width: 100% !important; padding-right: 0 !important; overflow-x: hidden !important; overflow-y: visible !important; } /* Section Header - Mobilde dikey */ .genel-tanimlar-page .section-header, .ayarlar-page .section-header { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; margin-bottom: 24px !important; } .genel-tanimlar-page .section-header h2, .ayarlar-page .section-header h2 { font-size: 20px !important; } /* Settings Card - Mobilde daha az padding */ .genel-tanimlar-page .settings-card, .ayarlar-page .settings-card { padding: 16px !important; margin-bottom: 16px !important; border-radius: 12px !important; } /* Table Container - Mobilde scroll */ .genel-tanimlar-page .table-container, .ayarlar-page .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin: 0 -16px !important; padding: 0 16px !important; } /* Table - Mobilde minimum genişlik */ .genel-tanimlar-page .settings-table, .ayarlar-page .settings-table { min-width: 600px !important; font-size: 13px !important; } .genel-tanimlar-page .settings-table th, .genel-tanimlar-page .settings-table td, .ayarlar-page .settings-table th, .ayarlar-page .settings-table td { padding: 12px 8px !important; } /* Form Row - Mobilde tek sütun */ .genel-tanimlar-page .form-row, .ayarlar-page .form-row { flex-direction: column !important; gap: 16px !important; } /* Profile Photo Section - Mobilde dikey */ .ayarlar-page .profile-photo-section { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 16px !important; } .ayarlar-page .photo-actions { flex-direction: column !important; width: 100% !important; } .ayarlar-page .photo-actions button { width: 100% !important; } /* Form Actions - Mobilde tam genişlik */ .genel-tanimlar-page .form-actions, .ayarlar-page .form-actions { width: 100% !important; } .genel-tanimlar-page .form-actions button, .ayarlar-page .form-actions button { width: 100% !important; } /* Section Header Button - Mobilde tam genişlik */ .genel-tanimlar-page .section-header .btn-primary, .ayarlar-page .section-header .btn-primary { width: 100% !important; } /* Çalışma Saatleri - Mobil Görünüm (768px) */ .working-hours-grid { gap: 16px !important; } .day-schedule { grid-template-columns: 1fr !important; gap: 16px !important; padding: 16px !important; } .day-schedule label { font-size: 14px !important; margin-bottom: 12px !important; } #staff-hours-section .time-slots { gap: 16px !important; } #staff-hours-section .time-slot { grid-template-columns: 1fr !important; gap: 12px !important; padding: 12px !important; background: var(--arka-plan-ana) !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 8px !important; } #staff-hours-section .slot-label { font-size: 13px !important; margin-bottom: 8px !important; } #staff-hours-section .time-inputs { flex-direction: column !important; gap: 8px !important; width: 100% !important; } #staff-hours-section .time-inputs input[type="time"] { width: 100% !important; max-width: 100% !important; } #staff-hours-section .time-slot .working-hours-toggle { width: 100% !important; justify-content: space-between !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* Klinik Çalışma Saatleri - Mobil Görünüm (768px) */ .working-hours-section .day-schedule { grid-template-columns: 1fr !important; gap: 16px !important; padding: 16px !important; } .working-hours-section .day-schedule label { font-size: 14px !important; margin-bottom: 12px !important; } .working-hours-section .time-inputs { flex-direction: column !important; gap: 8px !important; width: 100% !important; } .working-hours-section .time-inputs input[type="time"] { width: 100% !important; max-width: 100% !important; } .working-hours-section .time-inputs .working-hours-toggle { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; justify-content: space-between !important; margin-top: 8px !important; } .working-hours-section .working-hours-toggle { width: 100% !important; justify-content: space-between !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* Buton Düzeltmeleri - Mobil (768px) */ .genel-tanimlar-page .btn-primary, .genel-tanimlar-page .btn-secondary, .genel-tanimlar-page .btn-outline, .ayarlar-page .btn-primary, .ayarlar-page .btn-secondary, .ayarlar-page .btn-outline { width: 100% !important; padding: 12px 16px !important; font-size: 14px !important; white-space: normal !important; } .genel-tanimlar-page .section-header .btn-primary, .ayarlar-page .section-header .btn-primary { width: 100% !important; margin-top: 16px !important; } /* Notification Dropdown - Mobil (768px) - Profil menüsü gibi sağ üstte */ .notification-dropdown { position: fixed !important; top: 80px !important; right: 20px !important; left: auto !important; width: calc(100vw - 40px) !important; max-width: 400px !important; margin: 0 !important; transform: translateY(-10px) !important; } .notification-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } } @media (max-width: 480px) { /* Daha küçük ekranlar için ek düzenlemeler - 768px stillerini override eder */ /* Page Wrapper ve Content Wrapper - 480px için özel ayarlar */ .genel-tanimlar-page .page-wrapper, .ayarlar-page .page-wrapper { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; max-height: none !important; } .genel-tanimlar-page .content-wrapper, .ayarlar-page .content-wrapper { overflow-y: visible !important; overflow-x: hidden !important; height: auto !important; max-height: none !important; padding: 16px !important; padding-bottom: 24px !important; } /* Container - 480px için özel ayarlar */ .genel-tanimlar-page .settings-container, .ayarlar-page .settings-container { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 12px !important; height: auto !important; overflow: visible !important; min-height: auto !important; } /* Sidebar - 480px için daha kompakt, üstte */ .genel-tanimlar-page .settings-sidebar, .ayarlar-page .settings-sidebar { order: 1 !important; width: 95% !important; max-width: 95% !important; padding: 0 0 !important; border-radius: 12px !important; position: sticky !important; top: 0 !important; z-index: 10000 !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; background: var(--arka-plan-ana) !important; } /* Content - 480px için altta */ .genel-tanimlar-page .settings-content, .ayarlar-page .settings-content { order: 2 !important; } /* Sidebar Nav - 480px için daha kompakt */ .genel-tanimlar-page .settings-nav ul, .ayarlar-page .settings-nav ul { display: flex !important; flex-direction: row !important; gap: 6px !important; padding: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; } /* Nav Link - 480px için daha kompakt */ .genel-tanimlar-page .settings-nav-link, .ayarlar-page .settings-nav-link { white-space: nowrap !important; padding: 8px 12px !important; font-size: 14px !important; border-left: none !important; border-bottom: 3px solid transparent !important; border-radius: 8px !important; min-width: fit-content !important; flex-shrink: 0 !important; } .genel-tanimlar-page .settings-nav-link i, .ayarlar-page .settings-nav-link i { font-size: 14px !important; } .genel-tanimlar-page .settings-nav-link.active, .ayarlar-page .settings-nav-link.active { border-left: none !important; border-bottom-color: var(--ana-mavi) !important; } /* Content - 480px için özel ayarlar */ .genel-tanimlar-page .settings-content, .ayarlar-page .settings-content { width: 100% !important; padding-right: 0 !important; overflow-x: hidden !important; overflow-y: visible !important; } /* Section Header - 480px için daha küçük */ .genel-tanimlar-page .section-header, .ayarlar-page .section-header { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; margin-bottom: 20px !important; } .genel-tanimlar-page .section-header h2, .ayarlar-page .section-header h2 { font-size: 18px !important; } /* Settings Card - 480px için daha az padding */ .genel-tanimlar-page .settings-card, .ayarlar-page .settings-card { padding: 12px !important; margin-bottom: 12px !important; border-radius: 12px !important; } /* Table Container - 480px için özel ayarlar */ .genel-tanimlar-page .table-container, .ayarlar-page .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin: 0 !important; padding: 12px !important; } /* Table - 480px için daha küçük */ .genel-tanimlar-page .settings-table, .ayarlar-page .settings-table { font-size: 12px !important; min-width: 500px !important; } .genel-tanimlar-page .settings-table th, .genel-tanimlar-page .settings-table td, .ayarlar-page .settings-table th, .ayarlar-page .settings-table td { padding: 10px 6px !important; } /* Form Row - 480px için özel ayarlar */ .genel-tanimlar-page .form-row, .ayarlar-page .form-row { flex-direction: column !important; gap: 12px !important; } /* Profile Photo Section - 480px için özel ayarlar */ .ayarlar-page .profile-photo-section { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 12px !important; } .ayarlar-page .photo-actions { flex-direction: column !important; width: 100% !important; } .ayarlar-page .photo-actions button { width: 100% !important; } .genel-tanimlar-page .settings-table, .ayarlar-page .settings-table { min-width: 0 !important; } /* Form Actions - 480px için özel ayarlar */ .genel-tanimlar-page .form-actions, .ayarlar-page .form-actions { width: 100% !important; } .genel-tanimlar-page .form-actions button, .ayarlar-page .form-actions button { width: 100% !important; } /* Section Header Button - 480px için özel ayarlar */ .genel-tanimlar-page .section-header .btn-primary, .ayarlar-page .section-header .btn-primary { width: 100% !important; } /* Action Buttons - 480px için daha kompakt */ .genel-tanimlar-page .action-buttons, .ayarlar-page .action-buttons { gap: 4px !important; } .genel-tanimlar-page .action-btn, .ayarlar-page .action-btn { padding: 6px !important; font-size: 12px !important; } .ayarlar-page .usage-stats { gap: 0; } .ayarlar-page .settings-section { padding: 0 !important; } .ayarlar-page .settings-section.active { padding: 0 !important; } /* Status Toggle - 480px için daha küçük */ /* .genel-tanimlar-page .status-toggle, .ayarlar-page .status-toggle { padding: 2px 4px !important; } .genel-tanimlar-page .toggle-slider, .ayarlar-page .toggle-slider { width: 36px !important; height: 18px !important; } */ /* .genel-tanimlar-page .toggle-slider::before, .ayarlar-page .toggle-slider::before { width: 14px !important; height: 14px !important; top: 0px !important; left: 0px !important; } */ .genel-tanimlar-page .status-toggle input[type="checkbox"]:checked + .toggle-slider::before, .ayarlar-page .status-toggle input[type="checkbox"]:checked + .toggle-slider::before { transform: translateX(18px) !important; } /* Çalışma Saatleri - Mobil Görünüm */ .working-hours-grid { gap: 12px !important; } .day-schedule { grid-template-columns: 1fr !important; gap: 12px !important; padding: 12px !important; } .day-schedule label { font-size: 14px !important; margin-bottom: 8px !important; } #staff-hours-section .time-slots { gap: 12px !important; } #staff-hours-section .time-slot { grid-template-columns: 1fr !important; gap: 12px !important; padding: 12px !important; background: var(--arka-plan-ana) !important; border: 1px solid var(--kenarlik-ana) !important; border-radius: 8px !important; } #staff-hours-section .slot-label { font-size: 13px !important; margin-bottom: 8px !important; } #staff-hours-section .time-inputs { flex-direction: row !important; gap: 8px !important; width: 100% !important; } /* #staff-hours-section .time-inputs span { display: none !important; } */ #staff-hours-section .time-inputs input[type="time"] { width: 100% !important; max-width: 100% !important; } #staff-hours-section .time-slot .working-hours-toggle { width: 100% !important; justify-content: space-between !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* Klinik Çalışma Saatleri - Mobil Görünüm */ .working-hours-section .day-schedule { grid-template-columns: 1fr !important; gap: 12px !important; padding: 12px !important; } .working-hours-section .day-schedule label { font-size: 14px !important; margin-bottom: 8px !important; } .working-hours-section .time-inputs { flex-direction: column !important; gap: 8px !important; width: 100% !important; } .working-hours-section .time-inputs input[type="time"] { width: 100% !important; max-width: 100% !important; } .working-hours-section .time-inputs .working-hours-toggle { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; justify-content: space-between !important; margin-top: 8px !important; } .working-hours-section .working-hours-toggle { width: 100% !important; justify-content: space-between !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* Buton Düzeltmeleri - Mobil */ .genel-tanimlar-page .btn-primary, .genel-tanimlar-page .btn-secondary, .genel-tanimlar-page .btn-outline, .ayarlar-page .btn-primary, .ayarlar-page .btn-secondary, .ayarlar-page .btn-outline { width: 100% !important; padding: 12px 16px !important; font-size: 14px !important; white-space: normal !important; word-wrap: break-word !important; } .genel-tanimlar-page .section-header .btn-primary, .ayarlar-page .section-header .btn-primary { width: 100% !important; margin-top: 12px !important; } .genel-tanimlar-page .action-btn, .ayarlar-page .action-btn { min-width: 36px !important; width: 36px !important; height: 36px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Notification Dropdown - Mobil (480px) - Profil menüsü gibi sağ üstte */ .notification-dropdown { position: fixed !important; top: 80px !important; right: 20px !important; left: auto !important; width: calc(100vw - 40px) !important; max-width: 100% !important; margin: 0 !important; transform: translateY(-10px) !important; } .notification-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } .ayarlar-page .backup-settings { gap: 12px; } .ayarlar-page .session-management .session-item { flex-direction: column !important; gap: 10px; } .ayarlar-page .session-info { width: 100%; } .ayarlar-page .session-details p { font-size: 10px; } .ayarlar-page .backup-item .btn-outline { width: fit-content !important; } .ayarlar-page .notification-preferences .notification-item { margin: 10px 0; } .genel-tanimlar-page .settings-nav-link, .ayarlar-page .settings-nav-link { gap: 0; } .ayarlar-page #editUserForm .form-group, .ayarlar-page #newUserForm .form-group { margin-bottom: 0; } /* Switch Butonları - Mobil görünümde düzeltmeler */ .switch { width: 50px !important; height: 24px !important; min-width: 50px !important; flex-shrink: 0 !important; } .slider { width: 100% !important; height: 100% !important; } .slider:before { height: 18px !important; width: 18px !important; left: 3px !important; bottom: 3px !important; } input:checked + .slider:before { transform: translateX(26px) !important; } .feature-toggle { /* flex-wrap: wrap !important; */ gap: 12px !important; padding: 16px !important; } .feature-toggle .switch { margin-left: auto !important; } }