luggage-list/src/styles.js

import { Platform, StyleSheet } from 'react-native';
import { TAB_BAR_HEIGHT } from './constants';

export const styles = StyleSheet.create({
  safe: {
    flex: 1,
    backgroundColor: '#090d12',
  },
  flex: {
    flex: 1,
  },
  content: {
    paddingHorizontal: 14,
    paddingTop: 12,
    paddingBottom: TAB_BAR_HEIGHT + 18,
    gap: 12,
  },
  center: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  muted: {
    color: '#8793a5',
  },

  tripPickerWrap: {
    marginBottom: 6,
  },
  tripChipScroll: {
    gap: 8,
    paddingRight: 12,
  },
  tripChip: {
    paddingHorizontal: 12,
    paddingVertical: 9,
    borderRadius: 12,
    backgroundColor: '#121923',
    borderWidth: 1,
    borderColor: '#1f2937',
    minWidth: 120,
  },
  tripChipActive: {
    backgroundColor: '#1d2a3a',
    borderColor: '#60a5fa',
  },
  tripChipText: {
    color: '#e2e8f0',
    fontWeight: '700',
  },
  tripChipTextActive: {
    color: '#bfdbfe',
  },
  tripChipSub: {
    color: '#64748b',
    fontSize: 12,
    marginTop: 2,
  },
  tripChipSubActive: {
    color: '#93c5fd',
  },

  section: {
    gap: 10,
  },
  sectionTitle: {
    color: '#f1f5f9',
    fontSize: 18,
    fontWeight: '700',
  },
  sectionRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 10,
  },

  card: {
    backgroundColor: '#111827',
    borderRadius: 14,
    borderWidth: 1,
    borderColor: '#1f2937',
    padding: 12,
    gap: 8,
  },
  cardActive: {
    borderColor: '#60a5fa',
  },
  cardSoft: {
    backgroundColor: '#0f172a',
    borderRadius: 14,
    borderWidth: 1,
    borderColor: '#1e293b',
    padding: 12,
    gap: 10,
  },
  cardRow: {
    flexDirection: 'row',
    gap: 10,
  },
  cardTitle: {
    color: '#f8fafc',
    fontWeight: '700',
    fontSize: 15,
  },
  cardMeta: {
    color: '#94a3b8',
    marginTop: 3,
    fontSize: 13,
  },

  fieldWrap: {
    gap: 6,
  },
  label: {
    color: '#cbd5e1',
    fontWeight: '600',
  },
  input: {
    borderWidth: 1,
    borderColor: '#243244',
    borderRadius: 10,
    backgroundColor: '#0b1220',
    color: '#e5e7eb',
    paddingHorizontal: 10,
    paddingVertical: 11,
  },

  chipGroup: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 7,
  },
  chip: {
    borderRadius: 999,
    paddingHorizontal: 11,
    paddingVertical: 7,
    borderWidth: 1,
    borderColor: '#273449',
    backgroundColor: '#0b1220',
  },
  chipActive: {
    borderColor: '#60a5fa',
    backgroundColor: '#172338',
  },
  chipText: {
    color: '#cbd5e1',
    fontWeight: '600',
    fontSize: 12,
  },
  chipTextActive: {
    color: '#bfdbfe',
  },

  primaryBtn: {
    marginTop: 4,
    borderRadius: 10,
    backgroundColor: '#2563eb',
    alignItems: 'center',
    paddingVertical: 11,
    paddingHorizontal: 12,
  },
  primaryBtnTight: {
    borderRadius: 10,
    backgroundColor: '#2563eb',
    alignItems: 'center',
    paddingVertical: 8,
    paddingHorizontal: 12,
  },
  primaryBtnText: {
    color: '#fff',
    fontWeight: '700',
  },
  secondaryBtn: {
    marginTop: 4,
    borderRadius: 10,
    backgroundColor: '#1f2937',
    alignItems: 'center',
    paddingVertical: 11,
    paddingHorizontal: 12,
  },
  secondaryBtnTight: {
    borderRadius: 10,
    backgroundColor: '#1f2937',
    alignItems: 'center',
    paddingVertical: 8,
    paddingHorizontal: 12,
  },
  secondaryBtnText: {
    color: '#dbeafe',
    fontWeight: '700',
  },

  inlineToggle: {
    marginTop: 2,
  },
  inlineToggleText: {
    color: '#cbd5e1',
  },

  stackButtons: {
    gap: 7,
  },
  miniBtn: {
    backgroundColor: '#1e293b',
    borderRadius: 8,
    paddingVertical: 7,
    paddingHorizontal: 10,
  },
  miniBtnDanger: {
    backgroundColor: '#3b1d22',
    borderRadius: 8,
    paddingVertical: 7,
    paddingHorizontal: 10,
  },
  miniBtnText: {
    color: '#e2e8f0',
    fontWeight: '700',
    fontSize: 12,
  },

  itemCard: {
    borderRadius: 14,
    backgroundColor: '#111827',
    borderWidth: 1,
    borderColor: '#1f2937',
    overflow: 'hidden',
    flexDirection: 'row',
  },
  itemAccent: {
    width: 5,
  },
  itemMain: {
    flex: 1,
    padding: 12,
    gap: 8,
  },
  itemTitle: {
    color: '#f8fafc',
    fontWeight: '700',
    fontSize: 15,
  },
  itemMeta: {
    color: '#94a3b8',
    marginTop: 2,
    fontSize: 13,
  },

  answerRow: {
    marginTop: 8,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  answerYes: {
    backgroundColor: '#163223',
    borderWidth: 1,
    borderColor: '#1f7a4e',
    borderRadius: 9,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  answerNo: {
    backgroundColor: '#3b1d22',
    borderWidth: 1,
    borderColor: '#7f1d1d',
    borderRadius: 9,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  answerText: {
    color: '#f8fafc',
    fontWeight: '700',
  },
  answerStateDot: {
    width: 10,
    height: 10,
    borderRadius: 99,
    backgroundColor: '#475569',
  },
  answerStateDotOn: {
    backgroundColor: '#22c55e',
  },

  snapshotWrap: {
    marginTop: 8,
    borderTopWidth: 1,
    borderTopColor: '#1e293b',
    paddingTop: 8,
    gap: 7,
  },
  snapshotRow: {
    paddingVertical: 3,
  },
  snapshotTitle: {
    color: '#e2e8f0',
    fontWeight: '600',
  },

  previewImage: {
    width: '100%',
    height: 150,
    borderRadius: 10,
    backgroundColor: '#111827',
  },
  previewImageSmall: {
    width: '100%',
    height: 120,
    borderRadius: 10,
    backgroundColor: '#111827',
  },

  tabBarWrap: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    paddingHorizontal: 10,
    paddingBottom: Platform.OS === 'ios' ? 14 : 8,
    backgroundColor: 'transparent',
  },
  tabBar: {
    height: TAB_BAR_HEIGHT,
    borderRadius: 16,
    backgroundColor: '#0b1220',
    borderWidth: 1,
    borderColor: '#1f2937',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  tabItem: {
    alignItems: 'center',
    gap: 4,
  },
  tabDot: {
    width: 6,
    height: 6,
    borderRadius: 99,
    backgroundColor: '#334155',
  },
  tabDotActive: {
    backgroundColor: '#60a5fa',
  },
  tabLabel: {
    color: '#94a3b8',
    fontSize: 12,
    fontWeight: '600',
  },
  tabLabelActive: {
    color: '#dbeafe',
  },

  modalBackdrop: {
    flex: 1,
    backgroundColor: 'rgba(2,6,23,0.72)',
    justifyContent: 'flex-end',
  },
  modalKeyboardWrap: {
    width: '100%',
  },
  modalCard: {
    maxHeight: '87%',
    backgroundColor: '#0f172a',
    borderTopLeftRadius: 18,
    borderTopRightRadius: 18,
    borderWidth: 1,
    borderColor: '#1e293b',
    padding: 14,
    gap: 8,
  },
  closeText: {
    color: '#93c5fd',
    fontWeight: '700',
  },
});