:root{--ap:#003b75;--ap2:#005ea8;--bg:#eef4fb;--gold:#d8b14a; --ink: #0f172a;
      --muted: #5b667a;
      --brand: #1d4ed8;
      --accent: #f59e0b;
      --card: #ffffff;
      --line: #e2e8f0;
      --bg: #f8fafc;
      --shadow: 0 20px 60px rgba(15, 23, 42, 0.12);}
*{box-sizing:border-box}body{margin:0;font-family:Inter,sans-serif;background:var(--bg)}
.top{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;background:linear-gradient(90deg,var(--ap),var(--ap2));color:#fff;padding:10px 20px}
.logos{ display:flex; gap:20px; align-items:center; }
.logo-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-width:90px; }
.logo{ width:60px; height:60px; border-radius:50%; background:#fff; padding:4px; object-fit:contain; }
.logo-title{ margin-top:6px; font-size:6px; font-weight:700; color:#fff; line-height:1.2; }
.logo-subtitle{ font-size:7px; color:#d9e8ff; line-height:1.2; }
.title { text-align: center; }
.title h1 { margin: 0; font: 700 24px 'Merriweather', serif; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.title h2 { margin: 4px 0 2px; font-size: 16px; font-weight: 500; color: #e2e8f0; }
.title p { margin: 0; font-size: 12px; color: #ffd875; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.info { background: #fff; border-bottom: 3px solid var(--gold); display: flex; justify-content: space-between; align-items: center; padding: 10px 24px; box-shadow: var(--shadow); }
.info strong { font-size: 15px; color: var(--ap); text-transform: uppercase; letter-spacing: 0.5px; }
footer{ position: fixed; bottom: 0; left: 0; width: 100%; background: #02294f; color: #fff; padding: 12px 20px; text-align: center; z-index: 999; box-shadow: 0 -2px 8px rgba(0,0,0,.15); }
.page { max-width: 920px; margin: 0 auto; padding: 48px 20px 72px;}
@media (max-width: 900px) {

    .top{
        grid-template-columns: 1fr;
        row-gap: 20px;          /* Gap between rows */
        text-align: center;
    }

    .logos{
        justify-content: center !important;
        flex-wrap: wrap;        /* Allow logos to wrap */
    }

    .title{
        margin: 2px 0;         /* Space above and below title */
    }

    .logos.right{
        margin-top: 20px;       /* Space between title and right logos */
    }

footer{
        font-size: 11px;      /* Smaller font */
        padding: 8px 12px;    /* Reduce footer height */
        line-height: 1.4;
    }
}
@media (max-width: 768px) {
    .dashboard-content-area { padding: 24px 16px; }

    /* 1. Condense the top blue container area */
    header.top {
        padding: 8px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
    }

    /* 2. Scale down the top structural emblem badges */
    header.top .logos.left {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    header.top .logos.left .logo {
        height: 32px !important; 
        width: auto !important;
    }

    /* 3. Tighten the central text typography sizes */
    header.top .title {
        margin: 0 !important;
    }
    header.top .title h1 {
        font-size: 13px !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.2 !important;
    }
    header.top .title h2 {
        font-size: 11px !important;
        margin: 0 0 1px 0 !important;
    }
    header.top .title p {
        font-size: 9px !important;
        margin: 0 !important;
    }

    /* 4. Fit all four portrait cards horizontally into a tight grid */
    header.top .logos.right {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* Balanced 4-column column splits */
        gap: 2px !important; /* Micro gap to keep maximum text width space available */
        margin-top: 6px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* 5. Miniature profile card configurations */
    header.top .logo-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important; /* Reclaims horizontal breathing space for letters */
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* Shrink portrait photo diameters to give text room below */
    header.top .logo-card img.logo {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        margin-bottom: 3px !important;
        object-fit: cover !important;
    }

    /* FIXED: Micro-scale text and force wrapping to prevent truncating (...) dots */
    header.top .logo-card .logo-title {
        font-size: 6px !important; /* Tiny crisp presentation profile size */
        line-height: 1.1 !important;
        display: block !important;
        white-space: normal !important;  /* FIXED: Overrides single-line lock so text wraps safely */
        overflow: visible !important;   /* FIXED: Stops hidden truncating mechanics */
        text-overflow: clip !important; /* FIXED: Removes the three dots completely */
        max-width: 100% !important;
        font-weight: 500 !important;     /* Slightly lighter weight prevents wide overlapping letters */
        color: #ffffff !important;
    }

    /* FIXED: Micro-scale subtitle designations with wrapping fallback rules */
    header.top .logo-card .logo-subtitle {
        font-size: 6.5px !important;
        line-height: 1.1 !important;
        display: block !important;
        white-space: normal !important;  /* FIXED: Allows layout wrapping fallback lines */
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 100% !important;
        opacity: 0.85;
        margin-top: 1px !important;
    }

    /* 6. Tighten the sub-navigation white panel bar */
    .info {
        padding: 4px 10px !important;
    }
    .panel-tag-title {
        font-size: 13px !important;
    }
    .sidebar-toggle {
        width: 30px !important;
        height: 26px !important;
        padding: 6px !important;
    }
}