/* =========================================================
   Portal Theme (2025-08-08)
   assets/css/portal-theme-20250808.css
   ========================================================= */

/* ====== Font ====== */
@font-face {
    font-family: 'Bukra';
    src: url('../fonts/29ltbukraregular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ====== Theme Variables ====== */
:root[data-theme="dark"]{
    /* Greyish dark-brown palette */
    --bg-1:#1a1715;
    --bg-2:#201d1a;
    --bg-3:#2b2622;
    --brand:#b59f7b;     /* muted bronze accent */
    --brand-2:#d1c5a3;   /* light sand accent */
    --text:#f2f3f4;
    --muted:#c6c1bb;

    /* Surfaces */
    --card-bg: rgba(255,255,255,.08);
    --card-brd: rgba(255,255,255,.16);

    /* Navbar */
    --nav-bg: rgba(255,255,255,.06);
    --nav-border: rgba(255,255,255,.15);
    --nav-link: #f2f3f4;
    --nav-link-active: #ffffff;

    /* Dropdown (stronger contrast) */
    --dropdown-bg: rgba(20,18,16,0.98);
    --dropdown-border: rgba(255,255,255,.12);
    --dropdown-text: #f2f3f4;
    --dropdown-hover-bg: rgba(255,255,255,.10);
    --dropdown-hover-text: #ffffff;
    --dropdown-active-bg: rgba(255,255,255,.14);
    --dropdown-active-text: #ffffff;

    /* Effects */
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius:18px;
    --ring: 0 0 0 3px rgba(181,159,123,.28);
}

:root[data-theme="light"]{
    /* Softer greyish-brown (no bright white) */
    --bg-1:#e6e0d6;   /* light warm grey-beige */
    --bg-2:#ddd5ca;   /* slightly darker tone */
    --bg-3:#d3c8bb;   /* muted brown-grey */
    --brand:#8a734f;  /* warm bronze accent */
    --brand-2:#b59f7b;
    --text:#2a2a2a;   /* softer black */
    --muted:#5e5a55;

    --card-bg: #f2ede6;  /* off-white with beige tint */
    --card-brd: rgba(0,0,0,.08);

    --nav-bg:#f2ede6;
    --nav-border: rgba(0,0,0,.08);
    --nav-link:#2a2a2a;
    --nav-link-active:#000;

    /* Dropdown */
    --dropdown-bg: #f2ede6;
    --dropdown-border: rgba(0,0,0,.08);
    --dropdown-text: #2a2a2a;
    --dropdown-hover-bg: rgba(181,159,123,.25);
    --dropdown-hover-text: #2a2a2a;
    --dropdown-active-bg: rgba(181,159,123,.35);
    --dropdown-active-text: #1a1a1a;

    --shadow: 0 8px 22px rgba(0,0,0,.08);
    --radius:18px;
    --ring: 0 0 0 3px rgba(181,159,123,.35);
}

/* ====== Base ====== */
html, body{
    font-family: 'Bukra', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
    color: var(--text);
    background: var(--bg-1); /* base color to prevent flash during load */
    position: relative;
    min-height: 100%;
    overflow-x: hidden;
}

/* Layered animated gradient that respects theme darkness/lightness */
body::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -1;
    /* main gradient (theme shades only) */
    background:
        radial-gradient(1400px 800px at 120% -10%, var(--glow-1), transparent 65%),
        radial-gradient(1000px 700px at -10% 120%, var(--glow-2), transparent 60%),
        linear-gradient(135deg, var(--bg-1a), var(--bg-2a), var(--bg-3a));
    background-size: 100% 100%, 100% 100%, 320% 320%;
    animation: bg-pan var(--bg-anim-speed) ease-in-out infinite alternate;
}

/* Subtle floating highlight for "alive" feel */
body::after{
    content:"";
    position: fixed;
    inset: -10% -10% -20% -10%;
    z-index: -1;
    background:
        radial-gradient(350px 250px at 20% 30%, rgba(255,255,255,.05), transparent 60%),
        radial-gradient(300px 220px at 80% 70%, rgba(0,0,0,.06), transparent 60%);
    mix-blend-mode: overlay;
    animation: blobFloat 36s ease-in-out infinite;
}

@keyframes bg-pan{
    0%   { background-position: center, center, 0% 50%; }
    50%  { background-position: center, center, 100% 50%; }
    100% { background-position: center, center, 0% 50%; }
}

@keyframes blobFloat{
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(2%, -2%, 0) scale(1.03); }
    100% { transform: translate3d(0,0,0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
    body::before, body::after{ animation: none !important; }
}
body{
    font-family: 'Bukra', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
    color: var(--text);
    background:
        radial-gradient(1200px 800px at 120% -10%, rgba(181,159,123,.06), transparent 60%),
        radial-gradient(1000px 700px at -10% 120%, rgba(209,197,163,.05), transparent 55%),
        linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3));
    background-size: 100% 100%, 100% 100%, 400% 400%;
    animation: bgShift 18s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ body{ animation:none; } }
@keyframes bgShift{
    0%{ background-position:center, center, 0% 50%; }
    50%{ background-position:center, center, 100% 50%; }
    100%{ background-position:center, center, 0% 50%; }
}

/* ====== Navbar (theme-aware) ====== */
.portal-navbar{
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(8px);
}
.portal-navbar .navbar-brand,
.portal-navbar .nav-link{
    color: var(--nav-link) !important;
}
.portal-navbar .nav-link.active,
.portal-navbar .nav-link:focus,
.portal-navbar .nav-link:hover{
    color: var(--nav-link-active) !important;
}
.portal-navbar .navbar-toggler{
    border-color: var(--nav-border);
}
.portal-navbar .brand-name{
    font-weight: 700; letter-spacing:.3px;
}

/* Keep original RTL offset on desktop */
.nav-link.dropdown-toggle{ margin-left: 55px; }
@media (max-width: 576px){
    .nav-link.dropdown-toggle{ margin-left: 0; }
}

/* ====== User menu (dropdown) ====== */
.user-menu .dropdown-menu{
    min-width: 220px;
    text-align: right;
    direction: rtl;
    padding-left: 1rem;
    background: var(--dropdown-bg);
    color: var(--dropdown-text);
    border: 1px solid var(--dropdown-border);
}
.user-menu .dropdown-item{
    color: var(--dropdown-text);
}
.user-menu .dropdown-item .bi,
.user-menu .dropdown-item i{
    color: inherit;
}
.user-menu .dropdown-divider{
    border-top-color: var(--dropdown-border);
}

/* Hover / focus / active states (high contrast in dark) */
.user-menu .dropdown-item:hover,
.user-menu .dropdown-item:focus{
    background-color: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}
.user-menu .dropdown-item:active,
.user-menu .dropdown-item.active{
    background-color: var(--dropdown-active-bg) !important;
    color: var(--dropdown-active-text) !important;
}

/* Danger item (logout) */
.user-menu .dropdown-item.text-danger{
    color: #ff6b6b;
}
.user-menu .dropdown-item.text-danger:hover,
.user-menu .dropdown-item.text-danger:focus{
    background: rgba(255, 107, 107, .18);
    color: #fff;
}

/* ====== Theme toggle button (if used outside dropdown) ====== */
.theme-toggle{
    border: 1px solid var(--nav-border);
    background: transparent;
    color: var(--nav-link);
    display: inline-flex; align-items: center; gap:.5rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle:hover,
.theme-toggle:focus{
    background: rgba(0,0,0,.05);
    border-color: var(--card-brd);
}

/* ====== Dashboard layout & tiles ====== */
.container.dashboard-wrap{
    max-width:1200px; margin-inline:auto; padding-block:40px 60px;
}

.brand-head{
    text-align:center;
    margin-block: 26px 18px;
}
.brand-mark{
    display:inline-flex; align-items:center; gap:.75rem;
    padding:.6rem 1rem; border:1px solid var(--card-brd);
    border-radius: 999px; background: rgba(255,255,255,.04);
    backdrop-filter: blur(6px);
}
:root[data-theme="light"] .brand-mark{
    background: rgba(0,0,0,.02);
}
.brand-dot{
    width:12px; height:12px; border-radius:50%;
    background: linear-gradient(135deg, var(--brand-2), #f6e7a1);
    box-shadow: 0 0 0 3px rgba(212,175,55,.22);
}
.title{
    font-size: clamp(1.4rem, 2vw + .6rem, 2.2rem);
    letter-spacing:.3px; margin: 10px 0 0 0;
    text-shadow: 0 2px 18px rgba(0,0,0,.18);
}
.subtitle{
    color: var(--muted);
    font-size: .98rem; margin-top:6px;
}

/* Grid */
.tile-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
    gap:24px;
    justify-content:center;      /* centers the grid tracks */
    justify-items:stretch;
    padding:24px;
}

/* Tile (clickable card) */
.tile-link{ text-decoration:none; color:inherit; display:block; border-radius:var(--radius); }
.tile{
    position:relative; isolation:isolate;
    background: var(--card-bg);          /* slightly brighter than page */
    border: 1px solid var(--card-brd);
    border-radius: var(--radius);
    padding: 22px 20px;
    min-height: 150px;
    display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

/* Gentle animated sheen on tiles */
.tile::after{
    content:"";
    position:absolute; inset:-1px;
    background:
        radial-gradient(420px 140px at 50% -20%, rgba(255,255,255,.07), transparent 70%),
        linear-gradient(120deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
    background-size: 100% 100%, 200% 100%;
    border-radius: inherit; z-index:-1;
    animation: tileShimmer 6s ease-in-out infinite;
}
.tile:hover{ transform: translateY(-4px); border-color: rgba(181,159,123,.28); }
.tile-link:focus-visible .tile{ outline: none; box-shadow: var(--ring); }

.tile .icon{
    font-size: 2.4rem; line-height:1; margin-bottom: 10px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text; background-clip:text; color:transparent;
}
.tile h4{
    font-size:1.08rem; margin:2px 0 0 0; font-weight:700;
    letter-spacing:.2px;
}
.tile small{
    color: var(--muted);
    margin-top:6px; display:block;
    font-size:.9rem;
}

/* Admin ribbon */
.ribbon{
    position:absolute; top:12px; inset-inline-start:-10px;
    transform: rotate(-3deg);
    padding:.25rem .6rem;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--brand-2), #efe7d2);
    color:#202020; font-weight:700; font-size:.78rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
/* Theme toggle label inside dropdown */
#themeLabel {
    color: var(--dropdown-text) !important;
    font-size: 0.85rem;
}
/* ====== Login page (theme-aware) ====== */
.login-wrap{
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
}

.login-card{
    width:100%; max-width:420px;
    background: var(--card-bg);
    border: 1px solid var(--card-brd);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    padding: 32px 24px;
    color: var(--text);
    text-align:center;
}

.login-logo img{ max-height:72px; margin-bottom: 14px; }

.login-card h4{
    margin: 10px 0 18px;
    font-weight: 700;
}

.login-card .form-label{
    color: var(--text);
    font-size: .95rem;
}

.login-card .form-control{
    background: transparent;
    color: var(--text);
    border: 1px solid var(--card-brd);
}
.login-card .form-control::placeholder{ color: var(--muted); }
.login-card .form-control:focus{
    border-color: rgba(181,159,123,.5);
    box-shadow: 0 0 0 3px rgba(181,159,123,.25);
    color: var(--text);
}

/* Brand button */
.btn-brand{
    width:100%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border: none;
    color: #fff;
}
.btn-brand:hover,
.btn-brand:focus{
    filter: brightness(1.05);
    color:#fff;
}

/* Error text */
.login-card .text-danger{ color:#ff6b6b !important; }