/* =========================================================
   zeige.link
   Global Stylesheet
   Bootstrap 5.3.8
   ========================================================= */


/* =========================================================
   1. Design Variables
   ========================================================= */

:root {

    --zl-orange: #f47b20;
    --zl-orange-dark: #d9630d;
    --zl-orange-light: #fff1e6;

    --zl-dark: #17212b;
    --zl-dark-soft: #344454;

    --zl-background: #f5f7fa;
    --zl-card: #ffffff;

    --zl-border: #e5e9ef;

    --zl-text: #17212b;
    --zl-text-muted: #718096;

    --zl-success: #198754;
    --zl-success-light: #e8f7ef;

    --zl-warning: #d99000;
    --zl-warning-light: #fff6df;

    --zl-danger: #dc3545;
    --zl-danger-light: #fdecef;

    --zl-sidebar-width: 250px;

    --zl-radius-sm: 8px;
    --zl-radius-md: 12px;
    --zl-radius-lg: 16px;

    --zl-shadow-sm:
        0 2px 8px rgba(23, 33, 43, .05);

    --zl-shadow:
        0 6px 24px rgba(23, 33, 43, .07);

    --zl-shadow-lg:
        0 15px 40px rgba(23, 33, 43, .12);

}


/* =========================================================
   2. Global
   ========================================================= */

html {
    min-height: 100%;
}

body {

    min-height: 100vh;

    margin: 0;

    background: var(--zl-background);

    color: var(--zl-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
select,
textarea {

    font-family: inherit;

}


.btn-primary {

    --bs-btn-bg: var(--zl-orange);
    --bs-btn-border-color: var(--zl-orange);

    --bs-btn-hover-bg: var(--zl-orange-dark);
    --bs-btn-hover-border-color: var(--zl-orange-dark);

    --bs-btn-active-bg: var(--zl-orange-dark);
    --bs-btn-active-border-color: var(--zl-orange-dark);

    color: #fff;

}


.btn-primary:hover {

    transform: translateY(-1px);

}


.form-control:focus,
.form-select:focus {

    border-color: var(--zl-orange);

    box-shadow:
        0 0 0 .2rem rgba(244, 123, 32, .15);

}


/* =========================================================
   3. Application Layout
   ========================================================= */

.app-layout {

    display: flex;

    min-height: 100vh;

}


/* =========================================================
   4. Sidebar
   ========================================================= */

.sidebar {

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width: var(--zl-sidebar-width);

    display: flex;

    flex-direction: column;

    background: #fff;

    border-right:
        1px solid var(--zl-border);

    z-index: 1030;

}


/* Logo */

.sidebar-logo {

    height: 82px;

    padding:
        0 24px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-bottom:
        1px solid var(--zl-border);

}


.sidebar-logo img {

    width: 42px;

    height: 42px;

    object-fit: contain;

}


.sidebar-logo span {

    font-size: 1.2rem;

    font-weight: 700;

    letter-spacing: -.03em;

}


/* Navigation */

.sidebar-nav {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 22px 14px;

}


.sidebar-nav a {

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        11px 14px;

    border-radius:
        var(--zl-radius-sm);

    color:
        var(--zl-text-muted);

    font-size: .95rem;

    font-weight: 500;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;

}


.sidebar-nav a i {

    width: 22px;

    font-size: 1.1rem;

}


.sidebar-nav a:hover {

    background:
        var(--zl-orange-light);

    color:
        var(--zl-orange);

}


.sidebar-nav a.active {

    background:
        var(--zl-orange-light);

    color:
        var(--zl-orange);

    font-weight: 600;

}


.sidebar-nav a:active {

    transform: scale(.98);

}


/* User area */

.sidebar-user {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-top: auto;

    padding:
        18px;

    border-top:
        1px solid var(--zl-border);

}


.sidebar-user strong {

    display: block;

    font-size: .85rem;

    line-height: 1.3;

}


.sidebar-user small {

    display: block;

    margin-top: 2px;

    color:
        var(--zl-text-muted);

    font-size: .75rem;

}


/* Avatar */

.avatar {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--zl-orange-light);

    color:
        var(--zl-orange);

    font-size: .8rem;

    font-weight: 700;

}


/* =========================================================
   5. Main Content
   ========================================================= */

.content {

    width: calc(
        100% - var(--zl-sidebar-width)
    );

    min-height: 100vh;

    margin-left:
        var(--zl-sidebar-width);

    padding-bottom: 50px;

}


/* =========================================================
   6. Topbar
   ========================================================= */

.topbar {

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        0 36px;

    background:
        rgba(255, 255, 255, .95);

    border-bottom:
        1px solid var(--zl-border);

    position: sticky;

    top: 0;

    z-index: 1020;

}


.search-box {

    width: min(
        420px,
        100%
    );

}


.search-box .input-group-text {

    background: #fff;

    border-right: 0;

    color:
        var(--zl-text-muted);

}


.search-box .form-control {

    border-left: 0;

}


.topbar-right {

    display: flex;

    align-items: center;

    gap: 10px;

}


.topbar-right > .btn {

    border:
        1px solid var(--zl-border);

}


.topbar-right .dropdown-toggle {

    display: flex;

    align-items: center;

}


/* =========================================================
   7. Page Header
   ========================================================= */

.page-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        38px 36px 28px;

}


.page-header h1 {

    margin: 0;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.1rem
        );

    font-weight: 700;

    letter-spacing: -.035em;

}


.page-header p {

    margin:
        7px 0 0;

    color:
        var(--zl-text-muted);

}


/* =========================================================
   8. Statistics Grid
   ========================================================= */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    padding:
        0 36px 30px;

}


.stat-card {

    position: relative;

    min-height: 140px;

    padding: 24px;

    overflow: hidden;

    background:
        var(--zl-card);

    border:
        1px solid var(--zl-border);

    border-radius:
        var(--zl-radius-lg);

    box-shadow:
        var(--zl-shadow-sm);

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}


.stat-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--zl-shadow);

}


.stat-card > i {

    position: absolute;

    top: 22px;
    right: 22px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        11px;

    background:
        var(--zl-orange-light);

    color:
        var(--zl-orange);

    font-size: 1.25rem;

}


.stat-card h2 {

    margin:
        25px 0 2px;

    font-size:
        1.9rem;

    font-weight: 700;

    letter-spacing:
        -.04em;

}


.stat-card span {

    color:
        var(--zl-text-muted);

    font-size: .9rem;

}

/* =========================================================
   9. Filter / Toolbar
   ========================================================= */

.links-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        0 36px 22px;

}


.filter-chips {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

}


.filter-chip {

    display: inline-flex;

    align-items: center;

    min-height: 36px;

    padding:
        7px 13px;

    border:
        1px solid var(--zl-border);

    border-radius: 999px;

    background: #fff;

    color:
        var(--zl-text-muted);

    font-size: .85rem;

    font-weight: 500;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;

}


.filter-chip:hover {

    border-color:
        var(--zl-orange);

    color:
        var(--zl-orange);

}


.filter-chip.active {

    background:
        var(--zl-orange-light);

    border-color:
        rgba(244, 123, 32, .25);

    color:
        var(--zl-orange);

    font-weight: 600;

}


/* =========================================================
   10. Link List
   ========================================================= */

.links-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

    padding:
        0 36px;

}


/* =========================================================
   11. Link Card
   ========================================================= */

.link-card {

    background:
        var(--zl-card);

    border:
        1px solid var(--zl-border);

    border-radius:
        var(--zl-radius-lg);

    box-shadow:
        var(--zl-shadow-sm);

    overflow: visible;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;

}


.link-card:hover {

    transform:
        translateY(-1px);

    border-color:
        #dbe1e8;

    box-shadow:
        var(--zl-shadow);

}


/* =========================================================
   12. Card Header
   ========================================================= */

.link-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding:
        20px 22px 15px;

}


.link-main {

    min-width: 0;

}


/* =========================================================
   13. Shortcode
   ========================================================= */

.shortcode-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

}


.shortcode {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        6px 10px;

    border: 0;

    border-radius:
        7px;

    background:
        var(--zl-dark);

    color: #fff;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: .88rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .15s ease,
        transform .15s ease;

}


.shortcode:hover {

    background:
        var(--zl-dark-soft);

}


.shortcode:active {

    transform:
        scale(.97);

}


.shortcode i {

    font-size: .78rem;

    opacity: .75;

}


/* =========================================================
   14. Status Badges
   ========================================================= */

.status-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        5px 9px;

    border-radius:
        999px;

    font-size: .75rem;

    font-weight: 600;

}


.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

}


.status-active {

    background:
        var(--zl-success-light);

    color:
        var(--zl-success);

}


.status-active .status-dot {

    background:
        var(--zl-success);

}


.status-inactive {

    background:
        var(--zl-danger-light);

    color:
        var(--zl-danger);

}


.status-inactive .status-dot {

    background:
        var(--zl-danger);

}


/* =========================================================
   15. Link Title
   ========================================================= */

.link-title {

    display: flex;

    align-items: center;

    gap: 8px;

    max-width: 100%;

    margin-top: 11px;

    color:
        var(--zl-dark);

    font-size: .95rem;

}


.link-title > i {

    flex: 0 0 auto;

    color:
        var(--zl-orange);

    font-size: 1.05rem;

}


.link-title span {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* =========================================================
   16. More / Action Button
   ========================================================= */

.icon-button {

    width: 36px;

    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid transparent;

    border-radius:
        8px;

    background: transparent;

    color:
        var(--zl-text-muted);

    font-size: 1.1rem;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;

}


.icon-button:hover {

    background:
        var(--zl-background);

    border-color:
        var(--zl-border);

    color:
        var(--zl-dark);

}


/* =========================================================
   17. Card Dropdown
   ========================================================= */

.link-card .dropdown-menu {

    min-width: 210px;

    padding:
        7px;

    border:
        1px solid var(--zl-border);

    border-radius:
        10px;

}


.link-card .dropdown-item {

    padding:
        9px 11px;

    border-radius:
        6px;

    font-size: .88rem;

}


.link-card .dropdown-item:hover {

    background:
        var(--zl-background);

}


.link-card .dropdown-item.text-danger:hover {

    background:
        var(--zl-danger-light);

}


/* =========================================================
   18. Link Metadata
   ========================================================= */

.link-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px 25px;

    padding:
        14px 22px;

    border-top:
        1px solid #eef1f4;

    border-bottom:
        1px solid #eef1f4;

}


.meta-item {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        var(--zl-text-muted);

    font-size: .82rem;

}


.meta-item i {

    color:
        #8a96a3;

    font-size: .95rem;

}


/* =========================================================
   19. Card Actions
   ========================================================= */

.link-card-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    padding:
        13px 22px;

}


.link-card-actions .btn {

    border:
        1px solid var(--zl-border);

    color:
        var(--zl-dark-soft);

    background: #fff;

    font-size: .8rem;

}


.link-card-actions .btn:hover {

    border-color:
        #cfd6de;

    background:
        var(--zl-background);

    color:
        var(--zl-dark);

}


/* =========================================================
   20. Pagination
   ========================================================= */

.links-pagination {

    padding:
        0 36px;

}


.pagination {

    margin-bottom: 0;

}


.pagination .page-link {

    min-width: 38px;

    height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-color:
        var(--zl-border);

    color:
        var(--zl-text-muted);

    font-size: .85rem;

}


.pagination .page-item.active .page-link {

    background:
        var(--zl-orange);

    border-color:
        var(--zl-orange);

    color: #fff;

}


.pagination .page-link:hover {

    background:
        var(--zl-orange-light);

    border-color:
        rgba(244, 123, 32, .25);

    color:
        var(--zl-orange);

}


.pagination .page-item.disabled .page-link {

    color:
        #b4bdc7;

    background:
        #fff;

}


/* =========================================================
   21. QR Code
   ========================================================= */

.qr-placeholder {

    width: 220px;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid var(--zl-border);

    border-radius:
        var(--zl-radius-md);

    background:
        #fff;

    box-shadow:
        var(--zl-shadow-sm);

}


.qr-placeholder i {

    font-size: 11rem;

    color:
        var(--zl-dark);

}


/* =========================================================
   22. Delete Modal
   ========================================================= */

.delete-icon {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--zl-danger-light);

    color:
        var(--zl-danger);

    font-size: 1.5rem;

}


/* =========================================================
   23. Footer
   ========================================================= */

.app-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin:
        35px 36px 0;

    padding:
        22px 0;

    border-top:
        1px solid var(--zl-border);

    color:
        var(--zl-text-muted);

    font-size: .8rem;

}


.footer-links {

    display: flex;

    align-items: center;

    gap: 18px;

}


.footer-links a {

    color:
        var(--zl-text-muted);

}


.footer-links a:hover {

    color:
        var(--zl-orange);

}
/* =========================================================
   24. Responsive – Tablet
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --zl-sidebar-width: 220px;
    }

    .sidebar-logo {
        padding: 0 18px;
    }

    .sidebar-nav {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sidebar-nav a {
        padding-left: 11px;
        padding-right: 11px;
    }

    .content {
        width: calc(
            100% - var(--zl-sidebar-width)
        );
    }

    .topbar {
        padding-left: 26px;
        padding-right: 26px;
    }

    .page-header {
        padding-left: 26px;
        padding-right: 26px;
    }

    .stats-grid {
        padding-left: 26px;
        padding-right: 26px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .links-toolbar,
    .links-list {
        padding-left: 26px;
        padding-right: 26px;
    }

    .links-pagination {
        padding-left: 26px;
        padding-right: 26px;
    }

    .app-footer {
        margin-left: 26px;
        margin-right: 26px;
    }

}


/* =========================================================
   25. Responsive – Tablet / Small Desktop
   ========================================================= */

@media (max-width: 850px) {

    :root {
        --zl-sidebar-width: 72px;
    }

    .sidebar-logo {
        justify-content: center;
        padding: 0;
    }

    .sidebar-logo img {
        width: 40px;
        height: 40px;
    }

    .sidebar-logo span {
        display: none;
    }

    .sidebar-nav {
        padding:
            18px 10px;
    }

    .sidebar-nav a {
        justify-content: center;
        padding:
            12px 8px;
    }

    .sidebar-nav a i {
        width: auto;
        margin: 0;
        font-size: 1.2rem;
    }

    .sidebar-nav a {
        font-size: 0;
    }

    .sidebar-nav a i {
        font-size: 1.2rem;
    }

    .sidebar-user {
        justify-content: center;
        padding:
            14px 8px;
    }

    .sidebar-user > div:not(.avatar) {
        display: none;
    }

    .content {
        width: calc(
            100% - var(--zl-sidebar-width)
        );

        margin-left:
            var(--zl-sidebar-width);
    }

    .topbar {
        padding:
            0 20px;
    }

    .search-box {
        max-width: 350px;
    }

}


/* =========================================================
   26. Responsive – Mobile
   ========================================================= */

@media (max-width: 767.98px) {

    :root {
        --zl-sidebar-width: 0px;
    }

    body {
        overflow-x: hidden;
    }

    .app-layout {
        display: block;
    }

    /* -----------------------------------------------------
       Mobile Sidebar
       ----------------------------------------------------- */

    .sidebar {

        position: fixed;

        width: 260px;

        transform:
            translateX(-100%);

        transition:
            transform .25s ease;

        box-shadow:
            var(--zl-shadow-lg);

    }

    /*
     * Wird später von app.js gesetzt,
     * wenn das mobile Menü geöffnet wird.
     */

    .sidebar.mobile-open {

        transform:
            translateX(0);

    }

    .sidebar-logo {

        justify-content: flex-start;

        padding:
            0 22px;

    }

    .sidebar-logo span {
        display: block;
    }

    .sidebar-nav a {
        justify-content: flex-start;

        font-size: .95rem;

        padding:
            11px 14px;
    }

    .sidebar-nav a i {
        width: 22px;
    }

    .sidebar-user {
        justify-content: flex-start;

        padding:
            18px;
    }

    .sidebar-user > div:not(.avatar) {
        display: block;
    }

    /* -----------------------------------------------------
       Mobile Content
       ----------------------------------------------------- */

    .content {

        width: 100%;

        margin-left: 0;

    }

    /* -----------------------------------------------------
       Mobile Topbar
       ----------------------------------------------------- */

    .topbar {

        height: auto;

        min-height: 70px;

        padding:
            12px 16px;

    }

    .topbar::before {

        content: "";

        width: 38px;

        height: 38px;

        flex: 0 0 38px;

        order: -1;

    }

    .search-box {

        width: auto;

        flex: 1;

    }

    .topbar-right {

        gap: 4px;

    }

    .topbar-right .dropdown-toggle {

        width: 40px;

        height: 40px;

        padding: 0;

        justify-content: center;

        font-size: 0;

    }

    .topbar-right .dropdown-toggle i {

        margin: 0 !important;

        font-size: 1.15rem;

    }

    .topbar-right > .btn {

        width: 40px;

        height: 40px;

        padding: 0;

    }

    /* -----------------------------------------------------
       Page Header
       ----------------------------------------------------- */

    .page-header {

        align-items: flex-start;

        flex-direction: column;

        padding:
            27px 16px 22px;

    }

    .page-header h1 {

        font-size: 1.65rem;

    }

    .page-header .btn {

        width: 100%;

    }

    /* -----------------------------------------------------
       Statistics
       ----------------------------------------------------- */

    .stats-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;

        padding:
            0 16px 22px;

    }

    .stat-card {

        min-height: 120px;

        padding: 17px;

    }

    .stat-card > i {

        top: 16px;
        right: 16px;

        width: 34px;
        height: 34px;

        font-size: 1rem;

    }

    .stat-card h2 {

        margin-top: 30px;

        font-size: 1.5rem;

    }

    .stat-card span {

        font-size: .78rem;

    }

    /* -----------------------------------------------------
       Filter
       ----------------------------------------------------- */

    .links-toolbar {

        align-items: flex-start;

        flex-direction: column;

        padding:
            0 16px 18px;

    }

    .filter-chips {

        width: 100%;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 4px;

        scrollbar-width: none;

    }

    .filter-chips::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {

        flex: 0 0 auto;

        white-space: nowrap;

    }

    .links-toolbar > .btn {

        width: 100%;

    }

    /* -----------------------------------------------------
       Link Cards
       ----------------------------------------------------- */

    .links-list {

        gap: 11px;

        padding:
            0 16px;

    }

    .link-card-header {

        padding:
            16px;

    }

    .link-card {

        border-radius:
            13px;

    }

    .link-title {

        max-width: 100%;

        font-size: .88rem;

    }

    .link-title span {

        max-width:
            calc(100vw - 105px);

    }

    .link-meta {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

        padding:
            13px 16px;

    }

    .link-card-actions {

        padding:
            12px 16px;

    }

    .link-card-actions .btn {

        flex: 1 1 auto;

    }

    /* -----------------------------------------------------
       Pagination
       ----------------------------------------------------- */

    .links-pagination {

        padding:
            0 16px;

    }

    /* -----------------------------------------------------
       Footer
       ----------------------------------------------------- */

    .app-footer {

        align-items: flex-start;

        flex-direction: column;

        margin:
            25px 16px 0;

        gap: 10px;

    }

}


/* =========================================================
   27. Very Small Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .topbar {

        gap: 8px;

    }

    .topbar::before {

        display: none;

    }

    .search-box .input-group-text {

        padding-left: 9px;
        padding-right: 7px;

    }

    .search-box .form-control {

        min-width: 0;

    }

    .stats-grid {

        gap: 8px;

    }

    .stat-card {

        padding: 14px;

    }

    .stat-card h2 {

        font-size: 1.35rem;

    }

    .stat-card > i {

        display: none;

    }

    .shortcode-row {

        padding-right: 30px;

    }

    .link-card-header {

        position: relative;

    }

    .link-card-header .dropdown {

        position: absolute;

        top: 14px;

        right: 12px;

    }

    .link-card-actions {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .link-card-actions .btn {

        width: 100%;

    }

}


/* =========================================================
   28. Modal Improvements
   ========================================================= */

.modal-content {

    border:
        1px solid var(--zl-border);

}


.modal-header {

    padding:
        20px 24px;

    border-bottom:
        1px solid var(--zl-border);

}


.modal-footer {

    padding:
        16px 24px;

    border-top:
        1px solid var(--zl-border);

}


/* =========================================================
   29. Toast
   ========================================================= */

.toast {

    background:
        #fff;

    border:
        1px solid var(--zl-border) !important;

}


.toast-body {

    padding:
        13px 16px;

    color:
        var(--zl-dark);

    font-size: .88rem;

}


/* =========================================================
   30. Bootstrap Dropdown
   ========================================================= */

.dropdown-menu {

    border:
        1px solid var(--zl-border);

    border-radius:
        10px;

}


.dropdown-item {

    font-size: .88rem;

}


.dropdown-item:active {

    background:
        var(--zl-orange);

}


/* =========================================================
   31. Accessibility
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {

    outline:
        3px solid rgba(244, 123, 32, .3);

    outline-offset:
        2px;

}


/* =========================================================
   32. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

    }

}

/* =========================================================
   33. Authentication
   ========================================================= */

.auth-page {

    min-height: 100vh;

    background:
        linear-gradient(
            145deg,
            #fff8f2 0%,
            var(--zl-background) 50%,
            #ffffff 100%
        );

}


.auth-wrapper {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        40px 20px;

}


.auth-container {

    width: 100%;

    max-width: 430px;

}


.auth-logo {

    display: flex;

    justify-content: center;

    margin-bottom: 28px;

}


.auth-logo img {

    width: 76px;

    height: 76px;

    object-fit: contain;

}


.auth-card {

    padding: 34px;

    background:
        #ffffff;

    border:
        1px solid var(--zl-border);

    border-radius:
        18px;

    box-shadow:
        var(--zl-shadow-lg);

}


.auth-card-header {

    margin-bottom: 27px;

    text-align: center;

}


.auth-card-header h1 {

    margin-bottom: 8px;

    font-size: 1.65rem;

    font-weight: 700;

    letter-spacing: -.035em;

}


.auth-card-header p {

    margin: 0;

    color:
        var(--zl-text-muted);

    font-size: .9rem;

    line-height: 1.6;

}


.auth-card .form-label {

    margin-bottom: 7px;

    font-size: .84rem;

    font-weight: 600;

}


.auth-card .input-group-text {

    min-width: 43px;

    justify-content: center;

    background: #fff;

    border-right: 0;

    color:
        var(--zl-text-muted);

}


.auth-card .input-group .form-control {

    border-left: 0;

}


.auth-card .input-group .form-control:focus {

    border-left: 0;

}


.auth-card .input-group:focus-within
.input-group-text {

    border-color:
        var(--zl-orange);

    color:
        var(--zl-orange);

}


.auth-card .form-control {

    min-height: 46px;

}


.auth-card .btn-primary {

    min-height: 48px;

    font-weight: 600;

}


.auth-form-link {

    font-size: .78rem;

    color:
        var(--zl-orange);

}


.auth-form-link:hover {

    color:
        var(--zl-orange-dark);

    text-decoration: underline;

}


.password-toggle {

    min-width: 46px;

    border-left: 0;

}


.auth-divider {

    display: flex;

    align-items: center;

    gap: 15px;

    margin:
        25px 0;

    color:
        var(--zl-text-muted);

    font-size: .78rem;

}


.auth-divider::before,
.auth-divider::after {

    content: "";

    height: 1px;

    flex: 1;

    background:
        var(--zl-border);

}


.auth-back {

    margin-top: 22px;

    text-align: center;

    font-size: .82rem;

}


.auth-back a {

    color:
        var(--zl-text-muted);

}


.auth-back a:hover {

    color:
        var(--zl-orange);

}


.auth-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 28px;

    color:
        var(--zl-text-muted);

    font-size: .75rem;

}


.auth-footer-links {

    display: flex;

    gap: 14px;

}


.auth-footer a:hover {

    color:
        var(--zl-orange);

}


@media (max-width: 480px) {

    .auth-wrapper {

        padding:
            25px 15px;

        align-items:
            flex-start;

    }

    .auth-container {

        margin-top: 20px;

    }

    .auth-card {

        padding:
            25px 20px;

    }

    .auth-logo {

        margin-bottom: 20px;

    }

    .auth-logo img {

        width: 64px;

        height: 64px;

    }

    .auth-footer {

        flex-direction: column;

        gap: 7px;

    }

}
/* =========================================================
   34. New Link Page
   ========================================================= */

.new-link-container {

    padding:
        0 36px;

    max-width:
        1400px;

}


.form-card {

    padding:
        28px;

    background:
        #fff;

    border:
        1px solid var(--zl-border);

    border-radius:
        var(--zl-radius-lg);

    box-shadow:
        var(--zl-shadow-sm);

}


.form-card-header {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 28px;

}


.form-card-icon {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    border-radius: 11px;

    background:
        var(--zl-orange-light);

    color:
        var(--zl-orange);

    font-size: 1.25rem;

}


.form-card-header h2 {

    margin: 0 0 4px;

    font-size: 1.15rem;

    font-weight: 700;

}


.form-card-header p {

    margin: 0;

    color:
        var(--zl-text-muted);

    font-size: .85rem;

}


.form-card .form-label {

    font-size: .85rem;

    font-weight: 600;

}


.form-card .form-control,
.form-card .form-select {

    border-color:
        var(--zl-border);

}


.form-card code {

    padding:
        2px 5px;

    border-radius: 4px;

    background:
        var(--zl-background);

    color:
        var(--zl-orange);

}


/* =========================================================
   Access Options
   ========================================================= */

.access-options {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.access-option {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        14px 16px;

    border:
        1px solid var(--zl-border);

    border-radius:
        10px;

    background:
        #fff;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease;

}


.access-option:hover {

    border-color:
        rgba(244, 123, 32, .4);

    background:
        #fffaf6;

}


.access-option.active {

    border-color:
        rgba(244, 123, 32, .5);

    background:
        var(--zl-orange-light);

}


.access-option input {

    position: absolute;

    opacity: 0;

}


.access-option-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    border-radius: 9px;

    background:
        var(--zl-background);

    color:
        var(--zl-text-muted);

}


.access-option.active
.access-option-icon {

    background:
        #fff;

    color:
        var(--zl-orange);

}


.access-option strong {

    display: block;

    margin-bottom: 2px;

    font-size: .86rem;

}


.access-option small {

    display: block;

    color:
        var(--zl-text-muted);

    font-size: .76rem;

}


/* =========================================================
   Link Preview
   ========================================================= */

.link-preview-card {

    position: sticky;

    top: 105px;

    padding:
        28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff8f2
        );

    border:
        1px solid rgba(244, 123, 32, .18);

    border-radius:
        var(--zl-radius-lg);

    box-shadow:
        var(--zl-shadow);

}


.link-preview-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 14px;

    background:
        var(--zl-orange);

    color:
        #fff;

    font-size: 1.4rem;

}


.link-preview-card h3 {

    margin-bottom: 5px;

    font-size: 1.15rem;

    font-weight: 700;

}


.link-preview-card > p {

    margin-bottom: 22px;

    color:
        var(--zl-text-muted);

    font-size: .82rem;

    line-height: 1.6;

}


.preview-url {

    padding:
        14px 15px;

    border-radius:
        9px;

    background:
        var(--zl-dark);

    color:
        rgba(255, 255, 255, .7);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: .82rem;

    overflow: hidden;

}


.preview-url strong {

    color:
        #fff;

}


.preview-status {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

    color:
        var(--zl-success);

    font-size: .8rem;

    font-weight: 600;

}


.preview-status .status-dot {

    background:
        var(--zl-success);

}


.preview-info {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.preview-info > div {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.preview-info span {

    color:
        var(--zl-text-muted);

    font-size: .78rem;

}


.preview-info strong {

    text-align: right;

    font-size: .8rem;

}


/* =========================================================
   Form Actions
   ========================================================= */

.form-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding-bottom: 20px;

}


.form-actions .btn {

    min-width: 130px;

}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199.98px) {

    .new-link-container {

        padding:
            0 26px;

    }

    .link-preview-card {

        position: static;

    }

}


@media (max-width: 767.98px) {

    .new-link-container {

        padding:
            0 16px;

    }

    .form-card {

        padding:
            21px 17px;

    }

    .form-card-header {

        margin-bottom: 22px;

    }

    .form-card .input-group-lg {

        font-size: .9rem;

    }

    .form-card .input-group-lg .btn {

        font-size: .78rem;

    }

    .link-preview-card {

        padding:
            22px;

    }

    .form-actions {

        flex-direction: column-reverse;

    }

    .form-actions .btn {

        width: 100%;

    }

}