/*
 * Custom styling for the URL shortener.  This stylesheet borrows the
 * dark, vibrant aesthetic from the stability-inspired design used in
 * other versions of the project.  It defines a dark radial/linear
 * background, frosted glass panels, soft shadows, and modern button
 * styles.  In addition it preserves backwards compatibility with
 * classes used by the original shortener_one code (e.g. .card,
 * .btn-ghost, .input, .alert, etc.) so that existing markup can be
 * seamlessly upgraded without rewriting every template.  Tailwind CSS
 * utilities are still loaded via CDN, but since we cannot use
 * Tailwind's @apply here, all styles are hand-written.
 */

/* Dark radial + linear background reminiscent of the stability theme */
:root {
    /* Two radial gradients anchored near the top corners and a diagonal
     * linear gradient fading from deep indigo to near-black.  These
     * colors mirror the “stability20” palette. */
    --bg: radial-gradient(1200px 800px at 20% 10%, rgba(99,102,241,0.25), transparent 40%),
           radial-gradient(900px 900px at 80% 10%, rgba(236,72,153,0.22), transparent 40%),
           linear-gradient(135deg, #0f172a, #111827 60%, #0b1020);
}

html,
body {
    /* Ensure the background spans the full viewport regardless of
       page content height.  Use min-height instead of fixed height
       so pages taller than the viewport can still scroll.  Explicitly
       set width to 100% to avoid horizontal gaps on some browsers. */
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg);
    color: #e5e7eb;
}

/* Frosted glass panel used for cards and various containers */
.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Base button styling used for actions.  These classes provide a
 * consistently padded, rounded button with a subtle drop shadow. */
.btn,
.btn-primary {
    display: inline-block;
    padding: 0.7rem 1.1rem;
    border-radius: 0.8rem;
    background: #6366f1;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
    cursor: pointer;
    transition: filter 0.2s ease;
    border: none;
}
.btn:hover,
.btn-primary:hover {
    filter: brightness(1.1);
}

/* Danger button for destructive actions (e.g. clearing the database) */
.btn-danger {
    display: inline-block;
    padding: 0.7rem 1.1rem;
    border-radius: 0.8rem;
    background: #dc2626;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.35);
    cursor: pointer;
    transition: filter 0.2s ease;
    border: none;
}
.btn-danger:hover {
    filter: brightness(1.1);
}

/* Neutral/ghost button variant.  Useful for nav links and secondary
 * actions. */
.btn-ghost {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #e5e7eb;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.btn-ghost:hover {
    filter: brightness(1.2);
}

/* Badge styling used for displaying slugs and small labels */
.badge,
.link-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Fade-in animation for smooth appearance of elements */
.fade {
    animation: fade 0.5s ease both;
}
@keyframes fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Input fields, selects and textareas share the same dark translucent style */
input,
textarea,
select {
    /* Ensure form elements stretch across their container and have
     * comfortable padding.  Display block and width 100% prevent
     * awkward inline sizing and allow the user to clearly see the
     * contents as they type. */
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #e5e7eb;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* Table styling to blend with the dark theme.  We use separate
 * borders and spacing to create a floating row effect similar to the
 * stable design. */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    color: #e5e7eb;
}
table thead tr {
    opacity: 0.7;
}
table th,
table td {
    padding: 0.75rem;
    text-align: left;
}
table tbody tr {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
}
table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}
table tbody tr td {
    vertical-align: middle;
}

/* Generic error and success messages used across pages */
.error,
.alert-red {
    color: #f87171;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}
.success,
.alert-green {
    color: #4ade80;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

/* Generic alert container (used to group messages).  Subclasses
 * .alert-red and .alert-green inherit from this. */
.alert {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

/* Card styling for backwards compatibility.  Older templates used
 * .card classes on their containers.  Map it to our glass style,
 * add padding and a shadow so existing markup stays visually cohesive. */
.card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: #e5e7eb;

    /* Make cards fluid so they never exceed the width of their parent. */
    width: 100%;
    box-sizing: border-box;
}

/* Ensure tables without our custom class still look decent by
 * providing a minimal style.  The .table class in the old version
 * collapsed borders and applied light backgrounds; here we simply
 * leverage the global table styling defined above. */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

/* Root wrapper used by header.php.  Ensure it spans the entire
 * viewport in both dimensions so the background gradient fills the
 * screen even on pages with little content.  Also allow flex
 * behaviour so that footer can stick to the bottom if desired. */
.app-root {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Centred container for page content on larger screens.  This helper
 * constrains the width and adds automatic horizontal margins.  On
 * smaller screens the container naturally expands to the full width. */
.container {
    /* Constrain the width of the main content on large screens to
     * roughly the width of two central columns in a four‑column grid.
     * A smaller maximum width keeps the content visually centred and
     * prevents it from stretching across the entire viewport on wide
     * displays.  We choose 640px to more closely match the layout
     * proportions of katinder.net.
     */
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

/* Navigation link styling.  Each nav item consists of an icon and a
 * label.  On narrow screens, hide the label to save horizontal space.
 */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.nav-link .icon {
    font-size: 1.15rem;
    line-height: 1;
}
.nav-link .label {
    display: inline;
}
@media (max-width: 640px) {
    .nav-link .label {
        display: none;
    }
}

/* Ensure navigation container wraps items when there's not enough space. */
header nav {
    flex-wrap: wrap;
}

/* Safe area padding for devices with notches (e.g. iPhone).  This
 * ensures content is not obscured by the notch or home bar. */
body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}