/* css/base.css */

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0 
}

:root {
    /* Core Colors (Mapped to new dashboard aesthetic) */
    --z950: #0d1117; 
    --z900: #161b22; 
    --z800: #21262d; 
    --z700: #30363d; 
    --z600: #484f58; 
    --z400: #8b949e; 
    --z300: #c9d1d9; 
    --z100: #f0f6fc;
    --white: #e6edf3; 
    --black: #010409;

    /* Brand Colors */
    --gold: #f0b429; 
    --gold-l: #fceb8b; 
    --gold-d: #d97706; 
    --gold-bg: rgba(240, 180, 41, 0.15);

    /* Semantic Colors */
    --g: #1aab78; 
    --g-bg: rgba(26, 171, 120, 0.15); 
    --g-t: #23d194;
    
    --r: #f85149; 
    --r-bg: rgba(248, 81, 73, 0.15); 
    --r-d: #ff7b72;
    
    --b: #388bfd; 
    --b-bg: rgba(56, 139, 253, 0.15);
    
    --v: #8957e5; 
    --v-bg: rgba(137, 87, 229, 0.15);

    /* Sidebar Width */
    --sb: 240px;
    
    /* Task Dashboard UI Colors */
    --bg2: #161b22;
    --bg3: #21262d;
    --surface: #161b22;
    --surface2: #21262d;
    --border: #30363d;
    --border2: #484f58;
    --text: #e6edf3;
    --text2: #8b949e;
    --text3: #6e7681;
    --accent: #388bfd;
    --accent-glow: rgba(56, 139, 253, 0.15);
    
    --urgent: #f85149;
    --urgent-light: rgba(248, 81, 73, 0.12);
    --urgent-mid: rgba(248, 81, 73, 0.25);
    --urgent-glow: rgba(248, 81, 73, 0.08);
    
    --normal: #1aab78;
    --normal-light: rgba(26, 171, 120, 0.12);
    --normal-mid: rgba(26, 171, 120, 0.25);
    --normal-glow: rgba(26, 171, 120, 0.08);
    
    --waiting: #f0b429;
    --waiting-light: rgba(240, 180, 41, 0.12);
    
    --pending: #8957e5;
    --pending-light: rgba(137, 87, 229, 0.12);
    --pending-mid: rgba(137, 87, 229, 0.25);
    --pending-glow: rgba(137, 87, 229, 0.08);
    --pending-border: rgba(137, 87, 229, 0.28);
}

body { 
    font-family: 'Cairo', 'Tajawal', sans-serif; 
    background: var(--z950); 
    color: var(--white); 
    min-height: 100vh; 
    direction: rtl; 
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.6;
}

.hide { display: none !important }

::selection { background: rgba(240, 180, 41, 0.25) }

/* Scrollbar Styles */
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: var(--z950) }
::-webkit-scrollbar-thumb { background: var(--z700); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: var(--z600) }

/* Light Mode Global Variables Overrides */
html[data-theme="light"] {
    --z950: #f6f8fa; 
    --z900: #ffffff; 
    --z800: #f3f4f6; 
    --z700: #d0d7de;
    --z600: #afb8c1; 
    --z400: #656d76; 
    --z300: #24292f; 
    --z100: #1F2328;
    --white: #1F2328;
    
    --gold: #bf8700; 
    --gold-l: #9a6700; 
    --gold-d: #7a4c00; 
    --gold-bg: rgba(191, 135, 0, 0.1);
    
    --g: #1a7f37; 
    --g-bg: rgba(26, 127, 55, 0.1); 
    --g-t: #1a7f37;
    
    --r: #cf222e; 
    --r-bg: rgba(207, 34, 46, 0.08); 
    --r-d: #cf222e;
    
    --b: #0969da; 
    --b-bg: rgba(9, 105, 218, 0.1);
    
    --v: #8250df; 
    --v-bg: rgba(130, 80, 223, 0.1);

    --bg2: #ffffff;
    --bg3: #f6f8fa;
    --surface: #ffffff;
    --surface2: #f6f8fa;
    --border: #d0d7de;
    --border2: #afb8c1;
    --text: #1F2328;
    --text2: #656d76;
    --text3: #8c959f;
    
    --urgent-light: rgba(207, 34, 46, 0.08);
    --urgent-mid: rgba(207, 34, 46, 0.2);
    --urgent-glow: rgba(207, 34, 46, 0.05);
    
    --normal-light: rgba(26, 127, 55, 0.08);
    --normal-mid: rgba(26, 127, 55, 0.2);
    --normal-glow: rgba(26, 127, 55, 0.05);
    
    --pending-light: rgba(130, 80, 223, 0.08);
    --pending-mid: rgba(130, 80, 223, 0.2);
    --pending-glow: rgba(130, 80, 223, 0.05);
    --pending-border: rgba(130, 80, 223, 0.25);
}

/* Theme Toggle Component Styles */
.theme-btn {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--z800); border: 1px solid var(--z700);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .25s; position: relative; overflow: hidden;
    color: var(--z400);
}

.theme-btn:hover { background: var(--z700); color: var(--white); }

.theme-ico-moon, .theme-ico-sun {
    position: absolute; transition: all .3s cubic-bezier(.34,1.56,.64,1);
}

.theme-ico-sun { opacity: 0; transform: scale(.5) rotate(-90deg) }

html[data-theme="light"] .theme-ico-moon { opacity: 0; transform: scale(.5) rotate(90deg) }
html[data-theme="light"] .theme-ico-sun { opacity: 1; transform: scale(1) rotate(0deg) }
html[data-theme="light"] .theme-btn { background: #ffffff; border-color: #d0d7de; color: #656d76; }
html[data-theme="light"] .theme-btn:hover { background: #f6f8fa; color: #1F2328; }