/* =============================================================================
   Whiteboard — self-contained stylesheet (no Bootstrap dependency).
   Implements exactly the classes the markup uses, themed as a tactile
   "graph-paper whiteboard": dot-grid surface, floating panels, ink + marker.
   ============================================================================= */

/* ---- Fonts (vendored, offline) ------------------------------------------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("vendor/fonts/sg-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("vendor/fonts/sg-ext-500.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("vendor/fonts/sg-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("vendor/fonts/sg-ext-700.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("vendor/fonts/inter-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("vendor/fonts/inter-ext-400.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("vendor/fonts/inter-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("vendor/fonts/inter-ext-500.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("vendor/fonts/inter-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("vendor/fonts/inter-ext-600.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --paper:#eaeefb; --paper-veil:#f5f7fd; --panel:#fff;
  --ink:#1c1e2b; --ink-soft:#646a80; --ink-faint:#9aa0b4;
  --line:#e3e7f2; --line-soft:#eef1f8;
  --brand:#5b5bf2; --brand-700:#4338ca; --brand-50:#ececfe;
  --accent:#ff7a59; --ok:#16a34a; --ok-700:#15803d; --danger:#e5484d; --warn:#f6a609;
  --r-panel:18px; --r-card:16px; --r-btn:11px; --r-input:10px;
  --shadow-sm:0 1px 2px rgba(28,30,43,.06),0 1px 3px rgba(28,30,43,.05);
  --shadow:0 4px 14px rgba(40,42,70,.08),0 2px 6px rgba(40,42,70,.05);
  --shadow-lg:0 18px 48px rgba(40,42,70,.16),0 6px 16px rgba(40,42,70,.08);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --display:"Space Grotesk","Inter",sans-serif;
}

/* ---- Reset / base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:var(--font); font-size:16px; line-height:1.5; color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px,rgba(70,76,110,.13) 1.4px,transparent 0),
    linear-gradient(180deg,var(--paper-veil),var(--paper) 60%);
  background-size:26px 26px,100% 100%; background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{font-family:var(--display); color:var(--ink); margin:0 0 .5rem; letter-spacing:-.015em; font-weight:700; line-height:1.2;}
h3{font-size:1.7rem; letter-spacing:-.025em;} h4{font-size:1.4rem;} h5{font-size:1.2rem;} h6{font-size:1rem;}
p{margin:0 0 1rem;}
a{color:var(--brand-700); text-decoration:none;} a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
input,button,select,textarea{font-family:inherit; font-size:inherit;}
::selection{background:rgba(91,91,242,.18);}
canvas{display:block;}

/* router visibility helper */
[data-route]{display:none;} [data-route].active{display:block;}

/* ---- Layout: container / grid -------------------------------------------- */
.container{width:100%; max-width:1160px; margin:0 auto; padding-left:1rem; padding-right:1rem;}
.container-fluid{width:100%; padding-left:1rem; padding-right:1rem;}
.row{display:flex; flex-wrap:wrap;}
.row.g-2{gap:.5rem;} .row.g-3{gap:1rem;}
.col{flex:1 1 0; min-width:0;}
.col-12{flex:0 0 auto; width:100%;}
@media(min-width:576px){ .col-sm-6{flex:0 0 auto; width:calc(50% - .5rem);} }
@media(min-width:992px){ .col-lg-4{flex:0 0 auto; width:calc((100% - 2rem)/3);} }
@media(min-width:1200px){ .col-xl-3{flex:0 0 auto; width:calc((100% - 3rem)/4);} }

/* ---- Flex / spacing / text utilities ------------------------------------- */
/* utilities use !important so they win over component rules, like Bootstrap */
.d-flex{display:flex!important;} .d-block{display:block!important;}
.d-inline-block{display:inline-block!important;} .d-none{display:none!important;}
.flex-wrap{flex-wrap:wrap!important;}
.align-items-center{align-items:center!important;}
.justify-content-between{justify-content:space-between!important;}
.ms-auto{margin-left:auto!important;} .ms-1{margin-left:.25rem!important;}
.gap-1{gap:.25rem!important;} .gap-2{gap:.5rem!important;}
.w-100{width:100%!important;} .h-100{height:100%!important;}
.mb-0{margin-bottom:0!important;} .mb-1{margin-bottom:.25rem!important;} .mb-2{margin-bottom:.5rem!important;}
.mb-3{margin-bottom:1rem!important;} .mb-4{margin-bottom:1.5rem!important;}
.mt-2{margin-top:.5rem!important;} .mt-3{margin-top:1rem!important;}
.py-2{padding-top:.5rem!important; padding-bottom:.5rem!important;}
.py-3{padding-top:1rem!important; padding-bottom:1rem!important;}
.py-4{padding-top:1.5rem!important; padding-bottom:1.5rem!important;}
.py-5{padding-top:3rem!important; padding-bottom:3rem!important;}
.p-4{padding:1.5rem!important;}
.text-center{text-align:center!important;} .text-end{text-align:right!important;}
.text-truncate{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.align-middle{vertical-align:middle!important;}
.bg-white{background:#fff!important;}
.small,small{font-size:.84em;}
.fw-bold{font-weight:700!important;}
.text-muted{color:var(--ink-soft)!important;}
.text-dark{color:var(--ink)!important;}
.vr{display:inline-block; align-self:stretch; width:1px; min-height:1.5em; background:var(--line);}
@media(min-width:576px){ .d-sm-inline{display:inline!important;} }

/* ---- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  padding:.5rem .95rem; font-weight:500; line-height:1.4; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-btn);
  cursor:pointer; text-decoration:none; white-space:nowrap; user-select:none;
  transition:transform .08s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn:disabled,.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none;}
.btn-sm{padding:.36rem .7rem; font-size:.86rem; border-radius:9px; gap:.35em;}

.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(91,91,242,.28);}
.btn-primary:hover{background:var(--brand-700); border-color:var(--brand-700); color:#fff; box-shadow:0 8px 20px rgba(91,91,242,.34);}
.btn-success{background:var(--ok); border-color:var(--ok); color:#fff; box-shadow:0 6px 16px rgba(22,163,74,.24);}
.btn-success:hover{background:var(--ok-700); border-color:var(--ok-700); color:#fff;}
.btn-warning{background:var(--warn); border-color:var(--warn); color:#3a2a00;}
.btn-warning:hover{background:#e29605; border-color:#e29605; color:#3a2a00;}
.btn-secondary{background:var(--ink-soft); border-color:var(--ink-soft); color:#fff;}
.btn-secondary:hover{background:#4d5267; border-color:#4d5267; color:#fff;}
.btn-light{background:#fff; border-color:var(--line); color:var(--ink); box-shadow:var(--shadow-sm);}
.btn-light:hover{background:var(--brand-50); border-color:#c9c9fb; color:var(--brand-700);}
.btn-outline-primary{background:#fff; border-color:#c9c9fb; color:var(--brand-700);}
.btn-outline-primary:hover{background:var(--brand); border-color:var(--brand); color:#fff;}
.btn-outline-secondary{background:#fff; border-color:var(--line); color:var(--ink-soft);}
.btn-outline-secondary:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
.btn-outline-danger{background:#fff; border-color:#f3c6c7; color:var(--danger);}
.btn-outline-danger:hover{background:var(--danger); border-color:var(--danger); color:#fff;}
.btn-outline-success{background:#fff; border-color:#bfe6cd; color:var(--ok);}
.btn-outline-success:hover{background:var(--ok); border-color:var(--ok); color:#fff;}
.btn-outline-info{background:#fff; border-color:#bae6f0; color:#0e7490;}
.btn-outline-info:hover{background:#0891b2; border-color:#0891b2; color:#fff;}
.btn-outline-dark{background:#fff; border-color:var(--line); color:var(--ink);}
.btn-outline-dark:hover{background:var(--ink); border-color:var(--ink); color:#fff;}

.btn-group{display:inline-flex;}
.btn-close{
  width:30px; height:30px; padding:0; border:none; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--ink-soft); font-size:0; position:relative;
}
.btn-close::before{content:"✕"; font-size:1rem; color:var(--ink-soft);}
.btn-close:hover{background:var(--line-soft);}

/* ---- Forms --------------------------------------------------------------- */
.form-label{display:inline-block; margin-bottom:.35rem; color:var(--ink-soft); font-weight:500; font-size:.92rem;}
.form-control,.form-select{
  display:block; width:100%; padding:.5rem .75rem; line-height:1.5;
  color:var(--ink); background:#fcfdff; border:1px solid var(--line);
  border-radius:var(--r-input); transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder{color:var(--ink-faint);}
.form-control:focus,.form-select:focus{
  outline:none; border-color:var(--brand); background:#fff;
  box-shadow:0 0 0 3.5px rgba(91,91,242,.18);
}
.form-control-sm,.form-select-sm{padding:.34rem .6rem; font-size:.88rem; border-radius:9px;}
.form-select{
  appearance:none; -webkit-appearance:none; padding-right:2rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23646a80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .65rem center; background-size:15px;
}
.form-control-color{width:3rem; min-width:3rem; height:2.3rem; padding:.2rem; cursor:pointer;}
.form-control-color.form-control-sm{height:2rem;}
.form-control-color::-webkit-color-swatch{border:none; border-radius:6px;}
.form-control-color::-moz-color-swatch{border:none; border-radius:6px;}
input[type=range]{accent-color:var(--brand); cursor:pointer; height:1.4rem;}
.form-check{display:block; min-height:1.5rem; padding-left:1.7em; position:relative;}
.form-check-inline{display:inline-flex; align-items:center; gap:.45rem; padding-left:0;}
.form-check-input{
  width:1.15em; height:1.15em; margin:0; vertical-align:middle; cursor:pointer;
  appearance:none; -webkit-appearance:none; background:#fff;
  border:1.5px solid var(--ink-faint); border-radius:5px; position:relative; flex:0 0 auto;
}
.form-check:not(.form-check-inline) .form-check-input{position:absolute; left:0; top:.15em;}
.form-check-input:checked{background:var(--brand); border-color:var(--brand);}
.form-check-input:checked::after{content:""; position:absolute; left:.32em; top:.12em; width:.3em; height:.6em; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.form-check-input:focus{outline:none; box-shadow:0 0 0 3px rgba(91,91,242,.18);}
.form-check-label{cursor:pointer;}

/* ---- Alerts -------------------------------------------------------------- */
.alert{padding:.7rem .9rem; border-radius:var(--r-input); border:1px solid transparent;}
.alert-danger{color:#a3262b; background:#fdecec; border-color:#f6d2d3;}

/* ---- Cards --------------------------------------------------------------- */
.card{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-sm);}
.card-body{padding:1rem; flex:1 1 auto;}
.card-title{font-family:var(--display); font-weight:700; margin:0 0 .35rem;}
.card-footer{padding:.6rem .75rem; border-top:1px solid var(--line-soft); display:flex; gap:.25rem; flex-wrap:wrap;}
.card-img-top{width:100%; border-top-left-radius:var(--r-card); border-top-right-radius:var(--r-card);}
.shadow-sm{box-shadow:var(--shadow)!important;}

/* ---- Tables -------------------------------------------------------------- */
.table-responsive{overflow-x:auto;}
.table{width:100%; border-collapse:collapse; color:var(--ink);}
.table th,.table td{padding:.7rem .85rem; border-bottom:1px solid var(--line-soft); text-align:left;}
.table thead th{font-family:var(--display); font-weight:500; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); border-bottom:1px solid var(--line);}
.table.align-middle th,.table.align-middle td{vertical-align:middle;}
.table tbody tr:last-child td{border-bottom:none;}
.table-hover tbody tr:hover{background:#f6f7fe;}
.table .text-center{text-align:center;} .table .text-end{text-align:right;}

/* ---- Badges -------------------------------------------------------------- */
.badge{display:inline-block; padding:.4em .7em; font-size:.78rem; font-weight:600; line-height:1; border-radius:999px;}
.badge.bg-success{background:#e3f6ea; color:#137a3a;}
.badge.bg-danger{background:#fdecec; color:#c0282d;}
.badge.bg-warning{background:#fff3da; color:#9a6500;}
.badge.bg-secondary{background:#eef1f8; color:#586079;}

/* ---- Modal --------------------------------------------------------------- */
.modal{position:fixed; inset:0; z-index:1050; overflow:auto; padding:1rem;}
.modal.d-block{display:block;}
.modal-dialog{max-width:520px; margin:1.75rem auto;}
.modal-dialog-centered{display:flex; align-items:center; min-height:calc(100% - 3.5rem);}
.modal-content{display:flex; flex-direction:column; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--shadow-lg); overflow:hidden;}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border-bottom:1px solid var(--line-soft);}
.modal-title{font-family:var(--display); font-weight:700; margin:0;}
.modal-body{padding:1.1rem;}
.modal-footer{display:flex; align-items:center; justify-content:flex-end; gap:.5rem; padding:.9rem 1.1rem; border-top:1px solid var(--line-soft);}

/* ---- Navbar (custom) ----------------------------------------------------- */
.navbar{display:flex;}
.wb-navbar{
  background:rgba(255,255,255,.86); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:.6rem 0; position:sticky; top:0; z-index:40;
}
.wb-navbar .container-fluid{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.wb-brand{font-family:var(--display); font-weight:700; font-size:1.18rem; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.55rem;}
.wb-brand:hover{text-decoration:none;}
.wb-mark{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand),#8f6bff); color:#fff; font-size:1rem; box-shadow:0 4px 10px rgba(91,91,242,.4);}
.wb-word{position:relative;}
.wb-word::after{content:""; position:absolute; left:-2px; right:-2px; bottom:-3px; height:6px; background:var(--accent); border-radius:6px; transform:rotate(-1.1deg); opacity:.85; z-index:-1;}
.wb-navbar .navbar-text{color:var(--ink-soft);}

/* ---- Whiteboard editor --------------------------------------------------- */
.wb-toolbar{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--shadow); padding:.75rem 1rem;}
.wb-toolbar .btn{min-width:42px;}
.wb-toolbar .btn-group{gap:6px; padding:5px; background:var(--paper-veil); border:1px solid var(--line); border-radius:14px;}
.wb-toolbar .btn-group>.btn[data-tool]{border-radius:10px; border:1px solid transparent; background:#fff; color:var(--ink-soft); font-size:1.05rem; min-width:42px; box-shadow:var(--shadow-sm); padding:.4rem .55rem;}
.wb-toolbar .btn-group>.btn[data-tool]:hover{color:var(--brand-700); background:var(--brand-50); border-color:#d6d6fb;}
.wb-toolbar .btn-group>.btn[data-tool].active{background:linear-gradient(135deg,var(--brand),#8268ff); color:#fff; border-color:var(--brand); box-shadow:0 5px 13px rgba(91,91,242,.36);}

.wb-canvas-wrap{
  background:radial-gradient(circle at 1px 1px,rgba(70,76,110,.07) 1.2px,transparent 0) 0 0/24px 24px,#fff;
  border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--shadow-lg);
  overflow:auto; padding:8px; max-height:calc(100vh - 240px);
}
canvas.wb-canvas{cursor:crosshair; touch-action:none; border-radius:10px; background:#fff; box-shadow:0 0 0 1px var(--line-soft);}

/* ---- Dashboard ----------------------------------------------------------- */
.board-card{cursor:pointer; overflow:hidden; transition:transform .16s ease, box-shadow .16s ease;}
.board-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)!important;}
.board-card-thumb{height:152px; object-fit:cover; background:#fff; border-bottom:1px solid var(--line-soft);}
.board-card .card-title{font-family:var(--font); font-weight:600;}
.thumb-placeholder{
  height:152px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:.85rem;
  background:radial-gradient(circle at 1px 1px,rgba(70,76,110,.12) 1.3px,transparent 0) 0 0/18px 18px, linear-gradient(135deg,#fafbff,#eef1fb);
  border-bottom:1px solid var(--line-soft);
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;}
  .board-card:hover,.btn:active{transform:none;}
}

/* ---- Stopka strony ---- */

#site-footer{
  flex-shrink:0;
  text-align:center;
  padding:18px 16px;
  margin-top:28px;
  font-size:.85rem;
  color:black;
  border-top:1px solid var(--line-soft);
}
#site-footer strong{ color: black; font-weight:600; }