/*
 * The customer pages' look, matched to the public website syphoon.com.
 *
 * WHAT IT COPIES. syphoon.com draws text in Inter with Roboto Mono for small
 * labels, uses one brand blue (#1262e8), an off-white page (#fafafa), white
 * cards with thin zinc borders, and square corners everywhere (its radius is
 * zero). This file applies the same tokens to the dashboard's Gentelella
 * markup without changing that markup.
 *
 * WHERE IT APPLIES. Only on pages whose <body> carries the class `syp-site`:
 * login and sign-up, the "check your email" page, Home, Detailed Usage and the
 * profile pages. The operator pages (Users, Domain Mapping, Settings,
 * Administration) do not opt in and keep the Gentelella look, because they
 * share the sidebar and top bar templates; every rule below therefore starts
 * with `body.syp-site`, so nothing leaks onto them.
 *
 * LOAD ORDER. It must load AFTER Gentelella's custom.css to win; base_site.html
 * has a `theme` block right after that link, and the customer templates fill
 * it with this file.
 *
 * Light only: syphoon.com also has a dark mode, which this does not copy.
 *
 * The two fonts are served from this site's own /static/fonts/ (copied from
 * syphoon.com, both under open licences), so no visitor's browser is sent to a
 * third-party font host.
 */

@font-face {
    font-family: "Syp Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/inter-latin-var.woff2") format("woff2");
}
@font-face {
    font-family: "Syp Roboto Mono";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("/static/fonts/roboto-mono-latin-var.woff2") format("woff2");
}

body.syp-site {
    --syp-blue: #1262e8;
    --syp-blue-hover: #0f52c4;
    --syp-blue-soft: #eef4fe;
    --syp-bg: #fafafa;
    --syp-card: #ffffff;
    --syp-fg: #18181b;
    --syp-fg-2: #3f3f46;
    --syp-muted: #71717a;
    --syp-border: #e4e4e7;
    --syp-border-strong: #d4d4d8;
    --syp-green: #16a34a;
    --syp-red: #dc2626;
    --syp-grid: #0000000e;
    --syp-sans: "Syp Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --syp-mono: "Syp Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    background: var(--syp-bg);
    color: var(--syp-fg-2);
    font-family: var(--syp-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
body.syp-site h1, body.syp-site h2, body.syp-site h3,
body.syp-site h4, body.syp-site h5, body.syp-site h6 {
    font-family: var(--syp-sans);
    color: var(--syp-fg);
    letter-spacing: -0.01em;
}
body.syp-site a { color: var(--syp-blue); }
body.syp-site a:hover, body.syp-site a:focus { color: var(--syp-blue-hover); }
body.syp-site :focus-visible { outline: 2px solid var(--syp-blue); outline-offset: 2px; }

/* ---------------------------------------------------------------- sidebar */

body.syp-site .left_col {
    background: var(--syp-card);
}
/* The dividing line is drawn on the inner column, which covers the outer one,
   as an inset shadow so it adds no width to Gentelella's fixed 230px. */
body.syp-site .left_col.scroll-view {
    box-shadow: inset -1px 0 0 var(--syp-border);
}
/* The logo strip: transparent so the dividing line shows through; the
   !important beats the inline `border: 0` in sidebar.html. */
body.syp-site .nav_title {
    background: transparent;
    height: 65px;
    border-bottom: 1px solid var(--syp-border) !important;
    display: flex;
    align-items: center;
}
body.syp-site .site_title {
    height: 64px;
    line-height: 64px;
    padding-left: 20px;
}
body.syp-site .site_title svg { width: 140px; vertical-align: middle; }
/* The avatar and "Welcome," block is Gentelella's demo furniture; the top bar
   already names the signed-in user. */
body.syp-site .left_col .profile { display: none; }
body.syp-site .main_menu_side { margin-top: 16px; }
body.syp-site .nav.side-menu > li { margin: 0 12px 2px; }
body.syp-site .nav.side-menu > li > a {
    color: var(--syp-fg-2) !important;
    font-family: var(--syp-sans);
    font-size: 14px;
    font-weight: 500;
    padding: 9px 12px;
    margin-bottom: 0;
    text-shadow: none;
    border-left: 2px solid transparent;
}
body.syp-site .nav.side-menu > li > a:hover {
    color: var(--syp-fg) !important;
    background: #f4f4f5;
}
body.syp-site .main_menu .fa,
body.syp-site .nav.side-menu > li > a i {
    color: var(--syp-muted);
    font-size: 15px;
    width: 22px;
}
/* The page you are on: blue text and a blue rule, as syphoon.com marks the
   current item in its table of contents. */
body.syp-site .nav.side-menu > li.current-page,
body.syp-site .nav.side-menu > li.active {
    border-right: 0;
    background: transparent;
}
body.syp-site .nav.side-menu > li.current-page > a,
body.syp-site .nav.side-menu > li.active > a {
    color: var(--syp-blue) !important;
    background: var(--syp-blue-soft);
    border-left-color: var(--syp-blue);
    box-shadow: none;
}
body.syp-site .nav.side-menu > li.current-page > a i,
body.syp-site .nav.side-menu > li.active > a i { color: var(--syp-blue); }

/* Collapsed sidebar (the menu button): icons only, still white. */
body.syp-site.nav-sm .nav.side-menu > li { margin: 0 8px 2px; }
body.syp-site.nav-sm .nav.side-menu li a { padding: 10px 0; text-align: center; font-size: 11px; }
body.syp-site.nav-sm .nav.side-menu li a i { width: auto; font-size: 18px !important; }
body.syp-site.nav-sm .site_title { padding-left: 8px; }
body.syp-site.nav-sm .site_title svg { width: 54px; }
body.syp-site.nav-sm .container.body .col-md-3.left_col,
body.syp-site.nav-sm .left_col.scroll-view { min-height: 100vh; }

/* ---------------------------------------------------------------- top bar */

body.syp-site .nav_menu {
    background: var(--syp-card);
    border-bottom: 1px solid var(--syp-border);
    min-height: 64px;
    margin-bottom: 24px;
}
body.syp-site .toggle { padding-top: 21px; }
body.syp-site .toggle a { padding: 0; }
body.syp-site .toggle a i { color: var(--syp-muted); font-size: 20px; }
body.syp-site .top_nav .navbar-right { margin-top: 0; }
body.syp-site .top_nav .navbar-right > li > a.user-profile {
    color: var(--syp-fg) !important;
    font-family: var(--syp-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    padding: 16px 20px 16px 15px;
}
body.syp-site .top_nav .nav .open > a,
body.syp-site .top_nav .nav .open > a:hover,
body.syp-site .top_nav .nav .open > a:focus,
body.syp-site .top_nav .nav > li > a:hover { background: #f4f4f5; }
body.syp-site .user-profile img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid var(--syp-border);
}
body.syp-site .dropdown-menu {
    border-radius: 0;
    border: 1px solid var(--syp-border);
    box-shadow: 0 8px 24px rgba(24, 24, 27, 0.08);
    padding: 6px 0;
    font-family: var(--syp-sans);
}
body.syp-site .dropdown-menu > li > a { color: var(--syp-fg-2); padding: 8px 14px; }
body.syp-site .dropdown-menu > li > a:hover { background: #f4f4f5; color: var(--syp-fg); }
body.syp-site .dropdown-usermenu input[readonly] {
    font-family: var(--syp-mono);
    font-size: 11px;
    border: 1px solid var(--syp-border);
    background: var(--syp-bg);
    padding: 2px 6px;
}

/* ---------------------------------------------------------- page and cards */

body.syp-site .container.body .right_col {
    background: var(--syp-bg);
}
body.syp-site .page-title h3 { font-weight: 600; font-size: 24px; }

body.syp-site .x_panel {
    background: var(--syp-card);
    border: 1px solid var(--syp-border);
    border-radius: 0;
    box-shadow: none;
    padding: 16px 20px;
    margin-bottom: 20px;
}
body.syp-site .x_title {
    border-bottom: 1px solid var(--syp-border);
    padding: 0 0 12px;
    margin-bottom: 16px;
}
body.syp-site .x_title h2 {
    color: var(--syp-fg);
    font-size: 16px;
    font-weight: 600;
    margin: 6px 0 0;
}
/* The small note beside a panel title becomes a mono label, as syphoon.com
   writes its section tags. */
body.syp-site .x_title h2 small {
    font-family: var(--syp-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--syp-muted);
    margin-left: 8px;
}
/* Home's "Domain Summary" block is a panel with its own markup. */
body.syp-site .dashboard_graph {
    background: var(--syp-card);
    border: 1px solid var(--syp-border);
    padding: 16px 20px;
}
body.syp-site .dashboard_graph .x_title { padding: 0 0 12px; }
body.syp-site .dashboard_graph .x_title h3 {
    color: var(--syp-fg);
    font-size: 16px;
    font-weight: 600;
    margin-top: 6px;
}
body.syp-site .profile_title {
    background: var(--syp-bg);
    border: 1px solid var(--syp-border);
}
body.syp-site .profile_title h2 { font-size: 16px; font-weight: 600; }
body.syp-site .x_content h4 { font-size: 13px; font-weight: 500; color: var(--syp-muted); }
body.syp-site .panel_toolbox > li > a { color: var(--syp-muted); }

/* Home: the six figures across the top, as a row of bordered cells. */
body.syp-site .tile_count {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 20px;
    background: var(--syp-card);
    border: 1px solid var(--syp-border);
}
body.syp-site .tile_count .tile_stats_count {
    float: none;
    flex: 1 1 160px;
    width: auto;
    padding: 16px 20px;
    margin: 0;
    border-right: 1px solid var(--syp-border);
}
body.syp-site .tile_count .tile_stats_count:last-child { border-right: 0; }
body.syp-site .tile_count .tile_stats_count:before { display: none; }
body.syp-site .tile_count .tile_stats_count span.count_top {
    white-space: normal;
    font-family: var(--syp-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--syp-muted);
}
body.syp-site .tile_count .tile_stats_count span.count_top i { color: var(--syp-blue); margin-right: 2px; }
body.syp-site .tile_count .tile_stats_count .count {
    font-family: var(--syp-sans);
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 600;
    color: var(--syp-fg);
    margin-top: 8px;
    letter-spacing: -0.02em;
}
body.syp-site .tile_count .tile_stats_count .count.green { color: var(--syp-green); }
body.syp-site .tile_count .tile_stats_count .count.blue { color: var(--syp-blue); }
body.syp-site .tile_count .tile_stats_count .count.red { color: var(--syp-red); }

/* Detailed Usage: the four summary boxes. */
body.syp-site .tile-stats {
    background: var(--syp-card);
    border: 1px solid var(--syp-border);
    border-radius: 0;
    box-shadow: none;
    padding: 4px 0 8px;
}
body.syp-site .tile-stats .icon { top: 18px; right: 40px; }
body.syp-site .tile-stats .icon i { color: #e4e4e7; font-size: 44px; }
body.syp-site .tile-stats:hover .icon i { color: #d4d4d8; }
body.syp-site .tile-stats .count {
    color: var(--syp-fg);
    font-family: var(--syp-sans);
    font-weight: 600;
    font-size: 30px;
    letter-spacing: -0.02em;
}
body.syp-site .tile-stats h3 {
    color: var(--syp-fg-2);
    font-size: 15px;
    font-weight: 600;
}
body.syp-site .tile-stats p {
    font-family: var(--syp-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--syp-muted);
}

/* Bars in the "Top Domains" list and on the profile page. */
body.syp-site .progress {
    border-radius: 0;
    background: #f4f4f5;
    box-shadow: none;
}
body.syp-site .progress-bar,
body.syp-site .progress-bar.bg-green { background-color: var(--syp-blue) !important; }
body.syp-site .widget_summary .w_left span { color: var(--syp-fg-2); font-size: 13px; }

/* ----------------------------------------------------- buttons and inputs */

body.syp-site .btn {
    border-radius: 0;
    font-family: var(--syp-sans);
    font-weight: 500;
    box-shadow: none;
    text-shadow: none;
}
body.syp-site .btn-primary,
body.syp-site .btn-success,
body.syp-site .btn-info {
    background: var(--syp-blue);
    border-color: var(--syp-blue);
    color: #fff;
}
body.syp-site .btn-primary:hover,
body.syp-site .btn-success:hover,
body.syp-site .btn-info:hover,
body.syp-site .btn-primary:focus,
body.syp-site .btn-success:focus,
body.syp-site .btn-info:focus {
    background: var(--syp-blue-hover);
    border-color: var(--syp-blue-hover);
    color: #fff;
}
body.syp-site .btn-default {
    background: var(--syp-card);
    border: 1px solid var(--syp-border-strong);
    color: var(--syp-fg);
}
body.syp-site .btn-default:hover { background: #f4f4f5; }
/* The table export buttons (Copy, CSV, Excel, PDF, Print) are small tools:
   mono, like syphoon.com's "Print / Save PDF". */
body.syp-site .dt-buttons .btn,
body.syp-site .dt-buttons .dt-button {
    font-family: var(--syp-mono);
    font-size: 12px;
    padding: 5px 12px;
}

body.syp-site .form-control,
body.syp-site select,
body.syp-site input[type="search"] {
    border-radius: 0;
    border: 1px solid var(--syp-border-strong);
    box-shadow: none;
    color: var(--syp-fg);
    font-family: var(--syp-sans);
}
body.syp-site .form-control:focus,
body.syp-site select:focus,
body.syp-site input[type="search"]:focus {
    border-color: var(--syp-blue);
    box-shadow: 0 0 0 3px rgba(18, 98, 232, 0.15);
    outline: 0;
}

/* The date-range picker button on Home and Detailed Usage. */
body.syp-site #reportrange,
body.syp-site .reportrange {
    border: 1px solid var(--syp-border-strong) !important;
    border-radius: 0;
    font-family: var(--syp-mono);
    font-size: 12px;
    color: var(--syp-fg-2);
    background: var(--syp-card);
}
body.syp-site .daterangepicker { border-radius: 0; font-family: var(--syp-sans); }
body.syp-site .daterangepicker td.active,
body.syp-site .daterangepicker td.active:hover { background-color: var(--syp-blue); border-radius: 0; }
body.syp-site .daterangepicker .ranges li.active { background: var(--syp-blue); border-color: var(--syp-blue); }

/* ---------------------------------------------------------------- tables */

body.syp-site .table > thead > tr > th {
    font-family: var(--syp-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--syp-muted);
    background: var(--syp-bg);
    border-bottom: 1px solid var(--syp-border);
}
body.syp-site .table > tbody > tr > td { border-top: 1px solid var(--syp-border); color: var(--syp-fg-2); }
body.syp-site .table-bordered,
body.syp-site .table-bordered > thead > tr > th,
body.syp-site .table-bordered > tbody > tr > td { border-color: var(--syp-border); }
body.syp-site .table-hover > tbody > tr:hover,
body.syp-site .table-striped > tbody > tr:nth-of-type(odd) { background: var(--syp-bg); }
body.syp-site .dataTables_wrapper .dataTables_info,
body.syp-site .dataTables_wrapper .dataTables_length,
body.syp-site .dataTables_wrapper .dataTables_filter { color: var(--syp-muted); font-size: 13px; }
body.syp-site .pagination > li > a,
body.syp-site .pagination > li > span { border-radius: 0 !important; color: var(--syp-fg-2); border-color: var(--syp-border); }
body.syp-site .pagination > .active > a,
body.syp-site .pagination > .active > a:hover { background: var(--syp-blue); border-color: var(--syp-blue); color: #fff; }

/* Profile tabs. */
body.syp-site .nav-tabs { border-bottom: 1px solid var(--syp-border); }
body.syp-site .nav-tabs > li > a { border-radius: 0; color: var(--syp-muted); }
body.syp-site .nav-tabs > li.active > a,
body.syp-site .nav-tabs > li.active > a:hover {
    color: var(--syp-fg);
    border-color: var(--syp-border) var(--syp-border) transparent;
    box-shadow: inset 0 2px 0 var(--syp-blue);
}

/* ---------------------------------------------------------------- footer */

body.syp-site footer {
    background: var(--syp-card);
    border-top: 1px solid var(--syp-border);
    color: var(--syp-muted);
    font-family: var(--syp-mono);
    font-size: 12px;
}

/* ============================================================================
 * Sign-in, sign-up and "check your email": one centred card on syphoon.com's
 * faint square grid, with the wordmark above it.
 * ========================================================================== */

body.syp-site.syp-auth {
    min-height: 100vh;
    background-color: var(--syp-bg);
    background-image:
        linear-gradient(var(--syp-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--syp-grid) 1px, transparent 1px);
    background-size: 28px 28px;
}
body.syp-site .auth_page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}
body.syp-site .auth_brand { display: block; margin-bottom: 28px; }
body.syp-site .auth_brand svg { width: 168px; height: auto; display: block; }
body.syp-site .auth_card {
    width: 100%;
    max-width: 420px;
    background: var(--syp-card);
    border: 1px solid var(--syp-border);
    border-top: 2px solid var(--syp-blue);
    padding: 32px 32px 28px;
    text-align: left;
}
body.syp-site .auth_card.wide { max-width: 520px; }
body.syp-site .auth_eyebrow {
    font-family: var(--syp-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--syp-blue);
    margin: 0 0 8px;
}
body.syp-site .auth_card h1 {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
body.syp-site .auth_card h1 em { font-style: normal; color: var(--syp-blue); }
body.syp-site .auth_lead { color: var(--syp-muted); font-size: 14px; margin: 0 0 24px; }
body.syp-site .auth_field { position: relative; margin-bottom: 16px; }
body.syp-site .auth_field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--syp-fg);
    margin-bottom: 6px;
}
body.syp-site .auth_field .form-control {
    height: 42px;
    padding: 8px 12px;
    font-size: 14px;
    background: var(--syp-card);
}
/* The tick or warning that the live username/email/password checks show. */
body.syp-site .auth_field .field_alert {
    position: absolute;
    right: 12px;
    top: 36px;
    font-size: 18px;
    display: none;
}
body.syp-site .auth_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 20px;
    font-size: 13px;
}
body.syp-site .auth_submit {
    width: 100%;
    height: 44px;
    font-size: 15px;
    margin: 0;
}
body.syp-site .auth_submit:disabled,
body.syp-site .auth_submit[disabled] {
    background: #a1a1aa;
    border-color: #a1a1aa;
    opacity: 1;
    cursor: not-allowed;
}
body.syp-site .auth_switch {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--syp-border);
    font-size: 14px;
    color: var(--syp-muted);
    text-align: center;
}
body.syp-site .auth_switch a { font-weight: 500; }
body.syp-site footer.auth_footer {
    background: transparent;
    border-top: 0;
    margin-left: 0;
    padding: 0;
    margin-top: 24px;
    text-align: center;
    font-family: var(--syp-mono);
    font-size: 12px;
    color: var(--syp-muted);
}
body.syp-site .auth_footer p { margin: 0 0 6px; }
body.syp-site .auth_footer a { color: var(--syp-muted); text-decoration: underline; }
body.syp-site .auth_footer a:hover { color: var(--syp-blue); }

/* The policy box on the sign-up form. */
body.syp-site .policy_consent {
    font-size: 13px;
    line-height: 1.55;
    color: var(--syp-fg-2);
    margin: 4px 0 18px;
}
body.syp-site .policy_consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: normal;
    cursor: pointer;
    margin: 0;
}
body.syp-site .policy_consent input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--syp-blue);
    cursor: pointer;
}
body.syp-site .policy_consent a { text-decoration: underline; }
body.syp-site .captcha_box { margin: 0 0 16px; min-height: 78px; }
body.syp-site .captcha_hint { font-size: 12px; color: var(--syp-muted); margin: 8px 0 0; text-align: center; }
body.syp-site .auth_alert {
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-left: 2px solid var(--syp-red);
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

/* The buttons under a message page (404, 500, invalid link). */
body.syp-site .auth_lead p { margin: 0 0 10px; }
body.syp-site .message_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
body.syp-site .message_actions .btn { padding: 9px 18px; font-size: 14px; }

/* The two forms share one page; the address decides which shows: #signup
   for the sign-up form, anything else for sign-in. Pure CSS, so a link to
   /dashboard/login/#signup opens the sign-up form directly. */
body.syp-site .auth_panel_signup { display: none; }
body.syp-site #signup:target ~ .auth_page .auth_panel_signup { display: block; }
body.syp-site #signup:target ~ .auth_page .auth_panel_signin { display: none; }
body.syp-site .hiddenanchor { display: none; }

@media (max-width: 991px) {
    body.syp-site .toggle { padding-left: 14px; }
}
@media (max-width: 480px) {
    body.syp-site .tile_count .tile_stats_count { padding: 12px 14px; }
    body.syp-site .tile_count .tile_stats_count .count { font-size: 21px !important; }
    body.syp-site .auth_card { padding: 24px 20px; }
    body.syp-site .captcha_box { transform: scale(0.92); transform-origin: 0 0; }
}