/* Empty CSS from Django Suit app to override original file */


/* ============================================================
   FilteredSelectMultiple widget (auth groups, M2M fields)
   Django >= 4 uses flex layout from admin/css/widgets.css with
   <button> choosers; suit.css still applies old float rules that
   scramble the widget. widgets.css is loaded in base_site.html
   before this file — these overrides must match suit.css
   specificity to restore Django's intended layout.
   ============================================================ */

/* CSS variables widgets.css expects from admin/css/base.css */
.selector {
    --border-color: #ccc;
    --body-quiet-color: #666;
    --darkened-bg: #f8f8f8;
    --primary: #79aec8;
    --secondary: #f5dd5d;
    --header-link-color: #fff;
    --breadcrumbs-fg: #c4dce8;
}

.form-horizontal .control-group .controls .selector {
    display: flex;
    overflow: visible;
    width: 100%;
    max-width: 760px;
}

.form-horizontal .control-group .controls .selector .selector-available,
.form-horizontal .control-group .controls .selector .selector-chosen {
    float: none;
    width: auto;
    min-width: 0;
    max-width: none;
}

.form-horizontal .control-group .controls .selector .selector-chooser {
    float: none;
    margin: 0;
    align-self: center;
}

.form-horizontal .control-group .controls .selector .selector-chooser li {
    list-style: none;
}

/* Match the chosen-title header to the available-title header
   (Django colors it yellow via --secondary by default) */
.selector .selector-chosen-title {
    background: var(--darkened-bg);
    color: var(--body-quiet-color);
}

.selector .selector-chosen-title label {
    color: var(--body-quiet-color);
}


/* ============================================================
   Calendar / clock popup (DateTimeShortcuts)
   widgets.css expects variables from admin/css/base.css and
   renders arrows from calendar-icons.svg; suit.css's legacy rules
   replace the icons with gradient buttons and leave the box
   transparent (undefined vars). Restore Django's intended look.
   ============================================================ */

.calendarbox, .clockbox {
    --body-bg: #fff;
    --body-fg: #333;
    --hairline-color: #e8e8e8;
    --border-color: #ccc;
    --body-quiet-color: #666;
    --darkened-bg: #f8f8f8;
    --accent: #79aec8;
    --secondary: #79aec8;
    --button-fg: #fff;
    --close-button-bg: #e2e2e2;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
}

/* Undo suit's gradient button styling on the month arrows */
.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
    width: 15px;
    height: 15px;
    padding: 0;
    top: 8px;
    background-color: transparent;
    background-image: url(../img/calendar-icons.svg);
    background-repeat: no-repeat;
    text-shadow: none;
    border-radius: 0;
}

.calendarnav-previous {
    left: 10px;
    background-position: 0 0;
}

.calendarnav-next {
    right: 10px;
    background-position: 0 -15px;
}

.calendarnav-previous:hover,
.calendarnav-next:hover {
    background-color: transparent;
    background-image: url(../img/calendar-icons.svg);
}


/* ============================================================
   Ledenbase Admin — Mobile Responsive Enhancements
   Target: phones (< 768px) | Zero impact on desktop admin

   Layout facts (from suit.css):
   - .suit-columns  : flex container, padding-left:200px, padding-right:40px
   - #suit-left     : 200px wide sidebar, margin-left:-100%
   - #suit-center   : width:100% main column
   - .inner-two-columns: change form right rail (save box) floated right
   - .form-row      : display:table-row with .control-label/.controls cells
   ============================================================ */

/* ── Mobile drawer toggle button (only visible below 768px) ── */
.hamburger {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 20px;
    color: #d4d4d4;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
}

.hamburger:hover,
.hamburger:focus {
    color: #fff;
}

.hamburger:active {
    background: rgba(255, 255, 255, 0.15);
}

/* ── Drawer animation (harmless on desktop, hidden anyway) ─── */
#suit-left {
    -webkit-transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
}

/* ==========================================================
   SMALL SCREENS (< 768px)
   ========================================================== */
@media (max-width: 767px) {

    /* ── Kill suit.css desktop floor: body { min-width: 960px } ── */
    body {
        min-width: 0 !important;
    }

    /* The white sidebar strip (bg_left_white.gif) is desktop-only;
       on mobile the menu is a drawer, so use the plain gray bg */
    #wrap {
        background: none;
    }

    #container,
    .suit-columns,
    #suit-center .colM {
        min-width: 0;
        max-width: 100%;
    }

    /* ── Header ─────────────────────────────────────────────── */
    /* Flex header: user-tools (logout link) always fits, the site
       name shrinks with an ellipsis instead of clipping the links */
    .header {
        position: relative;
        display: flex;
        align-items: center;
    }

    .hamburger {
        display: block;
    }

    .header #branding {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 44px;
        border-right: 0;
    }

    .header #branding h1 {
        font-size: 16px;
        margin: 4px 10px 0 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header #branding img {
        max-height: 28px;
        width: auto;
        vertical-align: middle;
    }

    /* hide clock/date block, it eats too much width */
    .header-content.header-content-first {
        display: none;
    }

    .header #user-tools {
        flex: 0 0 auto;
        font-size: 11px;
        padding: 3px 8px 0 0;
        max-width: none;
        white-space: nowrap;
        overflow: visible;
    }

    .header #user-tools .user-links {
        margin-left: 0;
    }

    /* hide "Welcome, X." text, keep the links */
    .header #user-tools .welcome-msg {
        display: none;
    }

    /* ── Outer layout: sidebar becomes slide-in drawer ──────── */
    .suit-columns {
        display: block;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #suit-center {
        width: auto !important;
        float: none !important;
        min-width: 0;
        padding: 15px;
    }

    #suit-left {
        position: fixed;
        top: 45px;
        left: 0;
        z-index: 9999;
        width: 250px !important;
        max-width: 250px !important;
        height: calc(100vh - 45px);
        margin: 0 !important;
        right: auto !important;
        float: none !important;
        background: #fff;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.25);
    }

    body.mobile-drawer-active #suit-left {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    /* dark backdrop under the drawer, above the page content */
    body.mobile-drawer-active::after {
        content: '';
        position: fixed;
        top: 45px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9998;
    }

    /* ── Change form: stack save-box rail above the form ────── */
    .inner-two-columns .inner-right-column {
        float: none !important;
        width: auto !important;
        margin: 0 0 15px 0 !important;
    }

    .inner-two-columns .inner-right-column.fixed {
        position: static !important;
    }

    .inner-two-columns .inner-center-column {
        margin-right: 0 !important;
    }

    /* ── Form tabs: horizontal scroll instead of wrap ───────── */
    #suit_form_tabs.nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Form rows: table-row → stacked blocks ──────────────── */
    .form-horizontal fieldset,
    .form-horizontal .control-group.form-row {
        display: block;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .form-horizontal .control-group > div {
        display: block;
        width: auto;
    }

    .form-horizontal .control-group .control-label {
        display: block;
        min-width: 0;
        width: auto;
        padding: 8px 5px 2px 5px;
        text-align: left;
    }

    .form-horizontal .control-group .controls {
        display: block;
        width: auto;
        border-left: 0;
        padding: 5px;
        margin-left: 0;
    }

    /* multi-field rows: stack each field box vertically */
    .form-horizontal .control-group .field-box .controls .multi-field-box {
        float: none;
        display: block;
        margin: 0 0 8px 0;
    }

    .form-horizontal .control-group .field-box .controls .multi-field-box .multi-field-controls {
        float: none;
    }

    /* ── Inputs: full width, bigger hit area ── */
    .form-horizontal .control-group .controls input[type="text"],
    .form-horizontal .control-group .controls input[type="email"],
    .form-horizontal .control-group .controls input[type="url"],
    .form-horizontal .control-group .controls input[type="tel"],
    .form-horizontal .control-group .controls input[type="number"],
    .form-horizontal .control-group .controls input[type="password"],
    .form-horizontal .control-group .controls input[type="search"],
    .form-horizontal .control-group .controls input[type="file"],
    .form-horizontal .control-group .controls select,
    .form-horizontal .control-group .controls textarea,
    #toolbar input[type="text"],
    #toolbar select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        /* 16px prevents iOS Safari from auto-zooming on focus */
        font-size: 16px;
        min-height: 36px;
    }

    /* ── Tabular inline groups & result lists: horizontal scroll ── */
    div[data-mobile="responsive"] .tabular,
    div[data-mobile="responsive"] .results {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 10px;
    }

    div[data-mobile="responsive"] .tabular table,
    div[data-mobile="responsive"] .results table {
        min-width: 600px;
    }

    /* ── Tabular inline tables: keep first three columns ────── */
    .tabular.inline-related table th:nth-child(n+4),
    .tabular.inline-related table td:nth-child(n+4) {
        display: none;
    }

    .tabular.inline-related table,
    div[data-mobile="responsive"] .tabular.inline-related table {
        min-width: 0;
        width: 100%;
    }

    /* ── Change list toolbar & actions: stack ───────────────── */
    /* "Add" button bar: full width instead of half-width float */
    .object-tools {
        float: none !important;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 10px 0;
    }

    .object-tools a,
    .object-tools .btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        margin: 0;
    }

    #toolbar .search-container {
        display: block;
    }

    #toolbar .search-container #searchbar {
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 5px;
    }

    /* Stack the list filter dropdowns under the search bar */
    #toolbar .search-container .search-filters {
        display: block;
        margin: 0;
    }

    #toolbar .search-container .search-filters select,
    #toolbar .search-container > input[type="submit"],
    #toolbar .search-container .btn {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 0 0 5px 0;
    }

    /* Dropdowns match page text size (no keyboard opens on tap,
       so the 16px anti-iOS-zoom size isn't needed here) */
    #toolbar select {
        font-size: 14px;
        min-height: 34px;
    }

    /* ── Change list results: horizontal scroll on the table ── */
    #changelist .results {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 10px;
    }

    #changelist .results table {
        min-width: 600px;
    }

    /* Hide all but the first three columns (checkbox, Foto, Naam);
       the full table stays available on desktop. */
    #changelist .results #result_list th:nth-child(n+4),
    #changelist .results #result_list td:nth-child(n+4) {
        display: none;
    }

    /* Three columns fit without forcing a scrollbar */
    #changelist .results #result_list {
        min-width: 0;
        width: 100%;
    }

    .actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .actions label {
        margin-bottom: 5px;
    }

    .actions select {
        min-height: 30px;
    }

    /* ── Headings & breadcrumbs ─────────────────────────────── */
    h1 { font-size: 20px !important; }
    h2 { font-size: 17px !important; }
    h3 { font-size: 15px !important; }

    .breadcrumbs {
        padding: 6px 10px;
        margin: -5px 0 10px;
        font-size: 12px;
    }

    /* ── Date/time field shortcuts ("Vandaag" + calendar icon):
       the desktop JS calendar popup is unusable on touch screens,
       dates are typed directly instead ───────────────────────── */
    .datetimeshortcuts {
        display: none !important;
    }

    /* ── Submit row: stack buttons full width ───────────────── */
    /* .save-box .btn.btn-high { width: 150px } in suit.css wins on
       specificity, so scope our override through .save-box too. */
    .submit-row {
        padding: 10px 5px;
    }

    .save-box .submit-row .btn,
    .save-box .submit-row .btn.btn-high,
    .submit-row .deletelink {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 8px 0;
        min-height: 40px;
    }

    .submit-row .deletelink {
        display: block;
        text-align: center;
        margin-bottom: 0;
    }

    /* ── Drawer menu: expand submenus inline, disable hover flyout ──
       suit.css positions hover submenus absolutely at left:180px,
       which lands outside the viewport on phones (and touch has no
       hover anyway). Show them as indented lists inside the drawer. */
    .left-nav > ul > li:not(.active):hover > ul {
        position: static;
        left: auto;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        z-index: auto;
    }

    .left-nav > ul > li > ul {
        display: block;
        position: static;
        margin: 0;
    }

    .left-nav > ul > li:not(.active):hover > ul > li {
        border: 0;
        background-color: transparent;
    }

    .left-nav > ul > li:not(.active):hover > ul > li a {
        padding: 3px 0 4px 27px;
    }

    /* ── Footer ─────────────────────────────────────────────── */
    .footer .content .tools,
    .footer .content .branding,
    .footer .content .copyright {
        float: none;
        text-align: center;
        padding: 5px 10px 0 10px;
        width: auto;
        margin: 0;
    }

}


/* ============================================================
   Ledenbase Admin — Form polish (UI modernization Phase 1.4)
   Focus states, consistent control heights, button hierarchy.
   Design tokens are defined in suit/css/suit.css (:root), which
   loads before this file via admin/base.html.
   ============================================================ */

/* ── Focus ring on form controls (replaces the Bootstrap 3
      default inner glow) ─────────────────────────────────── */
.form-horizontal .control-group .controls input:focus,
.form-horizontal .control-group .controls select:focus,
.form-horizontal .control-group .controls textarea:focus,
#toolbar input:focus,
#toolbar select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(82, 149, 176, 0.25);
    outline: none;
}

/* ── Keyboard-only focus indicator for buttons and links ── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ── Consistent control heights ─────────────────────────────
      Inputs, selects and (regular sized) buttons share a 34px
      control height so inline form rows line up. Size variants
      (.btn-small/.btn-mini/.btn-large) keep their own height. */
.form-horizontal .control-group .controls input[type="text"],
.form-horizontal .control-group .controls input[type="email"],
.form-horizontal .control-group .controls input[type="url"],
.form-horizontal .control-group .controls input[type="tel"],
.form-horizontal .control-group .controls input[type="number"],
.form-horizontal .control-group .controls input[type="password"],
.form-horizontal .control-group .controls input[type="search"],
.form-horizontal .control-group .controls select,
#toolbar input[type="text"],
#toolbar select {
    min-height: 34px;
    box-sizing: border-box;
}

.btn:not(.btn-large):not(.btn-small):not(.btn-mini) {
    min-height: 34px;
    box-sizing: border-box;
}

.btn {
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

/* ── Button hierarchy ────────────────────────────────────────
      Primary: flat house color instead of Bootstrap blue
      gradient. Destructive: tinted with the error color. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-image: none;
    text-shadow: none;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.btn-danger {
    background-color: var(--color-error);
    border-color: #9a3f39;
    color: var(--color-white);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #9a3f39;
    border-color: #8a2f29;
    color: var(--color-white);
}

/* Delete submit-row entry is a .btn.btn-danger link (see
   admin/submit_line.html); only tint plain text-error links */
.save-box a.text-error {
    color: var(--color-error);
}

/* ── Disabled and read-only states ────────────────────────── */
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    background-color: var(--color-grey-lighter);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.form-horizontal .control-group .controls .readonly {
    color: var(--color-text-muted);
}