/* ==========================================================
   KOSTASZ.GR SAILING REGISTRATION PLATFORM — SHARED STYLESHEET
   "Nautical Chart / Regatta Scoreboard" design system.
   Every page links to this file instead of repeating its own
   copy of these rules. Page-specific CSS (tables, forms,
   scoreboards) stays inline in each file.
   ========================================================== */

:root{
    --navy:#16323F;
    --navy-soft:#234759;
    --sail:#E9EDE9;
    --blue:#1F7A68;
    --green:#2D8659;
    --red:#D8432A;
    --gold:#E8B23D;
    --ink:#16323F;
    --ink-soft:#3F5A66;
    --line:rgba(22,50,63,0.14);
    --paper:#FFFFFF;
}

*{ box-sizing:border-box; }

body{
    background:var(--sail);
    font-family:'Source Sans 3', Arial, sans-serif;
    color:var(--ink);
    margin:0;
}

h1, h2, h3{
    font-family:'Archivo', Arial, sans-serif;
    font-weight:700;
}

a{
    color:var(--blue);
}

/* ============================
   TOP UTILITY BAR + BRAND MARK
============================ */

.topbar{
    background:var(--paper);
    border-bottom:1px solid var(--line);
}

.topbar-inner{
    max-width:1200px;
    margin:0 auto;
    padding:14px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

/* A small sailboat mark, so the sailing theme reads immediately
   rather than only through background color and typography. */
.brand-mark{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Archivo', Arial, sans-serif;
    font-weight:700;
    font-size:15px;
    color:var(--ink);
    text-decoration:none;
    margin-right:8px;
    padding-right:16px;
    border-right:1px solid var(--line);
}

.brand-mark svg{
    width:22px;
    height:22px;
    flex-shrink:0;
}

.navbar{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
}

.navbar a{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--ink-soft);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    padding:6px 2px;
    border-bottom:2px solid transparent;
    transition:color 0.15s ease, border-color 0.15s ease;
}

.navbar a svg{
    width:15px;
    height:15px;
    flex-shrink:0;
}

.navbar a:hover{
    color:var(--ink);
}

.navbar a.active{
    color:var(--ink);
    border-bottom-color:var(--buoy, var(--red));
}

.navbar a.admin-link{
    color:#8296a0;
}

.navbar a.admin-link:hover{
    color:var(--ink);
}

.lang-switch{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:2px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

.lang-switch a{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#8296a0;
    text-decoration:none;
    padding:2px 4px;
}

.flag-icon{
    width:18px;
    height:12px;
    border-radius:2px;
    flex-shrink:0;
    display:block;
}

.lang-switch a.active{
    color:var(--blue);
    border-bottom:2px solid var(--gold);
}

.lang-switch a:hover{
    color:var(--ink);
}

.lang-switch span{
    color:var(--line);
}

/* ============================
   HERO — light chart-paper, with a
   wave divider instead of a flat line
============================ */

.hero{
    position:relative;
    background:var(--sail);
    text-align:center;
    padding:44px 20px 34px;
    color:var(--ink);
}

.hero h1{
    font-size:clamp(26px, 4vw, 40px);
    line-height:1.15;
    color:var(--ink);
    margin:0 auto;
    max-width:760px;
}

.hero h2{
    font-family:'Source Sans 3', Arial, sans-serif;
    font-size:15px;
    font-weight:500;
    color:var(--ink-soft);
    margin-top:10px;
}

.hero-sub{
    max-width:520px;
    margin:16px auto 0;
    font-size:16px;
    line-height:1.6;
    color:var(--ink-soft);
}

/* A repeating wave line beneath the hero — a literal, recognizable
   sailing motif standing in for a plain border. Drawn once as a CSS
   background rather than requiring an SVG element in every page. */
.hero::after{
    content:"";
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:-11px;
    height:22px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M0 11 Q15 0 30 11 T60 11 T90 11 T120 11 V22 H0 Z' fill='%2316323F' fill-opacity='0.08'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-size:120px 22px;
    pointer-events:none;
}

.compass-rose{
    position:absolute;
    top:-40px;
    right:-40px;
    width:280px;
    height:280px;
    opacity:0.14;
    pointer-events:none;
}

.event-logo{
    width:250px;
    height:150px;
    object-fit:contain;
    background:#fff;
    border-radius:10px;
    padding:14px;
    margin-bottom:16px;
    box-shadow:0 4px 14px rgba(0,0,0,0.2);
}

/* Signal-flag line — genuine nautical signal flags, not decoration */
.flagline{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:4px;
    margin-top:26px;
    padding:0 10px;
    overflow:hidden;
    position:relative;
}

.flagline .flag{
    width:20px;
    height:28px;
    opacity:0;
    transform:translateY(-8px);
    animation:flagDrop 0.5s ease forwards;
}

.flagline .flag:nth-child(1){ animation-delay:0.02s; }
.flagline .flag:nth-child(2){ animation-delay:0.06s; }
.flagline .flag:nth-child(3){ animation-delay:0.10s; }
.flagline .flag:nth-child(4){ animation-delay:0.14s; }
.flagline .flag:nth-child(5){ animation-delay:0.18s; }
.flagline .flag:nth-child(6){ animation-delay:0.22s; }
.flagline .flag:nth-child(7){ animation-delay:0.26s; }
.flagline .flag:nth-child(8){ animation-delay:0.30s; }

@keyframes flagDrop{
    to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
    .flagline .flag{
        animation:none;
        opacity:1;
        transform:none;
    }
}

/* ============================
   PANELS / CARDS (generic, shared shell)
============================ */

.panel{
    background:var(--paper);
    padding:22px;
    margin-top:22px;
    border-radius:10px;
    border:1px solid var(--line);
    box-shadow:0 1px 3px rgba(22,50,63,0.05);
    overflow-x:auto;
}

.container{
    max-width:1200px;
    margin:0 auto 30px;
    padding:0 20px;
}

button, .btn{
    font-family:'Source Sans 3', Arial, sans-serif;
    font-weight:600;
    cursor:pointer;
}

/* ============================
   FOOTER
============================ */

.footer{
    padding:22px 20px;
    text-align:center;
    font-size:13px;
    color:var(--ink-soft);
    background:var(--paper);
    border-top:1px solid var(--line);
}

.footer a{
    color:var(--blue);
    text-decoration:none;
}

.footer a:hover{
    text-decoration:underline;
}

@media(max-width:600px){
    .topbar-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .compass-rose{
        width:180px;
        height:180px;
    }
}

/* ============================
   ADMIN PANEL — SHARED ACROSS ALL admin_*.php / admin.php / users.php PAGES
============================ */

h1{
    color:#1F7A68;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Archivo', Arial, sans-serif;
    font-weight:600;
    font-size:15px;
    color:var(--navy);
    letter-spacing:0.02em;
}

.brand img{
    height:34px;
    width:auto;
    display:block;
}

.topbar-nav{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
}

.topbar-nav a{
    display:flex;
    align-items:center;
    gap:7px;
    color:#4a5a6c;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    padding:6px 2px;
    border-bottom:2px solid transparent;
    transition:color 0.2s ease, border-color 0.2s ease;
}

.topbar-nav a svg{
    width:15px;
    height:15px;
    flex-shrink:0;
}

.topbar-nav a:hover{
    color:var(--navy);
}

.topbar-nav .user-badge{
    margin-left:10px;
    padding:5px 12px;
    background:#f1f5ff;
    color:var(--navy);
    border-radius:20px;
    font-size:13px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.topbar-nav a.logout-link{
    margin-left:6px;
    color:var(--red);
}

.topbar-nav a.logout-link:hover{
    color:#8e2419;
}

.hero-wave{
    display:block;
    width:100%;
    height:28px;
    margin-top:20px;
}

.admin-nav{
    display:flex;
    gap:10px;
    margin-bottom:15px;
    flex-wrap:wrap;
}

.admin-nav a{
    padding:10px 20px;
    background:#f1f5ff;
    color:#1F7A68;
    border-radius:5px;
    font-weight:bold;
    text-decoration:none;
}

.admin-nav a.active{
    background:#1F7A68;
    color:white;
}

.admin-nav a:hover{
    background:#1F7A68;
    color:white;
}

.logout{
    float:right;
    background:#D8432A;
    color:white;
    padding:10px;
    border-radius:5px;
    text-decoration:none;
}

.counters-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:15px;
}

.counter-badge{
    font-size:15px;
    color:#1F7A68;
    background:#f1f5ff;
    padding:8px 16px;
    border-radius:20px;
}

input, select{
    padding:10px;
    font-size:15px;
    border:1px solid #ccc;
    border-radius:6px;
    box-sizing:border-box;
}

button{
    padding:10px 20px;
    background:#1F7A68;
    color:white;
    border:0;
    border-radius:5px;
    cursor:pointer;
    font-size:15px;
}

button:hover{
    background:#234759;
}

.delete-btn{
    padding:7px 14px;
    border:0;
    border-radius:5px;
    color:white;
    cursor:pointer;
    font-size:13px;
    background:#D8432A;
}

.delete-btn:hover{
    background:#8e2419;
}

/* Base table/cell look; min-width, margin-top, and any sticky-header
   behavior are genuinely page-specific (column count differs per page)
   and stay as inline overrides in each file. */
table{
    width:100%;
    border-collapse:collapse;
}

th{
    background:#1F7A68;
    color:white;
}

td, th{
    padding:10px;
    border:1px solid #ddd;
    text-align:center;
    white-space:nowrap;
}

/* Base card look; admin_translations.php intentionally uses a slightly
   larger padding and softer shadow matching the newer design system,
   kept as its own override. */
.card{
    background:white;
    padding:20px;
    border-radius:8px;
    box-shadow:0 2px 5px #ccc;
    overflow-x:auto;
}

/* Base message-banner look; margin-top vs margin-bottom is genuinely
   page-specific (depends on what the banner sits next to), so stays
   as an inline override. admin_translations.php's differing color
   values (matching the newer CSS-variable palette) also stay as its
   own override. */
.message{
    padding:12px 16px;
    border-radius:6px;
    font-size:14px;
}

.message.success{
    background:rgba(30,138,95,0.1);
    color:#2D8659;
}

.message.error{
    background:rgba(198,64,47,0.09);
    color:#D8432A;
}

.modal-overlay.show{
    display:flex;
}

.modal-close-btn{
    border:0;
    background:none;
    font-size:18px;
    cursor:pointer;
    color:#888;
    line-height:1;
    padding:4px;
}

.modal-close-btn:hover{
    color:#333;
}

.modal-cancel-btn{
    padding:12px 18px;
    border:1px solid #ccc;
    border-radius:7px;
    background:#fff;
    color:#333;
    font-size:14px;
    cursor:pointer;
}

.modal-cancel-btn:hover{
    background:#f5f5f5;
}