@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

/* =========================================
   1. DESIGN TOKENS
   ========================================= */
:root {
    --bg-body:       #121212;
    --bg-surface:    #1e1e1e;
    --bg-input:      #2c2c2c;
    
    --accent-blue:   #64B5F6; 
    --accent-danger: #ff6b6b;
    --accent-success:#2ea043;
    
    --text-main:     #FFFFFF;
    --text-muted:    #CCCCCC;
    --text-dark:     #121212; 

    --radius-sm:     4px;  
    --radius-md:     10px; 
    --radius-lg:     15px; 
    --radius-pill:   50px; 

    --shadow-glow:   0 0 10px rgba(255, 255, 255, 0.15);
    --shadow-blue:   0 4px 15px rgba(100, 181, 246, 0.4);
    --shadow-dust:   -6px 6px 15px rgba(100, 181, 246, 0.3);
}

/* RD BRAND LOGO COMPONENT */
.rd-brand-logo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px; /* Μέγεθος για το profile/header */
    height: 120px;
    text-decoration: none;
}

.rd-brand-logo .circle-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid #64B5F6;
    border-radius: 70%;
    box-shadow: -8px 8px 40px rgba(100, 181, 246, 0.4), 
                inset 0 0 15px rgba(100, 181, 246, 0.2);
}

.rd-brand-logo .rd-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 65px; /* Αναλογία με το 120px container */
    font-weight: 900;
    letter-spacing: -3px;
    z-index: 4;
}

.rd-brand-logo .char-r { color: #64B5F6; }
.rd-brand-logo .char-d { color: #FFFFFF; }

/* =========================================
   2. GLOBAL RESET
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: center; 
}

/* =========================================
   3. COMPONENTS
   ========================================= */

/* LOGO MAIN */
.header-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px; font-weight: 900; color: var(--accent-blue);
    text-decoration: none; text-transform: uppercase; font-style: italic;
    letter-spacing: 1px; display: inline-block;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3); 
}
.header-logo span { color: var(--text-main); }

/* MINI LOGO DUST */
.mini-logo-container {
    display: inline-flex; align-items: center; justify-content: center;
    width: 70px; height: 70px; border-radius: 50%;
    border-top: 3px solid rgba(255,255,255,0.1);
    border-right: 3px solid rgba(255,255,255,0.1);
    border-bottom: 5px solid #888; border-left: 5px solid var(--accent-blue);
    box-shadow: var(--shadow-dust); transform: rotate(-10deg); background: #181818;
}
.mini-logo-text {
    font-family: sans-serif; font-weight: 900; font-style: italic;
    font-size: 28px; letter-spacing: -1px; transform: rotate(10deg);
}
.mini-r { color: var(--accent-blue); }
.mini-d { color: var(--text-main); }

/* WIDGET CLOCK */
.header-info-group { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.time-big { font-size: 4.5rem; font-weight: 900; color: var(--text-main); line-height: 1; letter-spacing: 2px; }
.date-display { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 5px; font-weight: 500; }

/* BUTTONS */
.btn-back {
    background-color: var(--bg-body); color: var(--text-main); border: none;
    padding: 15px 30px; font-size: 1rem; font-weight: bold;
    border-radius: var(--radius-pill); cursor: pointer;
    box-shadow: var(--shadow-glow), inset 0 0 2px rgba(255,255,255,0.2);
}

.btn-login-fat {
    display: inline-block; background: var(--accent-blue); color: var(--text-dark);
    font-weight: 900; font-size: 18px; padding: 20px 30px;
    border-radius: var(--radius-lg); border: none; cursor: pointer;
    text-transform: uppercase; box-shadow: var(--shadow-blue);
}

.user-name-btn { 
    display: inline-block; background: var(--accent-blue); color: var(--text-dark);
    font-weight: 750; text-decoration: none; font-size: 0.9rem;
    padding: 10px 15px; border-radius: var(--radius-md);
}

.btn-stats-box { 
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    background-color: var(--bg-body); color: var(--accent-blue); padding: 20px 30px;
    border-radius: var(--radius-lg); border: none; cursor: pointer;
}

.logout-btn { 
    color: var(--accent-danger); text-decoration: none; font-size: 1.1rem;
    font-weight: 800; border: 2px solid var(--accent-danger); 
    padding: 12px 24px; border-radius: 8px; display: inline-block;
    text-transform: uppercase;
}

.btn-submit { 
    width: 100%; max-width: 300px; padding: 15px; 
    border-radius: var(--radius-lg); background: var(--accent-blue); 
    color: var(--text-dark); font-weight: 900; font-size: 18px; 
    text-transform: uppercase; border: none; cursor: pointer; 
}

.switch-btn { 
    display: block; width: 100%; padding: 20px; background: #4A4A4A; 
    color: var(--accent-blue); font-weight: 900; border: none; 
    border-radius: 4px; font-size: 1.1rem; text-transform: uppercase; 
    cursor: pointer; text-decoration: none;
}

/* --- STATES / CARDS --- */
.status-box { 
    padding: 35px; border-radius: var(--radius-lg); text-align: center; 
    cursor: pointer; width: 100%; margin: 0 auto; max-width: 350px; 
}

.status-no-vehicle { 
    background-color: #000 !important; border: none !important; 
    color: var(--accent-danger) !important; font-weight: 900; text-transform: uppercase;
}

.status-vehicle { 
    background-color: var(--accent-success); border: 2px solid #3fb950; 
    color: #fff; font-weight: bold;
}

/* INPUTS */
.input-ref { 
    padding: 15px; background: var(--bg-input); border: 2px solid #333; 
    color: white; border-radius: var(--radius-md); font-size: 16px; 
    outline: none; width: 100%; max-width: 300px; margin: 0 auto; display: block; 
}

.job-type {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-left: 8px;
    display: inline-block;
}

.pay-status {
    text-align: right;
    font-weight: 900;
    color: #FF5252;
    margin-top: 6px;
}


/* Αντιστοιχίες με βάση το modal του planner */
.job-type-transfer        { background: #64B5F6; color: #000; }
.job-type-tour            { background: #FF9800; color: #000; }
.job-type-long-transfer   { background: #BB86FC; color: #000; }
.job-type-polyimero       { background: #FF79C6; color: #000; }
.job-type-business        { background: #50FA7B; color: #000; }
.job-type-σχολικο         { background: #F1FA8C; color: #000; }
}