/* Hans CRM, styled after hansjet.com: Francisco Serial headings, Nunito text, black and white with warm off white */

/* Nunito, self hosted (SIL Open Font License, see /fonts/NUNITO-OFL.txt) */
@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:200;src:url(/fonts/nunito-latin-200-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:200;src:url(/fonts/nunito-latin-ext-200-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:Nunito;font-style:normal;font-display:swap;font-weight:300;src:url(/fonts/nunito-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:300;src:url(/fonts/nunito-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:Nunito;font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/nunito-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/nunito-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:Nunito;font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/nunito-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/nunito-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Francisco Serial, the Hans Jet title font. Add the two files to public/fonts (see README). Until then a classic serif is used. */
@font-face{font-family:'Francisco Serial';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/franciscoserialxlightregular.ttf) format('truetype')}
@font-face{font-family:'Francisco Serial Regular';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/Francisco-Serial-Regular.ttf) format('truetype')}

:root{
  --serif:'Francisco Serial','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:Nunito,system-ui,sans-serif;
  --bg:#F7F7F6;--surface:#FFFFFF;--surface2:#F2F2F0;--line:#E4E4E4;
  --text:#151515;--body:#333333;--muted:#6B6B6B;
  --ink:#151515;--onInk:#FFFFFF;--inkSoft:#EFEFED;
  --warn:#7A4B00;--warnSoft:#F6EEDF;--warnLine:#E3CFA8;
  --red:#A1261B;--redSoft:#F8E9E7;
  --seg:rgba(255,255,255,.14);
  --shadow:0 1px 0 rgba(21,21,21,.04);
  /* aliases used by the scripts */
  --teal:var(--ink);--tealSoft:var(--inkSoft);--onTeal:var(--onInk);
  color-scheme:light
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#050507;--surface:#111114;--surface2:#18181C;--line:rgba(255,255,255,.14);
    --text:#FFFFFF;--body:#E4E4E4;--muted:#A8A8A8;
    --ink:#FFFFFF;--onInk:#151515;--inkSoft:rgba(255,255,255,.08);
    --warn:#E8B86A;--warnSoft:#231B0F;--warnLine:#5A4524;
    --red:#F0A097;--redSoft:#2A1412;
    --shadow:none;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#050507;--surface:#111114;--surface2:#18181C;--line:rgba(255,255,255,.14);
    --text:#FFFFFF;--body:#E4E4E4;--muted:#A8A8A8;
    --ink:#FFFFFF;--onInk:#151515;--inkSoft:rgba(255,255,255,.08);
    --warn:#E8B86A;--warnSoft:#231B0F;--warnLine:#5A4524;
    --red:#F0A097;--redSoft:#2A1412;
    --shadow:none;color-scheme:dark}


*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.5}
button,input,select,textarea{font-family:inherit;font-size:15px;color:var(--text);font-weight:300}
h1,h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.06em;color:var(--text);margin:0}
h1{font-size:30px;line-height:1.15}
h2{font-size:19px}
strong,b{font-weight:700}

/* Top bar, follows light and dark mode */
.appbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:6}
.heroin{max-width:1440px;margin:0 auto;padding:16px 24px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{height:38px;width:auto;display:block}
.brand .sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:14px}
.wrap{max-width:1440px;margin:0 auto;padding:28px 24px 110px}

/* Logos that swap with the theme */
.logo-dark{display:none !important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none !important}
  :root:not([data-theme="light"]) .logo-dark{display:block !important}
}
:root[data-theme="dark"] .logo-light{display:none !important}
:root[data-theme="dark"] .logo-dark{display:block !important}

.titlerow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.titlerow img{height:30px;width:auto}
.label img{height:20px;width:auto;vertical-align:-2px;margin-right:6px;display:inline-block}

/* iOS style segmented tabs, in Hans Jet monochrome */
.seg{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px;flex-wrap:wrap}
.tab{border:0;background:transparent;padding:9px 18px;border-radius:6px;font-weight:300;cursor:pointer;color:var(--muted);min-height:40px;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.tab:hover{color:var(--text)}
.tab.on{background:var(--ink);color:var(--onInk);font-weight:500}
.bottombar .seg{background:var(--surface);box-shadow:0 6px 24px rgba(0,0,0,.12)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);padding:22px}
.stack{display:flex;flex-direction:column;gap:16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.label{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.big{font-family:var(--serif);font-size:38px;font-weight:400;color:var(--text);letter-spacing:.02em;line-height:1.1}
.huge{font-family:var(--serif);font-size:52px;font-weight:400;color:var(--text);letter-spacing:.02em;line-height:1.05}
.muted{color:var(--muted)}

/* Buttons like the website: 5px corners, uppercase, light letter spaced text */
.btn{border:1px solid var(--ink);border-radius:5px;padding:12px 26px;font-weight:300;cursor:pointer;min-height:44px;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.btn-primary{background:var(--ink);color:var(--onInk)}
.btn-primary:hover{opacity:.88}
.btn-primary:disabled{opacity:.35;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:4px;padding:3px 9px;font-size:12px;font-weight:500;letter-spacing:.04em;background:transparent;color:var(--muted);border:1px solid var(--line)}
.chip-teal{background:var(--ink);color:var(--onInk);border-color:var(--ink)}
.chip-warn{background:var(--warnSoft);color:var(--warn);border-color:var(--warnLine)}
.chip-red{background:var(--redSoft);color:var(--red);border-color:transparent}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--warn);display:inline-block;flex:none}

.req{border:1px solid var(--line);border-radius:6px;padding:16px 18px;background:var(--surface);display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.req.red{border-color:var(--red);background:var(--redSoft)}
.req.done{opacity:.6}
.ico{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--text);display:flex;align-items:center;justify-content:center;flex:none}
.req-main{flex:999 1 320px;min-width:0;display:flex;flex-direction:column;gap:4px}
.reqname{font-family:var(--serif);font-size:18px;letter-spacing:.03em;color:var(--text)}
.req-side{flex:1 1 200px;display:flex;flex-direction:column;gap:6px}

.row2{display:flex;flex-wrap:wrap;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;flex:1 1 220px;min-width:0}
.field input,.field select,.field textarea,.sel{border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:10px 12px;min-height:44px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus,.sel:focus{outline:none;border-color:var(--ink)}
.field textarea,textarea.sel{min-height:90px;resize:vertical}
.opt{border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:10px 18px;font-weight:300;cursor:pointer;min-height:44px;letter-spacing:.03em}
.opt:hover{border-color:var(--ink)}
.opt.on{background:var(--ink);border-color:var(--ink);color:var(--onInk);font-weight:500}
.check{display:flex;gap:10px;align-items:center;font-weight:500;min-height:44px}
.check input{width:18px;height:18px;accent-color:var(--ink)}
.banner{background:var(--warnSoft);border:1px solid var(--warnLine);color:var(--warn);border-radius:5px;padding:12px 14px;font-weight:500}
.ok{border:1px solid var(--ink);font-weight:500}
.err{color:var(--red);font-weight:500}

.split{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.listcard{flex:999 1 560px;min-width:0;padding:0;overflow:hidden}
.tablewrap{overflow-x:auto}
.table{min-width:760px}
.row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 70px;gap:12px;align-items:center;padding:12px 18px;border:0;border-bottom:1px solid var(--line);cursor:pointer;background:transparent;width:100%;text-align:left;min-height:56px}
.row:hover{background:var(--surface2)}
.row.head{cursor:default;background:var(--surface2)}
.row.prot{background:var(--warnSoft)}
.row.sel{box-shadow:inset 3px 0 0 var(--ink);background:var(--surface2)}
.name{display:flex;align-items:center;gap:8px;font-weight:500;min-width:0;color:var(--text)}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel{flex:1 1 420px;max-width:520px}
.pname{font-family:var(--serif);font-size:22px;text-transform:uppercase;letter-spacing:.06em;color:var(--text);line-height:1.2}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--onInk);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;letter-spacing:.06em;flex:none}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.booking{border:1px solid var(--line);border-radius:5px;overflow:hidden}
.booking>button{width:100%;border:0;background:var(--surface2);padding:12px 14px;display:flex;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;min-height:44px}
.booking .body{padding:12px 14px;font-size:14px}
.tl{padding:10px 12px;border-left:2px solid var(--line);background:transparent}

.bottombar{position:fixed;left:0;right:0;bottom:16px;display:flex;justify-content:center;z-index:5;pointer-events:none}
.bottombar .seg{pointer-events:auto}
.bar{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.bar span{display:block;height:100%;border-radius:3px;background:var(--ink)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.switch{width:52px;height:30px;border-radius:15px;border:1px solid var(--line);position:relative;cursor:pointer;background:var(--surface2)}
.switch.on{background:var(--ink);border-color:var(--ink)}
.switch span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:left .15s}
.switch.on span{left:25px;background:var(--onInk)}
.switch:disabled{cursor:not-allowed;opacity:.8}
.hidden{display:none !important}
.themebtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--text);cursor:pointer;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.themebtn:hover{border-color:var(--ink)}
.themebtn svg{width:18px;height:18px}
.topright{display:flex;align-items:center;gap:10px}
.demo{border:1px solid var(--line);color:var(--muted);border-radius:5px;padding:7px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* Sign in page: soft blurred orange and silver gradient, white veil in light mode, dark veil in dark mode */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;background:#F4F4F3;isolation:isolate}
.login::before{content:"";position:absolute;inset:-15%;z-index:-2;filter:blur(60px);
  background:
    radial-gradient(ellipse 34% 40% at 54% 50%, #EE6A1A 0%, #F07A2B 22%, rgba(242,140,70,.75) 45%, rgba(242,140,70,0) 75%),
    radial-gradient(ellipse 58% 62% at 32% 50%, #A9AFB8 0%, rgba(169,175,184,.7) 40%, rgba(169,175,184,0) 80%),
    radial-gradient(ellipse 50% 55% at 76% 55%, #C3C8CF 0%, rgba(195,200,207,0) 78%),
    #F4F4F3}
.login::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.18)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .login{background:#050507}
  :root:not([data-theme="light"]) .login::before{background:
    radial-gradient(ellipse 34% 40% at 54% 50%, #EE6A1A 0%, #F07A2B 22%, rgba(242,140,70,.7) 45%, rgba(242,140,70,0) 75%),
    radial-gradient(ellipse 58% 62% at 32% 50%, #8E949C 0%, rgba(142,148,156,.6) 40%, rgba(142,148,156,0) 80%),
    radial-gradient(ellipse 50% 55% at 76% 55%, #6F757D 0%, rgba(111,117,125,0) 78%),
    #050507}
  :root:not([data-theme="light"]) .login::after{background:rgba(5,5,7,.5)}
}
:root[data-theme="dark"] .login{background:#050507}
:root[data-theme="dark"] .login::before{background:
    radial-gradient(ellipse 34% 40% at 54% 50%, #EE6A1A 0%, #F07A2B 22%, rgba(242,140,70,.7) 45%, rgba(242,140,70,0) 75%),
    radial-gradient(ellipse 58% 62% at 32% 50%, #8E949C 0%, rgba(142,148,156,.6) 40%, rgba(142,148,156,0) 80%),
    radial-gradient(ellipse 50% 55% at 76% 55%, #6F757D 0%, rgba(111,117,125,0) 78%),
    #050507}
:root[data-theme="dark"] .login::after{background:rgba(5,5,7,.5)}

.login .panelbox{width:100%;max-width:400px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;padding:36px 32px;border-radius:8px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.login .panelbox img{height:62px;width:auto}
.login h1{font-size:24px}
.login p{margin:0;color:var(--body)}
.login input{width:100%;background:rgba(255,255,255,.7);border:1px solid rgba(21,21,21,.18);color:var(--text);border-radius:5px;padding:12px 14px;min-height:46px;text-align:center;letter-spacing:.04em}
.login .btn{width:100%}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .login .panelbox{background:rgba(17,17,20,.5);border-color:rgba(255,255,255,.14)}
  :root:not([data-theme="light"]) .login input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
}
:root[data-theme="dark"] .login .panelbox{background:rgba(17,17,20,.5);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .login input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}


@media (max-width:640px){
  .wrap{padding:20px 16px 110px}.heroin{padding:14px 16px}
  .tab{padding:8px 11px;font-size:12px}
  .brand .sub{display:none}
  h1{font-size:24px}
}
@media print{
  .appbar .seg,.demo,.bottombar,.btn{display:none !important}
  body{background:#fff}
  .card{break-inside:avoid}
}