/* ============================================================
   نظام التصميم الأساسي (CSS Variables)
   ============================================================ */
:root {
    --text-primary: #1a2026;
    --text-secondary: #3d4a5a;
    --text-muted: #6b7a8a;
    --accent: #005c9e;
    --accent-hover: #004b82;
    --accent-light: #e5f0fa;
    --accent-selected: #d4e6f7;
    --radius: 4px;
    --radius-sm: 2px;
    --transition: 0.15s ease;

    /* خط SAP الرسمي مع الاحتياطي */
    /* Was: "72", "72full", Arial, Helvetica, sans-serif -- SAP's own face, which
       this app has never shipped. Every tile therefore fell through to Arial
       while the rest of the page rendered in the chosen UI face, so the module
       names read thin and washed out beside their own heading, and the font
       switcher had no effect on them at all. --font-base is what the ten
       vendored faces set; the tiles follow the user's choice now. */
    --font-stack: var(--font-base, system-ui, -apple-system, "Segoe UI", sans-serif);

    /* ألوان الخلفية الهادئة */
    --bg-page: #f8f9fa;
    --bg-card-hover: #f0f4f8;
    --border-light: #e8ecf0;
}

/* ---- تحميل خط SAP 72 ---- */
@font-face {
    font-family: '72';
    src: local('72'), local('72-Regular'), local('72 Regular');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '72';
    src: local('72-Bold'), local('72 Bold');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '72';
    src: local('72-Light'), local('72 Light');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* ---- الشبكة (Grid) ---- */
.app-launcher-grid,
.app-module-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 50;
}

/* ---- البطاقة (بدون إطار) ---- */
.app-module-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: var(--radius);
    padding: 0.6rem 0.4rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    font-family: var(--font-stack);
    min-height: auto;
}

.app-module-tile:hover {
    background: transparent;
    box-shadow: none;
    transform: scale(1.1);
}

.app-module-tile:active {
    transform: scale(0.97);
}

/* ---- حالة معطلة ---- */
.app-module-tile--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ---- Tooltip مخصص ---- */
.app-module-tile .tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 50%;
    transform: translateX(50%);
    background: var(--text-primary);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 400;
    white-space: normal;
    max-width: 300px;
    line-height: 1.6;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    font-family: var(--font-stack);
    text-align: center;
    pointer-events: none;
    letter-spacing: 0.01em;
}

.app-module-tile .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
}

.app-module-tile:hover .tooltip {
    display: block;
}

/* ---- محتوى البطاقة ---- */
.app-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

/* ---- الأيقونة ---- */
.app-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
}

.app-card-icon .icon-emoji {
    font-size: 28px;
    line-height: 1;
    display: inline-block;
}

.app-card-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* ---- العنوان ---- */
.app-card-title {
    /* Was a hardcoded 11px, which sat small under a 20px heading and ignored the
       100/90/80 UI-scale system every other label in the app rides. */
    font-size: var(--ui-small-font-size, 12px);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: block;
    font-family: var(--font-stack);
    letter-spacing: -0.01em;
    line-height: 1.2;
    word-wrap: break-word;
}

/* ---- الشارة (Badge) - مخفي ---- */
.app-badge {
    display: none;
}

/* ---- معلومات إضافية - مخفي ---- */
.app-card-meta {
    display: none;
}

/* ---- Accessibility ---- */
.app-module-tile:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Responsive: Desktop ---- */
@media (max-width: 1024px) {
    .app-launcher-grid,
    .app-module-tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
    }
}

/* ---- Responsive: Tablet ---- */
@media (max-width: 768px) {
    .app-launcher-grid,
    .app-module-tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }

    .app-module-tile .tooltip {
        max-width: 220px;
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ---- Responsive: Mobile (480px) ---- */
@media (max-width: 480px) {
    .app-launcher-grid,
    .app-module-tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }

    .app-module-tile .tooltip {
        max-width: 180px;
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ---- Responsive: Small Mobile (380px) ---- */
@media (max-width: 380px) {
    .app-launcher-grid,
    .app-module-tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 6px;
    }
}

/* ---- Dark Mode: removed ----
   head.php declares <meta name="color-scheme" content="light"> for the whole
   app, so there is no dark theme to serve -- but this block still fired off the
   operating system's setting. It redefined --text-primary to #e6edf3, which is
   the colour .app-card-title uses, so every module name on /apps and
   /settings rendered near-white on the launcher's near-white background:
   invisible to anyone whose OS happened to be in dark mode, and fine for
   everyone else, which is why it survived.

   If a dark theme is ever wanted it belongs behind the app's own switch, the
   way data-ui-scale and data-ui-font are -- not behind a media query the app
   has told the browser to ignore. */