yeswanth0212/token_system

1:root {2    --bg-color: #030712; /* Extreme dark slate */3    --card-bg: rgba(17, 24, 39, 0.7);4    --border-color: rgba(255, 255, 255, 0.06);5    --primary-glow: rgba(6, 182, 212, 0.15);6    --accent-cyan: #06b6d4;7    --accent-emerald: #10b981;8    --accent-rose: #f43f5e;9    --accent-amber: #f59e0b;10    --accent-purple: #8b5cf6;11    --text-primary: #f9fafb;12    --text-secondary: #9ca3af;13    --font-outfit: 'Outfit', sans-serif;14    --font-inter: 'Inter', sans-serif;15}16 17* {18    box-sizing: border-box;19    margin: 0;20    padding: 0;21    font-family: var(--font-inter);22    scrollbar-width: thin;23    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;24}25 26/* Custom Scrollbar */27::-webkit-scrollbar {28    width: 6px;29    height: 6px;30}31::-webkit-scrollbar-track {32    background: transparent;33}34::-webkit-scrollbar-thumb {35    background: rgba(255, 255, 255, 0.1);36    border-radius: 4px;37}38::-webkit-scrollbar-thumb:hover {39    background: rgba(255, 255, 255, 0.2);40}41 42body {43    background-color: var(--bg-color);44    color: var(--text-primary);45    min-height: 100vh;46    display: flex;47    flex-direction: column;48    background-image: 49        radial-gradient(at 0% 0%, rgba(6, 182, 212, 0.1) 0, transparent 40%),50        radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.08) 0, transparent 40%),51        radial-gradient(at 50% 100%, rgba(139, 92, 246, 0.05) 0, transparent 50%);52    background-attachment: fixed;53    overflow-x: hidden;54}55 56/* Header Styling */57header {58    padding: 1.25rem 2rem;59    display: flex;60    justify-content: space-between;61    align-items: center;62    border-bottom: 1px solid var(--border-color);63    background: rgba(3, 7, 18, 0.7);64    backdrop-filter: blur(20px);65    -webkit-backdrop-filter: blur(20px);66    position: sticky;67    top: 0;68    z-index: 100;69}70 71.brand-section {72    display: flex;73    align-items: center;74    gap: 0.75rem;75}76 77.brand-logo {78    width: 38px;79    height: 38px;80    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald));81    border-radius: 10px;82    display: flex;83    align-items: center;84    justify-content: center;85    font-weight: 800;86    color: #030712;87    font-family: var(--font-outfit);88    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);89}90 91h1 {92    font-family: var(--font-outfit);93    font-size: 1.5rem;94    font-weight: 800;95    background: linear-gradient(to right, var(--accent-cyan), #38bdf8);96    -webkit-background-clip: text;97    background-clip: text;98    -webkit-text-fill-color: transparent;99    color: transparent;100    letter-spacing: -0.5px;101}102 103/* Tab Navigation */104.nav-tabs {105    display: flex;106    background: rgba(255, 255, 255, 0.03);107    border: 1px solid var(--border-color);108    padding: 0.25rem;109    border-radius: 0.75rem;110    gap: 0.25rem;111}112 113.tab-btn {114    padding: 0.5rem 1.25rem;115    border: none;116    background: transparent;117    color: var(--text-secondary);118    font-size: 0.9rem;119    font-weight: 600;120    border-radius: 0.5rem;121    cursor: pointer;122    transition: all 0.25s ease;123    display: flex;124    align-items: center;125    gap: 0.5rem;126    width: auto;127}128 129.tab-btn:hover {130    color: var(--text-primary);131    background: rgba(255, 255, 255, 0.02);132}133 134.tab-btn.active {135    background: linear-gradient(135deg, var(--accent-cyan), rgba(6, 182, 212, 0.4));136    color: #030712;137    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);138}139 140/* Kiosk & Live Board Grid Layout */141.container {142    max-width: 1300px;143    margin: 0 auto;144    padding: 2rem;145    width: 100%;146    flex: 1;147}148 149.dashboard-layout {150    display: grid;151    grid-template-columns: 1fr 380px;152    gap: 2rem;153}154 155.glass-panel {156    background: var(--card-bg);157    border: 1px solid var(--border-color);158    border-radius: 1.5rem;159    padding: 2rem;160    backdrop-filter: blur(16px);161    -webkit-backdrop-filter: blur(16px);162    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);163    position: relative;164    overflow: hidden;165}166 167.glass-panel::before {168    content: '';169    position: absolute;170    top: 0; left: 0; right: 0; bottom: 0;171    background: radial-gradient(circle at 50% 0%, var(--primary-glow), transparent 70%);172    pointer-events: none;173}174 175.panel-header {176    display: flex;177    justify-content: space-between;178    align-items: center;179    margin-bottom: 1.5rem;180}181 182h2 {183    font-family: var(--font-outfit);184    font-size: 1.35rem;185    color: var(--text-primary);186    display: flex;187    align-items: center;188    gap: 0.75rem;189    font-weight: 700;190}191 192h2::before {193    content: '';194    display: block;195    width: 6px;196    height: 18px;197    background: linear-gradient(to bottom, var(--accent-cyan), var(--accent-emerald));198    border-radius: 3px;199}200 201/* Department Badge Utilities */202.dept-badge {203    padding: 0.25rem 0.6rem;204    border-radius: 9999px;205    font-size: 0.75rem;206    font-weight: 700;207    text-transform: uppercase;208    letter-spacing: 0.5px;209}210.dept-general { background: rgba(6, 182, 212, 0.12); color: var(--accent-cyan); border: 1px solid rgba(6, 182, 212, 0.2); }211.dept-pediatrics { background: rgba(16, 185, 129, 0.12); color: var(--accent-emerald); border: 1px solid rgba(16, 185, 129, 0.2); }212.dept-cardiology { background: rgba(244, 63, 94, 0.12); color: var(--accent-rose); border: 1px solid rgba(244, 63, 94, 0.2); }213.dept-dental { background: rgba(245, 158, 11, 0.12); color: var(--accent-amber); border: 1px solid rgba(245, 158, 11, 0.2); }214 215.priority-badge {216    background: rgba(245, 158, 11, 0.15);217    color: var(--accent-amber);218    border: 1px solid rgba(245, 158, 11, 0.3);219    padding: 0.25rem 0.6rem;220    border-radius: 9999px;221    font-size: 0.75rem;222    font-weight: 700;223    display: inline-flex;224    align-items: center;225    gap: 0.25rem;226}227 228/* Counters Cards Display */229.counters-grid {230    display: grid;231    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));232    gap: 1.25rem;233}234 235.counter-card {236    background: rgba(255, 255, 255, 0.015);237    border: 1px solid var(--border-color);238    border-radius: 1.25rem;239    padding: 1.5rem;240    text-align: center;241    position: relative;242    overflow: hidden;243    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);244}245 246.counter-card:hover {247    transform: translateY(-2px);248    border-color: rgba(255, 255, 255, 0.1);249}250 251.counter-card.active-serving {252    border-color: var(--accent-cyan);253    box-shadow: 0 0 25px rgba(6, 182, 212, 0.12);254}255 256.counter-card.active-serving::after {257    content: '';258    position: absolute;259    top: 0; left: 0; right: 0;260    height: 4px;261    background: linear-gradient(to right, var(--accent-cyan), var(--accent-emerald));262    box-shadow: 0 1px 10px var(--accent-cyan);263}264 265.counter-header {266    display: flex;267    justify-content: space-between;268    align-items: center;269    margin-bottom: 1rem;270}271 272.counter-name {273    font-size: 0.85rem;274    color: var(--text-secondary);275    text-transform: uppercase;276    font-weight: 700;277    letter-spacing: 1px;278}279 280.counter-status {281    width: 8px;282    height: 8px;283    border-radius: 50%;284    display: inline-block;285}286.counter-status.online { background: var(--accent-emerald); box-shadow: 0 0 8px var(--accent-emerald); }287.counter-status.paused { background: var(--accent-amber); box-shadow: 0 0 8px var(--accent-amber); }288.counter-status.offline { background: var(--accent-rose); }289 290.current-token {291    font-family: var(--font-outfit);292    font-size: 3rem;293    font-weight: 900;294    color: #ffffff;295    text-shadow: 0 0 20px rgba(255, 255, 255, 0.25);296    line-height: 1;297    margin: 0.5rem 0;298}299 300.current-token.pulsing {301    animation: textPulse 1.5s infinite alternate;302}303 304.current-patient {305    font-size: 1rem;306    font-weight: 600;307    color: var(--text-primary);308    white-space: nowrap;309    overflow: hidden;310    text-overflow: ellipsis;311}312 313.empty-state {314    font-size: 0.95rem;315    color: var(--text-secondary);316    font-style: italic;317    padding: 1.5rem 0;318}319 320/* Department Tab Filters on Queue */321.dept-filters {322    display: flex;323    gap: 0.5rem;324    margin-bottom: 1.5rem;325    overflow-x: auto;326    padding-bottom: 0.5rem;327}328 329.filter-chip {330    padding: 0.4rem 0.9rem;331    background: rgba(255, 255, 255, 0.02);332    border: 1px solid var(--border-color);333    border-radius: 9999px;334    font-size: 0.8rem;335    font-weight: 600;336    color: var(--text-secondary);337    cursor: pointer;338    transition: all 0.2s;339    white-space: nowrap;340}341 342.filter-chip:hover {343    background: rgba(255, 255, 255, 0.05);344    color: var(--text-primary);345}346 347.filter-chip.active {348    background: rgba(6, 182, 212, 0.12);349    color: var(--accent-cyan);350    border-color: var(--accent-cyan);351}352 353/* Waiting List Items */354.waiting-list {355    display: flex;356    flex-direction: column;357    gap: 0.75rem;358    max-height: 380px;359    overflow-y: auto;360    padding-right: 0.5rem;361}362 363.waiting-item {364    display: flex;365    justify-content: space-between;366    align-items: center;367    padding: 0.85rem 1.25rem;368    background: rgba(255, 255, 255, 0.01);369    border: 1px solid rgba(255, 255, 255, 0.03);370    border-radius: 1rem;371    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);372}373 374.waiting-item:hover {375    background: rgba(255, 255, 255, 0.03);376    transform: translateX(4px);377    border-color: var(--border-color);378}379 380.waiting-item.priority-item {381    border-left: 3px solid var(--accent-amber);382    background: rgba(245, 158, 11, 0.02);383}384 385.token-info {386    display: flex;387    align-items: center;388    gap: 1rem;389}390 391.token-num {392    font-family: var(--font-outfit);393    font-size: 1.25rem;394    font-weight: 800;395    color: var(--accent-cyan);396    min-width: 80px;397}398 399.patient-name-container {400    display: flex;401    flex-direction: column;402    gap: 0.25rem;403}404 405.patient-name {406    font-size: 0.95rem;407    font-weight: 600;408    color: var(--text-primary);409}410 411.wait-time {412    display: flex;413    flex-direction: column;414    align-items: flex-end;415}416 417.wait-time span:first-child {418    font-size: 0.75rem;419    color: var(--text-secondary);420}421 422.wait-time span:last-child {423    font-weight: 700;424    color: var(--accent-amber);425    font-size: 0.9rem;426}427 428/* Patient Kiosk Section */429.kiosk-section {430    background: rgba(3, 7, 18, 0.4);431}432 433.kiosk-form {434    display: flex;435    flex-direction: column;436    gap: 1.25rem;437}438 439.kiosk-grid {440    display: grid;441    grid-template-columns: repeat(2, 1fr);442    gap: 0.75rem;443}444 445.dept-select-card {446    border: 1px solid var(--border-color);447    background: rgba(255, 255, 255, 0.015);448    border-radius: 0.75rem;449    padding: 0.75rem;450    text-align: center;451    cursor: pointer;452    transition: all 0.2s;453}454 455.dept-select-card:hover {456    background: rgba(255, 255, 255, 0.04);457    border-color: rgba(255, 255, 255, 0.1);458}459 460.dept-select-card.selected {461    border-color: var(--accent-cyan);462    background: rgba(6, 182, 212, 0.08);463}464 465.dept-select-card.selected span {466    color: var(--accent-cyan);467    font-weight: 700;468}469 470.dept-select-card span {471    font-size: 0.8rem;472    font-weight: 600;473    color: var(--text-secondary);474}475 476.checkbox-container {477    display: flex;478    align-items: center;479    gap: 0.5rem;480    cursor: pointer;481    font-size: 0.85rem;482    color: var(--text-secondary);483    user-select: none;484}485 486.checkbox-container input {487    width: auto;488    accent-color: var(--accent-cyan);489}490 491.input-group {492    display: flex;493    flex-direction: column;494    gap: 0.5rem;495}496 497.input-group label {498    font-size: 0.8rem;499    font-weight: 600;500    color: var(--text-secondary);501}502 503input[type="text"] {504    width: 100%;505    padding: 0.8rem 1rem;506    background: rgba(255, 255, 255, 0.03);507    border: 1px solid var(--border-color);508    border-radius: 0.75rem;509    color: white;510    font-size: 0.95rem;511    outline: none;512    transition: all 0.2s;513}514 515input[type="text"]:focus {516    border-color: var(--accent-cyan);517    background: rgba(255, 255, 255, 0.06);518    box-shadow: 0 0 10px rgba(6, 182, 212, 0.15);519}520 521button {522    width: 100%;523    padding: 0.85rem 1.5rem;524    border: none;525    border-radius: 0.75rem;526    font-size: 0.95rem;527    font-weight: 700;528    cursor: pointer;529    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);530    display: flex;531    justify-content: center;532    align-items: center;533    gap: 0.5rem;534}535 536button:hover {537    transform: translateY(-1px);538}539 540button:active {541    transform: translateY(1px);542}543 544button.primary {545    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald));546    color: #030712;547}548 549button.primary:hover {550    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);551}552 553/* Staff Panel Styling */554.staff-layout {555    display: grid;556    grid-template-columns: 1fr 400px;557    gap: 2rem;558}559 560.staff-counters-grid {561    display: grid;562    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));563    gap: 1.5rem;564}565 566.staff-counter-card {567    background: var(--card-bg);568    border: 1px solid var(--border-color);569    border-radius: 1.5rem;570    padding: 1.75rem;571    position: relative;572    display: flex;573    flex-direction: column;574    gap: 1.25rem;575}576 577.staff-counter-card::before {578    content: '';579    position: absolute;580    top: 0; left: 0; right: 0; bottom: 0;581    background: radial-gradient(circle at 100% 0%, var(--primary-glow), transparent 60%);582    pointer-events: none;583}584 585.staff-card-header {586    display: flex;587    justify-content: space-between;588    align-items: center;589}590 591.staff-serving-section {592    background: rgba(255, 255, 255, 0.015);593    border: 1px solid rgba(255, 255, 255, 0.04);594    border-radius: 1rem;595    padding: 1.25rem;596    text-align: center;597}598 599.staff-actions {600    display: grid;601    grid-template-columns: repeat(2, 1fr);602    gap: 0.75rem;603}604 605button.success {606    background: var(--accent-emerald);607    color: #030712;608}609button.success:hover {610    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);611}612 613button.warning {614    background: transparent;615    border: 1px solid var(--accent-amber);616    color: var(--accent-amber);617}618button.warning:hover {619    background: rgba(245, 158, 11, 0.08);620}621 622button.danger {623    background: transparent;624    border: 1px solid var(--accent-rose);625    color: var(--accent-rose);626}627button.danger:hover {628    background: rgba(244, 63, 94, 0.08);629}630 631button.secondary-btn {632    background: rgba(255, 255, 255, 0.05);633    color: white;634    border: 1px solid var(--border-color);635}636button.secondary-btn:hover {637    background: rgba(255, 255, 255, 0.08);638}639 640.supported-list {641    font-size: 0.8rem;642    color: var(--text-secondary);643}644 645/* Analytics Dashboard Layout */646.analytics-metrics {647    display: grid;648    grid-template-columns: repeat(4, 1fr);649    gap: 1.25rem;650    margin-bottom: 2rem;651}652 653.metric-card {654    background: var(--card-bg);655    border: 1px solid var(--border-color);656    border-radius: 1.25rem;657    padding: 1.5rem;658    display: flex;659    align-items: center;660    gap: 1.25rem;661}662 663.metric-icon {664    width: 46px;665    height: 46px;666    border-radius: 12px;667    display: flex;668    align-items: center;669    justify-content: center;670    font-size: 1.5rem;671}672 673.metric-details {674    display: flex;675    flex-direction: column;676}677 678.metric-value {679    font-size: 1.75rem;680    font-weight: 800;681    font-family: var(--font-outfit);682    color: white;683    line-height: 1.2;684}685 686.metric-label {687    font-size: 0.8rem;688    color: var(--text-secondary);689    font-weight: 500;690}691 692.analytics-charts {693    display: grid;694    grid-template-columns: 1fr 1fr;695    gap: 2rem;696    margin-bottom: 2rem;697}698 699/* Zero-Dependency Charts Styling */700.chart-panel {701    display: flex;702    flex-direction: column;703}704 705.bar-chart-container {706    height: 220px;707    display: flex;708    align-items: flex-end;709    justify-content: space-between;710    padding: 1rem 0;711    border-bottom: 1px solid rgba(255, 255, 255, 0.08);712    position: relative;713    gap: 0.5rem;714}715 716.bar-col {717    flex: 1;718    display: flex;719    flex-direction: column;720    align-items: center;721    gap: 0.5rem;722    height: 100%;723    justify-content: flex-end;724}725 726.bar-fill {727    width: 100%;728    background: linear-gradient(to top, rgba(6, 182, 212, 0.1), var(--accent-cyan));729    border-radius: 4px 4px 0 0;730    transition: height 0.5s ease;731    position: relative;732    min-height: 2px;733}734 735.bar-fill:hover {736    background: linear-gradient(to top, rgba(16, 185, 129, 0.1), var(--accent-emerald));737}738 739.bar-tooltip {740    position: absolute;741    top: -24px;742    left: 50%;743    transform: translateX(-50%);744    background: #030712;745    padding: 0.2rem 0.4rem;746    border-radius: 4px;747    font-size: 0.65rem;748    color: white;749    border: 1px solid var(--border-color);750    pointer-events: none;751    opacity: 0;752    transition: opacity 0.2s;753}754 755.bar-fill:hover .bar-tooltip {756    opacity: 1;757}758 759.bar-label {760    font-size: 0.65rem;761    color: var(--text-secondary);762}763 764.pie-chart-list {765    display: flex;766    flex-direction: column;767    gap: 1rem;768    margin-top: 1rem;769}770 771.pie-chart-row {772    display: flex;773    align-items: center;774    justify-content: space-between;775    font-size: 0.85rem;776}777 778.dept-name-wrapper {779    display: flex;780    align-items: center;781    gap: 0.5rem;782}783 784.dept-color-dot {785    width: 10px;786    height: 10px;787    border-radius: 50%;788}789 790.chart-bar-bg {791    flex: 1;792    height: 8px;793    background: rgba(255, 255, 255, 0.04);794    margin: 0 1.5rem;795    border-radius: 4px;796    overflow: hidden;797}798 799.chart-bar-fill {800    height: 100%;801    border-radius: 4px;802    transition: width 0.5s ease;803}804 805/* Animations */806@keyframes textPulse {807    from {808        text-shadow: 0 0 15px rgba(6, 182, 212, 0.3);809    }810    to {811        text-shadow: 0 0 30px rgba(6, 182, 212, 0.7);812    }813}814 815/* Toast announcements / Speech visualizer */816.speech-pulse {817    width: 20px;818    height: 20px;819    background: rgba(6, 182, 212, 0.2);820    border-radius: 50%;821    display: flex;822    align-items: center;823    justify-content: center;824    position: relative;825}826 827.speech-pulse::after {828    content: '';829    width: 100%;830    height: 100%;831    border: 2px solid var(--accent-cyan);832    border-radius: 50%;833    position: absolute;834    animation: wavePulse 1.2s infinite ease-out;835}836 837@keyframes wavePulse {838    0% { transform: scale(1); opacity: 1; }839    100% { transform: scale(2.2); opacity: 0; }840}841 842/* Responsive configurations */843@media (max-width: 1100px) {844    .dashboard-layout, .staff-layout {845        grid-template-columns: 1fr;846    }847    .analytics-metrics {848        grid-template-columns: repeat(2, 1fr);849    }850    .analytics-charts {851        grid-template-columns: 1fr;852    }853}854 855@media (max-width: 600px) {856    header {857        flex-direction: column;858        gap: 1rem;859        padding: 1rem;860    }861    .analytics-metrics {862        grid-template-columns: 1fr;863    }864}865 866