@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

* { 
    font-family: 'Tajawal', sans-serif; 
}

/* Improve rendering on iPhone / mobile PWAs */
html, body {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    background: linear-gradient(135deg, #11131A, #090A0F) !important;
    color: #FFFFFF !important;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .stat-val {
    color: #FFFFFF !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

p, span, label, .opacity-70, .opacity-50, .opacity-40 {
    color: #A0A5B5;
}

.text-primary, .gradient-text {
    color: #FFFFFF !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

/* Glassmorphism for Cards & Modals */
.glass, .glass-light, .liq-card, .modal-box {
    background: rgba(20, 22, 28, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37), inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px;
}

.liq-card {
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.liq-card:hover {
    background: rgba(30, 32, 40, 0.7) !important;
    transform: translateY(-4px);
}

.liq-card:hover * {
    color: #FFFFFF !important;
}

.glass-icon {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
    border-radius: 12px;
    width: 56px; 
    height: 56px;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.glass-icon i { 
    color: #FFFFFF !important; 
    background: none !important; 
    -webkit-text-fill-color: initial !important; 
}

/* Sidebar */
#sidebar {
    background: rgba(18, 19, 24, 0.8) !important;
    backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255,255,255,0.03) !important;
}

.sidebar-link {
    transition: all 0.3s ease;
    color: #8A8D98 !important;
    border-radius: 8px;
}

.sidebar-link span, .sidebar-link i {
    color: #8A8D98 !important;
    transition: all 0.3s ease;
}

.sidebar-link:hover {
    background: rgba(255,255,255, 0.05) !important;
    color: #FFFFFF !important;
}

.sidebar-link:hover span, .sidebar-link:hover i {
    color: #FFFFFF !important;
}

.sidebar-link.active {
    background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.08) 100%) !important;
    box-shadow: inset -3px 0px 0px #FFFFFF !important;
}

.sidebar-link.active span, .sidebar-link.active i {
    color: #FFFFFF !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

.sidebar-link::before { 
    display: none !important; 
}

/* Status Accents */
.status-active {
    background: rgba(74, 222, 128, 0.1) !important;
    color: #4ADE80 !important;
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
    padding: 4px 12px; 
    border-radius: 8px; 
    font-size: 12px; 
    font-weight: 600;
}

.status-warning {
    background: rgba(251, 191, 36, 0.1) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    padding: 4px 12px; 
    border-radius: 8px; 
    font-size: 12px; 
    font-weight: 600;
}

.status-danger {
    background: rgba(248, 113, 113, 0.1) !important;
    color: #F87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.2) !important;
    padding: 4px 12px; 
    border-radius: 8px; 
    font-size: 12px; 
    font-weight: 600;
}

/* Tables */
.table { 
    background: transparent !important; 
}

.table th { 
    color: #FFFFFF !important; 
    font-weight: 700; 
    border-bottom: 1px solid rgba(255,255,255,0.03) !important; 
}

.table td { 
    border-bottom: 1px solid rgba(255,255,255,0.03) !important; 
    color: #FFFFFF !important; 
}

.table-zebra tbody tr:nth-child(even) { 
    background-color: rgba(255,255,255,0.01) !important; 
}

.table-zebra tbody tr:hover { 
    background-color: rgba(255,255,255,0.04) !important; 
}

/* Inputs */
.input, .select {
    background: rgba(20, 22, 28, 0.8) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    color: #FFFFFF !important;
}

.input:focus, .select:focus {
    border-color: rgba(255,255,255,0.2) !important;
    outline: none !important;
}

/* Buttons */
.btn-grad, .btn-primary {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #FFFFFF !important;
    border-radius: 12px;
}

.btn-grad:hover, .btn-primary:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Hide global 'delete all' buttons added by modules (central control) */
button[title="تم تعطيل زر حذف الكل"], button[title="تم تعطيل زر حذف الكل"][disabled] {
    display: none !important;
}

/* Dashboard overrides */
.dash-bg { 
    background: transparent !important; 
    padding: 0 !important; 
}

.expiry-row {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.expiry-row:hover { 
    background: rgba(255,255,255,0.05) !important; 
}

/* Animations */
.fade-in { 
    animation: fadeIn 0.4s ease-out; 
}

/* Urgent / expired alert box styles */
.urgent-box {
    background: linear-gradient(90deg, rgba(220,38,38,0.95), rgba(239,68,68,0.95)) !important;
    border: 1px solid rgba(248,113,113,0.25) !important;
    box-shadow: 0 8px 28px rgba(239,68,68,0.18), inset 0 1px 0 rgba(255,255,255,0.02) !important;
    border-radius: 14px !important;
    padding: 1rem !important;
    color: #FFFFFF !important;
    animation: pulseRed 2200ms ease-in-out infinite;
}

.urgent-box p { color: #FFFFFF !important; }

@keyframes pulseRed {
    0% { transform: translateY(0); box-shadow: 0 6px 18px rgba(239,68,68,0.14); }
    50% { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(239,68,68,0.24); }
    100% { transform: translateY(0); box-shadow: 0 6px 18px rgba(239,68,68,0.14); }
}

@keyframes fadeIn { 
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* Sidebar collapsed */
body.sidebar-collapsed #sidebar { 
    width: 5.5rem; 
}

body.sidebar-collapsed #mainContent { 
    margin-right: 5.5rem; 
}

body.sidebar-collapsed .sidebar-text, 
body.sidebar-collapsed .sidebar-user-info, 
body.sidebar-collapsed .user-avatar,
body.sidebar-collapsed .sidebar-logo-text, 
body.sidebar-collapsed .sidebar-nav-title, 
body.sidebar-collapsed .sidebar-divider { 
    display: none; 
}

body.sidebar-collapsed .sidebar-link { 
    justify-content: center; 
    padding: 0.75rem 0; 
}

body.sidebar-collapsed .user-profile-box { 
    padding: 0.75rem; 
    margin: 1rem 0.75rem; 
    display: flex; 
    justify-content: center; 
    background: transparent; 
    border: none; 
    box-shadow: none; 
}

/* Full-black theme overrides (selected as 'black' in settings) */
html.full-black {
    --app-bg: #000000;
}

html.full-black body {
    background: var(--app-bg) !important;
    color: #FFFFFF !important;
}

/* Force general text to white in full-black mode while leaving status badges intact */
html.full-black p,
html.full-black span,
html.full-black label,
html.full-black .opacity-70,
html.full-black .opacity-50,
html.full-black .opacity-40,
html.full-black .table td,
html.full-black .table th,
html.full-black .sidebar-link,
html.full-black .sidebar-link span,
html.full-black .sidebar-link i,
html.full-black .input,
html.full-black .select,
html.full-black .btn-grad,
html.full-black .btn-primary {
    color: #FFFFFF !important;
}

/* Keep status accents (status-active/status-warning/status-danger) colors as defined */
html.full-black .status-active,
html.full-black .status-warning,
html.full-black .status-danger {
    /* rely on existing rules which use explicit colors */
}

/* Autofill overrides: prevents browser (Chrome/Edge/Safari) from painting blue/yellow backgrounds
   when username/password fields are autofilled. Keeps dark theme consistent. */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(20,22,28,0.8) inset !important;
    box-shadow: 0 0 0px 1000px rgba(20,22,28,0.8) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Some Chromium-based browsers use this internal selector */
input:-internal-autofill-selected {
    background-color: rgba(20,22,28,0.8) !important;
    color: #FFFFFF !important;
}

/* Ensure placeholder/text color remains correct after autofill */
input:-webkit-autofill::first-line {
    color: #FFFFFF !important;
}

/* Mobile safe-area and responsive tweaks (do not affect desktop) */
@supports (padding: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    #mainContent { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

@media (max-width: 1024px) {
    /* mobile: keep sidebar available as a slide-in full-screen panel
       instead of `display:none` so the menu button can open it on iPhone */
    #sidebar {
        display: block !important;
        width: 100% !important;
        right: 0 !important;
        top: 0 !important;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        height: 100vh;
        z-index: 80;
        box-shadow: 0 12px 40px rgba(0,0,0,0.6);
        overscroll-behavior: contain;
    }

    /* when open, slide into view and cover the screen */
    #sidebar.open {
        transform: translateX(0);
    }

    /* main content should not reserve space on mobile */
    #mainContent { margin-right: 0 !important; }

    /* ensure sidebar nav scrolls when tall */
    #sidebar nav { max-height: calc(100vh - 220px); overflow-y: auto; padding-bottom: 2rem; }
}

/* when mobile sidebar is open, prevent background scrolling */
body.sidebar-open { overflow: hidden; }

@media (max-width: 480px) {
    /* Slightly larger base text for readability on small phones */
    body { font-size: 15px; }
    header .text-xl { font-size: 1.04rem; }
    .sidebar-link, .sidebar-link span, .sidebar-link i { color: #E6E7EA !important; }
    .sidebar-nav-title { font-size: 0.7rem; }
}

/* Responsive helpers: show/hide desktop vs mobile specific UI blocks */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Mobile card styles used for stacked card view on small screens */
.mobile-card, .module-card {
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(20,22,28,0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
}

@media (max-width: 1024px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    /* Tables on mobile should not force overflow; prefer card layout */
    .table { overflow: visible; }
    .mobile-card + .mobile-card { margin-top: 0.75rem; }
    .mobile-card .actions { display:flex; gap:0.5rem; margin-top: .5rem; justify-content:flex-end; }
    /* Allow monospaced email / IDs to wrap on mobile */
    .table .font-mono { white-space: normal; word-break: break-all; }
}