/**
 * Kalid Coffee House Management
 * Shared Common Styles
 *
 * Consolidated styles used across all pages for consistency.
 * Import in each HTML page via: <link rel="stylesheet" href="/styles.css">
 */

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Serif title class for brand headings (Kalid Coffee, section titles) */
.serif-title {
    font-family: 'Playfair Display', serif;
}

/* ============================================================
   SCROLLBAR UTILITIES
   ============================================================ */

/* Hide scrollbar visually while keeping functionality */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ============================================================
   HEADER LOGO PATTERN
   ============================================================ */

/* Common circular logo container used in headers */
.header-logo {
    width: 2rem;   /* w-8 */
    height: 2rem;
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Logo image inside header container */
.header-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9999px;
    z-index: 10;
}

/* ============================================================
   TAB BUTTON ACTIVE STATE
   ============================================================ */

/* Base tab button styling */
.tab-btn {
    padding: 0.375rem 0.875rem;   /* px-3.5 py-1.5 */
    font-size: 0.75rem;           /* text-xs */
    font-weight: 700;             /* font-bold */
    border-radius: 0.75rem;       /* rounded-xl */
    border: 1px solid #292524;    /* border-stone-800 */
    color: #d6d3d1;               /* text-stone-300 */
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: #ffffff;
}

.tab-btn.active {
    background-color: #be123c;   /* bg-rose-700 */
    color: #ffffff;
    border-color: #be123c;
}

/* ============================================================
   LANGUAGE SELECTOR
   ============================================================ */

#lang-selector {
    background-color: white;
    border: 1px solid #292524;
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

#lang-selector:focus {
    ring: 2px;
    ring-color: #d97706; /* amber-500 focus ring */
}

/* ============================================================
   STATUS DOT INDICATOR
   ============================================================ */

.status-dot-container {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(161, 161, 161, 0.1);
}

.status-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Connection status colors */
.status-dot.connecting {
    background-color: #eab308;   /* yellow-500 */
}

.status-dot.connected {
    background-color: #22c55e;   /* green-500 */
}

.status-dot.disconnected {
    background-color: #ef4444;   /* red-500 */
}

/* ============================================================
   LOGOUT BUTTON
   ============================================================ */

.btn-logout {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

/* ============================================================
   CARD COMPONENT BASE
   ============================================================ */

.card {
    background-color: #1c1917;   /* bg-stone-900 */
    border: 1px solid #292524;   /* border-stone-850 */
    border-radius: 1rem;         /* rounded-2xl */
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Responsive container */
.container-main {
    max-width: 80rem; /* max-w-7xl */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem 1.5rem; /* p-4 sm:p-6 */
}

/* Flex center wrapper */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Full viewport height wrapper */
.min-h-screen-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   DARK THEME DEFAULTS
   ============================================================ */

body.theme-stone {
    background-color: #0c0a09;   /* bg-stone-950 */
    color: #e7e5e4;               /* text-stone-100 */
}

body.theme-emerald {
    background-color: #022c22;   /* bg-emerald-950 */
    color: #d1fae5;              /* text-emerald-100 */
}

body.theme-rose {
    background-color: #1f1015;   /* bg-rose-950 */
    color: #fecdd3;              /* text-rose-100 */
}

/* ============================================================
   FOCUS STATES
   ============================================================ */

*:focus-visible {
    outline: 2px solid #d97706;  /* amber-500 */
    outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */

/* Hide on mobile, show on desktop */
@media (min-width: 768px) {
    .hide-md { display: none; }
}

@media (max-width: 767px) {
    .show-md { display: none; }
}

/* ============================================================
   ANIMATION UTILITIES
   ============================================================ */

.transition-all-200 {
    transition: all 0.2s ease;
}

/* Active scale effect */
.active-scale {
    transition: transform 0.1s ease;
}

.active-scale:active {
    transform: scale(0.98);
}